/* CHG-WEB-004 / PHASE-3 / STEP-04B — Sales Matrix product page.
   Page-specific composition glue only: marketing-section/section-split/
   trajectory-sequence/mechanism-step-index are all reused, unedited,
   from ../../styles.css. This file adds only what those shared rules
   don't already provide: the Hero's restrained node diagram and a
   compact "what this doesn't replace" list inside Chapter 3. */

/* CHG-WEB-004 / PHASE-3 / STEP-04B.1 — Hero visual scale correction.
   BEFORE (STEP-04B): max-width:480px; padding:var(--space-5); flex:0.95
   at 1024px+; caption at var(--text-small)/text-secondary/no weight.
   AFTER: no fixed px cap (matches .hero-copy's own var(--content-max)
   ceiling instead of an arbitrary smaller one), flex:1 (equal footing
   with .hero-copy's flex:1.05), taller viewBox (see index.html) so the
   panel gets real height instead of width-only growth, and the caption
   restyled to read as an integrated label line, not a small aside. No
   transform:scale() anywhere — every change here is a real box-size/
   viewBox change. */
/* CHG-WEB-004 / PHASE-3 / STEP-04B.2 — proportion/spacing standard pass.
   .sales-hero-visual's padding was var(--space-7) var(--space-6)
   (48px/32px), well above every other bordered panel in the shared
   system (.business-product and .ai-comparison-col both use a flat
   var(--space-4)=16px; .site-menu-panel uses var(--space-3)=12px) — an
   ad hoc, section-level padding value on what is a card-level element,
   which read as disproportionate next to the chapter blocks below it
   (all of which inherit .marketing-section's own, unrelated padding
   scale). Brought down to a single var(--space-5)=24px on all sides —
   one step more generous than the smallest existing cards, appropriate
   for this panel's larger content, but still clearly in the same
   "bordered panel" weight class as .business-product/.ai-comparison-col
   rather than borrowing a full-section padding value. */
/* CHG-WEB-004 / PHASE-3 / STEP-04B.3 — Hero grid geometry correction.
   STEP-04B.2's padding fix was necessary but not sufficient: the panel
   itself had no height relationship to .hero-copy at all — at 1024px+
   .hero-grid's own align-items:flex-start (../../styles.css, unedited,
   shared with the Homepage) only aligns the two columns' TOP edges;
   nothing constrained the visual panel's BOTTOM edge to match the copy
   column's, so a tall SVG could run well past copy's natural height.
   Fix: .sales-hero-grid (a page-scoped class added only to THIS page's
   own .hero-grid element in index.html — ../../styles.css's shared
   .hero-grid rule is not touched, so the Homepage's Hero is
   unaffected) overrides align-items to stretch at 1024px+, making both
   flex children resolve to the SAME box height (whichever is
   intrinsically taller — normally .hero-copy). .sales-hero-visual
   becomes a flex column itself so its own svg can flex:1 to fill
   whatever height stretch gives the panel (minus padding and the
   caption's own natural height), with min-height:0 so it can shrink
   below its raw intrinsic size instead of forcing the row taller. The
   svg's width:100% plus the default preserveAspectRatio="xMidYMid
   meet" (explicit now, for clarity) is the "object/contain-like"
   behavior requested: the diagram scales down or up to fit whatever
   box it's given, in both dimensions, without ever being cropped or
   distorted, and without overflowing the column. No transform:scale()
   is used — every change here is a real box-model change (align-
   items, flex-basis, flex-grow, viewBox). The diagram's own artwork
   (index.html) was redrawn at a more moderate, landscape-leaning
   viewBox (0 0 420 200, was 0 0 300 420) — closer to hero-copy's own
   typical width:height ratio — so the contain-fit doesn't have to
   letterbox as aggressively as the previous very tall (1.4:1) version
   would have. */
.sales-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;
}

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

.sales-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) {
    .sales-hero-grid {
        align-items: stretch;
    }
    .sales-hero-visual {
        flex: 1;
        max-width: var(--content-max);
        justify-content: center;
    }
    .sales-hero-visual svg {
        /* Only meaningful once .sales-hero-grid gives this panel an
           explicit stretched height to fill — height:auto (base rule
           above) still applies below this breakpoint, where the panel
           has no externally-imposed height to fit into. */
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }
}

.sales-boundaries {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--hairline);
}

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

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

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