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

        :root {
            --bg-dark: #0a0f1a;
            --bg-card: #111827;
            --bg-card-hover: #1a2332;
            --accent: #22d3ee;
            --accent-dim: rgba(34, 211, 238, 0.15);
            --accent-glow: rgba(34, 211, 238, 0.3);
            --green: #34d399;
            --red: #f87171;
            --amber: #fbbf24;
            --text: #f1f5f9;
            --text-muted: #94a3b8;
            --border: rgba(148, 163, 184, 0.1);
            --border-accent: rgba(34, 211, 238, 0.3);
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg-dark);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }

        /* Subtle noise overlay removed — caused rendering glitch on iOS Safari */

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
        }

        /* ─── Nav ─────────────────────── */
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0 20px;
            position: sticky;
            top: 56px;
            z-index: 90;
            background: var(--bg-dark);
            border-bottom: 1px solid var(--border);
            margin-bottom: 8px;
        }
        @media (max-width: 640px) {
            nav #navLinks { display: none !important; }
            nav { padding: 10px 0 14px; }
        }
        .logo {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        .logo-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .nav-badge {
            font-size: 0.7rem;
            background: var(--accent-dim);
            color: var(--accent);
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* ─── Hero ─────────────────────── */
        .hero {
            text-align: center;
            padding: 80px 0 60px;
        }
        .hero-badge {
            display: inline-block;
            font-size: 0.8rem;
            background: var(--accent-dim);
            color: var(--accent);
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            border: 1px solid var(--border-accent);
        }
        .hero h1 {
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero p {
            font-size: 1.15rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto 32px;
        }

        /* ─── Hero Trust Row ─────────── */
        .hero-trust-row {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 6px 10px;
            margin-top: 20px;
        }
        .hero-trust-item {
            font-size: 0.78rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .hero-trust-dot {
            color: var(--border);
            font-size: 0.78rem;
        }

        /* ─── $1.49 Report CTA ────────── */
        .price-highlight {
            color: #FF6B35;
            -webkit-text-fill-color: #FF6B35;
            background: none;
            -webkit-background-clip: initial;
            background-clip: initial;
        }
        .btn-report-cta {
            display: inline-block;
            background: linear-gradient(135deg, #FF6B35, #e85d2a);
            color: #fff;
            border: none;
            padding: 18px 40px;
            border-radius: 14px;
            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            box-shadow: 0 4px 24px rgba(255,107,53,0.45);
            letter-spacing: 0.01em;
            white-space: nowrap;
        }
        .btn-report-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 36px rgba(255,107,53,0.55);
        }
        .report-cta-row {
            margin: 0 auto 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        .report-price-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
        }
        .report-price-badge .price-big {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 3.2rem;
            font-weight: 800;
            color: #FF6B35;
            line-height: 1;
        }
        .report-price-badge .price-label {
            font-size: 0.9rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .report-includes-chips {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 520px;
        }
        .report-chip {
            background: rgba(255,107,53,0.1);
            border: 1px solid rgba(255,107,53,0.25);
            color: #FF8055;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 600;
        }
        .form-section-label {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.88rem;
            margin-bottom: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .form-section-label::before,
        .form-section-label::after {
            content: '';
            flex: 1;
            max-width: 80px;
            height: 1px;
            background: var(--border);
        }
        /* ─── Report Includes Grid ──── */
        .report-includes-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 20px;
            text-align: left;
        }
        .report-include-item {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 18px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: border-color 0.2s;
        }
        .report-include-item:hover { border-color: rgba(255,107,53,0.35); }
        .report-include-item.premium { border-color: rgba(255,107,53,0.2); background: rgba(255,107,53,0.04); }
        .report-include-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 1px; }
        .report-include-title {
            font-weight: 700;
            font-size: 0.92rem;
            margin-bottom: 4px;
            font-family: 'Space Grotesk', sans-serif;
        }
        .report-include-desc {
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.5;
        }
        .report-unlock-row {
            text-align: center;
            margin-top: 24px;
            padding-top: 22px;
            border-top: 1px solid var(--border);
        }
        .report-unlock-label {
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-bottom: 6px;
        }
        .report-unlock-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2.4rem;
            font-weight: 800;
            color: #FF6B35;
            line-height: 1;
            margin-bottom: 4px;
        }
        .report-unlock-sub {
            color: var(--text-muted);
            font-size: 0.82rem;
            margin-bottom: 16px;
        }
        @media (max-width: 600px) {
            .report-includes-grid { grid-template-columns: 1fr; }
            .btn-report-cta { font-size: 1.05rem; padding: 16px 30px; }
            .report-price-badge .price-big { font-size: 2.6rem; }
        }

        /* ─── Input Form ──────────────── */
        .form-section {
            max-width: 700px;
            margin: 0 auto;
        }
        .url-form {
            display: flex;
            gap: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 6px;
            transition: border-color 0.3s;
        }
        .url-form:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-dim);
        }
        .url-form input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 1rem;
            padding: 14px 18px;
            outline: none;
            font-family: 'DM Sans', sans-serif;
        }
        .url-form input::placeholder { color: var(--text-muted); }
        .btn-primary {
            background: #FF6B35;
            color: #ffffff;
            border: none;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            box-shadow: 0 4px 16px rgba(255,107,53,0.3);
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,53,0.5); }
        .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

        /* ─── Input Method Tabs ───────── */
        .input-tabs {
            display: flex;
            gap: 4px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 16px;
        }
        .input-tab {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.88rem;
            font-weight: 600;
            padding: 10px 8px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.18s;
        }
        .more-options-btn {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--accent);
            font-size: 0.88rem;
            font-weight: 600;
            padding: 10px 8px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.18s;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .more-options-btn:hover {
            background: var(--accent-dim);
        }
        .hidden-tabs-row {
            display: none;
            margin-bottom: 16px;
            padding: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            gap: 4px;
        }
        .hidden-tabs-row.visible {
            display: flex !important;
        }
        .mobile-hidden-desktop {
            display: none;
        }
        .input-tab.active {
            background: var(--bg-dark);
            color: var(--text);
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
        }
        .input-tab:hover:not(.active) { color: var(--text); }
        .input-panel { display: none; }
        .input-panel.active { display: block; }
        /* Screenshot upload trigger area */
        .screenshot-upload-trigger {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 32px 20px;
            background: var(--bg-card);
            border: 1.5px dashed var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            text-align: center;
        }
        .screenshot-upload-trigger:hover {
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        .screenshot-upload-trigger .upload-icon { font-size: 2rem; }
        .screenshot-upload-trigger p { color: var(--text-muted); font-size: 0.9rem; }
        .screenshot-upload-trigger span { color: var(--accent); font-weight: 600; }

        /* ─── Screenshot Panel ─────────── */
        .screenshot-panel {
            display: none;
            margin-top: 24px;
            padding: 22px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .screenshot-panel.active { display: block; }
        .screenshot-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(99,102,241,0.2);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .screenshot-confirm-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 16px;
        }
        .screenshot-confirm-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: rgba(34,197,94,0.15);
            color: #22c55e;
            border-radius: 50%;
            font-size: 0.8rem;
            font-weight: 700;
            flex-shrink: 0;
        }
        .screenshot-fields {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }
        .screenshot-field {
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 12px;
        }
        .screenshot-field-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-muted);
            margin-bottom: 3px;
        }
        .screenshot-field-value {
            font-size: 0.97rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .screenshot-field-value.missing {
            color: var(--text-muted);
            font-weight: 400;
            font-style: italic;
        }
        .screenshot-notes {
            background: rgba(99,102,241,0.07);
            border: 1px solid rgba(99,102,241,0.2);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 14px;
            line-height: 1.5;
        }
        .screenshot-confirm-actions {
            display: flex;
            gap: 10px;
        }
        .screenshot-partial-msg {
            background: rgba(251,191,36,0.1);
            border: 1px solid rgba(251,191,36,0.25);
            border-radius: 10px;
            padding: 14px 16px;
            color: #fbbf24;
            font-size: 0.9rem;
            line-height: 1.5;
            text-align: center;
        }

        /* ─── VIN Decode Form ─────────── */
        .vin-decode-form {
            display: none;
            margin-top: 24px;
            padding: 20px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .vin-decode-form.active { display: block; }

        .vin-input-row {
            display: flex;
            gap: 8px;
        }
        .vin-input-row input {
            flex: 1;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            color: var(--text);
            font-size: 1rem;
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .vin-input-row input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-dim);
        }
        .vin-input-row input::placeholder {
            letter-spacing: 0;
            font-size: 0.85rem;
        }
        .vin-input-row .btn-primary {
            white-space: nowrap;
            padding: 10px 20px;
        }
        .vin-hint {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 8px;
        }
        .vin-loading {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }
        .vin-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: vin-spin 0.7s linear infinite;
            flex-shrink: 0;
        }
        @keyframes vin-spin { to { transform: rotate(360deg); } }
        .vin-error {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.25);
            border-radius: 8px;
            color: var(--red);
            font-size: 0.85rem;
        }
        .vin-decoded-info {
            margin-top: 14px;
            padding: 14px 16px;
            background: rgba(34, 211, 238, 0.06);
            border: 1px solid var(--border-accent);
            border-radius: 8px;
        }
        .vin-decoded-badge {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
        }
        .vin-decoded-vehicle {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text);
        }
        .vin-decoded-specs {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 3px;
        }
        .vin-decoded-hint {
            font-size: 0.78rem;
            color: var(--accent);
            margin-top: 8px;
            font-weight: 500;
        }

        /* ─── Manual Form ─────────────── */
        .manual-form {
            display: none;
            margin-top: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px;
        }
        .manual-form.active { display: block; }
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
        }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group.full-width { grid-column: 1 / -1; }
        .form-group label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .form-group input, .form-group select {
            background: var(--bg-dark);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 0.95rem;
            font-family: 'DM Sans', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }
        .form-group input:focus, .form-group select:focus {
            border-color: var(--accent);
        }
        .form-group input::placeholder { color: #4b5563; }

        /* ─── Sample Report Preview ─── */
        #sampleReportSection { padding: 0 0 52px; }
        .sample-report-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            background: rgba(148, 163, 184, 0.07);
            border: 1px solid rgba(148, 163, 184, 0.15);
            padding: 6px 14px;
            border-radius: 20px;
            margin-bottom: 18px;
        }
        .sample-report-card {
            max-width: 700px;
            margin: 0 auto;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 28px 28px 24px;
            position: relative;
            overflow: hidden;
        }
        .sample-report-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--green);
            border-radius: 20px 20px 0 0;
        }
        .sample-watermark {
            position: absolute;
            top: 14px;
            right: 16px;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: var(--text-muted);
            background: rgba(148, 163, 184, 0.1);
            border: 1px solid rgba(148, 163, 184, 0.15);
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'Space Grotesk', sans-serif;
        }
        .sample-report-top {
            display: flex;
            align-items: center;
            gap: 22px;
            margin-bottom: 20px;
        }
        .sample-gauge-wrap {
            flex-shrink: 0;
            width: 110px;
            height: 110px;
            position: relative;
        }
        .sample-gauge-wrap svg {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
        }
        .sample-gauge-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 10; }
        .sample-gauge-fill {
            fill: none;
            stroke: var(--green);
            stroke-width: 10;
            stroke-linecap: round;
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
        }
        .sample-gauge-fill.animated { stroke-dashoffset: 79; }
        .sample-score-number {
            position: absolute;
            top: 43%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--green);
            line-height: 1;
        }
        .sample-score-sublabel {
            position: absolute;
            top: 64%; left: 50%;
            transform: translateX(-50%);
            font-size: 0.58rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            white-space: nowrap;
        }
        .sample-report-meta { flex: 1; min-width: 0; }
        .sample-verdict-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.88rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            background: rgba(52, 211, 153, 0.15);
            color: var(--green);
            margin-bottom: 8px;
        }
        .sample-vehicle-name {
            font-size: 1.15rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            margin-bottom: 3px;
        }
        .sample-vehicle-detail { color: var(--text-muted); font-size: 0.87rem; margin-bottom: 10px; }
        .sample-price-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .sample-price-asking { font-size: 1.05rem; font-weight: 700; color: var(--text); }
        .sample-price-vs { font-size: 0.8rem; color: var(--text-muted); }
        .sample-price-market { font-size: 0.88rem; color: var(--text-muted); text-decoration: line-through; }
        .sample-price-savings {
            font-size: 0.82rem; font-weight: 700; color: var(--green);
            background: rgba(52, 211, 153, 0.1);
            padding: 2px 8px; border-radius: 8px;
        }
        .sample-factors {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 14px;
        }
        .sample-factor {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 11px;
            background: var(--bg-dark);
            border-radius: 8px;
            font-size: 0.83rem;
            color: var(--text-muted);
        }
        .sample-factor-icon { font-size: 0.85rem; flex-shrink: 0; }
        .sample-factor.positive { border-left: 2px solid var(--green); }
        .sample-factor.caution { border-left: 2px solid var(--amber); }
        .sample-report-footer {
            margin-top: 18px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .sample-report-cta-text { font-size: 0.85rem; color: var(--text-muted); }
        .sample-report-cta-text strong { color: var(--text); }
        .sample-cta-arrow {
            font-size: 0.83rem; font-weight: 700; color: var(--accent);
            display: flex; align-items: center; gap: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.2s;
        }
        .sample-cta-arrow:hover { opacity: 0.75; }
        @media (max-width: 600px) {
            .sample-report-card { padding: 22px 16px 18px; }
            .sample-report-top { gap: 14px; }
            .sample-gauge-wrap { width: 90px; height: 90px; }
            .sample-score-number { font-size: 1.65rem; }
            .sample-vehicle-name { font-size: 1rem; }
            .sample-factors { grid-template-columns: 1fr; }
            .sample-report-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
        }

        /* ─── Input Alt Links (replaces tab bar) ─── */
        .input-alt-links {
            text-align: center;
            margin-top: 14px;
            margin-bottom: 4px;
            font-size: 0.88rem;
            line-height: 1.8;
        }
        .input-alt-links .alt-sep {
            color: var(--text-muted);
            margin: 0 2px;
        }
        .input-alt-links .alt-link {
            color: var(--accent);
            cursor: pointer;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.15s;
            border-bottom: 1px dotted rgba(34, 211, 238, 0.3);
            padding-bottom: 1px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            display: inline-block;
            /* Reset button defaults (elements are now <button> not <a>) */
            background: none;
            border-top: none;
            border-left: none;
            border-right: none;
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
            font-family: 'DM Sans', sans-serif;
            font-size: inherit;
            line-height: inherit;
            outline: none;
        }
        .input-alt-links .alt-link:hover { opacity: 0.75; }
        .input-alt-links .alt-link.active {
            color: var(--text);
            border-bottom-color: transparent;
            font-weight: 600;
            cursor: default;
        }

        /* ─── Sample Report Collapse ─── */
        .sample-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(148, 163, 184, 0.07);
            border: 1px solid rgba(148, 163, 184, 0.18);
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 600;
            font-family: 'DM Sans', sans-serif;
            padding: 12px 24px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 20px;
        }
        .sample-toggle-btn:hover {
            background: rgba(148, 163, 184, 0.12);
            border-color: rgba(148, 163, 184, 0.3);
            color: var(--text);
        }
        .sample-toggle-btn .toggle-arrow {
            transition: transform 0.3s;
        }
        .sample-toggle-btn.expanded .toggle-arrow {
            transform: rotate(180deg);
        }
        .sample-report-collapsible {
            display: none;
            animation: sampleSlideDown 0.35s ease-out;
        }
        .sample-report-collapsible.visible {
            display: block;
        }
        @keyframes sampleSlideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ─── Loading State — Progress Stepper ─── */
        .loading-section {
            display: none;
            text-align: center;
            padding: 60px 20px;
        }
        .loading-section.active { display: block; }
        .loading-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 36px;
            font-family: 'Space Grotesk', sans-serif;
        }
        .score-stepper {
            display: flex;
            flex-direction: column;
            max-width: 300px;
            margin: 0 auto;
        }
        .stepper-step {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 0;
            position: relative;
        }
        .stepper-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 15px;
            top: 42px;
            width: 2px;
            height: calc(100% - 16px);
            background: var(--border);
            transition: background 0.4s;
        }
        .stepper-step.done:not(:last-child)::after { background: #22c55e; }
        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
            background: var(--bg-card);
            transition: border-color 0.3s, background 0.3s;
            position: relative;
            z-index: 1;
        }
        .stepper-step.active .step-icon {
            border-color: #FF6B35;
            background: rgba(255,107,53,0.12);
        }
        .stepper-step.done .step-icon {
            border-color: #22c55e;
            background: rgba(34,197,94,0.12);
        }
        .step-spinner {
            width: 14px; height: 14px;
            border: 2px solid rgba(255,107,53,0.25);
            border-top-color: #FF6B35;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            display: block;
        }
        .step-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--border);
            display: block;
        }
        .step-check {
            color: #22c55e;
            font-size: 1rem;
            line-height: 1;
            font-weight: 700;
            display: block;
            animation: checkPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
        }
        @keyframes checkPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .step-label {
            font-size: 0.95rem;
            color: var(--text-muted);
            font-family: 'DM Sans', sans-serif;
            transition: color 0.3s;
            text-align: left;
        }
        .stepper-step.active .step-label { color: var(--text-primary); font-weight: 600; }
        .stepper-step.done .step-label { color: #22c55e; }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

        /* ─── Legacy spinner (damage loading card) ─── */
        .loader { width: 60px; height: 60px; position: relative; }
        .loader-ring {
            position: absolute; width: 100%; height: 100%;
            border: 3px solid var(--border); border-top-color: var(--accent);
            border-radius: 50%; animation: spin 1s linear infinite;
        }
        .loader-ring:nth-child(2) {
            width: 44px; height: 44px; top: 8px; left: 8px;
            border-top-color: var(--green); animation-duration: 0.8s; animation-direction: reverse;
        }

        /* ─── Results Section ─────────── */
        .results-section {
            display: none;
            padding: 40px 0 60px;
        }
        .results-section.active { display: block; }
        .results-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .results-header h2 {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }

        /* Score Card */
        .score-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .score-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: 20px 20px 0 0;
        }
        .score-card.score-great::before { background: var(--accent); }
        .score-card.score-good::before { background: var(--green); }
        .score-card.score-fair::before { background: var(--amber); }
        .score-card.score-bad::before { background: var(--red); }

        /* ─── Result Page Redesign ─── */
        .score-card { display: flex; align-items: center; gap: 28px; padding: 24px 28px; text-align: left; }
        .score-dial-wrap { flex-shrink: 0; }
        .score-dial {
            width: 140px; height: 140px; border-radius: 50%;
            position: relative; display: flex; align-items: center; justify-content: center;
            transition: background 0.8s ease, box-shadow 0.8s ease;
        }
        .score-dial::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--bg-card); }
        .score-dial-inner { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
        .score-card .score-number { position: static; transform: none; font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; font-weight: 800; line-height: 1; display: block; }
        .score-card .score-label { position: static; transform: none; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; display: block; margin-top: 2px; }
        .score-card-body { flex: 1; min-width: 0; }
        .score-card-body .verdict-badge { margin-bottom: 8px; }
        .score-card-body .score-summary { margin: 0 0 10px; padding: 0; background: none; font-size: 0.9rem; max-width: none; margin-left: 0; margin-right: 0; line-height: 1.5; }
        .price-anchor { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
        .result-back-row { margin-bottom: 18px; }
        .btn-back-link { background: none; border: none; color: var(--text-muted); font-size: 0.88rem; cursor: pointer; padding: 0; font-family: inherit; }
        .btn-back-link:hover { color: var(--text); }
        .vehicle-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
        .vh-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
        .vh-specs { font-size: 0.85rem; color: var(--text-muted); }
        .vh-actions { display: flex; gap: 8px; flex-shrink: 0; }
        .vh-action-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; }
        .vh-action-btn:hover { border-color: var(--accent); color: var(--accent); }
        .factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
        .factor-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
        .chip-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
        .chip-check { background: rgba(52,211,153,0.15); color: #34d399; }
        .chip-warn { background: rgba(248,113,113,0.15); color: #f87171; }
        .factor-chip-headline { font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 3px; }
        .factor-chip-reason { font-size: 0.77rem; color: var(--text-muted); line-height: 1.4; }
        .comps-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .comps-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
        .comp-row-current td { background: rgba(251,146,60,0.07); }
        .comp-row-current .comp-price { color: #fb923c !important; }
        .unlock-card { background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(6,182,212,0.05)); border: 1px solid rgba(34,211,238,0.25); border-radius: 18px; padding: 28px 28px 24px; margin-bottom: 12px; }
        .unlock-card-headline { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
        .unlock-card-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
        /* ─── Bundle Card ────────── */
        .bundle-card { background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(251,191,36,0.05)); border: 1px solid rgba(255,107,53,0.28); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; display:flex; align-items:center; gap:14px; }
        .bundle-card-text { flex:1; }
        .bundle-card-label { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #FF6B35; margin-bottom: 3px; }
        .bundle-card-headline { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 700; color: #f1f5f9; }
        .bundle-card-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }
        .btn-bundle { background: linear-gradient(135deg, #FF6B35, #e85d2a); color: #fff; border: none; padding: 10px 18px; border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.88rem; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; }
        .btn-bundle:hover { opacity: 0.9; }
        .btn-bundle:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-unlock-main { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--bg-dark); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 13px 22px; border-radius: 10px; border: none; cursor: pointer; transition: opacity 0.2s; }
        .btn-unlock-main:hover { opacity: 0.88; }
        .btn-unlock-main:disabled { opacity: 0.55; cursor: not-allowed; }
        .unlock-price-tag { font-size: 0.7rem; font-weight: 600; background: rgba(0,0,0,0.18); padding: 3px 8px; border-radius: 6px; letter-spacing: 0.4px; white-space: nowrap; }
        .promo-toggle-link { display: inline-block; margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; cursor: pointer; opacity: 0.75; transition: opacity 0.15s; }
        .promo-toggle-link:hover { opacity: 1; text-decoration: underline; }
        .promo-input-row { display: none; margin-top: 12px; align-items: center; gap: 8px; }
        .promo-input-row.visible { display: flex; }
        .promo-input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
        .promo-input::placeholder { color: var(--text-muted); opacity: 0.6; }
        .promo-input:focus { border-color: rgba(34,211,238,0.5); }
        .btn-promo-apply { background: rgba(255,255,255,0.1); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; white-space: nowrap; }
        .btn-promo-apply:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); }
        .btn-promo-apply:disabled { opacity: 0.5; cursor: not-allowed; }
        .promo-feedback { margin-top: 8px; font-size: 0.78rem; display: none; }
        .promo-feedback.visible { display: block; }
        .promo-feedback.error { color: #f87171; }
        .promo-feedback.success { color: #4ade80; }
        .teaser-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
        .teaser-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; cursor: pointer; transition: border-color 0.15s; }
        .teaser-row:hover { border-color: rgba(34,211,238,0.28); }
        .teaser-row-name { font-size: 0.86rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
        .teaser-row-fact { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
        .teaser-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
        .teaser-row-label { font-size: 0.68rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
        .teaser-row-arrow { font-size: 0.8rem; color: var(--text-muted); }
        .pro-quiet-line { text-align: center; font-size: 0.83rem; color: var(--text-muted); padding: 10px 0 8px; line-height: 1.6; margin-bottom: 20px; }
        .pro-quiet-line a { color: var(--accent); text-decoration: none; }
        .pro-quiet-line a:hover { text-decoration: underline; }
        .result-footer { text-align: center; font-size: 0.78rem; color: var(--text-muted); padding: 16px 0 40px; border-top: 1px solid var(--border); margin-top: 4px; }
        .result-footer a { color: var(--text-muted); text-decoration: none; }
        .result-footer a:hover { color: var(--accent); }
        @media (max-width: 600px) {
            .score-card { flex-direction: column; text-align: center; align-items: center; gap: 16px; padding: 20px; }
            .score-dial { width: 120px; height: 120px; }
            .score-card .score-number { font-size: 2.4rem; }
            .factor-grid { grid-template-columns: 1fr; }
            .vehicle-header { flex-wrap: wrap; }
        }

        .score-gauge {
            width: 220px;
            height: 220px;
            margin: 0 auto 24px;
            position: relative;
            filter: drop-shadow(0 0 18px rgba(255,255,255,0.07));
        }
        .score-gauge svg {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
        }
        .score-gauge-bg {
            fill: none;
            stroke: rgba(255,255,255,0.06);
            stroke-width: 10;
        }
        .score-gauge-fill {
            fill: none;
            stroke-width: 10;
            stroke-linecap: round;
            transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .score-number {
            position: absolute;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 4rem;
            font-weight: 800;
            line-height: 1;
        }
        .score-label {
            position: absolute;
            top: 64%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            white-space: nowrap;
        }
        .verdict-badge {
            display: inline-block;
            padding: 8px 24px;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            margin-bottom: 16px;
        }
        .verdict-steal, .verdict-great { background: var(--accent-dim); color: var(--accent); }
        .verdict-good { background: rgba(52, 211, 153, 0.15); color: var(--green); }
        .verdict-fair { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
        .verdict-bad { background: rgba(248, 113, 113, 0.15); color: var(--red); }

        .vehicle-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .vehicle-detail {
            color: var(--text-muted);
            font-size: 0.95rem;
        }
        .score-summary {
            margin-top: 20px;
            padding: 16px 20px;
            background: var(--bg-dark);
            border-radius: 12px;
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.7;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Market Analysis */
        .analysis-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        .analysis-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
        }
        .analysis-card h3 {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        /* Price bar */
        .price-bar-container { margin-bottom: 20px; }
        .price-bar-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .price-bar {
            height: 12px;
            background: var(--bg-dark);
            border-radius: 6px;
            position: relative;
            overflow: visible;
        }
        .price-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 1s ease-out;
        }
        .price-marker {
            position: absolute;
            top: -6px;
            width: 3px;
            height: 24px;
            background: var(--text);
            border-radius: 2px;
            transition: left 1s ease-out;
        }
        .price-marker-label {
            position: absolute;
            top: -24px;
            transform: translateX(-50%);
            font-size: 0.7rem;
            color: var(--text);
            white-space: nowrap;
            font-weight: 600;
        }
        .price-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .price-stat:last-child { border-bottom: none; }
        .price-stat-label { color: var(--text-muted); font-size: 0.9rem; }
        .price-stat-value { font-weight: 700; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
        .price-positive { color: var(--red); }
        .price-negative { color: var(--green); }

        /* Factors */
        .factor-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.9rem;
        }
        .factor-item:last-child { border-bottom: none; }
        .factor-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 0.7rem;
            margin-top: 2px;
        }
        .factor-icon.info { background: var(--accent-dim); color: var(--accent); }
        .factor-icon.warn { background: rgba(248, 113, 113, 0.15); color: var(--red); }

        /* Comparables */
        /* data source badge */
        .data-source-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            padding: 3px 9px;
            border-radius: 20px;
            vertical-align: middle;
            margin-left: 10px;
        }
        .data-source-badge.real {
            background: rgba(52, 211, 153, 0.12);
            color: var(--green);
            border: 1px solid rgba(52, 211, 153, 0.25);
        }
        .data-source-badge.ai-only {
            background: rgba(148, 163, 184, 0.1);
            color: var(--text-muted);
            border: 1px solid rgba(148, 163, 184, 0.15);
        }

        .comparables-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            overflow-x: auto;
        }
        .comparables-card h3 {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .comp-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .comp-table th {
            text-align: left;
            padding: 10px 12px;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
            font-weight: 600;
        }
        .comp-table td {
            padding: 12px 12px;
            border-bottom: 1px solid var(--border);
        }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-table .comp-price { font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
        .comp-source {
            font-size: 0.75rem;
            color: var(--text-muted);
            background: var(--bg-dark);
            padding: 3px 8px;
            border-radius: 6px;
        }

        /* Negotiation Tips */
        .tips-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 24px;
        }
        .tip-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }
        .tip-number {
            width: 32px;
            height: 32px;
            background: var(--accent-dim);
            color: var(--accent);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            flex-shrink: 0;
        }
        .tip-content { flex: 1; }
        .tip-text { font-size: 0.95rem; margin-bottom: 4px; }
        .tip-savings {
            font-size: 0.8rem;
            color: var(--green);
            font-weight: 600;
        }

        /* New analysis button */
        .new-analysis {
            text-align: center;
            padding: 20px 0 40px;
        }
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: var(--accent-dim);
        }
        .btn-pdf-download {
            background: linear-gradient(135deg, #0891b2, #22d3ee);
            border: none;
            color: #0a0f1a;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        .btn-pdf-download:hover {
            opacity: 0.88;
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(34,211,238,0.3);
        }
        .btn-pdf-download:active {
            transform: translateY(0);
        }
        .btn-pdf-download:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* ─── How It Works ────────────── */
        .section { padding: 80px 0; }
        .section-title {
            text-align: center;
            font-size: 1.8rem;
            margin-bottom: 12px;
        }
        .section-subtitle {
            text-align: center;
            color: var(--text-muted);
            margin-bottom: 50px;
            font-size: 1.05rem;
        }
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .step-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px 24px;
            text-align: center;
            transition: border-color 0.3s, transform 0.3s;
        }
        .step-card:hover { border-color: var(--border-accent); transform: translateY(-4px); }
        .step-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 18px;
            background: var(--accent-dim);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }
        .step-num {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 10px;
        }
        .step-card h3 {
            font-size: 1.15rem;
            margin-bottom: 8px;
        }
        .step-card p {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* ─── Features ────────────────── */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px;
            transition: border-color 0.3s;
        }
        .feature-card:hover { border-color: var(--border-accent); }
        .feature-icon { font-size: 1.8rem; margin-bottom: 14px; }
        .feature-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
        .feature-card p { color: var(--text-muted); font-size: 0.9rem; }

        /* ─── CTA ─────────────────────── */
        .cta-section {
            text-align: center;
            padding: 80px 0;
        }
        .cta-section h2 {
            font-size: 2rem;
            margin-bottom: 12px;
        }
        .cta-section p {
            color: var(--text-muted);
            margin-bottom: 28px;
            font-size: 1.05rem;
        }
        .btn-cta {
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            color: #0a0f1a;
            border: none;
            padding: 16px 40px;
            border-radius: 14px;
            font-size: 1.1rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--accent-glow); }

        /* ─── Footer ──────────────────── */
        /* footer shown by default */
        .site-footer{border-top:1px solid rgba(255,255,255,0.08);padding:60px 0 32px;margin-top:60px;}
        .site-footer-inner{max-width:1000px;margin:0 auto;padding:0 24px;}
        .site-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:48px;}
        .site-footer-col h4{font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#f1f5f9;margin-bottom:16px;}
        .site-footer-col ul{list-style:none;padding:0;margin:0;}
        .site-footer-col ul li{margin-bottom:10px;}
        .site-footer-col ul li a{color:#64748b;text-decoration:none;font-size:0.88rem;transition:color 0.2s;}
        .site-footer-col ul li a:hover{color:#22d3ee;}
        .site-footer-social{display:flex;flex-direction:column;gap:10px;}
        .site-footer-social a{display:flex;align-items:center;gap:10px;color:#64748b;text-decoration:none;font-size:0.88rem;transition:color 0.2s;}
        .site-footer-social a:hover{color:#22d3ee;}
        .site-footer-social-icon{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;}
        .site-footer-bar{border-top:1px solid rgba(255,255,255,0.06);padding-top:24px;text-align:center;color:#475569;font-size:0.8rem;}
        @media(max-width:768px){.site-footer-grid{grid-template-columns:repeat(2,1fr);gap:32px;}}
        @media(max-width:480px){.site-footer-grid{grid-template-columns:1fr;gap:24px;}.site-footer{padding:40px 0 24px;margin-top:40px;}}

        /* ─── Error state ─────────────── */
        .error-section {
            display: none;
            text-align: center;
            padding: 40px 0;
        }
        .error-section.active { display: block; }
        .error-card {
            background: var(--bg-card);
            border: 1px solid rgba(248, 113, 113, 0.3);
            border-radius: 16px;
            padding: 32px;
            max-width: 500px;
            margin: 0 auto;
        }
        .error-icon { font-size: 2.5rem; margin-bottom: 12px; }
        .error-message { color: var(--red); font-size: 1rem; margin-bottom: 16px; }

        /* ─── 3-Year Cost of Ownership (TCO) Section ──────────── */
        .tco-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 28px 32px;
            margin-bottom: 24px;
            position: relative;
        }
        .tco-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .tco-section-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .tco-premium-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(34,211,238,0.12);
            border: 1px solid rgba(34,211,238,0.3);
            color: var(--accent);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        /* ── Locked (paywall) state ── */
        .tco-paywall {
            text-align: center;
            padding: 8px 0 4px;
            position: relative;
            z-index: 9999;
        }
        .tco-total-teaser {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 20px;
        }
        .tco-total-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .tco-total-value {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--text);
            line-height: 1;
        }
        .tco-total-sub {
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .tco-breakdown-preview {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
            filter: blur(4px);
            pointer-events: none;
            user-select: none;
        }
        .tco-preview-chip {
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .tco-unlock-box {
            background: var(--bg-dark);
            border: 1px solid rgba(34,211,238,0.2);
            border-radius: 14px;
            padding: 20px 24px;
        }
        .tco-unlock-title {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 6px;
            color: var(--text);
        }
        .tco-unlock-desc {
            color: var(--text-muted);
            font-size: 0.87rem;
            margin-bottom: 16px;
            line-height: 1.6;
        }
        .tco-unlock-features {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            justify-content: center;
        }
        .tco-unlock-feature {
            background: rgba(34,211,238,0.07);
            color: var(--accent);
            border: 1px solid rgba(34,211,238,0.2);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 4px 12px;
        }
        .btn-tco-unlock {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--accent);
            color: #0a0f1a;
            border: none;
            padding: 13px 28px;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 800;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: opacity 0.2s;
            text-decoration: none;
            position: relative;
            z-index: 1;
        }
        .btn-tco-unlock:hover { opacity: 0.88; }
        .tco-unlock-price {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 10px;
        }
        /* ── Unlocked (full breakdown) state ── */
        .tco-breakdown-table {
            width: 100%;
            border-collapse: collapse;
        }
        .tco-breakdown-table tr {
            border-bottom: 1px solid var(--border);
        }
        .tco-breakdown-table tr:last-child {
            border-bottom: none;
        }
        .tco-breakdown-table td {
            padding: 12px 4px;
            font-size: 0.9rem;
        }
        .tco-breakdown-table td:first-child {
            color: var(--text-muted);
            width: 44%;
        }
        .tco-breakdown-table td:last-child {
            text-align: right;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
        }
        .tco-breakdown-table tr.tco-subtotal td {
            color: var(--text-muted);
            font-size: 0.82rem;
        }
        .tco-breakdown-table tr.tco-subtotal td:last-child {
            font-weight: 600;
            font-size: 0.82rem;
        }
        .tco-breakdown-table tr.tco-depr td {
            color: var(--red);
        }
        .tco-breakdown-table tr.tco-total-row td {
            font-weight: 800;
            font-size: 1.05rem;
            color: var(--text);
            padding-top: 16px;
        }
        .tco-breakdown-table tr.tco-total-row td:first-child { font-size: 0.9rem; }
        .tco-note {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            line-height: 1.5;
        }
        .tco-pro-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(52,211,153,0.1);
            color: var(--green);
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 0.7rem;
            font-weight: 700;
            vertical-align: middle;
            margin-left: 6px;
        }
        @media (max-width: 600px) {
            .tco-section { padding: 22px 18px; }
            .tco-total-value { font-size: 2rem; }
            .tco-breakdown-table td { font-size: 0.83rem; }
        }

        /* ─── Known Issues Section ────────── */
        .ki-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 32px;
            margin: 20px 0;
        }
        .ki-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .ki-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .ki-summary {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .ki-total-badge {
            font-size: 0.8rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .ki-badge-low { background: rgba(34,197,94,0.12); color: #22c55e; }
        .ki-badge-medium { background: rgba(245,158,11,0.12); color: #f59e0b; }
        .ki-badge-high { background: rgba(239,68,68,0.12); color: #ef4444; }
        .ki-ymm { font-size: 0.85rem; color: var(--text-muted); }
        .ki-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
        .ki-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--border); }
        .ki-table td { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.87rem; }
        .ki-comp-name { color: var(--text-secondary); }
        .ki-comp-count { color: var(--text-muted); font-size: 0.82rem; }
        .ki-note { font-size: 0.73rem; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
        .ki-no-issues { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 0.9rem; }
        .ki-check { font-size: 1rem; }
        @media (max-width: 600px) { .ki-section { padding: 22px 18px; } }

        /* ─── Better Alternatives Section ── */
        .alt-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 32px;
            margin: 20px 0;
        }
        .alt-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .alt-section-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .alt-section-sub {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        .alt-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }
        .alt-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: border-color 0.2s;
        }
        .alt-card:hover { border-color: rgba(99,179,237,0.35); }
        .alt-card-score {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }
        .alt-score-denom { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
        .alt-card-body { flex: 1; }
        .alt-card-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
        .alt-card-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
        .alt-card-verdict { font-size: 0.78rem; color: var(--text-muted); }
        .alt-card-advantage {
            font-size: 0.78rem;
            color: #22c55e;
            margin-top: 6px;
            font-weight: 600;
        }
        .alt-card-cta {
            display: inline-block;
            margin-top: 10px;
            font-size: 0.82rem;
            color: var(--accent);
            font-weight: 600;
            text-decoration: none;
        }
        .alt-card-cta:hover { text-decoration: underline; }
        .alt-empty {
            text-align: center;
            padding: 24px 0;
        }
        .alt-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
        .alt-empty-text { font-size: 0.87rem; color: var(--text-muted); max-width: 340px; margin: 0 auto; line-height: 1.5; }
        @media (max-width: 600px) {
            .alt-section { padding: 22px 18px; }
            .alt-cards-grid { grid-template-columns: 1fr; }
        }

        /* ─── Better Alternatives Teaser (in paywall) ── */
        .alt-teaser-preview {
            margin: 18px 0;
            padding: 16px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .alt-teaser-label {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .alt-teaser-label strong { color: var(--text-secondary); }
        .alt-teaser-cards {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .alt-teaser-card {
            flex: 1;
            min-width: 120px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            filter: blur(5px);
            user-select: none;
            pointer-events: none;
        }
        .alt-teaser-score {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: linear-gradient(135deg, #22c55e33, #22c55e55);
            flex-shrink: 0;
        }
        .alt-teaser-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
        .alt-teaser-line { height: 9px; border-radius: 4px; background: rgba(255,255,255,0.12); }
        .alt-teaser-line.long { width: 90%; }
        .alt-teaser-line.medium { width: 65%; }
        .alt-teaser-line.short { width: 45%; }

        /* ─── Sticky bottom CTA ──────────── */
        #stickyCTABar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9995;
            background: linear-gradient(135deg, #0d1525 0%, #111827 100%);
            border-top: 1px solid rgba(255,107,53,0.25);
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }
        #stickyCTABar.visible { transform: translateY(0); pointer-events: auto; }
        #stickyCTABar p { margin: 0; font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
        #stickyCTABar .sticky-btn {
            background: #FF6B35;
            color: #fff;
            border: none;
            padding: 10px 22px;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(255,107,53,0.35);
            transition: all 0.2s;
        }
        #stickyCTABar .sticky-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,53,0.5); }
        @media (max-width: 480px) { #stickyCTABar p { display: none; } #stickyCTABar { padding: 10px 16px; } }

        /* ─── Responsive ──────────────── */
        @media (max-width: 768px) {
            .hero { padding: 50px 20px 40px; }
            .hero h1 { font-size: 2rem; margin-bottom: 16px; }
            .hero p { margin-bottom: 32px; font-size: 1rem; }
            .form-section { padding: 0 0; }
            .input-tab.mobile-hidden { display: none !important; }
            .mobile-hidden-desktop { display: flex !important; }
            .url-form { flex-direction: column; margin-bottom: 16px; }
            .url-form input { padding: 16px; font-size: 1rem; }
            .btn-primary { width: 100%; text-align: center; }
            .form-grid { grid-template-columns: 1fr; }
            .analysis-grid { grid-template-columns: 1fr; }
            .steps-grid { grid-template-columns: 1fr; }
            .features-grid { grid-template-columns: 1fr; }
            .score-card { padding: 28px 20px; }
            .comp-table { font-size: 0.8rem; }
            .comp-table th, .comp-table td { padding: 8px 6px; }
            .mobile-trust-strip { display: flex !important; }
        }

        /* ─── Pricing Section ────────── */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1050px;
            margin: 0 auto;
        }
        @media (max-width: 860px) {
            .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
        }
        .pricing-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 36px 28px;
            position: relative;
            transition: border-color 0.3s, transform 0.3s;
        }
        .pricing-card:hover { transform: translateY(-4px); }
        .pricing-card.featured {
            border-color: var(--accent);
            box-shadow: 0 0 40px rgba(34, 211, 238, 0.1);
        }
        .pricing-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            color: #0a0f1a;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 1px;
            padding: 4px 16px;
            border-radius: 20px;
            font-family: 'Space Grotesk', sans-serif;
            white-space: nowrap;
        }
        .pricing-tier {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            font-weight: 600;
            margin-bottom: 8px;
        }
        .pricing-card.featured .pricing-tier { color: var(--accent); }
        .pricing-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .pricing-price span {
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-muted);
        }
        .pricing-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 24px;
        }
        .pricing-features {
            list-style: none;
            margin-bottom: 28px;
        }
        .pricing-features li {
            padding: 8px 0;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .pricing-features li::before {
            content: '✓';
            color: var(--green);
            font-weight: 700;
            font-size: 0.85rem;
        }
        .pricing-features li.locked::before {
            content: '✕';
            color: var(--text-muted);
        }
        .pricing-features li.locked {
            color: var(--text-muted);
            text-decoration: line-through;
            opacity: 0.5;
        }
        .pricing-upgrade-divider {
            list-style: none !important;
            padding: 10px 0 6px !important;
            margin-top: 4px;
            border-top: 1px solid var(--border);
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--accent);
            opacity: 1 !important;
        }
        .pricing-upgrade-divider::before { content: '' !important; }
        .pricing-features li.pro-extra {
            color: var(--text-muted);
            opacity: 0.75;
        }
        .pricing-features li.pro-extra::before {
            content: '→';
            color: var(--accent);
            font-size: 0.8rem;
        }
        .btn-pricing {
            display: block;
            width: 100%;
            text-align: center;
            padding: 14px 0;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }
        .btn-pricing-free {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
        }
        .btn-pricing-free:hover { border-color: var(--accent); color: var(--accent); }
        .btn-pricing-pro {
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            border: none;
            color: #0a0f1a;
        }
        .btn-pricing-pro:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }

        /* ─── Pricing card color variants ─── */
        .pricing-card-orange { border-color: rgba(255,107,53,0.4); }
        .pricing-card-teal   { border-color: rgba(34,211,238,0.35); }
        .pricing-card-bundle {
            border-color: rgba(255,107,53,0.45);
            background: linear-gradient(135deg, rgba(255,107,53,0.06), rgba(251,191,36,0.03));
            grid-column: 1 / -1;
            max-width: 420px;
            margin: 0 auto;
            width: 100%;
        }
        @media (max-width: 860px) {
            .pricing-card-bundle { grid-column: auto; max-width: 480px; }
        }
        .pricing-tier-orange { color: #FF6B35; }
        .pricing-tier-teal   { color: #22d3ee; }
        .pricing-tier-inline { margin-bottom: 0; }
        .pricing-price-orange { color: #FF6B35; }
        .pricing-price-teal   { color: #22d3ee; }
        .bundle-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .bundle-badge {
            background: rgba(255,107,53,0.15);
            color: #FF6B35;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            letter-spacing: 0.05em;
        }
        .btn-pricing-orange {
            background: linear-gradient(135deg, #FF6B35, #e85d2a);
            color: #fff;
            border: none;
        }
        .btn-pricing-orange:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(255,107,53,0.45); }
        .btn-pricing-teal {
            display: block;
            text-align: center;
            background: rgba(34,211,238,0.12);
            color: #22d3ee;
            border: 1px solid rgba(34,211,238,0.35);
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.92rem;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            text-decoration: none;
            transition: all 0.2s;
        }
        .btn-pricing-teal:hover { background: rgba(34,211,238,0.2); }
        .btn-cta-ghost {
            background: rgba(34,211,238,0.1);
            color: var(--accent);
            border: 1px solid rgba(34,211,238,0.3);
            font-size: 0.9rem;
            padding: 12px 28px;
        }
        .btn-report-cta-lg {
            display: inline-block;
            font-size: 1.1rem;
            padding: 16px 36px;
        }
        .pricing-sample-link {
            display: block;
            text-align: center;
            margin-top: 10px;
            font-size: 0.78rem;
            color: #FF6B35;
            opacity: 0.85;
            text-decoration: none;
            border-bottom: 1px dashed rgba(255,107,53,0.4);
            padding-bottom: 1px;
        }

        /* ─── Pro CTA Banner (results page) ── */
        .pro-cta-banner {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(6, 182, 212, 0.05));
            border: 1px solid var(--border-accent);
            border-radius: 20px;
            padding: 32px;
            text-align: center;
            margin: 32px 0 8px;
        }
        .pro-cta-banner h3 {
            font-size: 1.3rem;
            margin-bottom: 8px;
        }
        .pro-cta-banner p {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 20px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        .pro-features-row {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }
        .pro-feature-chip {
            background: var(--accent-dim);
            color: var(--accent);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
        }
        .btn-pro-cta {
            display: inline-block;
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            color: #0a0f1a;
            padding: 14px 36px;
            border-radius: 12px;
            font-size: 1.05rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            text-decoration: none;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }
        .btn-pro-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--accent-glow); }
        .pro-cta-price {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 12px;
        }

        /* ─── Usage Counter ──────────── */
        .usage-counter {
            display: none;
            text-align: center;
            margin-top: 14px;
            font-size: 0.85rem;
            color: var(--text-muted);
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .usage-counter.visible { display: flex; }
        .usage-dots {
            display: inline-flex;
            gap: 5px;
            align-items: center;
        }
        .usage-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(148, 163, 184, 0.2);
            transition: background 0.3s;
        }
        .usage-dot.used { background: var(--accent); }
        .usage-dot.used-all { background: var(--red); }
        .usage-upgrade {
            color: var(--accent);
            cursor: pointer;
            text-decoration: underline;
            margin-left: 4px;
        }

        /* ─── Rate-limit Error Card ─── */
        .rate-limit-card {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(6, 182, 212, 0.04));
            border: 1px solid var(--border-accent);
            border-radius: 20px;
            padding: 40px 32px;
            max-width: 520px;
            margin: 0 auto;
            text-align: center;
        }
        .rate-limit-icon { font-size: 2.5rem; margin-bottom: 12px; }
        .rate-limit-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .rate-limit-msg {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 8px;
        }
        .rate-limit-reset {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 24px;
        }
        .rate-limit-features {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }
        .rate-limit-chip {
            background: var(--accent-dim);
            color: var(--accent);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 20px;
        }

        /* ─── Scroll reveal ───────────── */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s, transform 0.6s;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Fallback: if JS fails, still show content */
        .reveal.no-js-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ─── Photo Inspection ────────── */
        .photo-inspection-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
        }
        .photo-insp-header {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 20px;
        }
        .photo-insp-icon {
            width: 44px;
            height: 44px;
            background: var(--accent-dim);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .photo-insp-header h3 {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 3px;
        }
        .photo-insp-header p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: 0;
        }
        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 36px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-dark);
        }
        .upload-zone:hover, .upload-zone.dragover {
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        .upload-zone-icon { font-size: 1.8rem; margin-bottom: 10px; }
        .upload-zone p { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 4px; }
        .upload-zone .upload-accent { color: var(--accent); font-weight: 600; }
        .upload-sub { font-size: 0.78rem !important; opacity: 0.6; }
        .photo-preview-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }
        .photo-thumb-wrap {
            position: relative;
            flex-shrink: 0;
        }
        .photo-thumb {
            width: 72px;
            height: 56px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid var(--border);
            display: block;
        }
        .photo-thumb-remove {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            background: var(--red);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 0.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0;
        }
        .photo-count-badge {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 10px;
        }
        .btn-analyze-photos {
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            color: #0a0f1a;
            border: none;
            padding: 13px 24px;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            width: 100%;
            margin-top: 16px;
            transition: all 0.2s;
        }
        .btn-analyze-photos:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
        .btn-analyze-photos:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
        .damage-loading-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 36px 24px;
            text-align: center;
        }
        .damage-loading-steps {
            font-size: 0.85rem;
            color: var(--accent);
            margin-top: 8px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        .damage-report-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
        }
        .damage-report-card.has-damage { border-color: rgba(248, 113, 113, 0.3); }
        .damage-report-card.clean { border-color: rgba(52, 211, 153, 0.3); }
        .damage-report-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .damage-report-header h3 {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin: 0;
        }
        .risk-badge {
            font-size: 0.8rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .risk-clean { background: rgba(52,211,153,0.15); color: var(--green); }
        .risk-minor { background: rgba(251,191,36,0.15); color: var(--amber); }
        .risk-moderate { background: rgba(251,146,60,0.15); color: #fb923c; }
        .risk-severe { background: rgba(248,113,113,0.15); color: var(--red); }
        .score-adjust-banner {
            background: rgba(248, 113, 113, 0.06);
            border: 1px solid rgba(248, 113, 113, 0.2);
            border-radius: 10px;
            padding: 11px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.88rem;
            line-height: 1.4;
        }
        .damage-finding {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            align-items: flex-start;
        }
        .damage-finding:last-child { border-bottom: none; }
        .severity-pill {
            font-size: 0.68rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 6px;
            white-space: nowrap;
            flex-shrink: 0;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .sev-minor { background: rgba(251,191,36,0.15); color: var(--amber); }
        .sev-moderate { background: rgba(251,146,60,0.15); color: #fb923c; }
        .sev-severe { background: rgba(248,113,113,0.15); color: var(--red); }
        .finding-type { font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }
        .finding-location { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
        .finding-desc { font-size: 0.82rem; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
        .adjusted-score-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 0 6px;
        }
        .adjusted-score-val {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--red);
        }
        .adjusted-score-label {
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .btn-retry-photos {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 9px 20px;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            margin-top: 16px;
            transition: all 0.2s;
        }
        .btn-retry-photos:hover { border-color: var(--accent); color: var(--accent); }
        .no-damage-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--green);
            font-size: 0.9rem;
            font-weight: 600;
            padding: 14px 0;
        }

        /* ─── Auth Nav ──────────────── */
        .nav-auth {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-nav-login {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.85rem;
            background: transparent;
            border: 1px solid var(--border-accent);
            color: var(--accent);
            padding: 7px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-nav-login:hover { background: var(--accent-dim); }
        .btn-nav-signup {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.85rem;
            background: var(--accent);
            border: none;
            color: #0a0f1a;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-nav-signup:hover { opacity: 0.9; }
        .nav-user-badge {
            font-size: 0.78rem;
            color: var(--text-muted);
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 5px 12px;
            border-radius: 20px;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .btn-nav-deals {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.85rem;
            background: var(--accent-dim);
            border: 1px solid var(--border-accent);
            color: var(--accent);
            padding: 7px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-nav-deals:hover { background: rgba(34,211,238,0.25); }
        .btn-nav-logout {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.78rem;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: color 0.2s;
        }
        .btn-nav-logout:hover { color: var(--red); }

        /* ─── Auth Modal ──────────────── */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .modal-overlay.active { display: flex; }
        .modal-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 36px 32px;
            max-width: 440px;
            width: 100%;
            position: relative;
        }
        .modal-close {
            position: absolute;
            top: 14px;
            right: 16px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.3rem;
            cursor: pointer;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            transition: color 0.2s;
        }
        .modal-close:hover { color: var(--text); }
        .modal-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 6px;
        }
        .modal-subtitle {
            color: var(--text-muted);
            font-size: 0.88rem;
            margin-bottom: 24px;
        }
        .auth-tabs {
            display: flex;
            gap: 4px;
            background: var(--bg-dark);
            border-radius: 10px;
            padding: 4px;
            margin-bottom: 24px;
        }
        .auth-tab {
            flex: 1;
            padding: 8px;
            text-align: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.88rem;
            border: none;
            background: transparent;
            color: var(--text-muted);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .auth-tab.active { background: var(--bg-card-hover); color: var(--text); }
        .auth-form { display: flex; flex-direction: column; gap: 14px; }
        .auth-field input {
            width: 100%;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px;
            color: var(--text);
            font-size: 0.95rem;
            font-family: 'DM Sans', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }
        .auth-field input:focus { border-color: var(--accent); }
        .btn-auth-submit {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
            background: linear-gradient(135deg, var(--accent), #06b6d4);
            border: none;
            color: #0a0f1a;
            padding: 13px;
            border-radius: 10px;
            cursor: pointer;
            transition: opacity 0.2s;
            margin-top: 4px;
        }
        .btn-auth-submit:hover { opacity: 0.9; }
        .btn-auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .auth-error {
            color: var(--red);
            font-size: 0.85rem;
            text-align: center;
            padding: 10px;
            background: rgba(248,113,113,0.1);
            border-radius: 8px;
            display: none;
        }
        .auth-error.show { display: block; }

        /* ─── Save Deal Button ────────── */
        .btn-save-deal {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.92rem;
            background: linear-gradient(135deg, #10b981, #059669);
            border: none;
            color: #fff;
            padding: 12px 24px;
            border-radius: 10px;
            cursor: pointer;
            transition: opacity 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-save-deal:hover { opacity: 0.88; }
        .btn-save-deal.saved {
            background: var(--bg-card);
            border: 1px solid var(--green);
            color: var(--green);
        }
        .btn-save-deal:disabled { opacity: 0.5; cursor: not-allowed; }
        .save-deal-row {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 16px;
        }
        .save-status-msg {
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .save-status-msg.success { color: var(--green); }
        .save-status-msg.error { color: var(--red); }

        /* ─── Share Row ───────────────────── */
        .share-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .share-label {
            font-size: 0.82rem;
            color: var(--text-muted);
            white-space: nowrap;
            width: 100%;
            text-align: center;
            margin-bottom: 4px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .share-btn-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .share-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--border);
            transition: all 0.15s;
            text-decoration: none;
            white-space: nowrap;
        }
        .share-btn:hover { transform: translateY(-1px); }
        .share-btn-text { margin-left: 5px; }
        .share-btn-copy {
            background: var(--accent-dim);
            color: var(--accent);
            border-color: var(--border-accent);
        }
        .share-btn-copy.copied { color: var(--green); border-color: var(--green); background: rgba(52, 211, 153, 0.08); }
        .share-btn-twitter {
            background: rgba(29, 155, 240, 0.08);
            color: #1d9bf0;
            border-color: rgba(29, 155, 240, 0.25);
        }
        .share-btn-twitter:hover { background: rgba(29, 155, 240, 0.15); }
        .share-btn-facebook {
            background: rgba(24, 119, 242, 0.08);
            color: #1877f2;
            border-color: rgba(24, 119, 242, 0.25);
        }
        .share-btn-facebook:hover { background: rgba(24, 119, 242, 0.15); }
        .share-input {
            flex: 1;
            min-width: 0;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 0.8rem;
            color: var(--text-muted);
            font-family: monospace;
            cursor: pointer;
            display: none;
        }
        .share-input:focus { outline: none; border-color: var(--accent); }
        .btn-copy-link {
            background: var(--accent-dim);
            color: var(--accent);
            border: 1px solid var(--border-accent);
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.15s;
            display: none;
        }
        .btn-copy-link:hover { opacity: 0.8; }
        .btn-copy-link.copied { color: var(--green); border-color: var(--green); }

        /* ─── Dashboard Section ───────── */
        #dashboardSection {
            display: none;
            padding: 80px 0 60px;
        }
        #dashboardSection.active { display: block; }
        .dashboard-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .dashboard-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
        }
        .dashboard-subtitle {
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-top: 4px;
        }
        .dash-tab {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.88rem;
            padding: 9px 20px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }
        .dash-tab:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }
        .dash-tab-active { background: rgba(34,211,238,0.1) !important; color: #22d3ee !important; border-color: rgba(34,211,238,0.35) !important; }
        .insp-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px 20px;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
        }
        .insp-card:hover { border-color: rgba(34,211,238,0.35); transform: translateY(-1px); }
        .insp-grade {
            width: 48px; height: 48px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.3rem; font-weight: 800;
            flex-shrink: 0;
        }
        .insp-paid-badge {
            font-size: 0.72rem; color: #22d3ee; font-weight: 600;
        }
        .dashboard-trial-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(251,191,36,0.12);
            border: 1px solid rgba(251,191,36,0.35);
            color: #fbbf24;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 8px;
            margin-top: 6px;
            letter-spacing: 0.3px;
        }
        .dashboard-trial-badge .countdown { font-family: 'Space Grotesk', monospace; }
        .btn-back-home {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.85rem;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-back-home:hover { border-color: var(--accent); color: var(--accent); }
        .saved-deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
        }
        .saved-deal-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
            cursor: pointer;
            transition: border-color 0.2s, transform 0.15s;
            position: relative;
        }
        .saved-deal-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
        .saved-deal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .saved-deal-score {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1;
        }
        .saved-deal-verdict {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .saved-deal-vehicle {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .saved-deal-meta {
            color: var(--text-muted);
            font-size: 0.82rem;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .saved-deal-photos-row {
            display: flex;
            gap: 6px;
            margin-top: 12px;
            flex-wrap: wrap;
        }
        .saved-deal-photo-thumb {
            width: 48px;
            height: 36px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid var(--border);
        }
        .saved-deal-damage {
            font-size: 0.78rem;
            padding: 4px 10px;
            border-radius: 6px;
            margin-top: 10px;
            display: inline-block;
        }
        .risk-clean { background: rgba(52,211,153,0.15); color: var(--green); }
        .risk-minor { background: rgba(251,191,36,0.15); color: var(--amber); }
        .risk-moderate { background: rgba(251,191,36,0.2); color: var(--amber); }
        .risk-severe { background: rgba(248,113,113,0.15); color: var(--red); }
        .btn-delete-saved {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1rem;
            padding: 4px;
            border-radius: 6px;
            transition: color 0.2s;
            opacity: 0;
        }
        .saved-deal-card:hover .btn-delete-saved { opacity: 1; }
        .btn-delete-saved:hover { color: var(--red); }
        .dashboard-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        .dashboard-empty-icon { font-size: 3rem; margin-bottom: 12px; }
        .dashboard-empty h3 { color: var(--text); margin-bottom: 8px; }
        .dashboard-loading { text-align: center; padding: 40px; color: var(--text-muted); }

        /* ─── Deal Detail Modal ───────── */
        .deal-detail-overlay {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.8);
            z-index: 999;
            overflow-y: auto;
            padding: 20px;
        }
        .deal-detail-overlay.active { display: block; }
        .deal-detail-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            max-width: 760px;
            margin: 0 auto;
            position: relative;
        }
        .deal-detail-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .deal-detail-vehicle {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
        }
        .deal-detail-score-row {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .deal-detail-score {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1;
        }
        .deal-photos-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .deal-photos-gallery img {
            width: 140px;
            height: 105px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: pointer;
        }
        .deal-section-title {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin-bottom: 10px;
            margin-top: 20px;
        }
        .deal-analysis-text {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.6;
        }
        .deal-factors-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .deal-factors-list li {
            font-size: 0.88rem;
            color: var(--text-muted);
            padding: 8px 12px;
            background: var(--bg-dark);
            border-radius: 8px;
        }
        .deal-factors-list li::before { content: '→  '; color: var(--accent); }

        /* ─── Feature Showcase ──────────── */
        .features-showcase-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .showcase-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 24px;
            transition: border-color 0.3s, transform 0.3s;
            position: relative;
            overflow: hidden;
        }
        .showcase-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .showcase-card:hover { border-color: var(--border-accent); transform: translateY(-4px); }
        .showcase-card:hover::before { opacity: 1; }
        .showcase-icon { font-size: 2rem; margin-bottom: 14px; }
        .showcase-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
        .showcase-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
        @media (max-width: 768px) {
            .features-showcase-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
            .features-showcase-grid { grid-template-columns: 1fr; }
        }

        /* ─── Trust Bar ─────────────────── */
        .trust-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px 32px;
            flex-wrap: wrap;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--text-muted);
            padding: 8px 24px;
        }
        .trust-item strong { color: var(--text); }
        .trust-icon { font-size: 1.3rem; }
        .trust-divider {
            width: 1px;
            height: 36px;
            background: var(--border);
            flex-shrink: 0;
        }
        @media (max-width: 768px) {
            .trust-bar { flex-direction: column; gap: 8px; padding: 20px; }
            .trust-divider { width: 60px; height: 1px; }
            .trust-item { padding: 4px 0; }
        }

        /* ─── Fixed Top Header Bar ─── */
        .top-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: #0a0b0d;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            z-index: 9999;
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap: 16px;
        }
        .top-header-home {
            flex-shrink: 0;
            color: #f1f5f9;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
        }
        .top-header-home:hover { color: #22d3ee; }
        .top-header-search {
            flex: 1;
            display: flex;
            align-items: center;
            background: #111827;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 0 12px;
            gap: 8px;
            min-width: 0;
        }
        .top-header-search-icon { color: #64748b; font-size: 0.85rem; flex-shrink: 0; }
        .top-header-search input {
            flex: 1;
            background: none;
            border: none;
            outline: none;
            color: #f1f5f9;
            font-size: 0.875rem;
            padding: 9px 0;
            min-width: 0;
        }
        .top-header-search input::placeholder { color: #475569; }
        .top-header-search button {
            background: #22d3ee;
            border: none;
            color: #0a0b0d;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .top-header-search button:hover { background: #67e8f9; }
        .top-header-account {
            flex-shrink: 0;
            color: #94a3b8;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
        }
        .top-header-account:hover { color: #f1f5f9; }
        .top-header-logout {
            flex-shrink: 0;
            color: #64748b;
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 500;
            white-space: nowrap;
            transition: color 0.2s;
        }
        .top-header-logout:hover { color: #ef4444; }
        /* Mobile: collapse search into icon */
        .top-header-search-icon-expand {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #0a0b0d;
            z-index: 99999;
            align-items: flex-start;
            padding: 12px 16px;
            gap: 12px;
        }
        .top-header-search-icon-expand.active { display: flex; }
        .top-header-search-expand-back {
            color: #f1f5f9;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 8px;
            text-decoration: none;
        }
        .top-header-search-expand input {
            flex: 1;
            background: #111827;
            border: 1px solid rgba(34,211,238,0.4);
            border-radius: 8px;
            color: #f1f5f9;
            font-size: 0.9rem;
            padding: 10px 14px;
            outline: none;
        }
        .top-header-search-expand input::placeholder { color: #475569; }
        @media (max-width: 600px) {
            .top-header { padding: 0 12px; gap: 8px; }
            .top-header-search { display: none; }
            .top-header-account { font-size: 0.8rem; }
            .top-header-search-trigger {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                background: #111827;
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 8px;
                color: #94a3b8;
                font-size: 0.9rem;
                cursor: pointer;
                flex-shrink: 0;
            }
        }
        /* ─── Recall Check Section ─────────────────────── */
        .recall-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 16px;
            padding: 24px;
        }
        .recall-card.recall-clean {
            border-color: rgba(34,197,94,0.25);
        }
        .recall-card.recall-found {
            border-color: rgba(248,113,113,0.3);
        }
        .recall-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .recall-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .recall-badge-clean {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(34,197,94,0.15);
            color: #22c55e;
            border: 1px solid rgba(34,197,94,0.3);
        }
        .recall-badge-warn {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(248,113,113,0.15);
            color: #f87171;
            border: 1px solid rgba(248,113,113,0.3);
        }
        .recall-clean-msg {
            font-size: 1rem;
            color: #22c55e;
            font-weight: 600;
        }
        .recall-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }
        .recall-item {
            background: rgba(248,113,113,0.06);
            border: 1px solid rgba(248,113,113,0.15);
            border-radius: 10px;
            padding: 12px 14px;
            border-left: 3px solid #f87171;
        }
        .recall-item-component {
            font-size: 0.75rem;
            font-weight: 700;
            color: #f87171;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .recall-item-summary {
            font-size: 0.85rem;
            color: var(--text);
            line-height: 1.45;
        }
        .recall-item-date {
            font-size: 0.73rem;
            color: var(--text-muted);
            margin-top: 5px;
        }
        .recall-score-adj {
            font-size: 0.75rem;
            color: #f87171;
            margin-top: 10px;
            font-weight: 600;
        }
        .recall-nhtsa-link {
            font-size: 0.75rem;
            color: var(--accent);
            text-decoration: none;
            margin-top: 10px;
            display: inline-block;
        }
        .recall-nhtsa-link:hover { text-decoration: underline; }

        /* ─── Known Issues Section ─────────────────────── */
        .known-issues-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .known-issues-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .known-issues-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .known-issues-badge {
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(251,191,36,0.15);
            color: #fbbf24;
            border: 1px solid rgba(251,191,36,0.3);
        }
        .known-issues-count {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
        }
        .known-issues-subtext {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .known-issues-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ki-item {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            padding: 12px 14px;
        }
        .ki-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .ki-component {
            font-size: 0.82rem;
            font-weight: 700;
            color: #fbbf24;
            letter-spacing: 0.5px;
        }
        .ki-count-badge {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            background: rgba(255,255,255,0.06);
            padding: 2px 8px;
            border-radius: 10px;
        }
        .ki-description {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.4;
        }
        .ki-blurred .ki-description,
        .ki-blurred .ki-component,
        .ki-blurred .ki-count-badge {
            filter: blur(5px);
            user-select: none;
            pointer-events: none;
        }
        .ki-paywall {
            background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(59,130,246,0.08) 100%);
            border: 1px solid rgba(251,191,36,0.2);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            margin-top: 12px;
        }
        .ki-paywall-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 6px;
        }
        .ki-paywall-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 14px;
        }
        .btn-ki-unlock {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #000;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .btn-ki-unlock:hover { opacity: 0.85; }
        .ki-score-adj {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            color: var(--red);
            margin-left: 8px;
        }
        .ki-pro-note {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 8px;
        }
        .ki-crashes-badge {
            font-size: 0.7rem;
            color: #f87171;
            background: rgba(248,113,113,0.1);
            border: 1px solid rgba(248,113,113,0.2);
            border-radius: 6px;
            padding: 1px 6px;
            margin-left: 6px;
        }

        /* ═══════════════════════════════════════════════════════════
           MMELEMENT REPORT RENDERER — All 7 sections
           ═══════════════════════════════════════════════════════════ */

        /* Shared section wrapper */
        .mm-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 32px;
            margin: 20px 0;
        }
        .mm-section-hdr {
            margin-bottom: 20px;
        }
        .mm-section-label {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .mm-section-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.04em;
        }
        .mm-section-sub {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        @media (max-width: 600px) {
            .mm-section { padding: 20px 18px; }
        }

        /* ── 1. Cover / Summary callout cards ── */
        .mm-callouts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 18px 0;
        }
        @media (max-width: 600px) { .mm-callouts { grid-template-columns: 1fr; } }
        .mm-callout-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 16px;
        }
        .mm-callout-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .mm-callout-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 4px;
            line-height: 1.2;
        }
        .mm-callout-note {
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.45;
        }
        .mm-callout-card.buy_at .mm-callout-value { color: var(--green); }
        .mm-callout-card.watch_out .mm-callout-value { color: #fbbf24; }
        .mm-callout-card.better_option .mm-callout-value { color: var(--accent); }

        /* ── 2. Known Issues (v2 — headline/body separate) ── */
        .mm-issue-card {
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border);
            border-left: 3px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 10px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px 20px;
        }
        .mm-issue-card.sev-WATCH { border-left-color: #f97316; }
        .mm-issue-card.sev-MINOR { border-left-color: #fbbf24; }
        .mm-issue-card.sev-INFO  { border-left-color: #64748b; }
        .mm-issue-top {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            grid-column: 1;
        }
        .mm-sev-badge {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(249,115,22,0.15);
            color: #f97316;
            flex-shrink: 0;
        }
        .mm-sev-badge.MINOR { background: rgba(251,191,36,0.15); color: #fbbf24; }
        .mm-sev-badge.INFO  { background: rgba(100,116,139,0.15); color: #94a3b8; }
        .mm-issue-headline {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .mm-issue-body {
            font-size: 0.83rem;
            color: var(--text-muted);
            line-height: 1.6;
            grid-column: 1;
        }
        .mm-issue-cost {
            grid-column: 2;
            grid-row: 1 / 3;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-align: right;
            align-self: start;
            padding-top: 2px;
            white-space: nowrap;
        }
        @media (max-width: 600px) {
            .mm-issue-card { grid-template-columns: 1fr; }
            .mm-issue-cost { grid-column: 1; grid-row: auto; text-align: left; padding-top: 0; }
        }

        /* ── 3. Costs grid ── */
        .mm-costs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        @media (max-width: 600px) { .mm-costs-grid { grid-template-columns: 1fr; } }
        .mm-cost-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
        }
        .mm-cost-label {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .mm-cost-amount {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 4px;
        }
        .mm-cost-subtitle {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.4;
        }
        .mm-costs-total {
            background: rgba(34,211,238,0.06);
            border: 1px solid rgba(34,211,238,0.2);
            border-radius: 10px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mm-costs-total-label {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.05em;
        }
        .mm-costs-total-value {
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--accent);
        }
        .mm-costs-assumptions {
            font-size: 0.73rem;
            color: var(--text-muted);
            margin-top: 10px;
            opacity: 0.7;
        }

        /* ── 4. Alternatives (v2 — ring_color) ── */
        .mm-alt-cards {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mm-alt-row {
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
            display: grid;
            grid-template-columns: 40px 1fr auto;
            align-items: center;
            gap: 16px;
        }
        .mm-alt-ring {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2.5px solid #22c55e;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            font-weight: 700;
            color: #22c55e;
            flex-shrink: 0;
        }
        .mm-alt-ring.YELLOW { border-color: #fbbf24; color: #fbbf24; }
        .mm-alt-ring.RED    { border-color: #f87171; color: #f87171; }
        .mm-alt-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .mm-alt-meta  { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 3px; }
        .mm-alt-note  { font-size: 0.75rem; color: var(--text-muted); }
        .mm-alt-price {
            text-align: right;
        }
        .mm-alt-price-label {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .mm-alt-delta-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
        }
        @media (max-width: 600px) {
            .mm-alt-row { grid-template-columns: 36px 1fr; }
            .mm-alt-price { grid-column: 2; text-align: left; }
        }

        /* ── 5. Recall & Safety (v2) ── */
        .mm-recall-status {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 16px 20px;
            border-radius: 10px;
            border: 1px solid rgba(34,197,94,0.2);
            background: rgba(34,197,94,0.05);
            margin-bottom: 16px;
        }
        .mm-recall-status.OPEN_RECALL {
            border-color: rgba(239,68,68,0.25);
            background: rgba(239,68,68,0.05);
        }
        .mm-recall-status.DATA_UNAVAILABLE {
            border-color: rgba(251,191,36,0.2);
            background: rgba(251,191,36,0.04);
        }
        .mm-recall-icon {
            font-size: 1.4rem;
            line-height: 1;
            flex-shrink: 0;
        }
        .mm-recall-hdr {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .mm-recall-body {
            font-size: 0.83rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 14px;
        }
        .mm-recall-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .mm-recall-table th {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: var(--text-muted);
            text-transform: uppercase;
            padding: 0 0 8px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        .mm-recall-table td {
            padding: 9px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: var(--text-secondary);
            vertical-align: top;
        }
        .mm-recall-table td:last-child { text-align: right; }
        .mm-recall-status-open  { color: #f87171; font-weight: 600; }
        .mm-recall-status-done  { color: #34d399; font-weight: 600; }

        /* ── 6. PPI Checklist ── */
        .mm-ppi-group {
            margin-bottom: 20px;
        }
        .mm-ppi-group-title {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            color: var(--accent);
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .mm-ppi-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            font-size: 0.86rem;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .mm-ppi-item:last-child { border-bottom: none; }
        .mm-ppi-box {
            width: 16px;
            height: 16px;
            border: 1.5px solid var(--border);
            border-radius: 3px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* ── 7. Negotiation Playbook (v2 — why_it_works + field_tip separate) ── */
        .mm-neg-script {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border);
        }
        .mm-neg-script:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .mm-neg-script-hdr {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 8px;
        }
        .mm-neg-num {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 0.1em;
        }
        .mm-neg-label {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.02em;
        }
        .mm-neg-target {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-bottom: 12px;
            font-style: italic;
        }
        .mm-neg-quote {
            background: rgba(255,255,255,0.03);
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            padding: 14px 18px;
            font-size: 0.88rem;
            color: var(--text-primary);
            line-height: 1.65;
            margin-bottom: 14px;
            font-style: italic;
        }
        .mm-neg-block-title {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        .mm-neg-why-title { color: var(--accent); }
        .mm-neg-tip-title  { color: #64748b; }
        .mm-neg-block-body {
            font-size: 0.82rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        /* ── Social Proof Ticker ───────────────────────────────────────── */
        #social-proof-ticker-section {
            padding: 0 0 16px 0;
            margin-bottom: 8px;
        }

        .ticker-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
        }

        .ticker-live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #34d399;
            flex-shrink: 0;
            animation: ticker-pulse 2s ease-in-out infinite;
        }

        @keyframes ticker-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
            50%       { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
        }

        .ticker-header-text {
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
        }

        /* Desktop: horizontal scroll row */
        .ticker-track-wrap {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none; /* Firefox */
            -webkit-overflow-scrolling: touch;
            cursor: grab;
        }
        .ticker-track-wrap::-webkit-scrollbar { display: none; }
        .ticker-track-wrap.grabbing { cursor: grabbing; }

        .ticker-track {
            display: flex;
            gap: 10px;
            width: max-content;
            padding-bottom: 4px;
        }

        .ticker-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px 16px;
            flex-shrink: 0;
            width: 210px;
            transition: border-color 0.2s, transform 0.2s;
        }
        .ticker-card:hover {
            transform: translateY(-2px);
        }

        /* Score color accent on left border */
        .ticker-card.score-green  { border-left: 3px solid #34d399; }
        .ticker-card.score-amber  { border-left: 3px solid #fbbf24; }
        .ticker-card.score-red    { border-left: 3px solid #f87171; }

        /* Newest entry pulse */
        .ticker-card.ticker-newest {
            animation: ticker-card-glow 3s ease-out;
        }
        @keyframes ticker-card-glow {
            0%   { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.5); }
            100% { box-shadow: none; }
        }

        .ticker-card-vehicle {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ticker-card-score {
            font-size: 0.78rem;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .ticker-card-score.score-green { color: #34d399; }
        .ticker-card-score.score-amber { color: #fbbf24; }
        .ticker-card-score.score-red   { color: #f87171; }

        .ticker-card-time {
            font-size: 0.72rem;
            color: var(--text-muted);
        }

        /* Mobile: vertical stack */
        @media (max-width: 767px) {
            .ticker-track-wrap {
                overflow-x: hidden;
            }
            .ticker-track {
                flex-direction: column;
                width: 100%;
                max-height: 340px;
                overflow-y: auto;
                scrollbar-width: none;
            }
            .ticker-track::-webkit-scrollbar { display: none; }
            .ticker-card {
                width: 100%;
            }
        }

        /* ── Negotiation Tactic Teaser Card ── */
        .negtease-card {
            background: linear-gradient(135deg, #0f1c2e 0%, #111827 100%);
            border: 1px solid rgba(34, 211, 238, 0.25);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            position: relative;
            overflow: hidden;
        }
        .negtease-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, #22d3ee, #a78bfa, #22d3ee);
            background-size: 200% 100%;
            animation: negtease-shimmer 4s linear infinite;
        }
        @keyframes negtease-shimmer {
            0% { background-position: 0% 0; }
            100% { background-position: 200% 0; }
        }
        .negtease-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .negtease-icon {
            font-size: 1.1rem;
            line-height: 1;
        }
        .negtease-title {
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent);
            flex: 1;
        }
        .negtease-badge {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #34d399;
            background: rgba(52, 211, 153, 0.12);
            border: 1px solid rgba(52, 211, 153, 0.3);
            border-radius: 20px;
            padding: 2px 8px;
        }
        .negtease-headline {
            font-size: 1.0rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 14px;
        }
        .negtease-locked-wrap {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }
        .negtease-rationale-blur {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.6;
            padding: 12px;
            background: rgba(255,255,255,0.03);
            border-radius: 10px;
            filter: blur(5px);
            user-select: none;
            pointer-events: none;
        }
        .negtease-lock-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 15, 26, 0.7);
            backdrop-filter: blur(2px);
            border-radius: 10px;
        }
        .negtease-lock-content {
            text-align: center;
            padding: 12px 16px;
        }
        .negtease-lock-icon {
            font-size: 1.3rem;
            display: block;
            margin-bottom: 6px;
        }
        .negtease-lock-text {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .btn-negtease-unlock {
            background: linear-gradient(135deg, #22d3ee, #06b6d4);
            color: #0a0f1a;
            font-weight: 700;
            font-size: 0.85rem;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            white-space: nowrap;
        }
        .btn-negtease-unlock:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(34, 211, 238, 0.4);
        }
        .btn-negtease-unlock:active {
            transform: translateY(0);
        }