/* ─────────────────────────────────────────────────────────────
   Home page styles: navy / slate restyle matching the DealPilot site.
   Loaded after the shared style.css by templates/index.html only.
   ───────────────────────────────────────────────────────────── */
:root {
    --pv-navy: #1B365D;
    --pv-navy-dark: #122542;
    --pv-slate: #5B6472;

    --bg-color: #F7F8FA;
    --text-main: #1F2937;
    --text-dim: #5B6472;
    --border-color: #E2E5EA;
    --accent-soft: #EEF2F7;

    /* Flatter shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-xl: 0 8px 20px rgba(16, 24, 40, 0.07);

    /* Graphics palette: change colors here, not in the markup */
    --pv-good: #1f7a4d;          /* "with ExitEdge" values, check marks */
    --pv-bad: #a63a32;           /* "without ExitEdge" values, x marks, distress */
    --pv-surface: #F7F8FA;       /* neutral tiles and rows */
    --pv-tint: #EEF2F7;          /* navy-tinted callouts and badges */
    --pv-line: #E2E5EA;          /* hairlines */
    --pv-line-strong: #C9D2DE;   /* stronger outlines (chips, search box) */
    --pv-ai-bg: #F3EAFA;         /* AI-generated content */
    --pv-ai-line: #E6D5F5;
    --pv-ai-text: #3B1F6E;
    --pv-ai-label: #7C3AED;
    --pv-accent: #2563EB;        /* data and action: scores, bars, signal chips (same blue as buttons) */
    --pv-accent-tint: #EEF4FF;
    --pv-accent-line: #C9DAFB;
    --pv-accent-text: #1D4ED8;
    --pv-good-tint: #F0F7F2;
    --pv-good-line: #CDE5D5;
    --pv-bad-tint: #FBF2F1;
    --pv-bad-line: #F0D7D4;
    --pv-warn: #8A5A12;          /* caution signals */
    --pv-warn-tint: #FBF3E4;
    --pv-warn-line: #EEDDB8;
}

/* ── Line icons that replace the emoji ── */
.pv-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
span:has(> .pv-icon:only-child) { color: var(--pv-navy); }

.pv-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1f7a4d;
    margin-right: 6px;
    vertical-align: 1px;
}

/* ── Hero: dark navy ── */
.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    min-height: auto;
    padding: 7rem 0 4rem;
}
.hero-badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-weight: 600;
}
.hero-title { color: #fff; }
.hero-subtitle { color: rgba(255, 255, 255, 0.78); }
.hero-text > p[style] { color: rgba(255, 255, 255, 0.6) !important; }
.hero .btn-primary { background: #fff; color: var(--accent-secondary); }
.hero .btn-primary:hover { background: #EEF2F7; }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.hero .btn-ghost:hover { color: #fff; border-color: #fff; }

/* Pillar A–D switcher under the hero card */
.nav-connector { background: rgba(255, 255, 255, 0.25); }
.nav-dot:nth-child(n) { border-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.8); }
.nav-dot:nth-child(n).active { background: #fff; border-color: #fff; color: var(--pv-navy); }

/* ── Cards: thinner, flatter, squarer ── */
.dashboard-preview {
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.dashboard-widget { border-radius: 10px; box-shadow: none; }
.dashboard-badge {
    background: #EEF2F7;
    color: var(--pv-navy);
    border-radius: 6px;
}
.feature-card { border-radius: 10px; }
.feature-card:hover { border-color: #C9D2DE; transform: none; box-shadow: var(--shadow-lg); }

/* ── Labels, headings, numbers: navy instead of bright blue ── */
.section-label { color: var(--pv-slate); font-weight: 600; letter-spacing: 1.2px; }
.section-title { color: var(--pv-navy-dark); }
.stat-big { color: var(--pv-navy); font-weight: 700; }
.problem-section .section-description[style] { color: var(--pv-navy) !important; font-weight: 600 !important; }

/* ── Comparison table ── */
.comparison-table table { border: 1px solid var(--border-color); box-shadow: none; border-radius: 10px; }
.comparison-table thead th { background: var(--pv-navy-dark); font-weight: 600; }
.comparison-table th.our-column { background: var(--pv-navy); }
.comparison-table .our-column { background: rgba(27, 54, 93, 0.04); }
.comparison-table .our-column .check-icon,
.comparison-table .check-icon { color: #1f7a4d; }
.comparison-table .cross-icon { color: #9AA3AF; }

.comparison-highlight {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: none;
}
.comparison-highlight strong { color: var(--pv-navy); }

/* ── Hero (desktop only): constant height across views A–D ──
   All four views share one grid cell, so the slot is as tall as the tallest view and the
   hero never grows/shrinks. On phones/tablets (<= 968px) the card sizes to the visible view. */
@media (min-width: 969px) {
    .dashboard-slider { display: grid; }
    .dashboard-view,
    .dashboard-view.active {
        grid-area: 1 / 1;
        align-self: center;
        position: relative;
        top: auto;
        left: auto;
    }
}

/* ── Mobile fixes ── */
/* iPhones zoom into form fields whose text is under 16px; keep field text at 16px on phones/tablets. */
@media (max-width: 968px) {
    .modal input:not([type="checkbox"]):not([type="radio"]),
    .modal select,
    .modal textarea { font-size: 16px !important; }
}

.pv-pillar-label {
    display: inline-block;
    background: #EEF2F7;
    color: var(--pv-navy);
    border: 1px solid #D5DDE8;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}