/* ==========================================================================
   CostGuard – Public Home
   ──────────────────────────────────────────────────────────────────────────
   Rules only the public home page uses: its centred hero. Everything a second
   public page can share — aliases, rhythm, type, primitives, the product
   frame, mock previews, columns, the band, steps, the bento, the closing panel
   and the reveal — lives in /css/costguard-public.css, which loads first.

   This file also carries the cookie-consent block, because it is loaded on
   every public route.

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

   The page alternates five shapes so no two neighbours look alike:
     hero        centred statement, the product in a window frame
     features    three quiet columns under a hairline
     dashboard   one big product frame, then four figures
     why         full-bleed band, editorial two-column, numbered steps
     showcase    a bento of three previews
     promo       the closing statement, on ink in both themes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — a centred statement, then the product as the hero object
   -------------------------------------------------------------------------- */

.cg-home-hero > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cg-home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 58rem;
    text-align: center;
}

.cg-home-hero-copy .cg-pub-display-xl {
    max-width: 17ch;
    margin-bottom: var(--cg-pub-space-4);
}

.cg-home-hero-copy .cg-pub-lead {
    margin-bottom: var(--cg-pub-space-4);
}

.cg-home-hero-copy .cg-pub-actions {
    justify-content: center;
    margin-bottom: var(--cg-pub-space-4);
}