/* ============================================================
   DEAL ANALYZER — page-specific styles
   Extracted from deal-analyzer.html inline <style> block
   to use the immutable 1-year cache on returning visits.
   ============================================================ */

/* Page-header override for wider description on this page */
    .page-header p { max-width: 620px; }

    /* CTA trust badges → tools.css */

    /* PROGRESS */
    .progress-inner { max-width: 680px; margin: 0 auto; padding: 28px 0 0; }
    .progress-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--sp-4); }
    .progress-step { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: color var(--duration-base); }
    .progress-step.active { color: var(--orange-text); }
    .progress-step.done { color: var(--success); }
    .step-circle { width: 26px; height: 26px; border-radius: var(--radius-circle); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 700; background: var(--white); transition: var(--transition); flex-shrink: 0; }
    .progress-step.active .step-circle { border-color: var(--orange); background: var(--orange); color: var(--slate); }
    .progress-step.done .step-circle { border-color: var(--success); background: var(--success); color: var(--white); }
    .progress-line { flex: 1; height: 2px; background: var(--border); margin: 0 var(--sp-2); transition: background var(--duration-base); }
    .progress-line.done { background: var(--success); }
    .progress-bar-track { height: 4px; background: var(--border); border-radius: var(--radius-2xs); overflow: hidden; }
    .progress-bar-fill { height: 100%; background: var(--orange); border-radius: var(--radius-2xs); transition: width var(--duration-slow) ease; }

    /* FORM */
    .form-inner { max-width: 680px; margin: 0 auto; padding: var(--sp-5) 0 80px; }
    .form-step { display: none; animation: fadeSlide 0.3s ease; }
    .form-step.active { display: block; }
    @keyframes fadeSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .step-card { background: var(--white); border-radius: var(--radius-xl); padding: 36px var(--sp-6); box-shadow: var(--shadow-card); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .step-card h2 { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--slate); margin-bottom: var(--sp-1half); }
    .step-card .step-desc { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--card-pad-lg); }

    /* field-group base → tools.css */
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
    @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

    input[type="text"], input[type="number"], input[type="email"], select {
      width: 100%; padding: var(--sp-3) 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: var(--fs-sm-plus); color: var(--slate); background: var(--white);
      transition: border-color var(--duration-fast), box-shadow var(--duration-fast); -webkit-appearance: none; appearance: none;
    }
    /* input focus/error → tools.css */

    .vehicle-input { width: 100%; }

    /* Dollar input wrapper */
    .dollar-input-wrap { position: relative; }
    .dollar-input-wrap::before { content: '$'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: var(--fs-sm-plus); color: var(--ink-2); pointer-events: none; z-index: var(--z-base); }
    .dollar-input-wrap input { padding-left: var(--card-pad-lg); }

    .type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .type-toggle.three { grid-template-columns: repeat(3, 1fr); }
    .toggle-btn { padding: 14px var(--sp-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); cursor: pointer; transition: var(--transition); text-align: center; }
    .toggle-btn:hover { border-color: var(--orange); color: var(--orange-text); }
    .toggle-btn.selected { border-color: var(--orange); background: var(--accent-alpha-5); color: var(--orange-text); font-weight: 600; }

    /* Term button group */
    .term-btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    /* WCAG 2.5.5 (audit round-2 2026-05-07): min-height 44px on every
       viewport. Prior 10px padding gave ~36px tall buttons; mobile
       override at line 289 added min-width but not min-height. */
    .term-btn { padding: 10px 14px; min-height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); cursor: pointer; transition: var(--transition); text-align: center; min-width: 56px; }
    .term-btn:hover { border-color: var(--orange); color: var(--orange-text); }
    .term-btn.selected { border-color: var(--orange); background: var(--accent-alpha-5); color: var(--orange-text); font-weight: 600; }

    .addon-list { display: flex; flex-direction: column; gap: 10px; }
    .addon-item { padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); }
    .addon-item:hover { border-color: var(--orange); }
    .addon-item.checked { border-color: var(--orange); background: var(--accent-alpha-5); }
    .addon-item-row { display: flex; align-items: center; gap: var(--sp-3); }
    .addon-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--orange); }
    .addon-label { flex: 1; }
    .addon-label strong { display: block; font-size: var(--fs-sm); color: var(--slate); }
    .addon-label span { font-size: var(--fs-xs); color: var(--ink-2); }
    .addon-cost { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
    .addon-price-row { display: none; padding: 10px 0 var(--sp-1) 30px; }
    .addon-price-row label { font-size: var(--fs-sm); font-weight: 600; color: var(--slate); margin-right: var(--sp-2); display: inline; }
    .addon-price-input { width: 120px; padding: var(--sp-2) 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--slate); background: var(--white); display: inline-block; }
    .addon-price-input:focus { outline: none; border-color: var(--orange); box-shadow: var(--shadow-focus-sm); }

    /* Addon running total */
    .addon-running-total { background: var(--cream); border-radius: var(--radius-md); padding: 14px var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--slate); font-weight: 600; }
    .addon-running-total .dealer-cost { font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); }

    /* Admin fee reminder */
    .admin-fee-reminder { background: var(--accent-alpha-5); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--slate); border-left: 3px solid var(--orange); line-height: 1.6; }

    .step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--card-pad-lg); gap: var(--sp-3); }
    .btn-back { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) 20px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; transition: var(--transition); }
    .btn-back:hover { border-color: var(--slate); color: var(--slate); }
    .btn-next { background: var(--orange); color: var(--slate); border: none; border-radius: var(--radius-md); padding: 14px 28px; font-family: var(--font-body); font-size: var(--fs-sm-plus); font-weight: 600; cursor: pointer; transition: var(--transition); flex: 1; max-width: 300px; }
    .btn-next:hover { background: var(--orange-dark); transform: translateY(-1px); }

    .dont-know-link { font-size: var(--fs-sm); color: var(--orange-text); text-decoration: underline; cursor: pointer; display: inline-block; margin-top: var(--sp-1); }
    .info-tooltip { font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-tinted-04); border-radius: var(--radius-md); padding: 10px 14px; margin-top: var(--sp-2); display: none; line-height: 1.6; border-left: 3px solid var(--orange); }
    .info-tooltip.visible { display: block; }

    .field-error-msg { font-size: var(--fs-sm); color: var(--danger-deep); margin-top: var(--sp-1); display: none; }
    .field-error-msg.visible { display: block; }

    .cash-note { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; padding: var(--sp-4) 20px; background: var(--ok-alpha-10); border-radius: var(--radius-md); border-left: 3px solid var(--success); }

    /* Live preview box */
    .live-preview-box { background: var(--cream); border-radius: var(--radius-md); padding: var(--sp-4) 20px; margin-top: var(--sp-5); text-align: center; }
    .live-preview-label { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: var(--sp-1); }
    .live-preview-value { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--slate); font-weight: 700; }

    /* EMAIL GATE (reframed) */
    .email-gate-card { background: var(--slate); border-radius: var(--radius-xl); padding: 40px var(--sp-6); box-shadow: 0 4px 24px rgba(26,35,50,0.12); margin-bottom: var(--sp-5); text-align: center; }
    .email-gate-card h3 { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--white); margin-bottom: 10px; }
    .email-gate-card p { color: var(--on-dark-muted); font-size: var(--fs-sm); line-height: 1.65; margin-bottom: var(--sp-5); }
    .email-gate-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto var(--sp-3); flex-wrap: wrap; }
    .email-gate-form input { flex: 1; min-width: 140px; }
    .email-gate-form .btn-reveal { background: var(--orange); color: var(--slate); border: none; border-radius: var(--radius-md); padding: var(--sp-3) 20px; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; }
    .email-gate-form .btn-reveal:hover { background: var(--orange-dark); }
    .email-gate-privacy { font-size: var(--fs-xs); color: var(--on-dark-default); line-height: var(--lh-base); margin-top: var(--sp-3); }
    .email-gate-privacy a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; }
    .email-gate-privacy a:hover { color: var(--white); }

    /* EMAIL GATE SECTION */
    .email-gate-section { display: none; }
    .email-gate-inner { max-width: 560px; margin: 0 auto; padding: 80px 0 120px; }
    .email-gate-section.active { display: block; animation: fadeSlide 0.3s ease; }
    .email-gate-section .email-gate-card { border: none; }

    /* RESULTS */
    .results-container { display: none; }
    .results-inner { max-width: 720px; margin: 0 auto; padding: var(--sp-6) 0 80px; }
    .results-container.active { display: block; animation: fadeSlide 0.3s ease; }

    /* Score card */
    .score-card { background: var(--white); border-radius: var(--radius-xl); padding: 40px 36px; box-shadow: var(--shadow-card); margin-bottom: var(--sp-5); text-align: center; border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .score-gauge { width: 140px; height: 140px; border-radius: var(--radius-circle); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .score-gauge .num { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--white); }
    .score-gauge .out-of { font-size: var(--fs-xs); font-weight: 600; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: 0.08em; }
    .score-verdict { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--slate); margin-bottom: var(--sp-2); }
    .score-summary { color: var(--ink-2); font-size: var(--fs-sm-plus); line-height: var(--lh-relaxed); max-width: 520px; margin: 0 auto var(--sp-5); }

    /* Sub-score breakdown */
    .sub-scores { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 400px; margin: 0 auto; text-align: left; }
    .sub-score-row { display: flex; align-items: center; gap: var(--sp-3); }
    .sub-score-label { font-size: var(--fs-sm); font-weight: 600; color: var(--slate); min-width: 120px; flex-shrink: 0; }
    .sub-score-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: var(--radius-2xs); overflow: hidden; }
    .sub-score-bar-fill { height: 100%; border-radius: var(--radius-2xs); transition: width 0.8s ease; }
    .sub-score-value { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); min-width: 40px; text-align: right; flex-shrink: 0; }
    .methodology-link { font-size: var(--fs-sm); color: var(--orange-text); text-decoration: underline; cursor: pointer; margin-top: var(--sp-3); display: inline-block; }

    /* Breakdown cards */
    .breakdown-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--card-pad-lg) var(--sp-6); box-shadow: var(--shadow-card); margin-bottom: var(--sp-4); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .breakdown-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: var(--sp-3); }
    .breakdown-title { font-weight: 700; font-size: var(--fs-sm); color: var(--slate); display: flex; align-items: center; gap: 10px; }
    .breakdown-icon { width: 32px; height: 32px; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0; }
    .breakdown-badge { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--sp-1) 10px; border-radius: var(--radius-xl); white-space: nowrap; }
    .badge-green { background: var(--ok-alpha-10); color: var(--ok-deep); }
    .badge-yellow { background: var(--warn-tint); color: var(--warn-ink); }
    .badge-red { background: var(--danger-alpha-10); color: var(--danger-deep); }
    .badge-grey { background: var(--surface-tinted-06); color: var(--ink-2); }
    .breakdown-text { color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
    .breakdown-text strong { color: var(--slate); }
    .breakdown-bar { height: 6px; background: var(--border); border-radius: var(--radius-2xs); overflow: hidden; margin-top: 14px; }
    .breakdown-bar-fill { height: 100%; border-radius: var(--radius-2xs); transition: width 0.8s ease; background: var(--ink-2); }

    /* PAYMENT REALITY CHECK */
    .payment-reality-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--card-pad-lg) var(--sp-6); box-shadow: var(--shadow-card); margin-bottom: var(--sp-4); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .payment-reality-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); }
    .payment-reality-icon { width: 32px; height: 32px; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; background: var(--accent-alpha-10); color: var(--orange-text); flex-shrink: 0; }
    .payment-reality-title { font-weight: 700; font-size: var(--fs-sm); color: var(--slate); }
    .payment-big-number { text-align: center; padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
    .payment-big-amount { font-family: var(--font-heading); font-size: 2.8rem; color: var(--slate); line-height: 1; }
    .payment-big-freq { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-1half); }

    /* Payment frequency row */
    .payment-freq-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--sp-5); }
    .payment-freq-item { text-align: center; padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-md); background: var(--cream); }
    .payment-freq-item.highlighted { background: var(--accent-alpha-10); border: 1.5px solid var(--orange); }
    .payment-freq-item .freq-amount { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--slate); font-weight: 700; }
    .payment-freq-item .freq-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-top: 2px; }

    .pr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
    .pr-stat { padding: 14px; background: var(--cream); border-radius: var(--radius-md); text-align: center; }
    .pr-stat-label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: var(--sp-1half); }
    .pr-stat-value { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--slate); font-weight: 700; }
    .pr-stat-value.warn { color: var(--accent-active); } /* was --accent-large (2.83:1 on cream). Now 8.73:1. */

    /* Biweekly savings insight */
    .biweekly-savings-box { background: var(--ok-alpha-10); border-radius: var(--radius-md); padding: var(--sp-4) 20px; margin-bottom: var(--sp-5); border-left: 3px solid var(--success); font-size: var(--fs-sm); color: var(--slate); line-height: 1.65; }
    .biweekly-savings-box strong { color: var(--ok-deep); }

    /* Donut chart */
    .donut-chart-wrap { text-align: center; margin-bottom: var(--sp-5); }
    .donut-chart { width: 160px; height: 160px; border-radius: var(--radius-circle); position: relative; margin: 0 auto var(--sp-4); }
    .donut-chart::after { content: ''; position: absolute; inset: 30px; border-radius: var(--radius-circle); background: var(--white); }
    .donut-legend { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
    .donut-legend-item { display: flex; align-items: center; gap: var(--sp-1half); font-size: var(--fs-xs); color: var(--ink-2); }
    .donut-legend-swatch { width: 10px; height: 10px; border-radius: var(--radius-2xs); flex-shrink: 0; }

    .pr-term-heading { font-size: var(--fs-sm); font-weight: 700; color: var(--slate); margin-bottom: var(--sp-3); }
    .pr-term-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
    .pr-term-table th { text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); padding: var(--sp-2) 10px; border-bottom: 2px solid var(--border); }
    .pr-term-table td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--slate); }
    .pr-term-table .current-term { background: var(--accent-alpha-8); font-weight: 600; }
    .pr-term-table .current-term td { color: var(--orange-text); border-bottom-color: var(--accent-alpha-25); }
    .pr-insight-box { background: var(--slate); border-radius: var(--radius-md); padding: 20px var(--sp-5); border-left: 3px solid var(--orange); }
    /* On slate (.pr-insight-box bg). --orange (var(--orange)) on slate is 3.3:1 — AA Large only.
       --orange-on-dark (#F39455) is 6.9:1 AA on slate and reads brighter visually. */
    .pr-insight-label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange-on-dark); margin-bottom: var(--sp-2); }
    .pr-insight-text { font-size: var(--fs-sm); color: var(--on-dark-default); line-height: var(--lh-relaxed); margin: 0; }
    .pr-insight-text strong { color: var(--white); }
    .pr-hst-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); line-height: 1.6; }

    /* Affordability note */
    .affordability-note { background: var(--danger-alpha-10); border-radius: var(--radius-md); padding: 14px var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--slate); line-height: 1.6; border-left: 3px solid var(--danger); }

    /* Lease reality card */
    .lease-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }

    /* BACK-CALCULATION CARD */
    .back-calc-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--card-pad-lg) var(--sp-6); box-shadow: var(--shadow-card); margin-bottom: var(--sp-4); border-left: 4px solid var(--orange); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .back-calc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .back-calc-icon { width: 32px; height: 32px; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; background: var(--accent-alpha-10); color: var(--orange-text); flex-shrink: 0; }
    .back-calc-title { font-weight: 700; font-size: var(--fs-sm); color: var(--slate); }
    .back-calc-text { color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
    .back-calc-text strong { color: var(--slate); }

    /* Addon per-item breakdown table */
    .addon-breakdown-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 14px; }
    .addon-breakdown-table th { text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); padding: var(--sp-2) 10px; border-bottom: 2px solid var(--border); }
    .addon-breakdown-table td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--slate); }

    /* Negotiation card */
    .negotiation-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--card-pad-lg) var(--sp-6); box-shadow: var(--shadow-card); margin-bottom: var(--sp-4); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .negotiation-card h4 { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--slate); margin-bottom: var(--sp-4); }
    .talking-point { padding: 14px var(--sp-4); background: var(--cream); border-radius: var(--radius-md); margin-bottom: 10px; font-size: var(--fs-sm); color: var(--slate); line-height: 1.65; }
    .talking-point .tp-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-text); margin-bottom: var(--sp-1half); }
    .talking-point em { font-style: italic; color: var(--ink-2); }

    /* CTA RESULT */
    .cta-result-card { background: var(--slate); border-radius: var(--radius-xl); padding: 40px 36px; text-align: center; margin-top: var(--sp-5); }
    .cta-result-card h3 { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--white); margin-bottom: var(--sp-3); }
    .cta-result-card p { color: var(--on-dark-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin-bottom: var(--sp-5); max-width: 500px; margin-left: auto; margin-right: auto; }
    .btn-book { display: inline-block; background: var(--orange); color: var(--slate); text-decoration: none; border-radius: var(--radius-md); padding: var(--sp-4) 36px; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; transition: var(--transition); }
    .btn-book:hover { background: var(--orange-dark); transform: translateY(-1px); }
    .cta-sub { font-size: var(--fs-sm); color: var(--on-dark-default); margin-top: 14px; } /* was rgba(0.60) 6.53:1, now 11.7:1 */

    /* Change my numbers button */
    .change-numbers-wrap { text-align: center; margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
    .btn-change-numbers { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 14px 28px; font-family: var(--font-body); font-size: var(--fs-sm-plus); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: var(--transition); }
    .btn-change-numbers:hover { border-color: var(--slate); color: var(--slate); }

    /* Methodology section */
    .methodology-section { background: var(--white); border-radius: var(--radius-xl); padding: var(--sp-6) var(--sp-6); box-shadow: var(--shadow-card); margin-bottom: var(--sp-5); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .methodology-section h3 { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--slate); margin-bottom: var(--sp-4); }
    .methodology-section h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--slate); margin-bottom: var(--sp-1half); margin-top: var(--sp-4); }
    .methodology-section p { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); margin-bottom: var(--sp-2); }

    .disclaimer { background: var(--surface-tinted-04); border-radius: var(--radius-md); padding: var(--sp-4) 20px; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }


    /* PRINT STYLES */
    @media print {
      .nav, .mobile-nav, .mobile-cta-bar, .email-gate-section, .footer,
      .progress-inner, .form-inner, #quickCheckContainer, #progressContainer,
      .cta-section, .faq-section, .methodology-section,
      #btnChangeTop, #btnShareDeal, #shareDealCopied, #btnChangeNumbers,
      .btn-change-numbers, .negotiation-card .btn { display: none !important; }
      .results-container { padding: 0 !important; }
      body { font-size: 11pt; background: white !important; color: black !important; }
      .score-card, .breakdown-card, .payment-reality-card, .back-calc-card,
      .lease-reality-card, .negotiation-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd; margin-bottom: var(--sp-4); }
      .score-gauge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .pr-stat, .sub-score-bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      /* Print header */
      .print-header { display: block !important; text-align: center; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--orange); }
      .print-footer { display: block !important; text-align: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid #ddd; font-size: 9pt; color: #888; }
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .step-card, .score-card, .breakdown-card, .cta-result-card, .back-calc-card, .payment-reality-card, .email-gate-card, .negotiation-card, .methodology-section { padding: var(--sp-5) var(--sp-4); }
      .progress-inner { padding: 20px 0 0; }
      .progress-step span { display: none; }
      .email-gate-form { flex-direction: column; }
      .email-gate-form input, .email-gate-form .btn-reveal { width: 100%; }
      .payment-freq-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .pr-stats, .lease-stats { grid-template-columns: 1fr; }
      .term-btn-group { gap: var(--sp-1half); }
      .term-btn { padding: var(--sp-2) 10px; min-width: 44px; font-size: var(--fs-sm); }
    }

    /* ── DEAL CHAT TAB SWITCHER + CHAT UI ── */
    .qc-tab-switcher { display: flex; gap: 0; max-width: 680px; margin: 0 auto 0; }
    .qc-tab-btn { flex: 1; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border); background: var(--white); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: var(--transition); text-align: center; }
    .qc-tab-btn:first-child { border-radius: var(--radius-sm) 0 0 0; border-right: none; }
    .qc-tab-btn:last-child { border-radius: 0 var(--radius-sm) 0 0; }
    .qc-tab-btn.active { background: var(--white); color: var(--orange-text); border-bottom-color: var(--white); border-top: 2px solid var(--orange); }
    .qc-tab-btn:not(.active):hover { color: var(--orange-text); }

    .dc-panel { display: none; }
    .dc-panel.active { display: block; }

    .dc-chat-window { background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-md); min-height: 360px; display: flex; flex-direction: column; overflow: hidden; border-top: 3px solid var(--orange); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .dc-messages { flex: 1; padding: var(--sp-5) var(--sp-5) var(--sp-3); overflow-y: auto; max-height: 420px; }
    .dc-welcome { text-align: center; color: var(--ink-2); padding: 36px 20px; }
    .dc-welcome-title { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--slate); margin-bottom: var(--sp-1half); }
    .dc-welcome-text { font-size: var(--fs-sm); line-height: 1.6; max-width: 400px; margin: 0 auto var(--sp-4); }
    .dc-examples { text-align: left; display: inline-block; list-style: none; padding: 0; margin: 0; }
    .dc-examples li { font-size: var(--fs-sm); color: var(--ink-2); padding: var(--sp-1half) 0; cursor: pointer; transition: color 0.15s; }
    .dc-examples li:hover { color: var(--orange-text); }
    .dc-examples li::before { content: '\201C'; color: var(--orange); font-weight: 700; }
    .dc-examples li::after { content: '\201D'; color: var(--orange); font-weight: 700; }

    .dc-msg { margin-bottom: var(--sp-4); animation: fadeSlide 0.25s ease; }
    .dc-msg-user { text-align: right; }
    .dc-msg-user .dc-bubble { background: var(--slate); color: var(--white); display: inline-block; text-align: left; border-radius: 14px 14px var(--radius-xs) 14px; padding: var(--sp-3) var(--sp-4); max-width: 85%; font-size: var(--fs-sm); line-height: var(--lh-base); }
    .dc-msg-bot .dc-bubble { background: var(--cream); color: var(--slate); display: inline-block; border-radius: 14px 14px 14px var(--radius-xs); padding: var(--sp-3) var(--sp-4); max-width: 90%; font-size: var(--fs-sm); line-height: 1.65; }
    .dc-msg-bot .dc-bubble strong { color: var(--slate); }
    .dc-msg-bot .dc-bubble .dc-verdict { font-family: var(--font-heading); font-size: var(--fs-base); color: var(--orange-text); margin-bottom: var(--sp-1half); }
    .dc-msg-bot .dc-bubble .dc-detail { margin: var(--sp-1half) 0; }
    .dc-msg-bot .dc-bubble .dc-links { margin-top: 10px; padding-top: var(--sp-2); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
    .dc-msg-bot .dc-bubble .dc-links a { color: var(--orange-text); text-decoration: none; font-weight: 600; margin-right: 14px; }
    .dc-msg-bot .dc-bubble .dc-links a:hover { text-decoration: underline; }

    .dc-input-bar { display: flex; gap: var(--sp-2); padding: 14px var(--sp-4); border-top: 1px solid var(--border); background: var(--white); }
    .dc-input { flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3) 14px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--slate); outline: none; transition: border-color var(--duration-fast); }
    .dc-input:focus { border-color: var(--orange); }
    /* #aaa = ~2.5:1 on white (FAIL AA). --ink-3 = #8A8578 = 3.67:1 AA Large
       — placeholder text is functional UI guidance, not body copy, and AA
       Large applies. Switch to the token. */
    .dc-input::placeholder { color: var(--ink-3); }
    .dc-send { background: var(--orange); color: var(--slate); border: none; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: background var(--duration-fast); white-space: nowrap; }
    .dc-send:hover { background: var(--orange-dark); }
    .dc-send:disabled { opacity: 0.5; cursor: not-allowed; }

    .dc-skip-wrap { text-align: center; margin-top: var(--sp-4); }
    .dc-skip-wrap button { background: none; border: none; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; text-decoration: underline; }

    @media (max-width: 640px) {
      .dc-messages { padding: var(--sp-4) 14px var(--sp-2); max-height: 340px; }
      .dc-input-bar { padding: 10px var(--sp-3); }
      .dc-welcome { padding: var(--sp-5) 14px; }
    }