/* ==========================================================================
   CostGuard – Public About
   ──────────────────────────────────────────────────────────────────────────
   Rules only the public about page uses. The vocabulary it is built from —
   aliases, rhythm, type, the centred hero, the quiet columns, the split row,
   the chips, the band, the ledger and the closing panel — lives in
   /css/costguard-public.css, which loads first.

   No colour literals below: every value resolves through --cg-*.

   The page alternates seven shapes so no two neighbours look alike:
     hero        centred statement, no box (.cg-pub-hero-center)
     what        full-bleed band, a heading beside its link, four quiet columns
     story       a split row under a hairline, heading beside three paragraphs
     belief      one centred sentence at display size
     principles  full-bleed band, sticky editorial column, a ledger
     audience    a split row under a hairline, the readers as chips
     closing     centred statement, on ink in both themes (.cg-pub-promo-center)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the sentence is longer than a price headline, so it gets a wider
   measure, and the lead is the last thing in the section
   -------------------------------------------------------------------------- */

.cg-about .cg-about-hero .cg-pub-display-xl {
    max-width: 26ch;
}

.cg-about .cg-about-hero .cg-pub-lead {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   What it does — the heading and its link share a row from md up
   -------------------------------------------------------------------------- */

.cg-about-band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--cg-pub-space-3) var(--cg-pub-space-4);
    margin-bottom: 3rem;
}

.cg-about .cg-about-band-head .cg-pub-display-lg {
    max-width: 20ch;
}

/* Four columns auto-fit to three and one on a tablet; two and two reads better. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .cg-about .cg-pub-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Story — the first paragraph leads, the other two follow at body size
   -------------------------------------------------------------------------- */

.cg-about-prose {
    display: grid;
    gap: var(--cg-pub-space-3);
    max-width: 40rem;
}

.cg-about .cg-about-prose .cg-pub-lead {
    color: var(--cg-pub-ink);
}

.cg-about .cg-about-prose .cg-pub-body {
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Belief — one sentence, centred
   -------------------------------------------------------------------------- */

.cg-about .cg-about-belief {
    max-width: 22ch;
    margin-inline: auto;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Principles — the two links stack under the lead
   -------------------------------------------------------------------------- */

.cg-about-links {
    display: grid;
    justify-items: start;
    gap: var(--cg-pub-space-1);
}