/* ==========================================================================
   CostGuard – Public Product
   ──────────────────────────────────────────────────────────────────────────
   Rules only the public product page uses. The vocabulary it is built from —
   aliases, rhythm, type, the product frame, mock previews, the bento, 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 six shapes so no two neighbours look alike:
     hero          left-aligned statement beside the product in a window frame
     overview      centred statement, no box
     capabilities  a bento of four previews, the second wide card mirrored
     how it works  full-bleed band, sticky editorial column, numbered ledger
     audience      a quiet two-column row under a hairline (.cg-pub-split)
     closing       centred statement, on ink in both themes (.cg-pub-promo-center)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the statement and the product side by side
   -------------------------------------------------------------------------- */

.cg-product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--cg-pub-gap) 4rem;
}

@media (min-width: 992px) {
    .cg-product-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Half a container wide, so the headline steps down from the home page's
   full-width scale. */
.cg-product .cg-product-hero-copy .cg-pub-display-xl {
    max-width: 14ch;
    margin-bottom: var(--cg-pub-space-4);
    font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem);
    line-height: 1.02;
}

html[lang="fa"] .cg-product .cg-product-hero-copy .cg-pub-display-xl,
html[lang="ar"] .cg-product .cg-product-hero-copy .cg-pub-display-xl,
html[lang="zh"] .cg-product .cg-product-hero-copy .cg-pub-display-xl {
    line-height: 1.3;
}

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

/* The shared frame is centred under a headline; here the grid places it. */
.cg-product-hero-frame {
    margin-top: 0;
}

.cg-product-hero-frame-body {
    padding: var(--cg-pub-space-3);
}

@media (min-width: 768px) {
    .cg-product-hero-frame-body {
        padding: var(--cg-pub-space-4);
    }
}

/* --------------------------------------------------------------------------
   Overview — a centred statement
   -------------------------------------------------------------------------- */

.cg-product .cg-pub-center .cg-pub-heading {
    max-width: 24ch;
    margin-bottom: var(--cg-pub-space-3);
}

.cg-product .cg-product-statement {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Capabilities — the second wide card mirrors the first, so the bento reads
   as a weave rather than a stack
   -------------------------------------------------------------------------- */

.cg-pub-bento > .cg-product-bento-flip {
    background:
        radial-gradient(34rem 20rem at 0 0, var(--cg-accent-glow), transparent 70%),
        var(--cg-pub-band-bg);
}

@media (min-width: 768px) {
    .cg-product-bento-flip > .cg-pub-bento-wide-mount {
        order: -1;
    }
}

/* --------------------------------------------------------------------------
   How it works — the ledger's icon slot carries the step number
   -------------------------------------------------------------------------- */

.cg-product-numbered {
    counter-reset: cg-product-step;
}

.cg-product-numbered > li {
    counter-increment: cg-product-step;
    align-items: start;
}

.cg-product-number {
    min-width: 3rem;
    font-family: var(--cg-font-display);
    font-weight: var(--cg-display-weight);
    font-size: 2.25rem;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--cg-accent-text);
}

.cg-product-number::before {
    content: counter(cg-product-step, decimal-leading-zero);
}