/**
 * COO program-tier landing page — scoped styles.
 *
 * Cap doc: [[Projects/Provarro Website/Capabilities/Program Tier Pages]] §2
 * Story: nx-bc7440cd74f6
 *
 * Intentionally thin. Header, footer, hero, section rhythm, narrative blocks,
 * lists, contact form and buttons are ALL inherited from /styles.css — the same
 * shared shell the homepage and the other subpages consume. This file exists
 * only for the two things the shared sheet has no class for, and it is scoped
 * to this page so nothing here can regress another surface.
 *
 * Palette note: every color below resolves through the web-scoped Provarro
 * Design System custom properties in /styles.css (--color-brand-indigo
 * #4A4E8C et al.). The collateral/PDF palette (navy #3e4e82 / gold #ffbc59)
 * used by the print one-pager renderings under src/previews/ is deliberately
 * NOT used here — different medium, different palette.
 */

/* ── Hero ───────────────────────────────────────────────────────────────────
   The homepage hero carries a subhead AND a lede; this page's S1 copy has a
   single supporting paragraph, so pull the lede up to sit directly under the
   headline rather than inheriting the two-paragraph gap. */
.coo-hero h1 {
    margin-bottom: var(--space-md);
}

/* ── Factual lists ("How it runs", "What you work on") ──────────────────────
   NOT /styles.css .narrative-list. That class is display-face, marker-less and
   generously sized because the homepage uses it for short rhetorical triads
   ("How your numbers compare." / "Where your margins should be.") where each
   item is one short line and the run-on reading is the intended effect.

   These two lists are the opposite: factual, longer, and they wrap. Rendered
   with .narrative-list they lost their item boundaries entirely — verified in
   the preview screenshots at both widths, and worse at 390px where nearly
   every item wraps to two lines and "How it runs" reads as one undifferentiated
   block of serif prose. So: body face, explicit markers, and hanging indent so
   a wrapped second line stays visually inside its own item. */
.coo-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    max-width: var(--max-width-text);
}

.coo-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-foreground);
}

.coo-list li:last-child {
    margin-bottom: 0;
}

.coo-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

@media (min-width: 768px) {
    .coo-list li {
        font-size: 1.125rem;
    }
}

/* ── Owner callout ──────────────────────────────────────────────────────────
   "The part worth showing the owner" is the single owner-facing beat on the
   page and is written to be forwarded to the owner. It gets a card treatment
   so it reads as a liftable unit rather than another body paragraph.

   Mirrors the .pain-triad shape from /styles.css (accent left rule + card
   ground) rather than .section-indigo: that class sets a dark indigo
   background but carries NO light-text descendant rules, so a narrative block
   placed inside it renders dark body copy on a dark ground. */
.coo-owner-callout {
    margin: var(--space-lg) 0 0;
    padding: var(--space-lg) var(--space-xl);
    border-left: 3px solid var(--color-brand-indigo);
    background-color: var(--color-card);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

.coo-owner-callout p:last-child {
    margin-bottom: 0;
}