/* ==========================================================================
   SWITCHING TO CORNERSTONE   body.page-switching-to-cornerstone
   ==========================================================================
   Sections by id: #one-meeting, #scales, #independent, #moments, #closing.
   Everything else is a shared component (hero__frame, steps, bar-col,
   cta-band).
   ========================================================================== */

body.page-switching-to-cornerstone .hero__frame {
    --hero-frame-max: 94.6%;            /* the board's 1702 of 1800 */
    &::after { content: none; }         /* the steps' line is the only rule */
}

/* "One meeting per client": the CTA band at 98.2% of the container; 16px
   eyebrow → H2, 24px H2 → button, 70px below */
#one-meeting {
    --cta-max: 98.2%;
    padding-bottom: 70px;
    .eyebrow { color: var(--white); margin-bottom: 16px; }
    h2 { margin: 0 0 24px; }
    a.btn { margin-top: 0; }
}

/* The process scales: navy eyebrow; blue columns (the 100% one keeps its navy);
   a caption line under each column label; no line under the chart */
#scales {
    .eyebrow { color: var(--heading); }
    .bcx:not(.bcx--hi) .bcx-bar { background: #6E9AC4; }
    .bc-plot { border-bottom: 0; }
    .bcx-lab > span {
        display: block;
        font-weight: 400;
        color: var(--text-muted);
        font-size: clamp(0.85rem, 1vw, 1rem);
        line-height: 1.3;
        padding-top: 0.35rem;
    }
}

/* the copy and the chart stack at 992, not 600: half a tablet is too narrow
   for three labelled columns (Bob, 13 Oct) */
@media only screen and (max-width: 992px) {
    #scales .row > * { flex: 0 0 100%; }
}

/* Independent. For life.: the closing line larger and white; the button
   column has a divider on its inner edge. The space either side of the divider
   is the board's (168 | 190 of 2400), so no column gap (Bob, 13 Oct) */
#independent {
    .row { --gap-x: 0px; }
    .col-3-5 { padding-right: clamp(1.5rem, 7vw, 10.5rem); }
    p > strong { color: var(--white); }
    .col-3-5 p:last-child {
        font-size: clamp(1.25rem, 1.8vw, 1.5rem);
        font-weight: 500;
        color: var(--white);
        margin-bottom: 0;
    }
    .col-2-5 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 100%;
        border-left: 1px solid var(--hairline-on-dark);
        padding-left: clamp(1.5rem, 7.9vw, 11.875rem);
        a.btn { margin: 0; }
    }
}
@media (max-width: 992px) {                 /* the columns stack here */
    #independent {
        .col-3-5 { padding-right: 0; }
        .col-2-5 { border-left: 0; padding-left: 0; min-height: 0; margin-top: 0; justify-content: center; }   /* no divider: the button centres (Bob, 13 Oct) */
    }
}

/* Moments like these: six quote cards, 2-up; 44px above and below the grid */
#moments {
    .row { margin-top: 44px; }
    .row + * { margin-top: 44px; }
    .row > * {
        background: var(--white);
        border: 1px solid #C4CCD6;
        border-radius: 10px;
        padding: 24px;
    }
    .row p {
        margin: 0;
        font-family: var(--type-body);
        font-weight: 500;
        font-size: clamp(1.05rem, 1.25vw, 1.25rem);
        line-height: 1.45;
        color: #083C6F;
    }
}

/* The closing CTA is 900 wide here (1200 elsewhere) */
#closing { --cta-max: calc(900px + 2 * var(--page-gutter)); }