/* ==========================================================================
   CTA BAND — full-width closing call-to-action   (visual only)
   ==========================================================================
   A centred heading + sub + button on a full-width brand band.

   Build: an ARTICLE (or element_group) carrying `cta-band bleed-x bg-navy`
   with three text/link children:
        <h2>It takes one conversation…</h2>       (text)
        <p>No pitch decks. No obligation…</p>      (text)
        <a class="btn">Start a Conversation</a>     (in a text element)

   `bleed-x bg-navy` spans the viewport and paints the band; this file only
   handles the centred, capped content. Heading white comes from the bg-navy
   heading rule in website.css.
   ========================================================================== */
.cta-band {
    --cta-max: calc(1200px + 2 * var(--page-gutter));
    padding-block: clamp(48px, 5.5vw, 88px);   /* every board: 88, not the 96 section rhythm */
    text-align: center;
    /* The content element (text) caps and centres; the heading and copy fill that
       width rather than carrying their own max-widths. The cap is a DIAL because
       the boards do not use one value.

       MEASURED (24 Sep) — the `cta inner` board is **1200 wide at x600** on Plan
       Administration, For CPAs, Advisor Partnership, Case Studies and What We Do,
       and 1156 on Complex Plan Design. That is 66.7% of the 1800 container, not the
       50% this was capped at, which is exactly why John reported the band as too
       narrow on four separate pages. Switching is a deliberate outlier at 900 (its
       H2 is set to wrap onto two lines at 760) and sets its own value.

       Rhythm, identical on every board: 88px of section padding, H2 fs45 centred,
       24px from the H2's descender to whatever follows, 24px from a sub-line to the
       button, button 197x46. */
    /* The board's 1200 is the CONTENT width, and this element also carries
       `padding-inline: var(--page-gutter)` from `.band > *` — so the cap has to add
       the gutter back or the text lands 1088 wide at a 1400 viewport. Same
       `calc(Npx + 2 * gutter)` convention as contact.css and why-cornerstone.css. */
    > * {
        max-width: var(--cta-max);
        margin-inline: auto;
    }
    h2 {
        margin-top: 0;
        margin-bottom: 24px;          /* board: H2 descender -> next element */
    }
    p {
        color: var(--text-on-dark-dim);
        margin-bottom: 24px;          /* board: sub-line -> button */
    }
    a.btn { margin-top: 0; margin-bottom: 0; }
    p:last-child { margin-bottom: 0; }   /* the button's own <p>: the band's padding is the only space below it */

    /* On the blue band the button is a white pill with navy text; red on hover. */
    a.btn, a.btn:link {
        background-color: var(--white);
        color: var(--prime);
    }
    a.btn:hover { background-color: var(--second); color: var(--white); }
}