/* CHG-WEB-004 / PHASE-3 / STEP-04A.1 — Personal Matrix density
   correction. Page-specific composition glue only: the actual visual
   system (marketing-section / section-split / insight-statement /
   trajectory-sequence / ai-comparison-grid) is entirely reused, unedited,
   from ../styles.css. This file adds only what's needed to combine
   Insight+Direction into one continuous right-column flow instead of
   two separate full-width bands. */

.chapter-continuation {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline);
}

.chapter-subheading {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* CHG-WEB-004 / PHASE-4 / STEP-02C.2 — Personal Matrix Hero visual,
   implemented in the accepted /business/ Hero's own visual architecture
   (same page-scoped .hero-grid override + bordered visual-panel pattern
   as .bizhub-hero-grid/.bizhub-hero-visual) — only the SVG metaphor
   inside the panel is Personal-Matrix-specific. No caption rule is
   defined here (unlike Business Hub) because this Hero deliberately
   carries no caption/label copy — the geometry explains itself, per the
   owner-approved STEP-02C.1 design contract. No CSS transform of any
   kind is used anywhere in this file. */

.personal-hero-visual {
    max-width: var(--content-max);
    padding: var(--space-5);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
}

.personal-hero-visual svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text-muted);
}

@media (min-width: 1024px) {
    .personal-hero-grid {
        align-items: stretch;
    }
    .personal-hero-visual {
        flex: 1;
        max-width: var(--content-max);
        justify-content: center;
    }
    .personal-hero-visual svg {
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }
}
