/* CPCM certification page design layer — /company/cpcm.
 *
 * The presentation layer for the `webpages` row whose slug is 'company/cpcm',
 * rendered by ContentPage's /{*Slug} catch-all. Global CSS, linked from
 * App.razor, so the same two rules every sibling page sheet calls out apply:
 *
 * 1. Nothing confines these rules to this page, so every selector is qcp-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global too, hence the prefix on those as well — they
 *    must not collide with the compiled Tailwind bundle or with the qh-, qp-,
 *    qco-, qps-, qsm- and qfh- animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is why this page can be styled
 * entirely from here instead of from utility classes: the bundle the site
 * serves is a prebuilt Next.js artefact, so it only contains the utilities that
 * build emitted and a class invented in the CMS textarea would not exist at
 * runtime. The page this replaces was authored against those utilities and was
 * already paying for it — `aspect-[4/3]` on its two media tiles is not in the
 * bundle at all, so both rendered at their intrinsic ratio.
 *
 * `boxed-container` IS from the bundle and is used deliberately: it is the
 * site's own container (max-width and gutters stepping 1200 → 1400 → 1600px),
 * so this page's content column lines up with the header, the footer and every
 * other page. Do not replace it with a max-width of this sheet's own.
 *
 * PALETTE. The logo ramp the pricing, payroll, careers and site-map sheets
 * already share — #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue),
 * primary #4f46e5. Two surfaces are dark and they bracket the page: the hero
 * and the closing "Enquire About CPCM" band, with the "Why Choose QHRM CPCM"
 * panel a third dark object in between. Everything else is white or a very
 * pale violet tint.
 *
 * THE PER-CARD HUES ARE KEPT, AND SPENT DIFFERENTLY. The old page gave each
 * card in its three grids a hue of its own, which is worth keeping — those are
 * grids of six and seven equal-weight cards with no other way to tell one from
 * another at a glance. What changed is how much of the card the hue gets: it
 * now tints the icon tile and a hairline top rule over a white card, instead of
 * flooding the whole card with a pastel gradient and a 4px bar down its left
 * edge. Each hue modifier sets three custom properties — --qcp-a, --qcp-b and
 * --qcp-ink — and the shared card rules read those; adding a hue means adding
 * one modifier. See the hue-token block below for why ink is separate.
 *
 * CONTENT NOTE. Every heading, sentence, list item, image and label on this
 * page is carried over verbatim from the `webpages` row and stays in that row —
 * see docs/cpcm-redesign.sql. Restyle freely; do not reword, reorder or drop
 * any of it, and do not move any of it into a component.
 */

/* ── page shell ─────────────────────────────────────────────────────── */

/* ContentPage wraps stored markup in
   `<div class="max-w-none" style="color:#1a1a1a;line-height:1.8">`. That inline
   line-height is load-bearing for every other CMS page and cannot be overridden
   from a descendant rule, but 1.8 is far too loose for this page's badges,
   buttons, pills and card headings — none of which set a line-height of their
   own. Re-declaring both properties HERE is what stops them reaching the rest
   of the page: it inherits from .qcp-page down, not from the wrapper. It is the
   same trick .qco-page and .qp-page play. Remove it and the page reflows. */
.qcp-page {
    color: #14103a;
    line-height: 1.55;
    background: linear-gradient(180deg, #f9f8fe 0%, #fbfbfd 560px, #fbfbfd 100%);
}

/* Visually hidden, still read out. */
.qcp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The one in-page anchor the old markup carried. Kept, and given clearance for
   the sticky header (64px, 80px from md) so a link to it does not land with the
   heading tucked underneath. */
.qcp-anchor {
    scroll-margin-top: 96px;
}

/* ── section rhythm ─────────────────────────────────────────────────── */

.qcp-sec {
    position: relative;
    padding: 72px 0 76px;
}

/* The alternating surface. The old page alternated bg-white / bg-gray-50 for
   the same purpose; this is that idea in the page's own palette, so white cards
   have something to sit on rather than floating on the page's own near-white. */
.qcp-sec--tint {
    background:
        radial-gradient(ellipse 70% 55% at 8% 0%, rgba(162, 45, 234, .05), transparent 62%),
        radial-gradient(ellipse 60% 50% at 94% 30%, rgba(91, 93, 226, .06), transparent 62%),
        linear-gradient(180deg, #fbfaff 0%, #fff 45%, #faf9ff 100%);
    border-top: 1px solid rgba(124, 58, 237, .09);
    border-bottom: 1px solid rgba(124, 58, 237, .09);
}

.qcp-sec--plain {
    background: #fff;
    border-top: 1px solid rgba(124, 58, 237, .07);
    border-bottom: 1px solid rgba(124, 58, 237, .07);
}

@media (max-width: 767px) {
    .qcp-sec {
        padding: 52px 0 54px;
    }
}

/* ── section heading ────────────────────────────────────────────────── */

.qcp-head {
    max-width: 780px;
    margin: 0 0 46px;
}

.qcp-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.qcp-h2 {
    margin: 0;
    color: #14103a;
    font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.45rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.024em;
}

.qcp-h3 {
    margin: 0;
    color: #14103a;
    font-size: clamp(1.35rem, 1.05rem + .95vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.qcp-sub {
    margin: 15px 0 0;
    color: #565273;
    font-size: 1.03rem;
    line-height: 1.7;
}

.qcp-head--center .qcp-sub {
    margin-left: auto;
    margin-right: auto;
    max-width: 740px;
}

/* The short gradient rule under two of the headings. It was in the old markup
   (a 24×1 gradient bar) and it is the one flourish worth keeping — it marks the
   two headings that open a whole band rather than a sub-block. */
.qcp-rule {
    width: 76px;
    height: 4px;
    margin: 18px 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #a22dea 0%, #7b5ee5 52%, #5b5de2 100%);
}

.qcp-head--center .qcp-rule {
    margin-left: auto;
    margin-right: auto;
}

/* ── buttons ────────────────────────────────────────────────────────── */

/* THIS PAGE DECLARES NO BUTTON OF ITS OWN, AND SHOULD NOT.
 *
 * Both call-to-action rows — the hero's and the closing band's — carry the
 * site's own hero button pair verbatim: qh-hero__actions, qh-btn,
 * qh-btn-ghost and qh-btn-ghost__circ, all declared in
 * wwwroot/css/pages/home.css and linked on every page by App.razor. Reusing
 * them rather than restyling them here is the point: the page's primary
 * actions look and behave exactly like the home page's, and they follow it if
 * that sheet ever changes. If you find yourself writing .qcp-btn, check
 * whether home.css already has the button you want.
 *
 * The one thing that does need saying here is alignment. qh-hero__actions is
 * a left-aligned flex row, which is right for the home hero and right for this
 * page's hero, but the closing band is centred copy — so the row is centred
 * there and only there. */
.qcp-cta .qh-hero__actions {
    justify-content: center;
}

/* ══ hero ═══════════════════════════════════════════════════════════════
   Dark, and the first of the page's two dark surfaces. Two columns from lg:
   the pitch on the left, the programme image on the right in a tilted frame. */

.qcp-hero {
    position: relative;
    overflow: hidden;
    padding: 66px 0 78px;
    background:
        radial-gradient(ellipse 90% 70% at 12% -10%, rgba(162, 45, 234, .5), transparent 60%),
        radial-gradient(ellipse 85% 75% at 88% 8%, rgba(59, 82, 226, .45), transparent 62%),
        linear-gradient(160deg, #17123f 0%, #1b1450 45%, #14103a 100%);
}

/* Three slow-drifting colour blobs. Decorative and aria-hidden; the animation
   is dropped entirely under prefers-reduced-motion at the foot of this file. */
.qcp-hero__aurora {
    position: absolute;
    inset: -30% -10%;
    pointer-events: none;
}

.qcp-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: qcp-drift 22s ease-in-out infinite;
}

.qcp-hero__aurora i:nth-child(1) {
    width: 460px;
    height: 460px;
    top: 22%;
    left: 4%;
    background: rgba(162, 45, 234, .55);
}

.qcp-hero__aurora i:nth-child(2) {
    width: 380px;
    height: 380px;
    top: 46%;
    left: 46%;
    background: rgba(91, 93, 226, .5);
    animation-delay: -7s;
}

.qcp-hero__aurora i:nth-child(3) {
    width: 340px;
    height: 340px;
    top: 18%;
    right: 6%;
    background: rgba(56, 189, 248, .32);
    animation-delay: -14s;
}

@keyframes qcp-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(3%, -5%, 0) scale(1.07); }
    66%      { transform: translate3d(-4%, 4%, 0) scale(.95); }
}

/* Hairline grid over the aurora, faded out towards the bottom so the copy sits
   on flat colour rather than on lines. */
.qcp-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.qcp-hero .boxed-container {
    position: relative;
}

.qcp-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
    align-items: center;
}

@media (max-width: 1023px) {
    .qcp-hero__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

.qcp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #ede9fe;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* The pulsing dot inside the badge. */
.qcp-hero__badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c4b5fd;
    box-shadow: 0 0 0 0 rgba(196, 181, 253, .7);
    animation: qcp-pulse 2.4s ease-out infinite;
}

@keyframes qcp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 181, 253, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(196, 181, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0); }
}

.qcp-hero__title {
    margin: 22px 0 0;
    color: #fff;
    font-size: clamp(2rem, 1.2rem + 2.9vw, 3.15rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.qcp-hero__lede {
    margin: 20px 0 0;
    max-width: 46em;
    color: #cdc7ee;
    font-size: 1.06rem;
    line-height: 1.72;
}

.qcp-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 26px 0 0;
}

.qcp-hero__point {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e6e2fb;
    font-size: .95rem;
    font-weight: 600;
}

/* The tick in its own disc, so three ticks in a row read as a set rather than
   as three loose glyphs. Emerald is used here and in exactly two other places
   on the page — the certification-benefit ticks and the learning-outcome ticks
   — and always means "included / confirmed". Nothing else uses it. */
.qcp-hero__point svg {
    width: 20px;
    height: 20px;
    flex: none;
    padding: 3px;
    border-radius: 50%;
    background: rgba(52, 211, 153, .16);
    color: #6ee7b7;
}

/* The image, in a frame that lifts slightly off the dark and picks up a glow
   behind it. object-fit keeps the crop stable whatever the file's own ratio is
   — the old markup asked for 4/3 with a utility the bundle does not contain. */
.qcp-hero__media {
    position: relative;
}

.qcp-hero__frame {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .06);
    padding: 10px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85);
}

.qcp-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
}

/* Two soft discs behind the frame, matching the ones the old markup floated
   around its overview image. */
.qcp-hero__glow {
    position: absolute;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% 12%, rgba(251, 191, 36, .28), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(217, 70, 239, .3), transparent 46%);
    filter: blur(28px);
}

/* ══ hue tokens ═════════════════════════════════════════════════════════
   Every card grid on this page reads these three properties rather than
   naming a colour, so adding a hue means adding one modifier here.

     --qcp-a    the light end of the icon-tile gradient
     --qcp-b    the dark end of it
     --qcp-ink  the flat colour for text, rules and ticks

   --qcp-ink is separate from --qcp-b and has to be, because several of the
   old page's gradients crossed families: its purple cards ran purple-500 to
   pink-600 and its blue cards blue-500 to cyan-600, while the matching
   headings were purple-600 and blue-600. Collapsing the two would have
   printed "Compensation Specialists" in magenta and "Business Leaders" in
   cyan. Every --qcp-ink below is the 600 of its own family, which is the
   colour the old markup used for that text. */

.qcp-hue--indigo { --qcp-a: #6366f1; --qcp-b: #4f46e5; --qcp-ink: #4f46e5; }
.qcp-hue--blue   { --qcp-a: #3b82f6; --qcp-b: #0891b2; --qcp-ink: #2563eb; }
.qcp-hue--purple { --qcp-a: #a855f7; --qcp-b: #db2777; --qcp-ink: #9333ea; }
.qcp-hue--green  { --qcp-a: #22c55e; --qcp-b: #059669; --qcp-ink: #16a34a; }
.qcp-hue--orange { --qcp-a: #f97316; --qcp-b: #dc2626; --qcp-ink: #ea580c; }
.qcp-hue--teal   { --qcp-a: #14b8a6; --qcp-b: #0891b2; --qcp-ink: #0d9488; }
.qcp-hue--yellow { --qcp-a: #eab308; --qcp-b: #ca8a04; --qcp-ink: #ca8a04; }
.qcp-hue--red    { --qcp-a: #ef4444; --qcp-b: #dc2626; --qcp-ink: #dc2626; }

/* ══ card grids ═════════════════════════════════════════════════════════ */

.qcp-grid {
    display: grid;
    gap: 22px;
}

/* Three across from lg, two from md, one below — the shape the old grids had.
   auto-fit is deliberately not used: these grids carry six and seven items, and
   auto-fit would leave a lone stretched card on the last row at some widths. */
.qcp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qcp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .qcp-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .qcp-grid--3,
    .qcp-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── the "Why Choose CPCM Certification?" card ──────────────────────── */

.qcp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 28px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 16, 58, .04);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The hairline top rule — where the card's hue is spent, along with the icon
   tile. It is the full width of the card and 3px tall, which is enough to
   identify the card in a grid and little enough not to compete with the icon. */
.qcp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-a), var(--qcp-b));
}

.qcp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 16, 58, .14);
    box-shadow: 0 22px 44px -26px rgba(20, 16, 58, .5);
}

.qcp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--qcp-a), var(--qcp-b));
    color: #fff;
    box-shadow: 0 12px 24px -14px var(--qcp-b);
}

.qcp-card__icon svg {
    width: 26px;
    height: 26px;
}

.qcp-card__title {
    margin: 20px 0 0;
    color: #14103a;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.012em;
}

.qcp-card__text {
    margin: 10px 0 0;
    color: #565273;
    font-size: .96rem;
    line-height: 1.65;
}

/* ══ "Comprehensive Learning Experience" — panel + rows ═════════════════ */

.qcp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

@media (max-width: 1023px) {
    .qcp-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* The gradient tile that stands in for a photograph. It was a gradient in the
   old markup too — there is no image behind it — so it is styled as a
   deliberate object rather than as a placeholder. */
.qcp-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 32px;
    border-radius: 22px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(140deg, #6366f1 0%, #a855f7 52%, #ec4899 100%);
    box-shadow: 0 36px 70px -38px rgba(76, 29, 149, .8);
}

/* A ring pattern over the gradient, so the tile has some structure at large
   sizes instead of being a flat wash. */
.qcp-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .22), transparent 34%),
        radial-gradient(circle at 82% 84%, rgba(255, 255, 255, .16), transparent 36%);
    pointer-events: none;
}

.qcp-panel__inner {
    position: relative;
    z-index: 1;
}

.qcp-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.qcp-panel__icon svg {
    width: 38px;
    height: 38px;
}

.qcp-panel__title {
    margin: 20px 0 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.qcp-panel__text {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
}

.qcp-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qcp-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-left: 3px solid var(--qcp-ink);
    border-radius: 16px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.qcp-row:hover {
    transform: translateX(3px);
    box-shadow: 0 18px 36px -26px rgba(20, 16, 58, .5);
}

.qcp-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--qcp-a), var(--qcp-b));
    color: #fff;
    box-shadow: 0 12px 22px -14px var(--qcp-b);
}

.qcp-row__icon svg {
    width: 23px;
    height: 23px;
}

.qcp-row__title {
    margin: 0;
    color: #14103a;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.012em;
}

.qcp-row__text {
    margin: 7px 0 0;
    color: #565273;
    font-size: .95rem;
    line-height: 1.65;
}

/* ══ "Overview" — image and prose ══════════════════════════════════════ */

/* The image leads on mobile and sits second on desktop, which is the order the
   old markup asked for with order-1/order-2 utilities. */
.qcp-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

@media (max-width: 1023px) {
    .qcp-ov {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

.qcp-ov__media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 36px 70px -40px rgba(20, 16, 58, .7);
}

.qcp-ov__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* The caption strip. A gradient scrim rather than a solid bar, so the bottom of
   the photograph is still legible under it. */
.qcp-ov__chip {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 42px 22px 20px;
    background: linear-gradient(180deg, transparent, rgba(23, 18, 63, .82));
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
}

.qcp-ov__chip svg {
    width: 22px;
    height: 22px;
    flex: none;
}

.qcp-prose p {
    margin: 0 0 16px;
    color: #4a4668;
    font-size: 1.04rem;
    line-height: 1.78;
}

.qcp-prose p:first-child {
    color: #2b2750;
}

.qcp-prose p:last-child {
    margin-bottom: 0;
}

.qcp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}

.qcp-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--qcp-ink) 26%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--qcp-ink) 7%, #fff);
    color: #241f4d;
    font-size: .92rem;
    font-weight: 650;
}

.qcp-pill svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--qcp-ink);
}

/* ══ "Key Features & Benefits" — three stacked blocks ═══════════════════ */

.qcp-block + .qcp-block {
    margin-top: 62px;
}

.qcp-block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px;
}

/* The "7 Comprehensive Modules" counter beside the block heading. Hidden below
   md, exactly as the old markup hid it. */
.qcp-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 8px 15px;
    border: 1px solid rgba(79, 70, 229, .2);
    border-radius: 999px;
    background: rgba(79, 70, 229, .06);
    color: #4338ca;
    font-size: .86rem;
    font-weight: 650;
}

.qcp-meta svg {
    width: 18px;
    height: 18px;
    flex: none;
}

@media (max-width: 767px) {
    .qcp-meta {
        display: none;
    }
}

/* ── the seven course modules ──────────────────────────────────────── */

.qcp-module {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The tinted quarter-disc the old cards had in their top-right corner, kept
   because it is what stops seven near-identical cards reading as a table. */
.qcp-module::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    border-bottom-left-radius: 100%;
    background: linear-gradient(225deg, color-mix(in srgb, var(--qcp-a) 14%, transparent), transparent 62%);
    pointer-events: none;
}

.qcp-module:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--qcp-ink) 32%, transparent);
    box-shadow: 0 22px 44px -26px rgba(20, 16, 58, .5);
}

.qcp-module__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--qcp-a), var(--qcp-b));
    color: #fff;
    box-shadow: 0 12px 24px -14px var(--qcp-b);
    transition: transform .22s ease;
}

.qcp-module:hover .qcp-module__icon {
    transform: scale(1.08);
}

.qcp-module__icon svg {
    width: 26px;
    height: 26px;
}

.qcp-module__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.qcp-module__title {
    margin: 0;
    color: #14103a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.012em;
    transition: color .2s ease;
}

.qcp-module:hover .qcp-module__title {
    color: var(--qcp-ink);
}

.qcp-module__text {
    margin: 8px 0 0;
    color: #565273;
    font-size: .92rem;
    line-height: 1.6;
}

/* ── certification benefits and learning outcomes ──────────────────── */

/* Both are flat lists of confirmations, so both get the same emerald tick and
   the same quiet card — the difference between them is the heading above, not
   the treatment. Benefits are three across, outcomes two, matching the old
   grids. */
.qcp-tick {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-radius: 16px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.qcp-tick:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, .32);
    box-shadow: 0 18px 36px -26px rgba(20, 16, 58, .45);
}

.qcp-tick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(16, 185, 129, .1);
    color: #059669;
}

.qcp-tick__icon svg {
    width: 20px;
    height: 20px;
}

.qcp-tick__text {
    margin: 0;
    padding-top: 4px;
    color: #2b2750;
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.55;
}

/* ══ "Why Choose QHRM CPCM" — the dark panel ═══════════════════════════ */

.qcp-standout {
    position: relative;
    overflow: hidden;
    padding: 52px 40px 56px;
    border-radius: 26px;
    background:
        radial-gradient(ellipse 70% 60% at 6% 0%, rgba(162, 45, 234, .45), transparent 60%),
        radial-gradient(ellipse 70% 70% at 96% 100%, rgba(59, 82, 226, .45), transparent 62%),
        linear-gradient(150deg, #1b1450 0%, #241a63 50%, #17123f 100%);
    box-shadow: 0 44px 84px -46px rgba(23, 18, 63, .9);
}

@media (max-width: 767px) {
    .qcp-standout {
        padding: 36px 22px 40px;
        border-radius: 20px;
    }
}

.qcp-standout__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.024em;
    text-align: center;
}

.qcp-standout__lede {
    margin: 14px auto 0;
    max-width: 640px;
    color: #cdc7ee;
    font-size: 1.03rem;
    text-align: center;
}

.qcp-standout__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 40px;
    max-width: 900px;
    margin: 38px auto 0;
}

@media (max-width: 767px) {
    .qcp-standout__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

.qcp-standout__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Amber, and only here. The old panel used a yellow tick on this surface and it
   is the one place on the page where a warm accent lands, so it is kept rather
   than folded into the emerald "confirmed" role. */
.qcp-standout__item svg {
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: 2px;
    color: #fcd34d;
}

.qcp-standout__item h3 {
    margin: 0;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.qcp-standout__item p {
    margin: 5px 0 0;
    color: #cdc7ee;
    font-size: .92rem;
    line-height: 1.6;
}

/* ══ "Use Cases — Who Should Take CPCM" ════════════════════════════════ */

.qcp-use {
    position: relative;
    padding: 26px 24px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* A left rule rather than the full-width top rule the feature cards get: these
   six are read as a list of audiences, and the vertical mark keeps the eye
   running down the column. */
.qcp-use::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--qcp-a), var(--qcp-b));
}

.qcp-use:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--qcp-ink) 30%, transparent);
    box-shadow: 0 22px 44px -26px rgba(20, 16, 58, .5);
}

.qcp-use__title {
    margin: 0;
    color: var(--qcp-ink);
    font-size: 1.14rem;
    font-weight: 750;
    letter-spacing: -.014em;
}

.qcp-use__text {
    margin: 9px 0 0;
    color: #565273;
    font-size: .96rem;
    line-height: 1.62;
}

/* ══ "Course Details" ══════════════════════════════════════════════════ */

.qcp-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

@media (max-width: 1023px) {
    .qcp-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qcp-detail {
    padding: 28px 26px 30px;
    border: 1px solid rgba(20, 16, 58, .08);
    border-top: 3px solid var(--qcp-ink);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 16, 58, .04);
}

.qcp-detail__title {
    margin: 0 0 16px;
    color: var(--qcp-ink);
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -.014em;
}

.qcp-detail__text {
    margin: 0;
    color: #565273;
    font-size: .97rem;
    line-height: 1.72;
}

/* The Format list. No marker of any kind, and that is deliberate: its four
   items carry their own "• " in the stored text, and a marker here would
   double it. Do not add list-style or a ::before. */
.qcp-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qcp-list li {
    color: #565273;
    font-size: .97rem;
    line-height: 1.65;
}

.qcp-list li + li {
    margin-top: 10px;
}

/* The Prerequisites list, whose items carry a tick each. */
.qcp-ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qcp-ticks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #565273;
    font-size: .97rem;
    line-height: 1.6;
}

.qcp-ticks li + li {
    margin-top: 12px;
}

.qcp-ticks svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--qcp-ink);
}

/* ══ closing band — "Enquire About CPCM" ═══════════════════════════════ */

/* The page's second dark surface, so it opens and closes on the same material. */
.qcp-cta {
    position: relative;
    overflow: hidden;
    padding: 76px 0 82px;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 70% at 10% 0%, rgba(162, 45, 234, .5), transparent 60%),
        radial-gradient(ellipse 80% 70% at 92% 100%, rgba(59, 82, 226, .48), transparent 62%),
        linear-gradient(140deg, #17123f 0%, #1f1657 52%, #14103a 100%);
}

.qcp-cta .boxed-container {
    position: relative;
}

.qcp-cta__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.026em;
}

.qcp-cta__text {
    margin: 16px auto 0;
    max-width: 680px;
    color: #cdc7ee;
    font-size: 1.05rem;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .qcp-cta {
        padding: 54px 0 58px;
    }
}

/* ── reduced motion ─────────────────────────────────────────────────── */

/* Everything above that moves is decoration or a hover lift, so all of it can
   be dropped outright. The pulsing badge dot and the drifting aurora are the
   two that run unprompted, which is what this setting exists for. */
@media (prefers-reduced-motion: reduce) {
    .qcp-hero__aurora i,
    .qcp-hero__badge::before {
        animation: none;
    }

    .qcp-card,
    .qcp-module,
    .qcp-module__icon,
    .qcp-row,
    .qcp-tick,
    .qcp-use {
        transition: none;
    }

    .qcp-card:hover,
    .qcp-module:hover,
    .qcp-row:hover,
    .qcp-tick:hover,
    .qcp-use:hover {
        transform: none;
    }

    .qcp-module:hover .qcp-module__icon {
        transform: none;
    }
}