/* CHG-WEB-004 / PHASE-3 / STEP-04C — Corporate Matrix product page.
   Page-specific composition glue only: marketing-section/section-split/
   trajectory-sequence/mechanism-step-index/insight-statement are all
   reused, unedited, from ../../styles.css.

   Hero grid geometry directly applies PRODUCT_PAGE_VISUAL_SYSTEM_v0.1
   (OWNER APPROVED / LOCKED), using the same mechanism validated on
   /business/sales-matrix/ (CHG-WEB-004/PHASE-3/STEP-04B.3): a page-
   scoped .corp-hero-grid class (added only to this page's own
   .hero-grid element — ../../styles.css's shared .hero-grid rule is
   NOT touched, so the Homepage's Hero+Demo layout and /business/
   sales-matrix/'s own Hero are both unaffected) overrides align-items
   to stretch at 1024px+, giving the copy and visual columns equal box
   height (top edges already aligned by the shared rule; bottom edges
   now coincide too). The visual panel becomes a flex column whose svg
   child fills the remaining height via flex:1 1 0%/min-height:0 —
   scoped to the SAME 1024px+ query as the stretch override, so mobile/
   tablet (where .hero-grid stays a plain, unconstrained column) never
   applies flex-grow to a parent with no imposed height, avoiding the
   collapse-to-zero risk documented in STEP-04B.3. The svg's own
   width:100% plus the default preserveAspectRatio="xMidYMid meet"
   (contain-like: scales to fit without cropping or overflowing) is
   the required geometry; no transform:scale() is used anywhere in
   this file. */

.corp-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;
}

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

.corp-hero-visual-caption {
    flex: 0 0 auto;
    margin: var(--space-5) 0 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

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

/* Chapter 3's canonical mandatory-principle statement — same visual
   treatment as the shared .insight-statement (reused directly, not
   redefined) applied to a page-specific wrapper only for its own top
   spacing, matching the "canonical statement gets distinguished
   treatment" convention already established on /personal/ and
   /business/sales-matrix/. */
.corp-principle-statement {
    margin: var(--space-4) 0;
}

/* Compact "what Corporate Matrix doesn't do" block inside Chapter 4 —
   same pattern as /business/sales-matrix/'s .sales-boundaries. */
.corp-boundaries {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--hairline);
}

.corp-boundaries-heading {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.corp-boundaries-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corp-boundaries-list li {
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.5;
}