/* ============================================================
   ChatLemur — /vision deep-dive page styles (2026-07-14)
   Page-specific ONLY. Shared systems come from:
     /static/styles.css            (tokens, navbar, footer)
     /static/css/nav-system.css    (grouped nav + drawer)
     /static/css/homepage.css      (section/module/guidance patterns)
     /static/css/device-frame.css  (iPhone frame — DO NOT fork)
   Honesty contract (ACCC): the LIVE perception layer leads; the
   navigation layer is always badged "In development"; every framed
   shot is a real development-build screenshot.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.vision-hero {
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124, 58, 237, 0.20) 0%, transparent 70%),
        var(--hp-bg-deep, #0a0a0f);
    padding: 72px 0 64px;
}

.vision-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: center;
}

.vision-hero-copy .hero-eyebrow { margin-bottom: 18px; }

.vision-hero-headline {
    font-family: var(--font-display, inherit);
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--text-primary);
    margin: 0 0 18px;
}

.vision-hero-headline .grad {
    background: linear-gradient(100deg, #a78bfa 0%, #7C3AED 55%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vision-hero-sub {
    font-size: clamp(1rem, 2.4vw, 1.16rem);
    color: #c4c4d4;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 0 22px;
}

/* Ambition line — sits between the honest sub-copy and the status pills;
   reuses .vision-hero-sub type, just pulled up a touch since it follows
   another paragraph rather than the headline. */
.vision-hero-ambition { margin-top: -6px; }

/* Status pills row — reuses .module-status colour language */
.vision-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.vision-status-row li { display: inline-flex; }

/* CTA row */
.vision-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Small honesty line under the CTAs */
.vision-hero-note {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: #9a9ab3;
    line-height: 1.55;
    max-width: 520px;
}

/* Hero phone — the framed Live Guidance shot */
.vision-hero-device { margin: 0; text-align: center; }
.vision-hero-device .device-frame { margin: 0 auto; }
.vision-hero-device figcaption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: #9a9ab2;
    line-height: 1.55;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 960px) {
    .vision-hero { padding: 52px 0 48px; }
    .vision-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .vision-hero-copy { text-align: center; }
    .vision-hero-sub { margin-left: auto; margin-right: auto; }
    .vision-status-row, .vision-hero-ctas { justify-content: center; }
    .vision-hero-note { margin-left: auto; margin-right: auto; }
}

/* ── "Development build" badge (shared by figure captions) ── */
.vision-dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c4b5fd;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.vision-dev-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
}

/* ── Two-column feature rows: copy beside a framed phone ──── */
.vision-feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}
.vision-feature-row + .vision-feature-row { margin-top: 72px; }

.vision-feature-device { margin: 0; text-align: center; }
.vision-feature-device figcaption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: #9a9ab2;
    line-height: 1.55;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 860px) {
    .vision-feature-row { grid-template-columns: 1fr; gap: 36px; }
    /* Phone first on mobile, copy after — the shot is the hook */
    .vision-feature-row .vision-feature-device { order: -1; }
}

/* ── The nine-tools checklist ─────────────────────────────── */
.vision-tools-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 18px;
}
.vision-tools-list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.95rem;
    color: #b4b4c8;
    line-height: 1.5;
}
.vision-tools-list li strong { color: var(--text-primary); font-weight: 700; }
.vision-tools-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.55);
}
.vision-tools-list li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(0.28em + 3px);
    width: 7px;
    height: 4px;
    border-left: 2px solid #6ee7b7;
    border-bottom: 2px solid #6ee7b7;
    transform: rotate(-45deg);
}

/* ── Principle band: "Assists everything. Replaces nothing." ── */
.vision-principle {
    background: var(--hp-bg-section, #0d0d17);
    border-top: 1px solid #1d1d2e;
    border-bottom: 1px solid #1d1d2e;
    padding: 64px 0;
    text-align: center;
}
.vision-principle blockquote {
    margin: 0 auto;
    max-width: 720px;
}
.vision-principle .vision-principle-line {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.vision-principle .vision-principle-line .grad {
    background: linear-gradient(100deg, #a78bfa 0%, #7C3AED 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vision-principle p {
    font-size: 1.02rem;
    color: #b4b4c8;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 640px;
}

/* ── Staged-validation steps (ordered, semantic) ──────────── */
.vision-steps {
    counter-reset: vstep;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
    max-width: 640px;
}
.vision-steps li {
    counter-increment: vstep;
    position: relative;
    padding: 16px 18px 16px 58px;
    background: #131320;
    border: 1.5px solid #2a2a40;
    border-radius: 14px;
    color: #b4b4c8;
    font-size: 0.95rem;
    line-height: 1.6;
}
.vision-steps li strong { color: var(--text-primary); }
.vision-steps li::before {
    content: counter(vstep);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.16);
    border: 1px solid rgba(124, 58, 237, 0.5);
    color: #c4b5fd;
    font-weight: 800;
    font-size: 0.85rem;
}

/* ── Perception layer annotation graphic (unframed — NOT a phone) ── */
/* The annotated footpath scene is a visualization of the engine's
   output: boxes, labels, distances drawn on a real camera frame.
   It is NOT a phone screenshot so it must NOT use .device-frame.  */
.vision-annotation-figure {
    margin: 0;
    text-align: center;
}
.vision-annotation-img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, 0.28);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.45),
        0 1px 4px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    margin: 0 auto;
}
.vision-annotation-caption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: #9a9ab2;
    line-height: 1.55;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Closing CTA band ─────────────────────────────────────── */
.vision-cta-band {
    background:
        radial-gradient(ellipse 70% 90% at 50% 110%, rgba(124, 58, 237, 0.22) 0%, transparent 70%),
        var(--hp-bg-deep, #0a0a0f);
    padding: 72px 0;
    text-align: center;
}
.vision-cta-band h2 {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 14px;
}
.vision-cta-band p {
    font-size: 1.02rem;
    color: #b4b4c8;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto 26px;
}
.vision-cta-band .vision-hero-ctas { justify-content: center; }