/* Offers — buy panels, membership benefits, urgent-help and thank-you pages.
   Site-local, on top of the shared design system (assets/css/ds/). Everything
   flows through the ds tokens, so themes and corner modes come for free. */

/* ---------- price line (amounts land later — keep the layout ready) ---------- */
.price-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
}
.price-line strong {
    font-size: 40px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -.02em;
}
.price-line span { font-size: 15px; color: var(--text-soft); }
/* on the navy/tinted CTA cards the amount reads white; alignment follows the
   surface's voice — left in the grid cards, centered in the big .cta moment */
.price-line--oncard strong { color: #fff; }
.price-line--oncard span { color: rgba(255, 255, 255, .85); }
.price-line--oncard { justify-content: flex-start; margin: 2px 0 14px; }
.cta .price-line--oncard { justify-content: center; }

/* ---------- benefits grid (membership page) ---------- */
/* (.offer-benefits / .offer-benefit removed 2026-08-25 — membership and
   consulting now use the shared bento cards.) */

/* ---------- seat picker (pricing modal panels) ---------- */
/* (.buy-card removed 2026-08-28 — the membership page's district card folded
   into its closing CTA; every in-page price beyond the headline number now
   lives in the pricing modal.) */
.buy-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
}
.buy-qty label { font-size: 13.5px; font-weight: 600; color: var(--text-slate); }
.buy-qty select {
    padding: 8px 14px;
    border: 1.5px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font: inherit;
    font-size: 15px;
    color: var(--body-text);
}
/* In-copy pricing-modal triggers — [data-checkout] buttons living inside a
   CTA note read exactly like the links beside them (.cta__note a). */
.cta__note .note-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.cta__note .note-link:hover { color: var(--emphasis); }

/* The "checkout isn't open yet" copy [data-checkout-fallback] — never shown
   in place; store.js lifts its HTML into the checkout dialog below. */
.store-fallback { display: none !important; }

/* ---------- checkout dialog (store.js) ---------- */
/* Shown when a buy button can't open Stripe — either "opens soon" (503) or a
   real error. One dialog serves every [data-checkout] button on the page. */
/* above the navbar (999) and offcanvas (1000), below the skip link (2000) */
.store-modal { position: fixed; inset: 0; z-index: 1100; }
.store-modal[hidden] { display: none; }
html.store-modal-open { overflow: hidden; }
.store-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 34, 51, .55);
}
.store-modal__card {
    position: relative;
    max-width: 480px;
    margin: 14vh auto 0;
    padding: 34px 36px 28px;
    text-align: center;
    outline: none;
}
.store-modal__card:hover { transform: none; }
.store-modal__kicker { margin-bottom: 6px; }
.store-modal__card h2 { margin: 0 0 12px; color: var(--primary); }
.store-modal__body { font-size: 15px; line-height: 1.65; color: var(--body-text); }
.store-modal__body a { color: var(--secondary); font-weight: 600; }

/* ---------- pricing modal (the full offer sheet, store.js openPricing) ---------- */
.store-modal__card--pricing { max-width: 980px; max-height: 88vh; overflow-y: auto; margin-top: 6vh; }
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 22px 0 0;
    text-align: left;
}
@media (min-width: 860px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 18px;
    border: 1.5px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}
.pricing-option--featured { border-color: var(--secondary); box-shadow: var(--shadow-sm); }
.pricing-option h3 { margin: 0; font-size: 17px; color: var(--primary); }
.pricing-option__blurb { margin: 0; flex-grow: 1; font-size: 13.5px; line-height: 1.55; color: var(--body-text); }
.pricing-option .buy-qty { justify-content: flex-start; margin: 0; }
.pricing-option .price-line { justify-content: flex-start; margin: 0; }
.pricing-option .price-line strong { font-size: 30px; }
.pricing-option__note { margin: 0 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.pricing-option .btn { width: 100%; }
.store-modal__foot { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.store-modal__foot a { color: var(--secondary); font-weight: 600; }
@media (max-width: 560px) { .store-modal__card--pricing { margin: 4vh 12px 0; padding: 26px 18px 22px; } }
.store-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 0;
}
.store-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-soft);
    cursor: pointer;
}
.store-modal__close:hover { color: var(--primary); }
@media (max-width: 560px) {
    .store-modal__card { margin: 10vh 16px 0; padding: 28px 22px 24px; }
}

/* ---------- urgent help (crisis) page ---------- */
/* (.crisis-phone / .crisis-sub / .crisis-steps removed 2026-08-25 — no phone
   on the site (spam); email is the crisis channel, and the three call steps
   live in the hero's what-happens-when-you-call card.) */

/* ---------- thank-you page ---------- */
/* One band: the confirmation IS the hero — kicker + product headline + the
   sitewide 3-across step cards (.steps grammar), so the whole walkthrough
   sits above the fold with no second section to scroll to. */
.thanks-head { padding-bottom: 96px; }
.thanks-head [hidden] { display: none !important; }
.thanks-head .hero__lede { margin-bottom: 0; }
.thanks-head .steps {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
.thanks-actions { margin-top: 36px; }
.thanks-help { margin-top: 16px; font-size: 13.5px; color: var(--text-soft); }

/* The load-in cascade (motion.css) staggers .container-large's DIRECT
   children; here those are the five [data-thanks] wrappers (four hidden), so
   the delay would key off DOM position, not what's on screen. Re-point it:
   the wrapper doesn't animate, its children do — every product block gets
   the same kicker → headline → steps walk. offers.css loads after motion.css,
   so the equal-specificity override below wins. */
html.anim .thanks-head .container-large > * { animation: none; }
html.anim .thanks-head [data-thanks] > * {
    animation: rise-in .75s cubic-bezier(.16, 1, .3, 1) .25s both;
}
html.anim .thanks-head [data-thanks] > :nth-child(2) { animation-delay: .35s; }
html.anim .thanks-head [data-thanks] > :nth-child(3) { animation-delay: .45s; }
html.anim .thanks-head [data-thanks] > :nth-child(4) { animation-delay: .55s; }
html.anim .thanks-head [data-thanks] > :nth-child(5) { animation-delay: .65s; }
html.anim .thanks-head [data-thanks] > :nth-child(6) { animation-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
    html.anim .thanks-head [data-thanks] > * { animation: none; }
}

/* ---------- book page: two-column hero (copy left, cover right) ---------- */
.book-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    text-align: center;   /* stacked (mobile): keep the page-head's centered voice */
}
.book-hero .hero__actions { justify-content: center; }
.book-hero__alt { margin: 14px 0 0; }
.book-hero__cover { display: block; }
.book-hero__cover .cover-img { max-width: 300px; }
@media (min-width: 960px) {
    .book-hero {
        grid-template-columns: 7fr 5fr;
        gap: 56px;
        text-align: left;
    }
    .book-hero .hero__lede { margin-left: 0; margin-right: 0; }
    .book-hero .hero__actions { justify-content: flex-start; }
    .book-hero .hero__trust-line { justify-content: flex-start; }
    .book-hero__alt { text-align: left; }
    .book-hero__cover { justify-self: center; }
    .book-hero__cover .cover-img { max-width: 400px; }
}

/* ---------- course page: bento curriculum ---------- */
/* the module-anatomy line under the curriculum lede: steps down from the
   .alt lede to body scale, with the four section names carrying the weight —
   echoing the hero card's Learn → Do → Apply without repeating its color */
.course-structure {
    max-width: 900px;
    margin: -6px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--body-text);
}
.course-structure strong { font-weight: 600; color: var(--primary); }

/* Cells are ways-style color blocks — .block.tint (design system) brings the
   color wash, softened photo, and hover reveal; bento only handles the grid,
   sizes the cells down for the denser layout, and turns the module tag into
   the ghost watermark number. */
.bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 34px;
    text-align: left;
}
/* quiet cells in the site neutrals: uniform white cards on the muted band,
   navy type, ghost watermark numbers — only the capstone finale carries
   the navy accent */
.bento .bento__item {
    position: relative;
    padding: 26px 26px 24px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}
.bento .bento__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bento .bento__num {
    display: block;
    margin: 0 0 8px;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    color: rgba(23, 75, 115, .18);
    transition: color .3s ease-in-out;
}
.bento .bento__item:hover .bento__num { color: rgba(23, 75, 115, .34); }
.bento .bento__item h3 { margin: 0 0 8px; font-size: 17px; color: var(--primary); }
.bento .bento__item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body-text); }
.bento .bento__item--accent { background: var(--primary); }
.bento .bento__item--accent .bento__num { color: rgba(255, 255, 255, .22); }
.bento .bento__item--accent:hover .bento__num { color: rgba(255, 255, 255, .38); }
.bento .bento__item--accent h3 { color: #fff; }
.bento .bento__item--accent p { color: rgba(255, 255, 255, .88); }
/* three per row on desktop; the wide capstone (08) spans two, so eight cells
   fill the 3x3 grid exactly */
@media (min-width: 700px) {
    .bento { grid-template-columns: 1fr 1fr; }
    .bento__item--wide { grid-column: span 2; }
}
@media (min-width: 1020px) {
    .bento { grid-template-columns: repeat(3, 1fr); }
    .bento__item--wide { grid-column: span 2; }
}

/* course hero: a course-blue photo wash rises behind the module card, fading
   into the cream so the copy column stays clean (desktop only — stacked
   mobile keeps the plain cream band) */
@media (min-width: 960px) {
    .hero--course::before {
        content: "";
        position: absolute;
        inset: 0 0 0 45%;
        background-image:
            linear-gradient(180deg, #faf8f3 0, #faf8f3 84px, rgba(250, 248, 243, 0) 330px),
            linear-gradient(rgba(0, 112, 169, .55), rgba(0, 112, 169, .55)),
            url('../img/photos/media-training-with-class.jpg');
        background-size: cover;
        background-position: center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
        mask-image: linear-gradient(90deg, transparent, #000 60%);
    }
    .hero--course .hero__inner { position: relative; z-index: 1; }
}

/* consulting hero: same recipe in a deep orange (warm over the brick-red
   press photo) */
@media (min-width: 960px) {
    .hero--consult::before {
        content: "";
        position: absolute;
        inset: 0 0 0 45%;
        background-image:
            linear-gradient(180deg, #faf8f3 0, #faf8f3 84px, rgba(250, 248, 243, 0) 330px),
            linear-gradient(rgba(204, 78, 18, .55), rgba(204, 78, 18, .55)),
            url('../img/photos/principal-press-conference.jpg');
        background-size: cover;
        background-position: center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
        mask-image: linear-gradient(90deg, transparent, #000 60%);
    }
    .hero--consult .hero__inner { position: relative; z-index: 1; }
}

/* full-width bento cell (consulting's navy finale) + deep-linkable cells */
.bento__item--full { grid-column: 1 / -1; }
.bento__item[id],
.cards-grid .card[id] { scroll-margin-top: 110px; }

/* links inside the CTA card's copy read light on the overlay */
.cta__content p a:not(.btn) { color: #fff; text-decoration: underline; }
.cta__content p a:not(.btn):hover { color: var(--emphasis); }

/* about hero: same recipe in the brand navy — the team at work */
@media (min-width: 960px) {
    .hero--about::before {
        content: "";
        position: absolute;
        inset: 0 0 0 45%;
        background-image:
            linear-gradient(180deg, #faf8f3 0, #faf8f3 84px, rgba(250, 248, 243, 0) 330px),
            linear-gradient(rgba(23, 75, 115, .55), rgba(23, 75, 115, .55)),
            url('../img/photos/focus-media-large-group.jpg');
        background-size: cover;
        background-position: center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
        mask-image: linear-gradient(90deg, transparent, #000 60%);
    }
    .hero--about .hero__inner { position: relative; z-index: 1; }
}

/* about page: the full trainer roster — bio cards. Round headshot + name as
   the card's head, the bio on the card's full measure below. Sections that
   hold the grid are text-centered; the cards read left. */
.bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 34px;
    text-align: left;
}
@media (min-width: 900px) { .bio-grid { grid-template-columns: repeat(2, 1fr); } }
.bio-card { padding: 28px 30px 30px; }
@media (max-width: 599px) { .bio-card { padding: 24px 22px 26px; } }
.bio-card__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
.bio-card__head img {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background: var(--cool-grey);
}
.bio-card__head h3 { margin: 0; }
.bio-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--body-text); }

/* membership hero: same recipe in the library's color — a deep-rose wash
   behind the year-at-a-glance card */
@media (min-width: 960px) {
    .hero--membership::before {
        content: "";
        position: absolute;
        inset: 0 0 0 45%;
        background-image:
            linear-gradient(180deg, #faf8f3 0, #faf8f3 84px, rgba(250, 248, 243, 0) 330px),
            linear-gradient(rgba(199, 29, 82, .5), rgba(199, 29, 82, .5)),
            url('../img/photos/staff-meeting.jpg');
        background-size: cover;
        background-position: center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
        mask-image: linear-gradient(90deg, transparent, #000 60%);
    }
    .hero--membership .hero__inner { position: relative; z-index: 1; }
}

/* library band on navy: the browse link steps up to the light accent, and
   the CTA card's store fallback reads light on the overlay */
.bg-primary .post-grid-more .link-more { color: var(--emphasis); }
.cta .store-fallback { color: rgba(255, 255, 255, .85); }
.cta .store-fallback a { color: #fff; text-decoration: underline; }

/* course hero: the module-inclusions card riding the right column */
.module-card {
    justify-self: center;
    width: 100%;
    max-width: 430px;
    padding: 32px 34px 28px;
}
/* .card-surface lift is for links (kept hover-only so the load-in
   animation's transform still runs) */
.module-card:hover { transform: none; }
@media (min-width: 960px) { .module-card { justify-self: end; } }
.module-card__title {
    margin: 0 0 18px;
    font-size: 21.6px;
    line-height: 1.35;
    color: var(--primary);
}
.module-card__title span { color: var(--secondary); }
.module-card .hero__checks { margin-bottom: 0; }