/* ============================================================
   Quiet Clinical Prestige — Visual System
   LIGHT PREMIUM HERO — corrected composition pass
   Scope: homepage only (body.page-home).
   Loaded AFTER style.css. Governs tokens, top-of-page rhythm,
   the editorial light video hero, and the floating proof card.
   Lower homepage sections and every other page remain on the
   legacy styles.
   ============================================================ */

/* -----------------------------------------------------------
   1. Tokens — exact brand palette (site-wide for public pages)
   ----------------------------------------------------------- */
body.public-ui,
body.page-home {
    /* Canvas */
    --qcp-canvas:        #F8F6F1;
    --qcp-canvas-deep:   #F1EDE3;
    --qcp-paper:         #FFFFFF;

    /* Text */
    --qcp-text:          #1E2A3A;
    --qcp-text-soft:     #2F3B4C;
    --qcp-text-mid:      #4A5869;
    --qcp-text-muted:    #5F6B7A;
    --qcp-text-faint:    #8A94A3;

    /* Primary blue */
    --qcp-blue:          #355CFF;
    --qcp-blue-deep:     #2849D8;
    --qcp-blue-soft:     #5C8DFF;
    --qcp-blue-tint:     rgba(53, 92, 255, 0.10);

    /* Supporting green */
    --qcp-green:         #A9D84E;
    --qcp-green-soft:    #B7E36A;
    --qcp-green-deep:    #7EA82F;

    /* Soft pink */
    --qcp-pink:          #E8B6D8;
    --qcp-pink-soft:     #F2C7E7;
    --qcp-pink-deep:     #C27FAE;

    /* Minimal yellow */
    --qcp-yellow:        #E9D15B;
    --qcp-yellow-soft:   #F0D86E;
    --qcp-yellow-deep:   #B79D2E;

    /* Hairlines */
    --qcp-border:          #E7E2D8;
    --qcp-hairline:        rgba(30, 42, 58, 0.10);
    --qcp-hairline-strong: rgba(30, 42, 58, 0.18);
    --qcp-shadow-soft:     0 1px 2px rgba(30, 42, 58, 0.06);
    --qcp-shadow-card:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 32px 64px -32px rgba(30, 42, 58, 0.28),
        0 12px 28px -16px rgba(30, 42, 58, 0.14);

    /* Type */
    --qcp-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --qcp-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* -----------------------------------------------------------
   2. Page canvas
   ----------------------------------------------------------- */
body.page-home {
    background-color: var(--qcp-canvas);
    color: var(--qcp-text-soft);
}

/* -----------------------------------------------------------
   2a. Topbar — slim light masthead
   ----------------------------------------------------------- */
body.page-home .premium-topbar {
    background: var(--qcp-canvas);
    border-bottom: 1px solid var(--qcp-border);
    color: var(--qcp-text-muted);
    font-size: 0.78rem;
    font-weight: 400;
    position: relative;
}
body.page-home .premium-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--qcp-blue) 0%,
        var(--qcp-green) 38%,
        var(--qcp-pink) 70%,
        var(--qcp-yellow) 100%);
    opacity: 0.85;
}
body.page-home .premium-topbar .topbar-shell {
    padding: 0.5rem 0;
}
body.page-home .premium-topbar .topbar-chip {
    background: rgba(255, 255, 255, 0.72);
    color: var(--qcp-text-soft);
    border: 1px solid var(--qcp-border);
    padding: 0.3rem 0.75rem;
    letter-spacing: 0.01em;
    font-weight: 500;
    border-radius: 999px;
    position: relative;
    gap: 0.4rem;
    display: inline-flex;
    align-items: center;
}
body.page-home .premium-topbar .topbar-chip + .topbar-chip {
    padding-left: 0.75rem;
}
body.page-home .premium-topbar .topbar-chip + .topbar-chip::before {
    display: none; /* chip pills don't need interstitial hairlines */
}
body.page-home .premium-topbar .topbar-chip i {
    color: var(--qcp-blue);
    font-size: 0.82em;
}
body.page-home .premium-topbar .topbar-tagline {
    color: var(--qcp-text-muted);
    letter-spacing: 0.22em;
    font-size: 0.68rem;
    font-weight: 600;
}
body.page-home .premium-topbar .social-icons a {
    background: transparent;
    border: 0;
    width: 28px; height: 28px;
    color: var(--qcp-text-muted);
    margin-left: 0.1rem;
}
body.page-home .premium-topbar .social-icons a:hover {
    background: transparent;
    color: var(--qcp-blue);
    transform: none;
}

/* -----------------------------------------------------------
   2b. Navbar — light, premium spacing
   ----------------------------------------------------------- */
body.page-home .premium-navbar {
    background: var(--qcp-paper);
    border-bottom: 1px solid var(--qcp-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 1rem 0;
}
body.page-home .premium-navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 var(--qcp-border);
    backdrop-filter: saturate(1.1) blur(8px);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
}
body.page-home .premium-brand .brand-emblem {
    background: var(--qcp-text);
    color: #fff;
    box-shadow: none;
    border-radius: 10px;
}
body.page-home .premium-brand .brand-copy small {
    color: var(--qcp-blue-deep);
    letter-spacing: 0.16em;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
}
body.page-home .premium-brand .brand-copy strong {
    color: var(--qcp-text);
    font-family: var(--qcp-display);
    font-weight: 600;
    letter-spacing: 0.005em;
    font-size: 1.22rem;
}
body.page-home .navbar .nav-link {
    color: var(--qcp-text-soft);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.55rem 1rem;
    position: relative;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
body.page-home .navbar .nav-link::after {
    display: none; /* active state uses pill background, not underline */
}
body.page-home .navbar .nav-link:hover {
    color: #B44A8A;
    background: rgba(232, 182, 216, 0.22);
}
body.page-home .navbar .nav-link.active {
    color: #B44A8A;
    background: linear-gradient(180deg,
        rgba(232, 182, 216, 0.40) 0%,
        rgba(196, 106, 160, 0.18) 100%);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(196, 106, 160, 0.22),
        0 3px 8px -3px rgba(196, 106, 160, 0.28);
}

/* Student Portal CTA — refined, not overpowering */
body.page-home .navbar .btn-get-started {
    background: transparent;
    color: var(--qcp-blue);
    border: 1px solid rgba(53, 92, 255, 0.35);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    font-size: 0.88rem;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.page-home .navbar .btn-get-started:hover {
    background: var(--qcp-blue);
    border-color: var(--qcp-blue);
    color: #fff;
}
body.page-home .navbar .btn-get-started i {
    color: inherit;
}

/* -----------------------------------------------------------
   3. Editorial type scale
   ----------------------------------------------------------- */
body.page-home h1,
body.page-home h2,
body.page-home h3 {
    font-family: var(--qcp-display);
    color: var(--qcp-text);
    letter-spacing: -0.005em;
    font-weight: 600;
}

/* ============================================================
   4. HERO — Full-bleed video, structured light composition
   -----------------------------------------------------------
   🔒 HERO LOCK · DO NOT REDESIGN
   Visual direction for this hero is frozen. Only tiny cleanups
   (spacing, readability, overlay subtlety, tasteful accent
   presence) are permitted from here on. No structural changes,
   no split-panel, no heavy overlays, no swapping the video.
   ============================================================ */
.hero-qcp {
    position: relative;
    min-height: clamp(700px, 94vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background: var(--qcp-canvas);
    color: var(--qcp-text);
    padding-bottom: 140px; /* reserve room for floating proof card */
}

/* top accent hairline — all four brand colors in one rule */
.hero-qcp::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--qcp-blue) 0%,
        var(--qcp-green) 38%,
        var(--qcp-pink) 70%,
        var(--qcp-yellow) 100%);
    opacity: 1;
    z-index: 6;
}

/* thin editorial left rule inside the content zone */
.hero-qcp::after {
    content: '';
    position: absolute;
    top: 22%;
    bottom: 30%;
    left: clamp(1.25rem, 3vw, 2rem);
    width: 2px;
    background: linear-gradient(180deg,
        rgba(53, 92, 255, 0.45) 0%,
        rgba(53, 92, 255, 0) 100%);
    z-index: 5;
    border-radius: 2px;
    opacity: 0.9;
}

/* ---- Layer 1 (z:1): TARGETED left ivory readability gradient.
   Fades out completely by 72% — the right side of the video
   stays untouched and crisp. No uniform white wash anywhere. --- */
.hero-qcp-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(250, 248, 243, 0.72) 0%,
        rgba(250, 248, 243, 0.58) 22%,
        rgba(250, 248, 243, 0.28) 40%,
        rgba(250, 248, 243, 0.08) 58%,
        rgba(250, 248, 243, 0.00) 72%);
    pointer-events: none;
}

/* ---- Layer 2 (z:2): COLORED atmospheric radials.
   Placed at precise coordinates so blue/green/pink are clearly
   visible without needing high alpha. --------------------------- */
.hero-qcp-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        /* Pink — lower right premium glow, visible but tasteful */
        radial-gradient(circle at 82% 78%,
            rgba(232, 182, 216, 0.30) 0%,
            rgba(232, 182, 216, 0.18) 18%,
            rgba(232, 182, 216, 0.00) 42%),
        /* Green — upper right, fresh healthcare accent */
        radial-gradient(circle at 78% 18%,
            rgba(169, 216, 78, 0.26) 0%,
            rgba(169, 216, 78, 0.14) 20%,
            rgba(169, 216, 78, 0.00) 44%),
        /* Blue — upper left, mood setter, aligns with text zone */
        radial-gradient(circle at 18% 22%,
            rgba(53, 92, 255, 0.12) 0%,
            rgba(53, 92, 255, 0.00) 36%),
        /* Yellow — tiny warm micro-pulse only, lower-left */
        radial-gradient(circle at 6% 88%,
            rgba(233, 209, 91, 0.16) 0%,
            rgba(233, 209, 91, 0.00) 18%);
    pointer-events: none;
}

/* ---- Layer 3 (z:3): tiny bottom bridge toward the floating
   proof card — barely visible, not a veil. -------------------- */
.hero-qcp-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg,
        rgba(250, 248, 243, 0) 78%,
        rgba(250, 248, 243, 0.18) 100%);
    pointer-events: none;
}

/* ---- Content container ---- */
.hero-qcp-container {
    position: relative;
    z-index: 4;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 6.5rem) clamp(1.25rem, 3vw, 2rem) clamp(3rem, 5vw, 4rem);
    flex: 1;
    display: flex;
    align-items: center;
}

/* ---- Editorial lede ---- */
.hero-qcp-lede {
    max-width: 36rem;
    color: var(--qcp-text);
    position: relative;
    padding-left: clamp(0.75rem, 2vw, 1.5rem);
}

.hero-qcp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);          /* HERO LOCK: yellow→blue-deep for trust-tone eyebrow */
    margin-bottom: 1.1rem;                /* HERO LOCK: tighter rhythm into headline */
}
.hero-qcp-eyebrow-mark {
    display: inline-block;
    width: 2.6rem;
    height: 2px;
    background: linear-gradient(90deg,    /* HERO LOCK: blue→green rule (pink+yellow stays on headline highlight only) */
        var(--qcp-blue) 0%,
        var(--qcp-green) 100%);
    border-radius: 1px;
    opacity: 1;
}
/* Trailing mark — mirrors the gradient so the eyebrow reads symmetrically:
   dash—TEXT—dash, with both dashes fading toward the text. */
.hero-qcp-eyebrow-mark--end {
    background: linear-gradient(90deg,
        var(--qcp-green) 0%,
        var(--qcp-blue) 100%);
}

.hero-qcp-headline {
    font-family: var(--qcp-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 5vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--qcp-text);
    margin: 0 0 1.25rem;                  /* HERO LOCK: tighter headline→sub rhythm */
    text-wrap: balance;
    max-width: 19ch;                      /* HERO LOCK: 18→19ch to avoid awkward "pass—at a" break */
}
.hero-qcp-headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--qcp-blue);
    position: relative;
    padding: 0 0.06em;
}
/* Pink highlighter behind PASS — bold hot pink fading to soft blush,
   complementing the green PASS glyphs sitting on top. */
.hero-qcp-headline em::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.30em;
    background: linear-gradient(90deg,
        rgba(240, 38, 122, 0.58) 0%,
        rgba(248, 140, 185, 0.55) 50%,
        rgba(253, 200, 220, 0.62) 100%);
    z-index: -1;
    border-radius: 1px;
}

.hero-qcp-sub {
    font-family: var(--qcp-sans);
    font-size: clamp(1rem, 1.05vw, 1.08rem);
    line-height: 1.65;
    color: var(--qcp-text-mid);
    margin: 0 0 2rem;                     /* HERO LOCK: 2.25→2rem, crisper handoff into CTAs */
    max-width: 32rem;                     /* HERO LOCK: 30→32rem to match the widened headline */
    font-weight: 400;
}

/* ---- CTAs ---- */
.hero-qcp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1rem;
}

.hero-qcp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 10px;
    padding: 0.95rem 1.6rem;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.28s ease;
    white-space: nowrap;
}
.hero-qcp-btn-arrow {
    display: inline-block;
    transition: transform 0.22s ease;
}

/* Primary CTA — vivid brand blue, premium shadow */
.hero-qcp-btn--primary {
    background: linear-gradient(180deg, var(--qcp-blue-soft) 0%, var(--qcp-blue) 100%);
    color: #fff;
    border: 1px solid var(--qcp-blue);
    /* HERO LOCK: softened shadow — feels premium instead of heavy */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 14px 28px -14px rgba(53, 92, 255, 0.42),
        0 2px 5px rgba(30, 42, 58, 0.09);
}
.hero-qcp-btn--primary:hover {
    background: linear-gradient(180deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    border-color: var(--qcp-blue-deep);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 20px 38px -10px rgba(40, 73, 216, 0.55),
        0 2px 6px rgba(30, 42, 58, 0.12);
}
.hero-qcp-btn--primary:hover .hero-qcp-btn-arrow {
    transform: translateX(3px);
}

/* Secondary CTA — refined white pill with hairline */
.hero-qcp-btn--ghost {
    background: rgba(255, 255, 255, 0.82);  /* HERO LOCK: 0.78→0.82, slightly more legible in any video lighting */
    color: var(--qcp-text);
    border: 1px solid var(--qcp-border);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.hero-qcp-btn--ghost .hero-qcp-btn-arrow {
    color: var(--qcp-blue);
}
.hero-qcp-btn--ghost:hover {
    background: #fff;
    border-color: rgba(53, 92, 255, 0.35);
    color: var(--qcp-blue-deep);
    transform: translateY(-1px);
}
.hero-qcp-btn--ghost:hover .hero-qcp-btn-arrow {
    transform: translateX(3px);
}

/* ============================================================
   5. Proof card — floating 4-column row anchored in the hero
   ============================================================ */
.hero-qcp-proofbar {
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32px;
    /* Pass 28b: stretch the trust strip nearly edge-to-edge.
       Gutters scale with viewport (~1rem on mobile, ~2rem on desktop).
       max-width removed so the band fills the full viewport width. */
    width: calc(100% - clamp(1rem, 2vw, 2rem));
    max-width: none;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px) saturate(1.1);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    box-shadow: var(--qcp-shadow-card);
    color: var(--qcp-text);
    overflow: hidden;
}
/* a thin colored rule along the top edge — ties back to the brand gradient */
.hero-qcp-proofbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--qcp-blue) 0%,
        var(--qcp-green) 38%,
        var(--qcp-pink) 70%,
        var(--qcp-yellow) 100%);
    opacity: 0.65;
}

.hero-qcp-proofbar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 1.35rem 1.5rem;
}
.proof-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    align-items: center;
    padding: 0.25rem 1.25rem;
    border-right: 1px solid rgba(30, 42, 58, 0.08);
}
.proof-item:last-child {
    border-right: 0;
}
.proof-item:first-child {
    padding-left: 0.25rem;
}

.proof-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    position: relative;
}
.proof-icon--blue {
    background: rgba(53, 92, 255, 0.12);
    color: var(--qcp-blue);
    box-shadow: 0 0 0 1px rgba(53, 92, 255, 0.18) inset;
}
.proof-icon--green {
    background: rgba(169, 216, 78, 0.22);
    color: var(--qcp-green-deep);
    box-shadow: 0 0 0 1px rgba(126, 168, 47, 0.22) inset;
}
.proof-icon--pink {
    background: rgba(232, 182, 216, 0.32);
    color: var(--qcp-pink-deep);
    box-shadow: 0 0 0 1px rgba(194, 127, 174, 0.22) inset;
}
.proof-icon--yellow {
    background: rgba(233, 209, 91, 0.26);
    color: var(--qcp-yellow-deep);
    box-shadow: 0 0 0 1px rgba(183, 157, 46, 0.22) inset;
}

.proof-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.proof-label {
    font-family: var(--qcp-sans);
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
}
.proof-item:nth-child(2) .proof-label { color: var(--qcp-green-deep); }
.proof-item:nth-child(3) .proof-label { color: var(--qcp-pink-deep); }
.proof-item:nth-child(4) .proof-label { color: var(--qcp-yellow-deep); }

.proof-value {
    font-family: var(--qcp-display);
    font-size: clamp(1.55rem, 1.9vw, 1.85rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--qcp-text);
    letter-spacing: -0.01em;
}
.proof-value--tight {
    font-size: clamp(1.15rem, 1.3vw, 1.35rem);
    line-height: 1.15;
}
.proof-note {
    font-family: var(--qcp-sans);
    font-size: 0.75rem;
    color: var(--qcp-text-muted);
    line-height: 1.35;
    font-weight: 400;
}

/* -----------------------------------------------------------
   6. Responsive
   ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .proof-item { padding: 0.25rem 1rem; }
    .proof-icon { width: 42px; height: 42px; font-size: 1.1rem; }
}

@media (max-width: 991.98px) {
    .hero-qcp {
        min-height: clamp(660px, 88vh, 840px);
        padding-bottom: 260px; /* room for 2x2 proof grid on tablet */
    }
    /* Tablet veil: top-down ivory that protects the text zone up top and
       fades to clear through the middle, so the video stays visible.
       No uniform full-height wash. */
    .hero-qcp-veil {
        background: linear-gradient(180deg,
            rgba(250, 248, 243, 0.78) 0%,
            rgba(250, 248, 243, 0.52) 28%,
            rgba(250, 248, 243, 0.18) 50%,
            rgba(250, 248, 243, 0.00) 72%);
    }
    /* Keep colored atmospherics but recentered for a narrower viewport */
    .hero-qcp-tint {
        background:
            radial-gradient(circle at 92% 80%,
                rgba(232, 182, 216, 0.32) 0%,
                rgba(232, 182, 216, 0.16) 20%,
                rgba(232, 182, 216, 0.00) 46%),
            radial-gradient(circle at 88% 14%,
                rgba(169, 216, 78, 0.28) 0%,
                rgba(169, 216, 78, 0.14) 22%,
                rgba(169, 216, 78, 0.00) 46%),
            radial-gradient(circle at 14% 18%,
                rgba(53, 92, 255, 0.14) 0%,
                rgba(53, 92, 255, 0.00) 38%),
            radial-gradient(circle at 6% 90%,
                rgba(233, 209, 91, 0.18) 0%,
                rgba(233, 209, 91, 0.00) 20%);
    }
    .hero-qcp-vignette {
        background: linear-gradient(180deg,
            rgba(250, 248, 243, 0) 70%,
            rgba(250, 248, 243, 0.22) 100%);
    }
    .hero-qcp::after { display: none; }
    .hero-qcp-container {
        padding-top: clamp(3rem, 9vw, 5rem);
        padding-bottom: 2rem;
    }
    .hero-qcp-lede { max-width: 42rem; padding-left: 0; }

    .hero-qcp-proofbar-inner {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0;
    }
    .proof-item {
        border-right: 0;
        border-bottom: 1px solid rgba(30, 42, 58, 0.08);
        padding: 0.85rem 1rem;
    }
    .proof-item:first-child { padding-left: 1rem; }
    .proof-item:nth-last-child(1),
    .proof-item:nth-last-child(2) { border-bottom: 0; }
    .proof-item:nth-child(odd) { border-right: 1px solid rgba(30, 42, 58, 0.08); }
}

@media (max-width: 575.98px) {
    .hero-qcp {
        min-height: auto;
        padding-bottom: 0; /* proof card unpins on phone */
    }
    /* Phone veil: firmer ivory behind the top text block, fully clear
       through the mid video zone. NOT a uniform wash.
       HERO LOCK: top opacity 0.86→0.80 so it no longer reads as foggy on phones. */
    .hero-qcp-veil {
        background: linear-gradient(180deg,
            rgba(250, 248, 243, 0.80) 0%,
            rgba(250, 248, 243, 0.56) 28%,
            rgba(250, 248, 243, 0.18) 55%,
            rgba(250, 248, 243, 0.00) 78%);
    }
    .hero-qcp-tint {
        background:
            radial-gradient(circle at 92% 78%,
                rgba(232, 182, 216, 0.36) 0%,
                rgba(232, 182, 216, 0.18) 22%,
                rgba(232, 182, 216, 0.00) 50%),
            radial-gradient(circle at 88% 10%,
                rgba(169, 216, 78, 0.30) 0%,
                rgba(169, 216, 78, 0.14) 22%,
                rgba(169, 216, 78, 0.00) 48%),
            radial-gradient(circle at 10% 14%,
                rgba(53, 92, 255, 0.18) 0%,
                rgba(53, 92, 255, 0.00) 40%),
            radial-gradient(circle at 4% 92%,
                rgba(233, 209, 91, 0.20) 0%,
                rgba(233, 209, 91, 0.00) 22%);
    }
    .hero-qcp-vignette {
        background: linear-gradient(180deg,
            rgba(250, 248, 243, 0) 80%,
            rgba(250, 248, 243, 0.30) 100%);
    }
    .hero-qcp-container {
        padding: 2.75rem 1.25rem 3rem;
    }
    .hero-qcp-headline {
        font-size: clamp(2.1rem, 8.8vw, 2.9rem);
        max-width: none;
    }
    .hero-qcp-sub { margin-bottom: 1.75rem; }
    .hero-qcp-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .hero-qcp-btn {
        width: 100%;
        justify-content: center;
    }

    /* Proof card becomes an inline stacked card below the lede on phone */
    .hero-qcp-proofbar {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: calc(100% - 2rem);
        margin: 0 auto 2rem;
        border-radius: 14px;
    }
    .hero-qcp-proofbar-inner {
        grid-template-columns: 1fr;
        padding: 0.6rem 0.9rem;
    }
    .proof-item {
        padding: 0.75rem 0.4rem;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(30, 42, 58, 0.08);
    }
    .proof-item:last-child { border-bottom: 0; }
    .proof-icon { width: 40px; height: 40px; font-size: 1.05rem; }
    .proof-value { font-size: 1.35rem; }
    .proof-value--tight { font-size: 1.05rem; }
}

/* -----------------------------------------------------------
   7. Accessibility — reduced motion
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-qcp-btn,
    .hero-qcp-btn-arrow { transition: none !important; }
}

/* ============================================================
   8. HOMEPAGE BODY — SUBTLE BACKGROUND SYSTEM (Paper + Diagonal)
   Large-scale, very low opacity, scoped to body.page-home.
   Two pattern families only. No loud playful textures.
   ============================================================ */
body.page-home {
    background-color: var(--qcp-canvas);
    /* Paper grain — two tiny dot layers offset for a "fibre" effect */
    background-image:
        radial-gradient(rgba(30, 42, 58, 0.035) 1px, transparent 1px),
        radial-gradient(rgba(30, 42, 58, 0.025) 1px, transparent 1px);
    background-size: 28px 28px, 18px 18px;
    background-position: 0 0, 14px 10px;
    background-attachment: fixed;
}

/* Section alternation — "paper" default canvas, "tint" = soft blue diagonal,
   "paper-plus" = a slightly warmer ivory. Each section sits on its own
   quiet surface so the page doesn't feel like one long card grid. */
body.page-home .section-paper,
body.page-home .branch-section-premium {
    background-color: var(--qcp-canvas);
    position: relative;
}

body.page-home .section-tint {
    background-color: #FBF9F4;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(53, 92, 255, 0.028) 0px,
            rgba(53, 92, 255, 0.028) 1px,
            transparent 1px,
            transparent 22px),
        radial-gradient(ellipse 720px 520px at 88% 12%,
            rgba(232, 182, 216, 0.18) 0%,
            rgba(232, 182, 216, 0) 70%),
        radial-gradient(ellipse 620px 480px at 6% 92%,
            rgba(169, 216, 78, 0.14) 0%,
            rgba(169, 216, 78, 0) 70%);
    position: relative;
}

body.page-home .how-it-works-section,
body.page-home .why-trust-section,
body.page-home .next-step-section {
    background-color: var(--qcp-canvas);
    position: relative;
}

/* Alternating thin hairline between sections instead of shadow drop */
body.page-home section + section {
    border-top: 1px solid transparent;
}
body.page-home .section-tint {
    border-top: 1px solid var(--qcp-border);
    border-bottom: 1px solid var(--qcp-border);
}

/* Section label — restrained brand deep tone, not the legacy orange */
body.page-home .section-label {
    color: var(--qcp-blue-deep) !important;
    font-family: var(--qcp-sans);
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 0.74rem !important;
    display: inline-block;
    position: relative;
    padding: 0 1.75rem;
    margin-bottom: 1rem;
}
body.page-home .section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--qcp-blue), var(--qcp-blue-soft));
    border-radius: 2px;
}
/* Trailing dash on the right — balances the eyebrow (dash—LABEL—dash).
   Uses currentColor so it auto-matches each section's label color (which
   already matches that section's left-dash hue), without having to mirror
   every per-section ::before color override. */
body.page-home .section-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 2px;
    background: currentColor;
    opacity: 0.85;
    border-radius: 2px;
}
/* Per-section label palette — green on branch, pink on catalog, yellow-deep on why-trust */
body.page-home .branch-section-premium .section-label {
    color: var(--qcp-green-deep) !important;
}
body.page-home .branch-section-premium .section-label::before {
    background: linear-gradient(90deg, var(--qcp-green), var(--qcp-green-soft));
}
body.page-home .section-tint .section-label {
    color: var(--qcp-pink-deep) !important;
}
body.page-home .section-tint .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink), var(--qcp-pink-soft));
}
body.page-home .why-trust-section .section-label {
    color: var(--qcp-yellow-deep) !important;
}
body.page-home .why-trust-section .section-label::before {
    background: linear-gradient(90deg, var(--qcp-yellow), var(--qcp-yellow-soft));
}

/* Section heading + intro unified with editorial tone */
body.page-home section h2 {
    font-family: var(--qcp-display);
    color: var(--qcp-text);
    font-weight: 600;
    font-size: clamp(1.85rem, 2.6vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}
body.page-home .section-intro {
    color: var(--qcp-text-mid);
    max-width: 44rem;
    margin: 0 auto;
    font-family: var(--qcp-sans);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ============================================================
   9. TRUST STRIP — editorial proof band
   ============================================================ */
body.page-home .trust-strip {
    background: var(--qcp-paper);
    border-top: 1px solid var(--qcp-border);
    border-bottom: 1px solid var(--qcp-border);
    padding: 1.1rem 0;
    position: relative;
}
/* Hairline brand gradient along the top edge of the proof band */
body.page-home .trust-strip::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--qcp-blue) 18%,
        var(--qcp-green) 42%,
        var(--qcp-pink) 62%,
        var(--qcp-yellow) 82%,
        transparent 100%);
    opacity: 0.6;
}
body.page-home .trust-strip .trust-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}
body.page-home .trust-strip .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--qcp-sans);
    font-size: 0.85rem;
    color: var(--qcp-text-soft);
    letter-spacing: 0.01em;
}
body.page-home .trust-strip .trust-item strong {
    color: var(--qcp-text);
    font-weight: 700;
    letter-spacing: -0.005em;
}
body.page-home .trust-strip .trust-item i {
    font-size: 1rem;
    padding: 0.35rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue);
    box-shadow: 0 0 0 1px rgba(53, 92, 255, 0.14) inset;
}
body.page-home .trust-strip .trust-item:nth-child(3) i {
    background: rgba(169, 216, 78, 0.18);
    color: var(--qcp-green-deep);
    box-shadow: 0 0 0 1px rgba(126, 168, 47, 0.22) inset;
}
body.page-home .trust-strip .trust-item:nth-child(5) i {
    background: rgba(232, 182, 216, 0.28);
    color: var(--qcp-pink-deep);
    box-shadow: 0 0 0 1px rgba(194, 127, 174, 0.22) inset;
}
body.page-home .trust-strip .trust-item:nth-child(7) i {
    background: rgba(233, 209, 91, 0.24);
    color: var(--qcp-yellow-deep);
    box-shadow: 0 0 0 1px rgba(183, 157, 46, 0.22) inset;
}
body.page-home .trust-strip .trust-item:nth-child(9) i {
    background: rgba(92, 141, 255, 0.14);
    color: var(--qcp-blue-deep);
    box-shadow: 0 0 0 1px rgba(53, 92, 255, 0.18) inset;
}
body.page-home .trust-strip .trust-divider {
    width: 1px;
    height: 1.2rem;
    background: var(--qcp-border);
}

/* ============================================================
   10. BRANCH SELECTION SECTION — editorial decision layout
   ============================================================ */
body.page-home .branch-section-premium {
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 5.5rem);
}
body.page-home .branch-section-premium .section-label {
    display: inline-block;
}
/* Three-up explainer row — editorial rule-separated */
body.page-home .branch-explainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04);
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
body.page-home .branch-explainer-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    border-right: 1px solid var(--qcp-border);
}
body.page-home .branch-explainer-item:last-child { border-right: 0; }

body.page-home .branch-explainer-item i {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
body.page-home .branch-explainer-item:nth-child(1) i {
    background: rgba(53, 92, 255, 0.12);
    color: var(--qcp-blue);
    box-shadow: 0 0 0 1px rgba(53, 92, 255, 0.18) inset;
}
body.page-home .branch-explainer-item:nth-child(2) i {
    background: rgba(232, 182, 216, 0.30);
    color: var(--qcp-pink-deep);
    box-shadow: 0 0 0 1px rgba(194, 127, 174, 0.22) inset;
}
body.page-home .branch-explainer-item:nth-child(3) i {
    background: rgba(169, 216, 78, 0.24);
    color: var(--qcp-green-deep);
    box-shadow: 0 0 0 1px rgba(126, 168, 47, 0.22) inset;
}
body.page-home .branch-explainer-item strong {
    display: block;
    font-family: var(--qcp-sans);
    font-weight: 700;
    color: var(--qcp-text);
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
    letter-spacing: -0.005em;
}
body.page-home .branch-explainer-item span {
    display: block;
    font-family: var(--qcp-sans);
    color: var(--qcp-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Branch cards — premium, country-accented, less Bootstrap */
body.page-home .branch-section-premium .branch-card.premium-branch-card {
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--qcp-text);
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
    position: relative;
    height: 100%;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04);
}
body.page-home .branch-section-premium .branch-card.premium-branch-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--qcp-blue), var(--qcp-blue-soft));
    z-index: 2;
}
body.page-home .branch-section-premium .branch-card.premium-branch-card.branch-card-secondary::before {
    background: linear-gradient(180deg, var(--qcp-green-deep), var(--qcp-green));
}
body.page-home .branch-section-premium .branch-card.premium-branch-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 92, 255, 0.25);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 28px 56px -28px rgba(30, 42, 58, 0.24),
        0 10px 24px -14px rgba(30, 42, 58, 0.12);
}
body.page-home .branch-section-premium .branch-card.premium-branch-card.branch-card-secondary:hover {
    border-color: rgba(126, 168, 47, 0.30);
}

body.page-home .branch-section-premium .branch-card-top {
    position: relative;
    padding: 0;
    min-height: 200px;
    overflow: hidden;
    display: block;
}
body.page-home .branch-section-premium .branch-flag.frame-flag {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
    z-index: 1;
}
body.page-home .branch-section-premium .branch-flag.frame-flag img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
body.page-home .branch-section-premium .branch-pill {
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue-deep);
    font-family: var(--qcp-sans);
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-pill {
    background: rgba(169, 216, 78, 0.22);
    color: var(--qcp-green-deep);
}

body.page-home .branch-section-premium .branch-card-content {
    padding: 0.5rem 1.6rem 1.6rem 1.85rem;
    text-align: left;
}
body.page-home .branch-section-premium .branch-card-content h3 {
    font-family: var(--qcp-display);
    font-size: clamp(1.6rem, 1.9vw, 1.9rem);
    font-weight: 600;
    color: var(--qcp-text);
    margin: 1rem 0 0.5rem;
    letter-spacing: -0.01em;
}
body.page-home .branch-section-premium .branch-card-content p {
    color: var(--qcp-text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
body.page-home .branch-section-premium .branch-meta {
    font-family: var(--qcp-sans);
    font-size: 0.82rem;
    color: var(--qcp-text-muted);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--qcp-border);
}
body.page-home .branch-section-premium .branch-meta i {
    color: var(--qcp-blue);
    margin-right: 0.3rem;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-meta i {
    color: var(--qcp-green-deep);
}
body.page-home .branch-section-premium .branch-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--qcp-blue-deep);
    margin-top: 0.75rem;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-cta-row {
    color: var(--qcp-green-deep);
}
body.page-home .branch-section-premium .branch-cta-row i {
    font-size: 1.3rem;
    transition: transform 0.2s ease;
}
body.page-home .branch-section-premium .branch-card:hover .branch-cta-row i {
    transform: translateX(3px);
}

/* ============================================================
   11. WHAT WE OFFER — curated catalog preview (less repetitive)
   ============================================================ */
body.page-home .section-tint {
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 5.5rem);
}

/* Catalog counts strip — pill chips in brand palette, not orange */
body.page-home .catalog-counts-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.7rem;
    margin-bottom: 2.5rem;
}
body.page-home .catalog-count-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    font-family: var(--qcp-sans);
    font-size: 0.82rem;
    color: var(--qcp-text-soft);
    letter-spacing: 0.01em;
}
body.page-home .catalog-count-chip strong {
    color: var(--qcp-blue-deep);
    font-weight: 700;
    font-size: 0.95rem;
}
body.page-home .catalog-count-chip:nth-child(2) strong { color: var(--qcp-green-deep); }
body.page-home .catalog-count-chip:nth-child(3) strong { color: var(--qcp-pink-deep); }
body.page-home .catalog-count-chip:nth-child(4) strong { color: var(--qcp-yellow-deep); }
body.page-home .catalog-counts-link {
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--qcp-blue-deep);
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    transition: background 0.2s ease;
}
body.page-home .catalog-counts-link:hover {
    background: rgba(53, 92, 255, 0.08);
}

/* Catalog preview grid — mixed layout feeling (first card spans larger) */
body.page-home .catalog-preview-grid { gap: 1rem; }

body.page-home .mini-program-card.catalog-type-card {
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 14px;
    padding: 1.6rem 1.3rem 1.3rem;
    text-decoration: none;
    color: var(--qcp-text);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.22s ease;
    height: 100%;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04);
}
/* Chip row wrapper — shares top line of the card, wraps cleanly */
body.page-home .mini-program-card.catalog-type-card .catalog-type-chip {
    margin-right: 0.4rem;
}
body.page-home .mini-program-card.catalog-type-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--qcp-blue);
    opacity: 0.9;
}
body.page-home .mini-program-card.type-course::before   { background: var(--qcp-blue); }
body.page-home .mini-program-card.type-bundle::before   { background: var(--qcp-green); }
body.page-home .mini-program-card.type-book::before     { background: var(--qcp-pink); }
body.page-home .mini-program-card.type-service::before  { background: var(--qcp-yellow); }

body.page-home .mini-program-card.catalog-type-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 92, 255, 0.22);
    box-shadow:
        0 24px 52px -28px rgba(30, 42, 58, 0.26),
        0 10px 22px -14px rgba(30, 42, 58, 0.12);
}

body.page-home .catalog-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--qcp-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    align-self: flex-start;
}
body.page-home .mini-program-card.type-course .catalog-type-chip {
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue-deep);
}
body.page-home .mini-program-card.type-bundle .catalog-type-chip {
    background: rgba(169, 216, 78, 0.22);
    color: var(--qcp-green-deep);
}
body.page-home .mini-program-card.type-book .catalog-type-chip {
    background: rgba(232, 182, 216, 0.30);
    color: var(--qcp-pink-deep);
}
body.page-home .mini-program-card.type-service .catalog-type-chip {
    background: rgba(233, 209, 91, 0.24);
    color: var(--qcp-yellow-deep);
}

body.page-home .catalog-branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--qcp-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--qcp-canvas);
    color: var(--qcp-text-muted);
    border: 1px solid var(--qcp-border);
    align-self: flex-start;
}
/* Override legacy absolute positioning from style.css so chips stack
   cleanly in the card flex-column. */
body.page-home .catalog-preview-grid .catalog-type-chip,
body.page-home .catalog-preview-grid .catalog-branch-chip {
    position: static !important;
}
body.page-home .catalog-preview-grid .catalog-branch-chip {
    margin-bottom: 0.2rem;
}

body.page-home .mini-program-card .mini-program-pill {
    display: inline-block;
    font-family: var(--qcp-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qcp-text-muted);
    margin-top: 0.2rem;
}
body.page-home .mini-program-card h4 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.18rem;
    line-height: 1.22;
    color: var(--qcp-text);
    margin: 0.2rem 0 0.3rem;
    letter-spacing: -0.005em;
}
body.page-home .mini-program-card p {
    color: var(--qcp-text-muted);
    font-family: var(--qcp-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
}
body.page-home .catalog-card-cta {
    margin-top: auto;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--qcp-blue-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
body.page-home .mini-program-card.type-bundle .catalog-card-cta { color: var(--qcp-green-deep); }
body.page-home .mini-program-card.type-book .catalog-card-cta { color: var(--qcp-pink-deep); }
body.page-home .mini-program-card.type-service .catalog-card-cta { color: var(--qcp-yellow-deep); }
body.page-home .catalog-card-cta i {
    transition: transform 0.2s ease;
}
body.page-home .mini-program-card:hover .catalog-card-cta i {
    transform: translateX(3px);
}

/* Catalog CTAs — replace legacy orange with brand blue */
body.page-home .section-tint .btn-primary-custom {
    background: linear-gradient(180deg, var(--qcp-blue-soft) 0%, var(--qcp-blue) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--qcp-blue) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.5rem !important;
    font-family: var(--qcp-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    font-size: 0.92rem !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 14px 28px -12px rgba(53, 92, 255, 0.40) !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
body.page-home .section-tint .btn-primary-custom:hover {
    background: linear-gradient(180deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%) !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 18px 34px -10px rgba(40, 73, 216, 0.50) !important;
}
body.page-home .section-tint .btn-outline-primary-custom {
    background: var(--qcp-paper) !important;
    color: var(--qcp-text) !important;
    border: 1px solid var(--qcp-border) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.5rem !important;
    font-family: var(--qcp-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    font-size: 0.92rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
body.page-home .section-tint .btn-outline-primary-custom:hover {
    background: #fff !important;
    border-color: rgba(53, 92, 255, 0.35) !important;
    color: var(--qcp-blue-deep) !important;
}

/* ============================================================
   12. Responsive — sections
   ============================================================ */
@media (max-width: 991.98px) {
    body.page-home .branch-explainer {
        grid-template-columns: 1fr;
    }
    body.page-home .branch-explainer-item {
        border-right: 0;
        border-bottom: 1px solid var(--qcp-border);
    }
    body.page-home .branch-explainer-item:last-child { border-bottom: 0; }
}

@media (max-width: 767.98px) {
    body.page-home .trust-strip .trust-strip-inner {
        justify-content: flex-start;
        row-gap: 0.65rem;
    }
    body.page-home .trust-strip .trust-divider { display: none; }
    body.page-home .trust-strip .trust-item {
        width: calc(50% - 1rem);
    }
    body.page-home .catalog-branch-chip {
        position: static;
        margin-bottom: 0.2rem;
    }
}

@media (max-width: 575.98px) {
    body.page-home .trust-strip .trust-item { width: 100%; }
    body.page-home .branch-section-premium .branch-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   SECTION 12 — HOMEPAGE TAIL
   Why-Trust, How-It-Works, Next-Step, Reviews
   Scope: body.page-home (home-specific markup)
   ============================================================ */

/* --- Why Trust Us --- */
body.page-home .why-trust-section {
    position: relative;
}
body.page-home .why-trust-grid {
    margin-top: 0.5rem;
}
body.page-home .why-trust-card {
    position: relative;
    height: 100%;
    padding: 2rem 1.8rem 1.8rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 24px 48px -32px rgba(30,42,58,0.14);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.page-home .why-trust-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--qcp-yellow) 0%, var(--qcp-yellow-deep) 100%);
    opacity: 0.85;
}
body.page-home .why-trust-card:nth-child(2) .why-trust-stat,
body.page-home .why-trust-grid > .col-md-6:nth-child(2) .why-trust-card::before {
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
}
body.page-home .why-trust-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30,42,58,0.16);
    box-shadow: 0 1px 2px rgba(30,42,58,0.06),
                0 32px 56px -28px rgba(30,42,58,0.20);
}
body.page-home .why-trust-stat {
    font-family: var(--qcp-display);
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    line-height: 1;
    font-weight: 700;
    color: var(--qcp-yellow-deep);
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
}
body.page-home .why-trust-grid > .col-md-6:nth-child(2) .why-trust-stat {
    color: var(--qcp-blue-deep);
}
body.page-home .why-trust-card h4 {
    font-family: var(--qcp-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.65rem;
}
body.page-home .why-trust-card p {
    color: var(--qcp-text-muted);
    font-size: 0.96rem;
    line-height: 1.62;
    margin-bottom: 1.2rem;
}
body.page-home .why-trust-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--qcp-blue-deep);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: gap .3s ease, color .3s ease;
}
body.page-home .why-trust-link:hover {
    color: var(--qcp-blue);
    gap: 0.7rem;
}
body.page-home .why-trust-link i {
    font-size: 0.9rem;
    transition: transform .3s ease;
}
body.page-home .why-trust-link:hover i {
    transform: translateX(2px);
}

/* --- How It Works --- */
body.page-home .how-it-works-section {
    position: relative;
    background-color: #FBF9F4;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(53,92,255,0.022) 0px, rgba(53,92,255,0.022) 1px,
            transparent 1px, transparent 24px),
        radial-gradient(ellipse 540px 420px at 92% 90%, rgba(169,216,78,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 520px 420px at 4% 10%, rgba(53,92,255,0.10) 0%, transparent 70%);
}
body.page-home .how-it-works-section .section-label {
    color: var(--qcp-blue-deep);
}
body.page-home .how-it-works-section .section-label::before {
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
}
body.page-home .how-it-works-section .row {
    position: relative;
}
body.page-home .how-step-card {
    position: relative;
    height: 100%;
    padding: 1.9rem 1.5rem 1.6rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 18px 40px -28px rgba(30,42,58,0.14);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.page-home .how-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(30,42,58,0.06),
                0 28px 52px -24px rgba(30,42,58,0.22);
}
body.page-home .how-step-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--qcp-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--qcp-paper);
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    box-shadow: 0 6px 14px -4px rgba(53,92,255,0.45);
}
body.page-home .how-it-works-section .row > div:nth-child(2) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-green) 0%, var(--qcp-green-deep) 100%);
    box-shadow: 0 6px 14px -4px rgba(169,216,78,0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(3) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-pink) 0%, var(--qcp-pink-deep) 100%);
    box-shadow: 0 6px 14px -4px rgba(232,182,216,0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(4) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-yellow) 0%, var(--qcp-yellow-deep) 100%);
    box-shadow: 0 6px 14px -4px rgba(233,209,91,0.55);
}
body.page-home .how-step-icon {
    width: 56px;
    height: 56px;
    margin: 0.65rem auto 1rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
}
body.page-home .how-it-works-section .row > div:nth-child(2) .how-step-icon {
    color: var(--qcp-green-deep);
    background: rgba(169,216,78,0.16);
}
body.page-home .how-it-works-section .row > div:nth-child(3) .how-step-icon {
    color: var(--qcp-pink-deep);
    background: rgba(232,182,216,0.22);
}
body.page-home .how-it-works-section .row > div:nth-child(4) .how-step-icon {
    color: var(--qcp-yellow-deep);
    background: rgba(233,209,91,0.20);
}
body.page-home .how-step-card h4 {
    font-family: var(--qcp-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.5rem;
}
body.page-home .how-step-card p {
    color: var(--qcp-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* --- Next Step (visitor intent router) --- */
body.page-home .next-step-section {
    position: relative;
}
body.page-home .next-step-section .section-label {
    color: var(--qcp-green-deep);
}
body.page-home .next-step-section .section-label::before {
    background: linear-gradient(90deg, var(--qcp-green) 0%, var(--qcp-green-deep) 100%);
}
body.page-home .next-step-grid .col-md-6 {
    display: flex;
}
body.page-home .next-step-card {
    position: relative;
    display: block;
    flex: 1;
    height: 100%;
    padding: 1.7rem 1.4rem 1.5rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 16px;
    color: var(--qcp-text);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04);
    overflow: hidden;
}
body.page-home .next-step-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
body.page-home .next-step-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30,42,58,0.18);
    box-shadow: 0 24px 52px -28px rgba(30,42,58,0.22);
}
body.page-home .next-step-card:hover::after { transform: scaleX(1); }
body.page-home .next-step-card--primary {
    background: linear-gradient(135deg, rgba(53,92,255,0.08) 0%, rgba(53,92,255,0.02) 100%);
    border-color: rgba(53,92,255,0.25);
}
body.page-home .next-step-card--primary::after { transform: scaleX(1); }
body.page-home .next-step-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 1.2rem;
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
    margin-bottom: 0.85rem;
}
body.page-home .next-step-grid .col-md-6:nth-child(2) .next-step-icon {
    color: var(--qcp-green-deep);
    background: rgba(169,216,78,0.16);
}
body.page-home .next-step-grid .col-md-6:nth-child(3) .next-step-icon {
    color: var(--qcp-pink-deep);
    background: rgba(232,182,216,0.22);
}
body.page-home .next-step-grid .col-md-6:nth-child(4) .next-step-icon {
    color: var(--qcp-yellow-deep);
    background: rgba(233,209,91,0.18);
}
body.page-home .next-step-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--qcp-text-faint);
    margin-bottom: 0.35rem;
}
body.page-home .next-step-card h4 {
    font-family: var(--qcp-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.35rem;
}
body.page-home .next-step-card p {
    color: var(--qcp-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}
body.page-home .next-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--qcp-blue-deep);
    transition: gap .3s ease;
}
body.page-home .next-step-card:hover .next-step-link { gap: 0.6rem; }

/* --- Reviews / Testimonials (home) --- */
body.page-home #reviews.bg-light-custom {
    background-color: #FBF9F4 !important;
    background-image:
        radial-gradient(rgba(30,42,58,0.035) 1px, transparent 1px),
        radial-gradient(rgba(232,182,216,0.14) 0%, transparent 60%);
    background-size: 28px 28px, 100% 100%;
    background-position: 0 0, 92% 12%;
}
body.page-home #reviews .section-label {
    color: var(--qcp-pink-deep);
}
body.page-home #reviews .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink) 0%, var(--qcp-pink-deep) 100%);
}
body.page-home #reviews h2 {
    font-family: var(--qcp-display);
}


/* ============================================================
   SECTION 13 — SITE-WIDE CHROME + SHARED SECTIONS
   Scope: body.public-ui (every public page including home)
   ============================================================ */

/* --- Canvas site-wide --- */
body.public-ui {
    background-color: var(--qcp-canvas);
    color: var(--qcp-text-soft);
    background-image:
        radial-gradient(rgba(30,42,58,0.032) 1px, transparent 1px),
        radial-gradient(rgba(30,42,58,0.022) 1px, transparent 1px);
    background-size: 28px 28px, 18px 18px;
    background-position: 0 0, 14px 10px;
    background-attachment: fixed;
}

body.public-ui h1,
body.public-ui h2,
body.public-ui h3 {
    color: var(--qcp-text);
    font-family: var(--qcp-display);
    letter-spacing: -0.01em;
}

body.public-ui .section-tint {
    background-color: #FBF9F4;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(53,92,255,0.026) 0px, rgba(53,92,255,0.026) 1px,
            transparent 1px, transparent 22px),
        radial-gradient(ellipse 680px 500px at 90% 10%, rgba(232,182,216,0.16) 0%, transparent 70%),
        radial-gradient(ellipse 600px 460px at 8% 92%, rgba(169,216,78,0.12) 0%, transparent 70%);
}

body.public-ui .bg-light-custom {
    background-color: #FBF9F4 !important;
}

/* --- Section labels site-wide --- */
body.public-ui .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
    margin-bottom: 0.9rem;
}
body.public-ui .section-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    border-radius: 2px;
}
body.public-ui .section-tint .section-label {
    color: var(--qcp-pink-deep);
}
body.public-ui .section-tint .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink) 0%, var(--qcp-pink-deep) 100%);
}

/* --- Topbar site-wide --- */
body.public-ui .premium-topbar {
    background: var(--qcp-canvas);
    border-bottom: 1px solid var(--qcp-border);
    color: var(--qcp-text-muted);
    font-size: 0.78rem;
    position: relative;
}
body.public-ui .premium-topbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(53,92,255,0.25), rgba(232,182,216,0.25), rgba(169,216,78,0.25), transparent);
}
body.public-ui .premium-topbar .topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qcp-text-mid);
}
body.public-ui .premium-topbar .topbar-chip i { color: var(--qcp-blue-deep); font-size: 0.82rem; }
body.public-ui .premium-topbar .topbar-chip + .topbar-chip { position: relative; padding-left: 0.9rem; }
body.public-ui .premium-topbar .topbar-chip + .topbar-chip::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 3px; border-radius: 50%; background: rgba(30,42,58,0.25);
}
body.public-ui .premium-topbar .topbar-tagline {
    font-family: var(--qcp-display); font-size: 0.95rem; color: var(--qcp-text-soft); font-style: italic;
}
body.public-ui .premium-topbar .social-icons a {
    color: var(--qcp-text-mid);
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease;
}
body.public-ui .premium-topbar .social-icons a:hover {
    background: var(--qcp-blue-tint);
    color: var(--qcp-blue-deep);
}

/* --- Navbar site-wide --- */
body.public-ui .premium-navbar {
    background: rgba(250,248,243,0.92) !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--qcp-border);
    box-shadow: none;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.public-ui .premium-navbar.is-scrolled {
    background: rgba(250,248,243,0.98) !important;
    border-bottom-color: rgba(30,42,58,0.12);
    box-shadow: 0 10px 24px -16px rgba(30,42,58,0.16);
}
body.public-ui .premium-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
body.public-ui .premium-brand .brand-emblem {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    box-shadow: 0 6px 16px -8px rgba(53,92,255,0.45),
                inset 0 1px 0 rgba(255,255,255,0.25);
}
body.public-ui .premium-brand .brand-copy { display: inline-flex; flex-direction: column; line-height: 1.1; }
body.public-ui .premium-brand .brand-copy small {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
    margin-bottom: 2px;
}
body.public-ui .premium-brand .brand-copy strong {
    font-family: var(--qcp-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--qcp-text);
}
body.public-ui .navbar .nav-link {
    position: relative;
    color: var(--qcp-text-soft) !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.55rem 0.9rem !important;
    border-radius: 999px;
    transition: color .25s ease, background .25s ease;
}
/* Hover — soft pale rose wash, no pill chrome yet */
body.public-ui .navbar .nav-link:hover {
    background: rgba(232, 182, 216, 0.22) !important;
    color: #B44A8A !important;
}
/* Active — "porcelain pink" pill: soft top-down gradient,
   inset white highlight, inner pink hairline, faint lifted shadow */
body.public-ui .navbar .nav-link.active {
    background: linear-gradient(180deg,
        rgba(232, 182, 216, 0.40) 0%,
        rgba(196, 106, 160, 0.18) 100%) !important;
    color: #B44A8A !important;
    font-weight: 600 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(196, 106, 160, 0.22),
        0 3px 8px -3px rgba(196, 106, 160, 0.28) !important;
}
body.public-ui .navbar .nav-link::after {
    display: none !important;
}
body.public-ui .navbar .nav-link:hover { color: var(--qcp-blue-deep) !important; }
body.public-ui .navbar .nav-link:hover::after,
body.public-ui .navbar .nav-link.active::after { transform: scaleX(1); }
body.public-ui .navbar .nav-link.active { color: var(--qcp-blue-deep) !important; font-weight: 600; }
body.public-ui .navbar .btn-get-started {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.1rem !important;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff !important;
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 22px -12px rgba(53,92,255,0.55),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
body.public-ui .navbar .btn-get-started:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 28px -12px rgba(53,92,255,0.65);
}
body.public-ui .premium-toggler {
    border: 1px solid var(--qcp-border);
    padding: 0.35rem 0.55rem;
}

/* --- Page header (inner pages) --- */
body.public-ui .page-header,
body.public-ui .page-header-premium {
    position: relative !important;
    padding: 4.5rem 0 3.5rem !important;
    background: #FBF9F4 !important;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(53,92,255,0.026) 0px, rgba(53,92,255,0.026) 1px,
            transparent 1px, transparent 22px),
        radial-gradient(ellipse 680px 420px at 92% 8%, rgba(232,182,216,0.20) 0%, transparent 70%),
        radial-gradient(ellipse 620px 440px at 6% 92%, rgba(169,216,78,0.16) 0%, transparent 70%) !important;
    border-bottom: 1px solid var(--qcp-border);
    overflow: hidden;
    color: var(--qcp-text) !important;
}
body.public-ui .page-header-premium .container,
body.public-ui .page-header .container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 12px !important; /* keep Bootstrap's horizontal gutter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.public-ui .page-header::before,
body.public-ui .page-header-premium::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-pink) 40%, var(--qcp-green) 75%, var(--qcp-yellow) 100%);
    opacity: 0.75;
}
body.public-ui .page-header-premium::after { display: none !important; }
body.public-ui .page-header h1,
body.public-ui .page-header-premium h1 {
    font-family: var(--qcp-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.2rem, 4.2vw, 3rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
    color: var(--qcp-text) !important;
    margin-bottom: 0.9rem !important;
    -webkit-text-fill-color: var(--qcp-text) !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
body.public-ui .page-header .page-header-copy,
body.public-ui .page-header-premium .page-header-copy,
body.public-ui .page-header p,
body.public-ui .page-header-premium p {
    color: var(--qcp-text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    max-width: 720px;
    margin-bottom: 0 !important;
}
body.public-ui .page-header .section-label,
body.public-ui .page-header-premium .section-label {
    color: var(--qcp-blue-deep) !important;
}
body.public-ui .page-header .section-label::before,
body.public-ui .page-header-premium .section-label::before {
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%) !important;
}
body.public-ui .page-header .breadcrumb,
body.public-ui .page-header-premium .breadcrumb {
    background: transparent;
    margin-top: 1rem;
    padding: 0;
}
body.public-ui .page-header .breadcrumb-item,
body.public-ui .page-header .breadcrumb-item a,
body.public-ui .page-header-premium .breadcrumb-item,
body.public-ui .page-header-premium .breadcrumb-item a {
    color: var(--qcp-text-mid) !important;
    font-size: 0.85rem;
    text-decoration: none;
}
body.public-ui .page-header .breadcrumb-item.active,
body.public-ui .page-header-premium .breadcrumb-item.active {
    color: var(--qcp-blue-deep) !important;
    font-weight: 600;
}
body.public-ui .page-header .breadcrumb-item + .breadcrumb-item::before,
body.public-ui .page-header-premium .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--qcp-text-faint);
}

/* contact.php uses dark-header legacy markup with inline styles — override */
body.page-contact .page-header h1,
body.page-contact .page-header .section-label,
body.page-contact .page-header p,
body.page-contact .page-header .breadcrumb-item,
body.page-contact .page-header .breadcrumb-item a {
    color: var(--qcp-text) !important;
}
body.page-contact .page-header p { color: var(--qcp-text-muted) !important; }
body.page-contact .page-header .section-label { color: var(--qcp-blue-deep) !important; }

/* --- CTA band site-wide --- */
body.public-ui .cta-band {
    position: relative;
    padding: 4rem 0;
    background-color: #0F1830;
    background-image:
        radial-gradient(ellipse 680px 420px at 12% 20%, rgba(53,92,255,0.35) 0%, transparent 65%),
        radial-gradient(ellipse 560px 360px at 88% 80%, rgba(232,182,216,0.20) 0%, transparent 65%),
        radial-gradient(ellipse 520px 360px at 92% 10%, rgba(169,216,78,0.15) 0%, transparent 65%),
        repeating-linear-gradient(135deg,
            rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px,
            transparent 1px, transparent 22px);
    color: #fff;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.public-ui .cta-band::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-pink) 40%, var(--qcp-green) 75%, var(--qcp-yellow) 100%);
    opacity: 0.8;
}
body.public-ui .cta-band h2 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
body.public-ui .cta-band h3 {
    font-family: var(--qcp-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qcp-green);
    margin-bottom: 1.2rem;
}
body.public-ui .cta-band p {
    color: rgba(255,255,255,0.82);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 1.8rem;
}
body.public-ui .cta-band .btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0F1830;
    background: #fff;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 16px 32px -16px rgba(0,0,0,0.4);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.public-ui .cta-band .btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
}
body.public-ui .cta-band .btn-outline-light-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease;
}
body.public-ui .cta-band .btn-outline-light-custom:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.55);
}

/* --- Newsletter site-wide --- */
body.public-ui .newsletter-section {
    background-color: #FBF9F4;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(169,216,78,0.04) 0px, rgba(169,216,78,0.04) 1px,
            transparent 1px, transparent 20px),
        radial-gradient(ellipse 520px 320px at 92% 50%, rgba(169,216,78,0.14) 0%, transparent 70%);
    border-top: 1px solid var(--qcp-border);
    border-bottom: 1px solid var(--qcp-border);
    padding: 3rem 0;
}
body.public-ui .newsletter-section h2 {
    font-family: var(--qcp-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.4rem;
}
body.public-ui .newsletter-section .text-muted {
    color: var(--qcp-text-muted) !important;
    font-size: 0.96rem;
}
body.public-ui .newsletter-form .form-control {
    padding: 0.75rem 1rem;
    border: 1px solid var(--qcp-border);
    background: var(--qcp-paper);
    border-radius: 12px;
    font-size: 0.92rem;
    color: var(--qcp-text);
    transition: border-color .25s ease, box-shadow .25s ease;
}
body.public-ui .newsletter-form .form-control:focus {
    border-color: var(--qcp-blue);
    box-shadow: 0 0 0 3px rgba(53,92,255,0.15);
    outline: none;
}
body.public-ui .newsletter-form .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--qcp-green) 0%, var(--qcp-green-deep) 100%);
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgba(126,168,47,0.55);
    transition: transform .25s ease, filter .25s ease;
}
body.public-ui .newsletter-form .btn-accent:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* --- Footer site-wide --- */
body.public-ui .premium-site-footer {
    position: relative;
    background-color: #0F1830;
    background-image:
        radial-gradient(ellipse 720px 460px at 8% 12%, rgba(53,92,255,0.22) 0%, transparent 65%),
        radial-gradient(ellipse 560px 360px at 92% 92%, rgba(232,182,216,0.12) 0%, transparent 65%),
        repeating-linear-gradient(135deg,
            rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px,
            transparent 1px, transparent 24px);
    color: rgba(255,255,255,0.78);
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
body.public-ui .premium-site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-pink) 40%, var(--qcp-green) 75%, var(--qcp-yellow) 100%);
    opacity: 0.7;
}
body.public-ui .footer-brand-card .brand-emblem-footer {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
body.public-ui .footer-brand-lockup {
    display: inline-flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1rem;
}
body.public-ui .footer-kicker {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-green);
    font-weight: 700;
    margin-bottom: 2px;
}
body.public-ui .footer-brand-card h3 {
    font-family: var(--qcp-display);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
body.public-ui .footer-description {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.68);
    margin-bottom: 1.2rem;
}
body.public-ui .footer-social-row {
    display: inline-flex;
    gap: 0.5rem;
}
body.public-ui .footer-social-row a {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, color .25s ease;
}
body.public-ui .footer-social-row a:hover {
    background: var(--qcp-blue);
    color: #fff;
    transform: translateY(-1px);
}
body.public-ui .footer-nav-card h5 {
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    margin-bottom: 1rem;
}
body.public-ui .footer-links a {
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color .25s ease, padding-left .25s ease;
    display: inline-block;
    padding: 0.25rem 0;
}
body.public-ui .footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}
body.public-ui .footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    body.public-ui .footer-contact-grid { grid-template-columns: 1fr 1fr; }
}
body.public-ui .footer-contact-card {
    padding: 1.1rem 1.1rem 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
body.public-ui .footer-contact-header {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.public-ui .footer-contact-header img {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
}
body.public-ui .footer-contact-header span {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
body.public-ui .footer-contact-header strong {
    display: block;
    font-family: var(--qcp-display);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
body.public-ui .footer-contact-list {
    font-size: 0.84rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0;
}
body.public-ui .footer-contact-list li { padding: 0.15rem 0; }
body.public-ui .footer-contact-list i {
    color: var(--qcp-green);
    margin-right: 0.45rem;
    font-size: 0.82rem;
}
body.public-ui .footer-bottom-bar {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
body.public-ui .footer-bottom-bar p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.58);
    margin: 0;
}
body.public-ui .footer-bottom-bar a { color: rgba(255,255,255,0.7); }
body.public-ui .footer-bottom-bar a:hover { color: #fff; }

/* --- Reviews / Testimonials cards site-wide --- */
body.public-ui #reviews .section-label { color: var(--qcp-pink-deep); }
body.public-ui #reviews .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink) 0%, var(--qcp-pink-deep) 100%);
}
body.public-ui .google-reviews-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 1.5rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px -14px rgba(30,42,58,0.14);
    width: fit-content;
    margin: 0 auto;
}
body.public-ui .google-reviews-badge .rating-text {
    font-family: var(--qcp-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--qcp-text);
    letter-spacing: 0.02em;
}
body.public-ui .google-reviews-badge .review-count {
    font-size: 0.8rem;
    color: var(--qcp-text-muted);
}
body.public-ui .review-card {
    height: 100%;
    padding: 1.3rem 1.2rem 1.2rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 16px 36px -24px rgba(30,42,58,0.18);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.public-ui .review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 44px -24px rgba(30,42,58,0.22);
    border-color: rgba(30,42,58,0.14);
}
body.public-ui .reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--qcp-display);
}
body.public-ui .reviewer-name {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--qcp-text);
}
body.public-ui .review-stars { color: var(--qcp-yellow-deep); font-size: 0.82rem; }
body.public-ui .review-text {
    color: var(--qcp-text-soft);
    font-size: 0.9rem;
    line-height: 1.62;
}

/* --- Inner-page cards: executive, location, feature, value, mv --- */
body.public-ui .executive-card {
    display: flex;
    flex-direction: column;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 28px 56px -32px rgba(30,42,58,0.20);
    transition: transform .3s ease, box-shadow .3s ease;
}
body.public-ui .executive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 36px 64px -32px rgba(30,42,58,0.28);
}
body.public-ui .executive-card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--qcp-canvas-deep);
}
body.public-ui .executive-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
body.public-ui .executive-card:hover .executive-card-media img {
    transform: scale(1.03);
}
body.public-ui .executive-card-body {
    padding: 1.6rem 1.8rem 1.8rem;
}
body.public-ui .executive-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
body.public-ui .executive-card-secondary .executive-badge {
    color: var(--qcp-green-deep);
    background: rgba(169,216,78,0.18);
}
body.public-ui .executive-card h3 {
    font-family: var(--qcp-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.6rem;
}
body.public-ui .credential-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}
body.public-ui .credential-tags span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    background: var(--qcp-canvas-deep);
    color: var(--qcp-text-mid);
    border-radius: 999px;
    border: 1px solid var(--qcp-border);
}
body.public-ui .executive-experience {
    font-size: 0.86rem;
    color: var(--qcp-text-muted);
    margin-bottom: 0.85rem;
}
body.public-ui .executive-quote {
    position: relative;
    padding: 0.85rem 1rem;
    margin: 0.5rem 0 1rem;
    background: linear-gradient(135deg, rgba(53,92,255,0.05) 0%, rgba(53,92,255,0.02) 100%);
    border-left: 3px solid var(--qcp-blue);
    border-radius: 0 12px 12px 0;
    font-family: var(--qcp-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--qcp-text-soft);
    line-height: 1.5;
}
body.public-ui .executive-card-secondary .executive-quote {
    background: linear-gradient(135deg, rgba(169,216,78,0.08) 0%, rgba(169,216,78,0.02) 100%);
    border-left-color: var(--qcp-green);
}
body.public-ui .executive-card-body p {
    font-size: 0.92rem;
    color: var(--qcp-text-muted);
    line-height: 1.62;
    margin-bottom: 0.6rem;
}

body.public-ui .location-card {
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 24px 48px -28px rgba(30,42,58,0.18);
}
body.public-ui .premium-location-card {
    position: relative;
}
body.public-ui .premium-location-card::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    z-index: 2;
}
body.public-ui .premium-location-card-secondary::before {
    background: linear-gradient(180deg, var(--qcp-green) 0%, var(--qcp-green-deep) 100%);
}
body.public-ui .location-card-header {
    padding: 1rem 1.25rem;
    font-family: var(--qcp-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--qcp-text);
    background: linear-gradient(135deg, rgba(53,92,255,0.08) 0%, rgba(53,92,255,0.02) 100%);
    border-bottom: 1px solid var(--qcp-border);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
body.public-ui .location-card-header-ph {
    background: linear-gradient(135deg, rgba(169,216,78,0.12) 0%, rgba(169,216,78,0.02) 100%);
}
body.public-ui .location-flag-mini img {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--qcp-border);
}
body.public-ui .location-card-body {
    padding: 1.5rem 1.6rem;
}
body.public-ui .location-card-body h2,
body.public-ui .location-card-body h3 {
    font-family: var(--qcp-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.4rem;
}
body.public-ui .location-intro {
    color: var(--qcp-text-muted);
    font-size: 0.96rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}
body.public-ui .location-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
}
body.public-ui .location-detail-item h5 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
    margin: 0 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
body.public-ui .location-detail-item h5 i { font-size: 0.82rem; }
body.public-ui .location-detail-item p {
    font-size: 0.88rem;
    color: var(--qcp-text-soft);
    line-height: 1.5;
    margin: 0;
}
body.public-ui .location-experience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
body.public-ui .location-experience-list span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    color: var(--qcp-text-soft);
    background: var(--qcp-canvas-deep);
    border: 1px solid var(--qcp-border);
    border-radius: 999px;
}
body.public-ui .location-experience-list i { color: var(--qcp-green-deep); }

body.public-ui .feature-card-premium {
    height: 100%;
    padding: 1.6rem 1.4rem 1.4rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 18px 40px -28px rgba(30,42,58,0.14);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.public-ui .feature-card-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -28px rgba(30,42,58,0.22);
    border-color: rgba(30,42,58,0.14);
}
body.public-ui .feature-card-premium .feature-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
    margin-bottom: 0.9rem;
}
body.public-ui .feature-card-premium h4 {
    font-family: var(--qcp-display);
    font-size: 1.2rem;
    color: var(--qcp-text);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
body.public-ui .feature-card-premium p {
    color: var(--qcp-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

body.public-ui .premium-value-item {
    display: flex;
    gap: 0.9rem;
    padding: 1.2rem 1.1rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
body.public-ui .premium-value-item:hover {
    border-color: rgba(30,42,58,0.14);
    box-shadow: 0 14px 28px -20px rgba(30,42,58,0.18);
}
body.public-ui .premium-value-item .value-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
}
body.public-ui .about-values .row > div:nth-child(2) .premium-value-item .value-icon {
    color: var(--qcp-pink-deep); background: rgba(232,182,216,0.22);
}
body.public-ui .about-values .row > div:nth-child(3) .premium-value-item .value-icon {
    color: var(--qcp-green-deep); background: rgba(169,216,78,0.18);
}
body.public-ui .about-values .row > div:nth-child(4) .premium-value-item .value-icon {
    color: var(--qcp-yellow-deep); background: rgba(233,209,91,0.20);
}
body.public-ui .premium-value-item h4 {
    font-family: var(--qcp-display);
    font-size: 1.1rem;
    color: var(--qcp-text);
    font-weight: 600;
}

body.public-ui .mv-card.premium-panel {
    height: 100%;
    padding: 1.8rem 1.8rem 1.6rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 22px 48px -28px rgba(30,42,58,0.18);
}
body.public-ui .mv-card.premium-panel h3 {
    font-family: var(--qcp-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--qcp-text);
    margin-bottom: 0.6rem;
}
body.public-ui .mv-card.premium-panel .text-accent {
    color: var(--qcp-blue-deep);
}
body.public-ui .mv-card.premium-panel p {
    color: var(--qcp-text-muted);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0;
}

body.public-ui .story-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
body.public-ui .story-stat-card {
    padding: 0.95rem 1rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: 12px;
    text-align: left;
}
body.public-ui .story-stat-card strong {
    display: block;
    font-family: var(--qcp-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--qcp-blue-deep);
    line-height: 1;
    margin-bottom: 0.25rem;
}
body.public-ui .story-stat-card span {
    font-size: 0.8rem;
    color: var(--qcp-text-muted);
    line-height: 1.4;
}

body.public-ui .image-showcase-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--qcp-border);
    background: var(--qcp-paper);
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 28px 60px -32px rgba(30,42,58,0.20);
}
body.public-ui .image-showcase-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
body.public-ui .image-showcase-tall img { aspect-ratio: 4 / 5; }
body.public-ui .image-showcase-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.2rem 1.4rem 1.2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(15,24,48,0.82) 100%);
    color: #fff;
}
body.public-ui .image-showcase-caption .eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-green);
    margin-bottom: 0.3rem;
}
body.public-ui .image-showcase-caption strong {
    font-family: var(--qcp-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    display: block;
    color: #fff;
}

/* --- Accreditation band --- */
body.public-ui .accreditation-band,
body.public-ui .accreditation-premium {
    padding: 2.2rem 0;
    text-align: center;
    border-top: 1px solid var(--qcp-border);
    border-bottom: 1px solid var(--qcp-border);
    background: #FBF9F4;
}
body.public-ui .accreditation-band h4 {
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--qcp-text-faint);
    margin-bottom: 1rem;
}
body.public-ui .accreditation-mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    box-shadow: 0 8px 16px -8px rgba(53,92,255,0.45);
}
body.public-ui .ana-name {
    font-family: var(--qcp-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--qcp-text);
}

/* --- Buttons normalization site-wide --- */
body.public-ui .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.68rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #B44A8A 0%, #9C3A76 100%);
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 24px -14px rgba(180, 74, 138, 0.55);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
body.public-ui .btn-primary-custom:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 30px -14px rgba(180, 74, 138, 0.65);
    color: #fff;
}
body.public-ui .btn-outline-primary-custom,
body.public-ui .premium-outline,
body.public-ui .btn-outline-secondary.premium-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.66rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--qcp-blue-deep) !important;
    background: var(--qcp-paper) !important;
    border: 1px solid var(--qcp-border) !important;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body.public-ui .btn-outline-primary-custom:hover,
body.public-ui .premium-outline:hover,
body.public-ui .btn-outline-secondary.premium-outline:hover {
    border-color: var(--qcp-blue) !important;
    color: var(--qcp-blue) !important;
    box-shadow: 0 10px 20px -14px rgba(53,92,255,0.45);
}

/* --- Scroll-to-top button site-wide --- */
body.public-ui .scroll-top {
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%) !important;
    border: 0;
    color: #fff !important;
    box-shadow: 0 14px 28px -14px rgba(53,92,255,0.55);
}

/* --- Responsive tuning --- */
@media (max-width: 991.98px) {
    body.public-ui .cta-band { padding: 3rem 0; }
    body.public-ui .premium-site-footer { padding: 3rem 0 1.5rem; }
    body.public-ui .page-header,
    body.public-ui .page-header-premium { padding: 3rem 0 2.5rem; }
}
@media (max-width: 767.98px) {
    body.page-home .why-trust-card { padding: 1.6rem 1.3rem 1.4rem; }
    body.page-home .how-step-card { padding: 1.6rem 1.2rem 1.3rem; }
    body.page-home .next-step-card { padding: 1.4rem 1.15rem 1.2rem; }
    body.public-ui .footer-brand-lockup { margin-bottom: 0.85rem; }
}

/* ============================================================
   SECTION 14 — PROGRAMS PAGE · PRODUCT CATALOG WIDTH REBALANCE
   Scope: body.page-programs #product-catalog (this section only)
   Goal: let the catalog stretch across the viewport on desktop,
   compact the editorial header block on the left, and give the
   carousel the remaining horizontal real estate without breaking
   responsiveness or touching unrelated sections.
   ============================================================ */

@media (min-width: 1200px) {
    body.page-programs #product-catalog > .container {
        max-width: min(1560px, 94vw) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

@media (min-width: 992px) {
    body.page-programs #product-catalog .catalog-group {
        margin-bottom: 3.5rem;
    }

    body.page-programs #product-catalog .catalog-group-header-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 2.5rem;
        margin-bottom: 1.6rem;
    }

    body.page-programs #product-catalog .catalog-group-header {
        flex: 0 1 auto;
        max-width: 460px;
        padding-right: 1rem;
    }

    body.page-programs #product-catalog .catalog-group-header h3 {
        font-family: var(--qcp-display);
        font-size: clamp(1.8rem, 2.2vw, 2.25rem);
        line-height: 1.12;
        letter-spacing: -0.015em;
        margin-bottom: 0.55rem;
    }

    body.page-programs #product-catalog .catalog-group-header p {
        font-size: 0.98rem;
        line-height: 1.55;
        color: var(--qcp-text-muted);
        margin-bottom: 0.6rem;
    }

    body.page-programs #product-catalog .catalog-group-header .carousel-hint {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        color: var(--qcp-text-faint);
    }

    body.page-programs #product-catalog .carousel-header-nav {
        flex: 0 0 auto;
        margin-left: auto;
        align-self: flex-end;
    }

    /* Carousel stretches across the full available inner width */
    body.page-programs #product-catalog .card-carousel-wrap {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.page-programs #product-catalog .card-carousel {
        gap: 1.25rem;
        padding-top: 18px;          /* reserve room for -12px "Most Popular" pill */
        padding-bottom: 0.75rem;
        scroll-padding-left: 0;
    }

    /* Cards get a touch more room — aim for ~4 visible on wide screens */
    body.page-programs #product-catalog .card-carousel-item {
        flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
        min-width: 280px;
    }
}

/* On extra-wide screens show four generously-spaced cards */
@media (min-width: 1500px) {
    body.page-programs #product-catalog .card-carousel-item {
        flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
    }
    body.page-programs #product-catalog .card-carousel { gap: 1.5rem; }
}

/* Mid-desktop (lg breakpoint): 3 visible */
@media (min-width: 992px) and (max-width: 1319.98px) {
    body.page-programs #product-catalog .card-carousel-item {
        flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
    }
}

/* Tablet: 2 visible, keep editorial header stacked */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.page-programs #product-catalog .catalog-group-header-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    body.page-programs #product-catalog .catalog-group-header { max-width: 100%; flex: 1 1 100%; }
    body.page-programs #product-catalog .carousel-header-nav { margin-left: auto; }
    body.page-programs #product-catalog .card-carousel-item {
        flex: 0 0 calc((100% - 1.25rem) / 2);
    }
}

/* Mobile: 1-up, no changes to spacing logic */
@media (max-width: 767.98px) {
    body.page-programs #product-catalog .catalog-group-header h3 {
        font-size: 1.6rem;
    }
}

/* ============================================================
   SECTION 15 — HOMEPAGE · ART DIRECTION v2
   Scope: body.page-home only.
   Goal: break the "three-canvas-in-a-row, four-white-cards" look.
   Each section gets a distinct but quiet surface treatment — dot
   lattice / diagonal hairlines / soft mesh — so the page reads as
   an editorial sequence rather than a card catalog.
   Pink and green are promoted from ornament to visible accents
   (chips, halos, icon tokens, hairlines). Yellow stays minimal.
   Nothing in here changes layout structure, only art direction.
   ============================================================ */

/* -- Reusable pattern + accent tokens ------------------------ */
body.page-home {
    --qcp-dot-ink:    rgba(30, 42, 58, 0.055);
    --qcp-rule-ink:   rgba(30, 42, 58, 0.045);
    --qcp-glow-blue:  rgba(53, 92, 255, 0.10);
    --qcp-glow-pink:  rgba(232, 182, 216, 0.22);
    --qcp-glow-green: rgba(169, 216, 78, 0.16);
    --qcp-glow-yellow:rgba(233, 209, 91, 0.14);
    --qcp-card-lift:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 18px 40px -22px rgba(30, 42, 58, 0.22),
        0 6px 14px -10px rgba(30, 42, 58, 0.10);
    --qcp-card-lift-hover:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 28px 60px -24px rgba(30, 42, 58, 0.32),
        0 12px 22px -12px rgba(30, 42, 58, 0.16);
}

/* ============================================================
   15.1 · Page canvas — ambient color mesh (ultra-subtle)
   Instead of the flat cream canvas, lay three very large faint
   radial glows behind everything so the palette lives in the
   background. Still light, still paper-like, just alive.
   ============================================================ */
body.page-home {
    background-color: var(--qcp-canvas);
    /* Subtle paper grain only — ambient color mesh is moved to per-section
       backgrounds below so the body stays cheap to paint and scrolls smooth.
       This keeps the premium feel without a GPU-hungry fixed-attachment. */
    background-image:
        radial-gradient(rgba(30, 42, 58, 0.035) 1px, transparent 1px),
        radial-gradient(rgba(30, 42, 58, 0.022) 1px, transparent 1px);
    background-size: 28px 28px, 18px 18px;
    background-position: 0 0, 14px 10px;
    background-attachment: scroll;
}

/* ============================================================
   15.2 · Section surfaces — per-section patterned backgrounds
   Three distinct surface moods applied at section level:
      A. dotted-plus   → branch section
      B. ruled-ivory   → why-trust  (warm ivory + thin diagonals)
      C. mesh-pink     → how-it-works (soft pink/blue mesh + spine)
      D. mesh-green    → next-step (green-to-blue mesh)
   Each surface is opaque enough to reset the page mesh beneath,
   but still stays firmly in "premium editorial" territory.
   ============================================================ */

/* --- A · Branch section: dotted lattice + large blue halo --- */
body.page-home .branch-section-premium {
    background-color: #FAF8F3;
    background-image:
        radial-gradient(ellipse 880px 520px at 50% 0%,
            rgba(53, 92, 255, 0.10) 0%,
            rgba(53, 92, 255, 0) 65%),
        radial-gradient(circle, rgba(30, 42, 58, 0.07) 1px, transparent 1.2px);
    background-size: 100% 100%, 22px 22px;
    background-position: 0 0, 0 0;
    position: relative;
    isolation: isolate;
}
body.page-home .branch-section-premium::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--qcp-blue) 25%,
        var(--qcp-green) 50%,
        var(--qcp-pink) 75%,
        transparent 100%);
    opacity: 0.35;
    pointer-events: none;
}

/* --- B · Why-trust: warm ivory + thin diagonal hairlines --- */
body.page-home .why-trust-section {
    background-color: #FBF8F1;
    background-image:
        repeating-linear-gradient(118deg,
            rgba(126, 168, 47, 0.055) 0px,
            rgba(126, 168, 47, 0.055) 1px,
            transparent 1px,
            transparent 26px),
        radial-gradient(ellipse 820px 560px at 15% 20%,
            rgba(169, 216, 78, 0.16) 0%,
            rgba(169, 216, 78, 0) 65%),
        radial-gradient(ellipse 620px 440px at 92% 88%,
            rgba(232, 182, 216, 0.13) 0%,
            rgba(232, 182, 216, 0) 65%);
    position: relative;
    isolation: isolate;
}

/* --- C · How-it-works: soft pink + blue mesh, step spine --- */
body.page-home .how-it-works-section {
    background-color: #FBF9F4;
    background-image:
        radial-gradient(ellipse 960px 640px at 10% 15%,
            rgba(232, 182, 216, 0.30) 0%,
            rgba(232, 182, 216, 0) 60%),
        radial-gradient(ellipse 820px 560px at 95% 85%,
            rgba(92, 141, 255, 0.12) 0%,
            rgba(92, 141, 255, 0) 65%),
        radial-gradient(circle, rgba(194, 127, 174, 0.09) 1px, transparent 1.2px);
    background-size: 100% 100%, 100% 100%, 24px 24px;
    position: relative;
    isolation: isolate;
}

/* The "step spine" — a dotted horizontal line behind the 4 step
   numbers, only on lg+. Pure decoration, sits under the cards. */
@media (min-width: 992px) {
    body.page-home .how-it-works-section .row {
        position: relative;
    }
    body.page-home .how-it-works-section .row::before {
        content: '';
        position: absolute;
        left: 12%;
        right: 12%;
        top: 5.75rem;                 /* aligns with centre of step-number badges */
        height: 0;
        border-top: 2px dashed rgba(53, 92, 255, 0.22);
        z-index: 0;
        pointer-events: none;
    }
    body.page-home .how-it-works-section .row > div {
        position: relative;
        z-index: 1;
    }
}

/* --- D · Next-step: soft green + blue mesh, dotted canvas --- */
body.page-home .next-step-section {
    background-color: var(--qcp-canvas);
    background-image:
        radial-gradient(ellipse 960px 620px at 90% 10%,
            rgba(169, 216, 78, 0.22) 0%,
            rgba(169, 216, 78, 0) 60%),
        radial-gradient(ellipse 820px 540px at 5% 95%,
            rgba(53, 92, 255, 0.10) 0%,
            rgba(53, 92, 255, 0) 65%),
        radial-gradient(rgba(30, 42, 58, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 22px 22px;
    position: relative;
    isolation: isolate;
}

/* --- E · section-tint ("What We Offer") — sharpened mesh --- */
body.page-home .section-tint {
    background-color: #FBF9F4;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(53, 92, 255, 0.030) 0px,
            rgba(53, 92, 255, 0.030) 1px,
            transparent 1px,
            transparent 22px),
        radial-gradient(ellipse 820px 560px at 88% 12%,
            rgba(232, 182, 216, 0.26) 0%,
            rgba(232, 182, 216, 0) 65%),
        radial-gradient(ellipse 720px 520px at 6% 92%,
            rgba(169, 216, 78, 0.18) 0%,
            rgba(169, 216, 78, 0) 65%),
        radial-gradient(circle, rgba(30, 42, 58, 0.04) 1px, transparent 1.2px);
    background-size: auto, 100% 100%, 100% 100%, 26px 26px;
}

/* ============================================================
   15.3 · Section rhythm — thin colored hairlines between sections
   Replaces the solid 1px border with a gradient-fade hairline so
   the transition between surfaces reads as intentional, not as
   a shipping-list of cards.
   ============================================================ */
body.page-home section + section {
    border-top: 0 !important;
}
body.page-home .section-tint,
body.page-home .branch-section-premium,
body.page-home .why-trust-section,
body.page-home .how-it-works-section,
body.page-home .next-step-section {
    border-top: 0;
    border-bottom: 0;
}
body.page-home .section-tint::before,
body.page-home .why-trust-section::before,
body.page-home .how-it-works-section::before,
body.page-home .next-step-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(30, 42, 58, 0.12) 50%,
        transparent 100%);
    pointer-events: none;
}

/* ============================================================
   15.4 · Section labels — promote pink + green to visible accents
   The label's accent rule already varies per section. We tint
   the label text too so the eye picks up the color instantly.
   ============================================================ */
body.page-home .how-it-works-section .section-label {
    color: var(--qcp-pink-deep) !important;
}
body.page-home .how-it-works-section .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink-deep), var(--qcp-pink));
}
body.page-home .next-step-section .section-label {
    color: var(--qcp-green-deep) !important;
}
body.page-home .next-step-section .section-label::before {
    background: linear-gradient(90deg, var(--qcp-green-deep), var(--qcp-green));
}

/* ============================================================
   15.5 · Card treatments — premium hairline top + soft shadow
   Every primary card on the page gets:
     · a 3px color top-hairline (section-coded accent)
     · a softer, tighter premium shadow
     · a gentler hover lift
   Only visual — no layout changes.
   ============================================================ */

/* Branch cards — blue accent on US card, green on PH card */
body.page-home .branch-section-premium .premium-branch-card {
    box-shadow: var(--qcp-card-lift);
    transition: transform .35s ease, box-shadow .35s ease;
    overflow: hidden;
    position: relative;
}
body.page-home .branch-section-premium .premium-branch-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-blue) 0%, var(--qcp-blue-soft) 100%);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    pointer-events: none;
}
body.page-home .branch-section-premium .branch-card-secondary::after {
    background: linear-gradient(90deg, var(--qcp-green-deep) 0%, var(--qcp-green) 100%);
}
body.page-home .branch-section-premium .premium-branch-card:hover {
    box-shadow: var(--qcp-card-lift-hover);
}

/* What-We-Offer catalog cards — featured card promoted */
body.page-home .mini-program-card.catalog-type-card {
    box-shadow: var(--qcp-card-lift);
    position: relative;
}
body.page-home .mini-program-card.catalog-type-card:hover {
    box-shadow: var(--qcp-card-lift-hover);
}
body.page-home .mini-program-card.catalog-type-card.featured {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FBF0 100%);
    border-color: rgba(126, 168, 47, 0.28);
}
body.page-home .mini-program-card.catalog-type-card.featured .catalog-type-chip {
    background: rgba(169, 216, 78, 0.22);
    color: var(--qcp-green-deep);
    border-color: rgba(126, 168, 47, 0.35);
}
body.page-home .mini-program-card.catalog-type-card.type-book .catalog-type-chip {
    background: rgba(232, 182, 216, 0.32);
    color: var(--qcp-pink-deep);
    border-color: rgba(194, 127, 174, 0.35);
}
body.page-home .mini-program-card.catalog-type-card.type-service .catalog-type-chip {
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue-deep);
    border-color: rgba(53, 92, 255, 0.22);
}
body.page-home .mini-program-card.catalog-type-card.type-advanced .catalog-type-chip {
    background: rgba(233, 209, 91, 0.22);
    color: var(--qcp-yellow-deep);
    border-color: rgba(183, 157, 46, 0.30);
}

/* Why-trust cards — green leaf on left card, pink on right card */
body.page-home .why-trust-card {
    box-shadow: var(--qcp-card-lift);
    transition: transform .35s ease, box-shadow .35s ease;
}
body.page-home .why-trust-card:hover {
    box-shadow: var(--qcp-card-lift-hover);
}
body.page-home .why-trust-grid > [class*="col-"]:nth-child(1) .why-trust-card::before {
    background: linear-gradient(90deg, var(--qcp-green-deep), var(--qcp-green));
}
body.page-home .why-trust-grid > [class*="col-"]:nth-child(2) .why-trust-card::before {
    background: linear-gradient(90deg, var(--qcp-pink-deep), var(--qcp-pink));
}
body.page-home .why-trust-grid > [class*="col-"]:nth-child(1) .why-trust-stat {
    color: var(--qcp-green-deep);
}
body.page-home .why-trust-grid > [class*="col-"]:nth-child(2) .why-trust-stat {
    color: var(--qcp-pink-deep);
}

/* How-step cards — premium lift + color-stepped numbers */
body.page-home .how-step-card {
    box-shadow: var(--qcp-card-lift);
    background: #FFFFFF;
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    z-index: 1;
}
body.page-home .how-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qcp-card-lift-hover);
}
/* Step number & icon color cycle across all 4 steps */
body.page-home .how-it-works-section .row > div:nth-child(1) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%);
    box-shadow: 0 10px 24px -12px rgba(53, 92, 255, 0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(2) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-pink-deep) 0%, var(--qcp-pink) 100%);
    box-shadow: 0 10px 24px -12px rgba(194, 127, 174, 0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(3) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-green-deep) 0%, var(--qcp-green) 100%);
    box-shadow: 0 10px 24px -12px rgba(126, 168, 47, 0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(4) .how-step-number {
    background: linear-gradient(135deg, var(--qcp-blue-deep) 0%, var(--qcp-blue) 100%);
    box-shadow: 0 10px 24px -12px rgba(53, 92, 255, 0.55);
}
body.page-home .how-it-works-section .row > div:nth-child(1) .how-step-icon {
    background: rgba(53, 92, 255, 0.10); color: var(--qcp-blue);
}
body.page-home .how-it-works-section .row > div:nth-child(2) .how-step-icon {
    background: rgba(232, 182, 216, 0.28); color: var(--qcp-pink-deep);
}
body.page-home .how-it-works-section .row > div:nth-child(3) .how-step-icon {
    background: rgba(169, 216, 78, 0.24); color: var(--qcp-green-deep);
}
body.page-home .how-it-works-section .row > div:nth-child(4) .how-step-icon {
    background: rgba(53, 92, 255, 0.10); color: var(--qcp-blue-deep);
}

/* Next-step cards — the primary card is the enrollment CTA (3rd) */
body.page-home .next-step-card {
    background: #FFFFFF;
    box-shadow: var(--qcp-card-lift);
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}
body.page-home .next-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qcp-card-lift-hover);
}
/* Tinted top hairline per card — blue / pink / green-primary / blue-deep */
body.page-home .next-step-grid > [class*="col-"]:nth-child(1) .next-step-card::after,
body.page-home .next-step-grid > [class*="col-"]:nth-child(2) .next-step-card::after,
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-card::after,
body.page-home .next-step-grid > [class*="col-"]:nth-child(4) .next-step-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    transform: scaleX(1);
    transform-origin: left center;
    transition: none;
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(1) .next-step-card::after {
    background: linear-gradient(90deg, var(--qcp-blue), var(--qcp-blue-soft));
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(2) .next-step-card::after {
    background: linear-gradient(90deg, var(--qcp-pink-deep), var(--qcp-pink));
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-card::after {
    background: linear-gradient(90deg, var(--qcp-green-deep), var(--qcp-green));
    height: 4px;
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(4) .next-step-card::after {
    background: linear-gradient(90deg, var(--qcp-blue-deep), var(--qcp-blue));
}
/* Icon tokens colored to match their hairline */
body.page-home .next-step-grid > [class*="col-"]:nth-child(1) .next-step-icon {
    background: rgba(53, 92, 255, 0.10); color: var(--qcp-blue);
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(2) .next-step-icon {
    background: rgba(232, 182, 216, 0.28); color: var(--qcp-pink-deep);
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-icon {
    background: rgba(169, 216, 78, 0.24); color: var(--qcp-green-deep);
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(4) .next-step-icon {
    background: rgba(53, 92, 255, 0.10); color: var(--qcp-blue-deep);
}
/* Primary card = the enrollment card (3rd col) — slightly elevated */
body.page-home .next-step-card.next-step-card--primary,
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-card {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F6FAEE 100%);
    border-color: rgba(126, 168, 47, 0.28);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 24px 52px -24px rgba(126, 168, 47, 0.45),
        0 10px 22px -14px rgba(30, 42, 58, 0.18);
}

/* ============================================================
   15.6 · Trust strip — promote accent icons to real color weight
   Keeps the strip quiet but the three middle icon chips carry
   actual pink / green presence against the cream band.
   ============================================================ */
body.page-home .trust-strip {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
}

/* ============================================================
   15.7 · Branch explainer row — soft inner paper + accent dot
   ============================================================ */
body.page-home .branch-explainer {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FBF9F3 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 18px 40px -26px rgba(30, 42, 58, 0.18);
}
body.page-home .branch-explainer-item:nth-child(1) i {
    color: var(--qcp-blue);
}
body.page-home .branch-explainer-item:nth-child(2) i {
    color: var(--qcp-green-deep);
}
body.page-home .branch-explainer-item:nth-child(3) i {
    color: var(--qcp-pink-deep);
}

/* ============================================================
   15.8 · Premium section spacing rhythm
   Slightly different vertical rhythm per section so the page
   doesn't feel like identical blocks stacked on top of each
   other. Still symmetric, still responsive.
   ============================================================ */
body.page-home .branch-section-premium   { padding: clamp(4.5rem, 7vw, 6.5rem) 0; }
body.page-home .section-tint             { padding: clamp(4rem,   6vw, 5.5rem) 0; }
body.page-home .why-trust-section        { padding: clamp(4.5rem, 7vw, 6rem)   0; }
body.page-home .how-it-works-section     { padding: clamp(5rem,   7vw, 6.5rem) 0; }
body.page-home .next-step-section        { padding: clamp(4rem,   6vw, 5.5rem) 0 clamp(5rem, 8vw, 7rem); }

/* ============================================================
   15.9 · Responsive guards — mobile simplification
   On narrow screens, drop the step spine and soften the mesh
   so nothing fights the content stack.
   ============================================================ */
@media (max-width: 991.98px) {
    body.page-home .how-it-works-section .row::before { display: none; }
}
/* (mobile carries no background-attachment:fixed — the ambient mesh is
   already scroll-attached for performance. Kept block as a placeholder
   in case future pattern tuning wants mobile-specific overrides.) */

/* ============================================================
   SECTION 16 — STEP 1 · TRUST / PROOF SECTION
   Scope: body.page-home .trust-strip · body.page-home .why-trust-section
   Goal: turn the proof area into an editorial institutional plate —
   stronger typography hierarchy, more confident stats, less "card row".
   ============================================================ */

/* -- 16.1 · Trust strip becomes an "institutional plate" -- */
body.page-home .trust-strip {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FAF8F2 100%);
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    border-bottom: 1px solid rgba(30, 42, 58, 0.08);
    padding: 1.4rem 0 1.3rem;
    position: relative;
    z-index: 2;
}
/* brand-gradient hairline ABOVE and BELOW so the band reads like an
   editorial "rule line" separating hero from homepage body */
body.page-home .trust-strip::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--qcp-blue) 22%,
        var(--qcp-green) 44%,
        var(--qcp-pink) 68%,
        var(--qcp-yellow) 88%,
        transparent 100%);
    opacity: 0.55;
    pointer-events: none;
}
body.page-home .trust-strip .trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
    align-items: stretch;
}
body.page-home .trust-strip .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 1.1rem;
    border-right: 1px solid rgba(30, 42, 58, 0.09);
    font-size: 0.84rem;
    color: var(--qcp-text-mid);
    letter-spacing: 0.01em;
}
body.page-home .trust-strip .trust-item:first-child { padding-left: 0.25rem; }
body.page-home .trust-strip .trust-item:last-child  { border-right: 0; padding-right: 0.25rem; }
body.page-home .trust-strip .trust-item strong {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--qcp-text);
    letter-spacing: -0.01em;
    margin-right: 0.15rem;
}
body.page-home .trust-strip .trust-divider { display: none; }
body.page-home .trust-strip .trust-item i {
    font-size: 0.95rem;
    width: 1.85rem; height: 1.85rem;
}

/* -- 16.2 · Why-Trust becomes an editorial 2-up narrative plate -- */
body.page-home .why-trust-section {
    padding: clamp(5rem, 8vw, 7rem) 0 clamp(4.5rem, 7vw, 6rem);
}
body.page-home .why-trust-section .container {
    max-width: 1180px;
}
body.page-home .why-trust-section .text-center.mb-4 {
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem !important;
}
body.page-home .why-trust-section h2 {
    font-size: clamp(2rem, 2.8vw, 2.7rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
}
body.page-home .why-trust-grid {
    --wt-gap: clamp(1.25rem, 2.2vw, 2.25rem);
    gap: var(--wt-gap) !important;
}
body.page-home .why-trust-card {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FCFAF4 100%);
    border: 1px solid rgba(30, 42, 58, 0.07);
    border-radius: 16px;
    padding: 2.25rem 2rem 1.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--qcp-card-lift);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.55rem;
}
/* top color hairline, card-scoped (green on card 1, pink on card 2) */
body.page-home .why-trust-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
/* Large editorial stat */
body.page-home .why-trust-stat {
    font-family: var(--qcp-display);
    font-size: clamp(3.5rem, 6vw, 4.6rem) !important;
    line-height: 0.95;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 0.35rem;
}
/* small "proof method" label above stat */
body.page-home .why-trust-card .why-trust-stat::after {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-top: 0.85rem;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.45;
}
body.page-home .why-trust-card h4 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: -0.012em;
    color: var(--qcp-text);
    margin: 0.2rem 0 0.35rem;
}
body.page-home .why-trust-card p {
    font-family: var(--qcp-sans);
    color: var(--qcp-text-mid);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}
body.page-home .why-trust-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: var(--qcp-blue-deep);
    text-decoration: none;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    padding-top: 1rem;
    width: fit-content;
}
body.page-home .why-trust-link i { transition: transform .25s ease; }
body.page-home .why-trust-link:hover i { transform: translateX(3px); }

/* Responsive collapse for trust strip */
@media (max-width: 991.98px) {
    body.page-home .trust-strip .trust-strip-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem 0;
    }
    body.page-home .trust-strip .trust-item {
        border-right: 0;
        border-bottom: 1px solid rgba(30, 42, 58, 0.08);
        padding: 0.55rem 0.5rem;
    }
    body.page-home .trust-strip .trust-item:nth-last-child(-n+1) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
    body.page-home .trust-strip .trust-strip-inner { grid-template-columns: 1fr; }
    body.page-home .trust-strip .trust-item { padding: 0.5rem 0.25rem; }
    body.page-home .why-trust-card { padding: 1.8rem 1.3rem 1.5rem; }
}

/* ============================================================
   SECTION 17 — STEP 2 · BRANCH SELECTION (elevated decision point)
   Scope: body.page-home .branch-section-premium
   Goal: same-standard / choose-by-location decision with stronger
   visual weight, clearer CTA hierarchy, "bridge" between cards.
   ============================================================ */

body.page-home .branch-section-premium .container {
    max-width: 1180px;
}
body.page-home .branch-section-premium > .container > .text-center {
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
}
body.page-home .branch-section-premium h2 {
    font-size: clamp(2.1rem, 3vw, 2.85rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.016em !important;
}

/* 17.1 · Explainer row becomes a premium "shared standard" plate */
body.page-home .branch-explainer {
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(30, 42, 58, 0.08);
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FAF7EF 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 22px 44px -26px rgba(30, 42, 58, 0.18);
    padding: 0;
    overflow: hidden;
    max-width: 1040px;
    margin: 0 auto 3rem;
    position: relative;
}
body.page-home .branch-explainer::before {
    content: 'SHARED INSTITUTIONAL STANDARD';
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--qcp-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--qcp-blue-deep);
    background: var(--qcp-canvas);
    padding: 0.15rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(53, 92, 255, 0.22);
    z-index: 2;
    white-space: nowrap;
}
body.page-home .branch-explainer-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1.4rem 1.5rem;
    border-right: 1px solid rgba(30, 42, 58, 0.08);
    position: relative;
}
body.page-home .branch-explainer-item:last-child { border-right: 0; }
body.page-home .branch-explainer-item i {
    font-size: 1.4rem;
    width: 2.6rem; height: 2.6rem;
    display: inline-grid; place-items: center;
    border-radius: 12px;
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue);
    box-shadow: 0 0 0 1px rgba(53, 92, 255, 0.14) inset;
}
body.page-home .branch-explainer-item:nth-child(2) i {
    background: rgba(169, 216, 78, 0.20);
    color: var(--qcp-green-deep);
    box-shadow: 0 0 0 1px rgba(126, 168, 47, 0.22) inset;
}
body.page-home .branch-explainer-item:nth-child(3) i {
    background: rgba(232, 182, 216, 0.30);
    color: var(--qcp-pink-deep);
    box-shadow: 0 0 0 1px rgba(194, 127, 174, 0.22) inset;
}
body.page-home .branch-explainer-item > div > strong {
    display: block;
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: -0.008em;
    color: var(--qcp-text);
    margin-bottom: 0.2rem;
}
body.page-home .branch-explainer-item > div > span {
    font-family: var(--qcp-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--qcp-text-muted);
}

/* 17.2 · Branch cards get stronger presence + VS bridge */
body.page-home .branch-section-premium .row.g-4.justify-content-center {
    position: relative;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
/* "or" bridge between the two cards on desktop */
@media (min-width: 992px) {
    body.page-home .branch-section-premium .row.g-4.justify-content-center::before {
        content: 'or';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        font-family: var(--qcp-display);
        font-style: italic;
        font-weight: 500;
        font-size: 1.1rem;
        color: var(--qcp-blue-deep);
        background: var(--qcp-canvas);
        width: 2.6rem; height: 2.6rem;
        display: grid; place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(53, 92, 255, 0.30);
        box-shadow: 0 8px 16px -8px rgba(53, 92, 255, 0.35);
    }
}
body.page-home .branch-section-premium .premium-branch-card {
    border-radius: 18px;
    padding: 0 !important;
    overflow: hidden;
    min-height: 440px;
    display: grid;
    grid-template-rows: auto 1fr;
}
body.page-home .branch-section-premium .branch-card-top {
    padding: 1.8rem 1.8rem 1.2rem;
    background:
        radial-gradient(ellipse 620px 220px at 0% 0%,
            rgba(53, 92, 255, 0.09) 0%,
            rgba(53, 92, 255, 0) 60%),
        linear-gradient(180deg, #FCFAF4 0%, #FFFFFF 100%);
    border-bottom: 1px solid rgba(30, 42, 58, 0.07);
    display: flex;
    align-items: center;
    gap: 1rem;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-card-top {
    background:
        radial-gradient(ellipse 620px 220px at 100% 0%,
            rgba(169, 216, 78, 0.12) 0%,
            rgba(169, 216, 78, 0) 60%),
        linear-gradient(180deg, #FCFAF4 0%, #FFFFFF 100%);
}
body.page-home .branch-section-premium .branch-flag.frame-flag {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
    z-index: 1;
}
body.page-home .branch-section-premium .branch-flag.frame-flag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
body.page-home .branch-section-premium .branch-card-top::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.18) 100%),
        radial-gradient(ellipse at top right,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0) 55%);
}
body.page-home .branch-section-premium .branch-pill {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    font-family: var(--qcp-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.70);
    color: var(--qcp-blue-deep);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 8px 22px -10px rgba(30, 42, 58, 0.45);
}
body.page-home .branch-section-premium .branch-card-secondary .branch-pill {
    color: var(--qcp-green-deep);
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.70);
}
body.page-home .branch-section-premium .branch-card-content {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
}
body.page-home .branch-section-premium .branch-card-content h3 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: var(--qcp-text);
    margin-bottom: 0.75rem;
}
body.page-home .branch-section-premium .branch-card-content p {
    font-family: var(--qcp-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--qcp-text-mid);
    margin-bottom: 1.1rem;
}
body.page-home .branch-section-premium .branch-meta {
    font-size: 0.86rem;
    color: var(--qcp-text-muted);
    border-top: 1px dashed rgba(30, 42, 58, 0.12);
    padding-top: 1rem;
    margin-top: auto;
    display: grid;
    gap: 0.4rem;
}
body.page-home .branch-section-premium .branch-meta i {
    color: var(--qcp-blue);
    margin-right: 0.4rem;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-meta i {
    color: var(--qcp-green-deep);
}
body.page-home .branch-section-premium .branch-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.1rem !important;
    padding: 0.9rem 1.1rem;
    background: rgba(53, 92, 255, 0.05);
    border: 1px solid rgba(53, 92, 255, 0.15);
    border-radius: 12px;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--qcp-blue-deep);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
body.page-home .branch-section-premium .branch-card-secondary .branch-cta-row {
    background: rgba(169, 216, 78, 0.10);
    border-color: rgba(126, 168, 47, 0.20);
    color: var(--qcp-green-deep);
}
body.page-home .branch-section-premium .branch-cta-row i {
    font-size: 1.2rem;
    transition: transform .25s ease;
}
body.page-home .branch-section-premium .premium-branch-card:hover .branch-cta-row {
    background: rgba(53, 92, 255, 0.12);
    border-color: rgba(53, 92, 255, 0.35);
}
body.page-home .branch-section-premium .premium-branch-card.branch-card-secondary:hover .branch-cta-row {
    background: rgba(169, 216, 78, 0.20);
    border-color: rgba(126, 168, 47, 0.35);
}
body.page-home .branch-section-premium .premium-branch-card:hover .branch-cta-row i {
    transform: translateX(4px);
}

/* Responsive — stack explainer + remove "or" bridge on tablet/mobile */
@media (max-width: 991.98px) {
    body.page-home .branch-explainer {
        grid-template-columns: 1fr;
    }
    body.page-home .branch-explainer-item {
        border-right: 0;
        border-bottom: 1px solid rgba(30, 42, 58, 0.08);
    }
    body.page-home .branch-explainer-item:last-child { border-bottom: 0; }
}
@media (max-width: 575.98px) {
    body.page-home .branch-section-premium .branch-card-top { padding: 0; min-height: 150px; }
    body.page-home .branch-section-premium .branch-card-content { padding: 1.25rem; }
    body.page-home .branch-section-premium .branch-card-content h3 { font-size: 1.65rem; }
    body.page-home .branch-section-premium .branch-pill { top: 0.75rem; right: 0.75rem; font-size: 0.6rem; padding: 0.38rem 0.8rem; letter-spacing: 0.18em; }
}

/* ============================================================
   SECTION 18 — STEP 3 · HOME · WHAT WE OFFER (wider, curated)
   Scope: body.page-home .section-tint (the What-We-Offer block)
   Goal: full editorial width on desktop, feature-card promotion,
   tight count-strip, better CTA hierarchy, less cramped.
   ============================================================ */

@media (min-width: 1200px) {
    body.page-home .section-tint > .container {
        max-width: min(1440px, 94vw) !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
body.page-home .section-tint h2 {
    font-size: clamp(2rem, 2.8vw, 2.7rem) !important;
    letter-spacing: -0.015em !important;
}
body.page-home .section-tint .text-center.mb-4 {
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem !important;
}
/* 18.1 · Catalog counts — restyled as an institutional chip strip */
body.page-home .catalog-counts-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 0.75rem;
    padding: 1rem 1.4rem;
    max-width: 920px;
    margin: 0 auto 3rem;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 38px -22px rgba(30, 42, 58, 0.2);
}
body.page-home .catalog-count-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--qcp-sans);
    font-size: 0.82rem;
    color: var(--qcp-text-mid);
    letter-spacing: 0.005em;
}
body.page-home .catalog-count-chip strong {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--qcp-text);
    letter-spacing: -0.01em;
}
body.page-home .catalog-count-chip:nth-child(1) strong { color: var(--qcp-blue); }
body.page-home .catalog-count-chip:nth-child(2) strong { color: var(--qcp-yellow-deep); }
body.page-home .catalog-count-chip:nth-child(3) strong { color: var(--qcp-pink-deep); }
body.page-home .catalog-count-chip:nth-child(4) strong { color: var(--qcp-green-deep); }
body.page-home .catalog-counts-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--qcp-sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--qcp-blue-deep);
    text-decoration: none;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(53, 92, 255, 0.25);
    background: #fff;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
body.page-home .catalog-counts-link:hover {
    background: rgba(53, 92, 255, 0.08);
    border-color: rgba(53, 92, 255, 0.45);
    transform: translateY(-1px);
}
body.page-home .catalog-counts-link i { transition: transform .25s ease; }
body.page-home .catalog-counts-link:hover i { transform: translateX(3px); }

/* 18.2 · Catalog preview grid — four equal columns (uniform card widths) */
@media (min-width: 992px) {
    body.page-home .catalog-preview-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem !important;
        align-items: stretch;
    }
    body.page-home .catalog-preview-grid > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
    }
    body.page-home .catalog-preview-grid .mini-program-card {
        height: 100%;
    }
    /* Featured card — keep tonal lift (green wash + top hairline) but
       match the type scale of its siblings so all four cards read equal. */
    body.page-home .catalog-preview-grid .mini-program-card.featured {
        padding: 1.5rem 1.35rem 1.4rem;
    }
}

body.page-home .mini-program-card.catalog-type-card {
    border-radius: 16px;
    padding: 1.5rem 1.35rem 1.4rem;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.page-home .mini-program-card.catalog-type-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 92, 255, 0.22);
}
body.page-home .mini-program-card.catalog-type-card .catalog-type-chip,
body.page-home .mini-program-card.catalog-type-card .catalog-branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: fit-content;
    border: 1px solid transparent;
}
body.page-home .mini-program-card.catalog-type-card .catalog-branch-chip {
    background: rgba(30, 42, 58, 0.05);
    color: var(--qcp-text-mid);
    border-color: rgba(30, 42, 58, 0.10);
    margin-top: 0.2rem;
}
body.page-home .mini-program-card.catalog-type-card .mini-program-pill {
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--qcp-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}
body.page-home .mini-program-card.catalog-type-card h4 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    color: var(--qcp-text);
    line-height: 1.18;
    margin: 0.1rem 0 0.25rem;
}
body.page-home .mini-program-card.catalog-type-card p {
    font-family: var(--qcp-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--qcp-text-mid);
    margin: 0;
    flex: 1;
}
body.page-home .mini-program-card.catalog-type-card .catalog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    color: var(--qcp-blue-deep);
}
body.page-home .mini-program-card.catalog-type-card .catalog-card-cta i { transition: transform .25s ease; }
body.page-home .mini-program-card.catalog-type-card:hover .catalog-card-cta i { transform: translateX(3px); }

/* Tablet/mobile: simple 2-up / 1-up stack, no 2fr promotion */
@media (max-width: 991.98px) {
    body.page-home .catalog-preview-grid { gap: 0.85rem !important; }
}

/* ============================================================
   SECTION 19 — STEP 4 · SECTION VARIATION REINFORCEMENT
   Scope: body.page-home homepage sections
   Goal: reinforce that each section has a distinct role (proof
   band / decision / offers / methodology / conversion funnel /
   testimonials / CTA) by varying container widths, typographic
   scale, and section-header composition.
   ============================================================ */

/* 19.1 · Section headers — asymmetric variant on why-trust + how-it-works
   so they stop reading as identical "centered h2 + 1-paragraph" blocks */
@media (min-width: 992px) {
    body.page-home .why-trust-section > .container > .text-center,
    body.page-home .how-it-works-section > .container > .text-center {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        text-align: left !important;
        gap: 2rem;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3.25rem !important;
    }
    body.page-home .why-trust-section > .container > .text-center .section-label,
    body.page-home .how-it-works-section > .container > .text-center .section-label {
        grid-column: 1 / 2;
    }
    body.page-home .why-trust-section > .container > .text-center h2,
    body.page-home .how-it-works-section > .container > .text-center h2 {
        grid-column: 1 / 2;
        margin: 0;
    }
    body.page-home .why-trust-section > .container > .text-center .section-intro,
    body.page-home .how-it-works-section > .container > .text-center .section-intro {
        grid-column: 2 / 3;
        margin: 0;
        max-width: 30rem;
        padding-top: 0.35rem;
        padding-bottom: 0.15rem;
        color: var(--qcp-text-mid);
    }
}

/* 19.2 · Next-Step section — stronger "where to go next" composition,
   primary card spans 2 columns on wide screens to read as lead CTA */
@media (min-width: 1200px) {
    body.page-home .next-step-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem !important;
    }
    body.page-home .next-step-grid > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0;
    }
    body.page-home .next-step-grid > [class*="col-"]:nth-child(1) { grid-column: span 2; }
    body.page-home .next-step-grid > [class*="col-"]:nth-child(2) { grid-column: span 1; }
    body.page-home .next-step-grid > [class*="col-"]:nth-child(3) { grid-column: span 2; }
    body.page-home .next-step-grid > [class*="col-"]:nth-child(4) { grid-column: span 1; }
}

/* 19.3 · how-step-card — promote number badge to a sticker-style mark */
body.page-home .how-step-card {
    border-radius: 16px;
    border: 1px solid rgba(30, 42, 58, 0.07);
    padding: 2.1rem 1.6rem 1.6rem;
    text-align: left;
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 0.5rem;
}
body.page-home .how-step-card .how-step-number {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    font-family: var(--qcp-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    z-index: 2;
}
body.page-home .how-step-icon {
    width: 2.6rem; height: 2.6rem;
    border-radius: 12px;
    display: inline-grid; place-items: center;
    font-size: 1.35rem;
    margin-bottom: 0.3rem;
}
body.page-home .how-step-card h4 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--qcp-text);
    margin: 0 0 0.3rem;
}
body.page-home .how-step-card p {
    font-family: var(--qcp-sans);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--qcp-text-mid);
    margin: 0;
}

/* 19.4 · Next-step card — editorial treatment */
body.page-home .next-step-card {
    border-radius: 16px;
    border: 1px solid rgba(30, 42, 58, 0.07);
    padding: 1.7rem 1.5rem 1.4rem;
    text-align: left;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}
body.page-home .next-step-icon {
    width: 2.6rem; height: 2.6rem;
    border-radius: 12px;
    display: inline-grid; place-items: center;
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
}
body.page-home .next-step-eyebrow {
    font-family: var(--qcp-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qcp-blue-deep);
    margin-bottom: 0.15rem;
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(2) .next-step-eyebrow { color: var(--qcp-pink-deep); }
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-eyebrow { color: var(--qcp-green-deep); }
body.page-home .next-step-grid > [class*="col-"]:nth-child(4) .next-step-eyebrow { color: var(--qcp-blue-deep); }
body.page-home .next-step-card h4 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--qcp-text);
    margin: 0 0 0.3rem;
}
body.page-home .next-step-card p {
    font-family: var(--qcp-sans);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--qcp-text-mid);
    margin: 0;
}
body.page-home .next-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    color: var(--qcp-blue-deep);
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    transition: gap .25s ease;
}
body.page-home .next-step-grid > [class*="col-"]:nth-child(2) .next-step-link { color: var(--qcp-pink-deep); }
body.page-home .next-step-grid > [class*="col-"]:nth-child(3) .next-step-link { color: var(--qcp-green-deep); }
body.page-home .next-step-grid > [class*="col-"]:nth-child(4) .next-step-link { color: var(--qcp-blue-deep); }
body.page-home .next-step-card:hover .next-step-link { gap: 0.65rem; }

/* ============================================================
   SECTION 20 — STEP 5 · COLOR ACCENT STRATEGY (reinforced)
   Scope: body.page-home everywhere needed + cross-section accents
   Goal: make pink + green clearly visible in small, premium ways
   without dominating. Minimal yellow retained for emphasis only.
   ============================================================ */

/* 20.1 · Small decorative section dividers — pink + green */
body.page-home .section-tint,
body.page-home .why-trust-section,
body.page-home .how-it-works-section,
body.page-home .next-step-section {
    position: relative;
}
/* a dot-row decoration at top-right of tinted sections */
body.page-home .section-tint::after,
body.page-home .how-it-works-section::after {
    content: '';
    position: absolute;
    top: 1.8rem;
    right: clamp(1rem, 4vw, 3rem);
    width: 70px;
    height: 6px;
    background-image:
        radial-gradient(circle, var(--qcp-pink-deep) 1.5px, transparent 1.8px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}
body.page-home .how-it-works-section::after {
    background-image:
        radial-gradient(circle, var(--qcp-green-deep) 1.5px, transparent 1.8px);
    opacity: 0.4;
}
body.page-home .why-trust-section::after,
body.page-home .next-step-section::after {
    content: '';
    position: absolute;
    bottom: 1.5rem;
    left: clamp(1rem, 4vw, 3rem);
    width: 70px;
    height: 6px;
    background-image:
        radial-gradient(circle, var(--qcp-green-deep) 1.5px, transparent 1.8px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}
body.page-home .next-step-section::after {
    background-image:
        radial-gradient(circle, var(--qcp-blue) 1.5px, transparent 1.8px);
}

/* 20.2 · Anchor links within body sections pick up brand blue */
body.page-home .why-trust-link,
body.page-home .next-step-link,
body.page-home .catalog-counts-link,
body.page-home .catalog-card-cta {
    position: relative;
}

/* 20.3 · "Featured" and "primary" lift — use tinted glow, not heavy fill */
body.page-home .mini-program-card.catalog-type-card.featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-green-deep), var(--qcp-green));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
body.page-home .mini-program-card.catalog-type-card.type-book::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-pink-deep), var(--qcp-pink));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
body.page-home .mini-program-card.catalog-type-card.type-service::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-blue-deep), var(--qcp-blue));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
body.page-home .mini-program-card.catalog-type-card.type-advanced::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qcp-yellow-deep), var(--qcp-yellow));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* ============================================================
   SECTION 21 — STEP 6 · MICRO UI POLISH
   Scope: body.page-home buttons + chips + pills + small UI
   Goal: premium, branded, expensive-feeling micro components
   without trendy over-decoration.
   ============================================================ */

/* 21.1 · Section-label — refined pill version where needed */
body.page-home .section-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.24em !important;
}

/* 21.2 · Primary buttons on home sections — consistent premium blue */
body.page-home .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.78rem 1.45rem !important;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em;
    color: #fff !important;
    background: linear-gradient(180deg, var(--qcp-blue-soft) 0%, var(--qcp-blue) 100%) !important;
    border: 1px solid var(--qcp-blue) !important;
    border-radius: 10px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 12px 24px -14px rgba(53,92,255,0.42),
        0 2px 5px rgba(30,42,58,0.08) !important;
    transition: transform .22s ease, box-shadow .28s ease, background .22s ease !important;
    text-decoration: none;
}
body.page-home .btn-primary-custom:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 16px 32px -12px rgba(40,73,216,0.52),
        0 2px 5px rgba(30,42,58,0.10) !important;
}

/* 21.3 · Outline primary — refined pill with brand-aware hover */
body.page-home .btn-outline-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.74rem 1.35rem !important;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.9rem !important;
    color: var(--qcp-blue-deep) !important;
    background: #fff !important;
    border: 1px solid rgba(53, 92, 255, 0.30) !important;
    border-radius: 10px !important;
    transition: border-color .22s ease, color .22s ease, background .22s ease, box-shadow .28s ease !important;
    text-decoration: none;
}
body.page-home .btn-outline-primary-custom:hover {
    border-color: var(--qcp-blue) !important;
    background: rgba(53, 92, 255, 0.06) !important;
    color: var(--qcp-blue) !important;
    box-shadow: 0 10px 22px -14px rgba(53,92,255,0.38) !important;
}

/* 21.4 · Proof bar hover micro-lift */
body.page-home .proof-item {
    transition: background .25s ease;
}
body.page-home .proof-item:hover {
    background: rgba(53, 92, 255, 0.03);
}

/* 21.5 · Scroll-to-top button refinement */
body.page-home .scroll-top {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    box-shadow:
        0 10px 22px -10px rgba(53,92,255,0.55),
        0 2px 5px rgba(30,42,58,0.12) !important;
}

/* ============================================================
   SECTION 22 — STEP 7 · TESTIMONIALS (quote-led premium)
   Scope: body.page-home #reviews (the reviews section)
   Goal: authentic, editorial, quote-led layout. Less generic
   card wall, stronger typographic hierarchy, subtle accents.
   ============================================================ */

body.page-home #reviews.bg-light-custom,
body.page-home section#reviews {
    background-color: #FBF9F4 !important;
    background-image:
        radial-gradient(ellipse 900px 580px at 12% 8%,
            rgba(232, 182, 216, 0.22) 0%,
            rgba(232, 182, 216, 0) 65%),
        radial-gradient(ellipse 800px 540px at 92% 92%,
            rgba(53, 92, 255, 0.08) 0%,
            rgba(53, 92, 255, 0) 65%),
        radial-gradient(circle, rgba(194, 127, 174, 0.08) 1px, transparent 1.3px) !important;
    background-size: auto, auto, 26px 26px !important;
    position: relative;
    padding: clamp(5rem, 7vw, 6.5rem) 0;
    border-top: 0 !important;
}
body.page-home #reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(30, 42, 58, 0.12) 50%,
        transparent 100%);
}
body.page-home #reviews .container {
    max-width: 1180px;
    position: relative;
    z-index: 1;
}
body.page-home #reviews .section-label {
    display: inline-block;
    color: var(--qcp-pink-deep) !important;
}
body.page-home #reviews .section-label::before {
    background: linear-gradient(90deg, var(--qcp-pink-deep), var(--qcp-pink));
}
body.page-home #reviews h2 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(2rem, 2.8vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--qcp-text);
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 1.8rem;
}
/* 22.1 · Google badge — restyled into a premium trust chip */
body.page-home .google-reviews-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto 3rem !important;
    padding: 0.75rem 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 999px;
    box-shadow: 0 14px 28px -18px rgba(30, 42, 58, 0.20);
}
body.page-home .google-reviews-badge .rating-text {
    font-family: var(--qcp-sans);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    color: var(--qcp-text);
    text-transform: uppercase;
}
body.page-home .google-reviews-badge .stars {
    display: inline-flex;
    color: var(--qcp-yellow-deep);
    font-size: 0.9rem;
    margin: 0 !important;
}
body.page-home .google-reviews-badge .review-count {
    font-family: var(--qcp-sans);
    font-size: 0.78rem;
    color: var(--qcp-text-muted);
    border-left: 1px solid rgba(30, 42, 58, 0.10);
    padding-left: 0.9rem;
}
body.page-home .google-reviews-badge .google-logo {
    font-family: var(--qcp-sans);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    border-left: 1px solid rgba(30, 42, 58, 0.10);
    padding-left: 0.9rem;
    margin: 0 !important;
}
body.page-home .google-reviews-badge .google-logo span:nth-child(1) { color: #4285F4; }
body.page-home .google-reviews-badge .google-logo span:nth-child(2) { color: #EA4335; }
body.page-home .google-reviews-badge .google-logo span:nth-child(3) { color: #FBBC05; }
body.page-home .google-reviews-badge .google-logo span:nth-child(4) { color: #4285F4; }
body.page-home .google-reviews-badge .google-logo span:nth-child(5) { color: #34A853; }
body.page-home .google-reviews-badge .google-logo span:nth-child(6) { color: #EA4335; }

/* 22.2 · Review cards — quote-led editorial */
body.page-home #reviews .review-card {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 16px;
    padding: 2rem 1.7rem 1.7rem;
    position: relative;
    height: 100%;
    box-shadow: var(--qcp-card-lift);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
body.page-home #reviews .review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--qcp-card-lift-hover);
}
/* large editorial quote mark */
body.page-home #reviews .review-card::before {
    content: '\201C';  /* opening double quote */
    position: absolute;
    top: 0.25rem;
    right: 1rem;
    font-family: var(--qcp-display);
    font-size: 4.5rem;
    font-weight: 600;
    color: rgba(53, 92, 255, 0.14);
    line-height: 1;
    pointer-events: none;
}
body.page-home #reviews .review-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(53, 92, 255, 0) 0%,
        var(--qcp-blue) 50%,
        rgba(53, 92, 255, 0) 100%);
    opacity: 0.65;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
body.page-home #reviews .review-card > .d-flex {
    order: 2;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    margin-bottom: 0 !important;
}
body.page-home #reviews .review-card .review-text {
    order: 1;
    font-family: var(--qcp-display);
    font-weight: 500;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--qcp-text-soft);
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
}
body.page-home #reviews .reviewer-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-grid !important;
    place-items: center !important;
    font-family: var(--qcp-sans);
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 4px 10px -4px rgba(30,42,58,0.22);
}
body.page-home #reviews .reviewer-name {
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--qcp-text);
    line-height: 1.1;
    margin-bottom: 0.15rem;
}
body.page-home #reviews .review-stars {
    color: var(--qcp-yellow-deep);
    font-size: 0.78rem;
    line-height: 1;
}

/* Per-card accent rotation: blue / green / pink / blue */
body.page-home #reviews .row > [class*="col-"]:nth-child(1) .review-card::after {
    background: linear-gradient(90deg, transparent 0%, var(--qcp-blue) 50%, transparent 100%);
}
body.page-home #reviews .row > [class*="col-"]:nth-child(2) .review-card::after {
    background: linear-gradient(90deg, transparent 0%, var(--qcp-green-deep) 50%, transparent 100%);
}
body.page-home #reviews .row > [class*="col-"]:nth-child(3) .review-card::after {
    background: linear-gradient(90deg, transparent 0%, var(--qcp-pink-deep) 50%, transparent 100%);
}
body.page-home #reviews .row > [class*="col-"]:nth-child(4) .review-card::after {
    background: linear-gradient(90deg, transparent 0%, var(--qcp-blue-deep) 50%, transparent 100%);
}

@media (max-width: 575.98px) {
    body.page-home .google-reviews-badge {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.65rem 1rem;
    }
    body.page-home .google-reviews-badge .review-count,
    body.page-home .google-reviews-badge .google-logo {
        border-left: 0;
        padding-left: 0;
    }
    body.page-home #reviews .review-card { padding: 1.65rem 1.25rem 1.35rem; }
    body.page-home #reviews .review-card .review-text { font-size: 1rem; }
}

/* ============================================================
   SECTION 23 — STEP 8 · FINAL CTA + FOOTER TRANSITION
   Scope: body.page-home .cta-band · body.public-ui .premium-site-footer
   Goal: confident institutional close + intentional footer handoff.
   ============================================================ */

/* 23.1 · CTA band — premium dark navy with blue ambient glow (not harsh) */
body.page-home .cta-band {
    position: relative;
    background:
        radial-gradient(ellipse 820px 440px at 18% 10%,
            rgba(53, 92, 255, 0.22) 0%,
            rgba(53, 92, 255, 0) 60%),
        radial-gradient(ellipse 720px 400px at 90% 92%,
            rgba(169, 216, 78, 0.12) 0%,
            rgba(169, 216, 78, 0) 60%),
        radial-gradient(ellipse 620px 380px at 50% 55%,
            rgba(232, 182, 216, 0.08) 0%,
            rgba(232, 182, 216, 0) 60%),
        linear-gradient(180deg, #0F1724 0%, #121D30 60%, #0B1220 100%) !important;
    color: #F7FAFF;
    padding: clamp(4.5rem, 7vw, 6.5rem) 0 clamp(4rem, 6.5vw, 5.5rem) !important;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
}
/* brand gradient hairline top AND bottom */
body.page-home .cta-band::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--qcp-blue) 0%,
        var(--qcp-green) 38%,
        var(--qcp-pink) 70%,
        var(--qcp-yellow) 100%);
    opacity: 0.85;
    z-index: 2;
}
/* faint dot-lattice over the dark navy — keeps depth, stays quiet */
body.page-home .cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.3px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}
body.page-home .cta-band > .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
}
body.page-home .cta-band h2 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(2.3rem, 3.4vw, 3.1rem) !important;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: #FFFFFF !important;
    margin: 0 0 0.75rem !important;
}
body.page-home .cta-band h3 {
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem) !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qcp-green) !important;
    margin: 0 0 1.2rem !important;
}
body.page-home .cta-band p {
    font-family: var(--qcp-sans);
    font-size: clamp(1rem, 1.05vw, 1.08rem);
    line-height: 1.65;
    color: rgba(247, 250, 255, 0.82) !important;
    max-width: 44rem;
    margin: 0 auto 2.25rem !important;
}
body.page-home .cta-band .btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.7rem !important;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em;
    color: #fff !important;
    background: linear-gradient(180deg, var(--qcp-blue-soft) 0%, var(--qcp-blue) 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 16px 32px -14px rgba(53,92,255,0.55),
        0 2px 5px rgba(0,0,0,0.20) !important;
    text-decoration: none !important;
    transition: transform .22s ease, box-shadow .28s ease, background .22s ease !important;
}
body.page-home .cta-band .btn-cta:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, var(--qcp-blue) 0%, var(--qcp-blue-deep) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 20px 38px -12px rgba(40,73,216,0.65),
        0 2px 5px rgba(0,0,0,0.22) !important;
}
body.page-home .cta-band .btn-outline-light-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.92rem 1.6rem !important;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px);
    text-decoration: none !important;
    transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
body.page-home .cta-band .btn-outline-light-custom:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

/* 23.2 · Closing rule band — smooth transition between CTA and footer */
body.page-home .cta-band + .site-footer,
body.page-home .cta-band + .premium-site-footer {
    position: relative;
}
body.page-home .cta-band + .site-footer::before,
body.page-home .cta-band + .premium-site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(180deg,
        rgba(11, 18, 32, 0.85) 0%,
        rgba(11, 18, 32, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Responsive CTA band stacking */
@media (max-width: 575.98px) {
    body.page-home .cta-band .d-flex.justify-content-center {
        flex-direction: column;
        align-items: stretch !important;
    }
    body.page-home .cta-band .btn-cta,
    body.page-home .cta-band .btn-outline-light-custom {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   SECTION 24 — PUBLIC-SITE REPAIR & NORMALIZATION PASS
   Scope: body.public-ui · body.page-home · body.page-about · body.page-programs
   Purpose: cohesion, spacing rhythm, readability, footer lightening,
            broken-layout repair, component unification.
   Not a redesign. Overrides broken states only.
   ============================================================ */

/* 24.1 · SPACING RHYTHM TOKENS — single source of truth */
body.public-ui,
body.page-home {
    --qcp-section-y-lg: clamp(4.5rem, 6.5vw, 6rem);
    --qcp-section-y-md: clamp(3.5rem, 5vw, 4.5rem);
    --qcp-section-y-sm: clamp(2.5rem, 3.5vw, 3.25rem);
    --qcp-container-max:    min(1320px, 92vw);
    --qcp-container-wide:   min(1440px, 94vw);
    --qcp-container-narrow: min(960px, 90vw);
    --qcp-card-radius:    16px;
    --qcp-card-radius-sm: 12px;
    --qcp-card-radius-lg: 20px;
    --qcp-gutter: clamp(1rem, 1.8vw, 1.5rem);
    --qcp-heading-gap:     0.6rem;
    --qcp-heading-to-body: 1.1rem;
    --qcp-block-gap:       clamp(1.8rem, 2.5vw, 2.5rem);
}

/* Normalize section rhythm across public pages */
body.public-ui .section-spacing {
    padding: var(--qcp-section-y-lg) 0 !important;
}
body.public-ui .section-spacing-sm {
    padding: var(--qcp-section-y-md) 0 !important;
}

/* Normalize container ceiling across public pages */
body.public-ui .container {
    max-width: var(--qcp-container-max);
}

/* Heading → subheading / supporting rhythm */
body.public-ui .text-center.mb-4,
body.public-ui .text-center.mb-5 {
    margin-bottom: var(--qcp-block-gap) !important;
}
body.public-ui .section-label + h2,
body.public-ui .section-label + h3 {
    margin-top: var(--qcp-heading-gap);
}
body.public-ui h2 + .section-intro,
body.public-ui .text-center h2 + p {
    margin-top: var(--qcp-heading-to-body);
}

/* Section-intro legibility — discipline, not decorative */
body.public-ui .section-intro {
    color: var(--qcp-text-mid) !important;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.68;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}


/* 24.2 · NEXT-STEP SECTION REPAIR
   "Where would you like to go next?" — cards were too narrow with
   too much empty air around them. Widen container, balance grid,
   fix per-card rhythm. */
body.page-home .next-step-section > .container {
    max-width: var(--qcp-container-max);
}
body.page-home .next-step-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.9rem, 1.4vw, 1.2rem);
    margin: 0;
}
body.page-home .next-step-grid > [class*="col-"] {
    padding: 0;
    max-width: 100%;
    flex: unset;
}
@media (min-width: 576px) {
    body.page-home .next-step-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    body.page-home .next-step-grid { grid-template-columns: repeat(4, 1fr); }
}
body.page-home .next-step-card {
    padding: 1.7rem 1.45rem 1.5rem !important;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-hairline);
    border-radius: var(--qcp-card-radius);
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 20px 40px -32px rgba(30,42,58,0.16);
    color: var(--qcp-text-soft);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease,
                border-color .28s ease;
}
body.page-home .next-step-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53,92,255,0.26);
    box-shadow: 0 1px 2px rgba(30,42,58,0.05),
                0 28px 52px -24px rgba(53,92,255,0.22) !important;
}
body.page-home .next-step-card h4 {
    font-size: clamp(1.05rem, 1.2vw, 1.18rem) !important;
    line-height: 1.25;
    margin: 0.25rem 0 0.45rem !important;
    color: var(--qcp-text) !important;
    font-family: var(--qcp-display);
    font-weight: 600;
}
body.page-home .next-step-card p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    color: var(--qcp-text-mid) !important;
    margin: 0 0 1rem !important;
    flex: 1 1 auto;
}
body.page-home .next-step-card .next-step-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--qcp-text-muted);
}
body.page-home .next-step-card .next-step-icon {
    width: 44px; height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--qcp-blue-tint);
    color: var(--qcp-blue-deep);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}
body.page-home .next-step-card .next-step-link {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--qcp-blue-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Primary ("Start enrollment") card — green proof tint, not screaming */
body.page-home .next-step-card--primary {
    background:
        linear-gradient(180deg, rgba(169,216,78,0.06) 0%, rgba(169,216,78,0.02) 100%),
        var(--qcp-paper) !important;
    border-color: rgba(126,168,47,0.30) !important;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 24px 48px -28px rgba(126,168,47,0.30) !important;
}
body.page-home .next-step-card--primary .next-step-icon {
    background: rgba(169,216,78,0.18);
    color: var(--qcp-green-deep);
}
body.page-home .next-step-card--primary .next-step-link {
    color: var(--qcp-green-deep);
}


/* 24.3 · PROGRAMS PAGE — width utilization + cramped relief */
body.page-programs #product-catalog > .container,
body.page-programs .expectations-section > .container {
    max-width: var(--qcp-container-wide);
}
body.page-programs #product-catalog .catalog-group {
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
body.page-programs #product-catalog .catalog-group-header-row {
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
body.page-programs #product-catalog .catalog-group-header h3 {
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.15;
    margin-bottom: 0.45rem;
}
body.page-programs #product-catalog .catalog-group-header p {
    color: var(--qcp-text-mid);
    font-size: 0.98rem;
    max-width: 46rem;
    line-height: 1.6;
}
body.page-programs .section-spacing-sm > .container {
    max-width: var(--qcp-container-max);
}
body.page-programs .product-card {
    border-radius: var(--qcp-card-radius) !important;
}


/* 24.4 · BRANCH SECTION POLISH (no redesign — only proportions) */
body.page-home .branch-section-premium > .container {
    max-width: var(--qcp-container-max);
}
body.page-home .premium-branch-card {
    border-radius: var(--qcp-card-radius-lg) !important;
    overflow: hidden;
}


/* 24.5 · ABOUT LEADERSHIP REPAIR
   Image-to-text ratio was imbalanced; portrait overpowered body copy.
   Trim media height, let body typography lead. */
body.public-ui .leadership-section-premium .executive-card {
    border-radius: var(--qcp-card-radius-lg) !important;
}
body.public-ui .executive-card-media {
    aspect-ratio: 16 / 10 !important;
    max-height: 360px;
}
body.public-ui .executive-card-media img {
    object-position: center 22%;
}
body.public-ui .executive-card-body {
    padding: 1.6rem 1.75rem 1.85rem !important;
}
body.public-ui .executive-card h3 {
    font-size: clamp(1.35rem, 1.8vw, 1.6rem) !important;
    margin-bottom: 0.45rem !important;
}
body.public-ui .executive-card-body p {
    color: var(--qcp-text-soft) !important;
    font-size: 0.96rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
body.public-ui .executive-card-body p:last-child {
    margin-bottom: 0;
}
body.public-ui .executive-experience {
    color: var(--qcp-text-mid) !important;
    font-size: 0.86rem !important;
    margin-bottom: 0.85rem !important;
}
body.public-ui .executive-quote {
    font-family: var(--qcp-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--qcp-text) !important;
    background: linear-gradient(180deg, rgba(53,92,255,0.05), rgba(53,92,255,0));
    border-left: 3px solid var(--qcp-blue-soft);
    padding: 0.75rem 1rem;
    border-radius: 0 10px 10px 0;
    margin: 0.5rem 0 1rem !important;
}
body.public-ui .executive-card-secondary .executive-quote {
    background: linear-gradient(180deg, rgba(169,216,78,0.06), rgba(169,216,78,0));
    border-left-color: var(--qcp-green);
}
body.public-ui .credential-tags span {
    color: var(--qcp-text) !important;
    font-weight: 600;
}
/* About story section readability lift */
body.public-ui .about-story-section .lead {
    color: var(--qcp-text) !important;
    font-weight: 500;
}
body.public-ui .about-story-section p {
    color: var(--qcp-text-soft) !important;
    font-size: 1rem;
    line-height: 1.72;
}
/* Story stat row clarity */
body.public-ui .story-stat-card {
    background: var(--qcp-paper);
    border: 1px solid var(--qcp-border);
    border-radius: var(--qcp-card-radius);
    padding: 1.1rem 1.15rem 1rem;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04);
}
body.public-ui .story-stat-card strong {
    color: var(--qcp-blue-deep);
    font-family: var(--qcp-display);
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-bottom: 0.25rem;
}
body.public-ui .story-stat-card span {
    color: var(--qcp-text-mid);
    font-size: 0.82rem;
    line-height: 1.4;
}


/* 24.6 · HERO CLEANUP ONLY (readability, NOT redesign)
   Bump left veil slightly + subtle text shadow so the headline
   stops feeling washed out. Video stays visible. Structure unchanged. */
.hero-qcp-veil {
    background: linear-gradient(90deg,
        rgba(250, 248, 243, 0.82) 0%,
        rgba(250, 248, 243, 0.66) 24%,
        rgba(250, 248, 243, 0.34) 44%,
        rgba(250, 248, 243, 0.12) 62%,
        rgba(250, 248, 243, 0.00) 76%) !important;
}
.hero-qcp-headline {
    text-shadow: 0 1px 0 rgba(255,255,255,0.55),
                 0 2px 10px rgba(30,42,58,0.04);
}
.hero-qcp-sub {
    color: var(--qcp-text-soft) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.hero-qcp-eyebrow {
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.hero-qcp-proofbar-inner {
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* 24.7 · BACKGROUND SYSTEM COHESION
   Three calm tiers: canvas (ivory), paper-blue (tint), warm-accent (light-custom).
   Kill legacy per-section decorative pseudo-elements that fought readability. */

body.public-ui .section-tint {
    background:
        radial-gradient(ellipse 900px 400px at 12% 0%,
            rgba(53,92,255,0.05) 0%, rgba(53,92,255,0) 60%),
        radial-gradient(ellipse 720px 380px at 92% 100%,
            rgba(169,216,78,0.04) 0%, rgba(169,216,78,0) 60%),
        #F5F8FE !important;
    border-top: 1px solid var(--qcp-border);
    border-bottom: 1px solid var(--qcp-border);
    position: relative;
}
body.public-ui .section-tint::before,
body.public-ui .section-tint::after {
    display: none !important;
}

body.public-ui .bg-light-custom {
    background:
        radial-gradient(ellipse 800px 340px at 85% 15%,
            rgba(232,182,216,0.06) 0%, rgba(232,182,216,0) 60%),
        var(--qcp-canvas-deep) !important;
}

/* Homepage ambient sections — one light dot lattice, clean */
body.page-home .why-trust-section,
body.page-home .how-it-works-section,
body.page-home .next-step-section {
    background: var(--qcp-canvas);
    position: relative;
}
body.page-home .why-trust-section > .container,
body.page-home .how-it-works-section > .container,
body.page-home .next-step-section > .container {
    position: relative;
    z-index: 1;
}


/* 24.8 · FOOTER TONE LIGHTENING
   Convert from dark navy to a premium light close — ivory base
   with dark ink. Harmonizes with the lighter site direction. */

body.public-ui .premium-site-footer {
    background-color: #F3EFE5 !important;
    background-image:
        radial-gradient(ellipse 900px 420px at 8% 10%,
            rgba(53,92,255,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 700px 360px at 92% 92%,
            rgba(169,216,78,0.05) 0%, transparent 60%),
        repeating-linear-gradient(135deg,
            rgba(30,42,58,0.018) 0px, rgba(30,42,58,0.018) 1px,
            transparent 1px, transparent 26px) !important;
    color: var(--qcp-text-soft) !important;
    border-top: 1px solid var(--qcp-border);
}
/* Keep the top brand-gradient hairline — it anchors the handoff */
body.public-ui .premium-site-footer::before {
    opacity: 0.85 !important;
}

/* Brand lockup — dark ink on light surface */
body.public-ui .footer-kicker {
    color: var(--qcp-green-deep) !important;
}
body.public-ui .footer-brand-card h3 {
    color: var(--qcp-text) !important;
}
body.public-ui .footer-description {
    color: var(--qcp-text-mid) !important;
    font-size: 0.94rem;
    line-height: 1.7;
}
body.public-ui .footer-brand-card .brand-emblem-footer {
    box-shadow: 0 10px 22px -10px rgba(53,92,255,0.48),
                inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
/* Phase 15.K — actual shield logo replaces the "USN" placeholder
   text emblem in the footer brand card. */
body.public-ui .footer-brand-card .footer-brand-logo {
    width: auto;
    height: 72px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 575.98px) {
    body.public-ui .footer-brand-card .footer-brand-logo {
        height: 60px;
    }
}

/* Nav column */
body.public-ui .footer-nav-card h5 {
    color: var(--qcp-text) !important;
}
body.public-ui .footer-links a {
    color: var(--qcp-text-soft) !important;
}
body.public-ui .footer-links a:hover {
    color: var(--qcp-blue-deep) !important;
    padding-left: 4px;
}

/* Contact cards — paper panels on ivory */
body.public-ui .footer-contact-card {
    background: var(--qcp-paper) !important;
    border: 1px solid var(--qcp-border) !important;
    border-radius: var(--qcp-card-radius) !important;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 20px 40px -32px rgba(30,42,58,0.18);
}
body.public-ui .footer-contact-header {
    border-bottom: 1px solid var(--qcp-border) !important;
}
body.public-ui .footer-contact-header img {
    border: 1px solid var(--qcp-border) !important;
}
body.public-ui .footer-contact-header span {
    color: var(--qcp-text-muted) !important;
}
body.public-ui .footer-contact-header strong {
    color: var(--qcp-text) !important;
}
body.public-ui .footer-contact-list {
    color: var(--qcp-text-soft) !important;
    font-size: 0.88rem;
    line-height: 1.7;
}
body.public-ui .footer-contact-list i {
    color: var(--qcp-blue) !important;
}

/* Social icons — flip for light surface */
body.public-ui .footer-social-row a {
    background: rgba(30,42,58,0.05) !important;
    color: var(--qcp-text-soft) !important;
    border: 1px solid var(--qcp-border);
}
body.public-ui .footer-social-row a:hover {
    background: var(--qcp-blue) !important;
    color: #fff !important;
    border-color: var(--qcp-blue) !important;
}

/* Bottom bar */
body.public-ui .footer-bottom-bar {
    border-top: 1px solid var(--qcp-border) !important;
}
body.public-ui .footer-bottom-bar p,
body.public-ui .footer-bottom-bar .small,
body.public-ui .footer-bottom-bar p.small {
    color: var(--qcp-text-muted) !important;
}
body.public-ui .footer-bottom-bar a {
    color: var(--qcp-text-soft) !important;
}
body.public-ui .footer-bottom-bar a:hover {
    color: var(--qcp-blue-deep) !important;
}

/* Newsletter sitting inside footer — harmonize with light surface */
body.public-ui .newsletter-section {
    background: transparent !important;
    color: var(--qcp-text) !important;
}
body.public-ui .newsletter-section h2,
body.public-ui .newsletter-section h3,
body.public-ui .newsletter-section h4 {
    color: var(--qcp-text) !important;
}
body.public-ui .newsletter-section p {
    color: var(--qcp-text-mid) !important;
}
body.public-ui .newsletter-section .text-muted {
    color: var(--qcp-text-muted) !important;
}
body.public-ui .newsletter-section .newsletter-shell,
body.public-ui .newsletter-section .newsletter-card {
    background: var(--qcp-paper) !important;
    color: var(--qcp-text-soft) !important;
    border: 1px solid var(--qcp-border);
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 20px 40px -28px rgba(30,42,58,0.18);
}
body.public-ui .newsletter-form input[type="email"],
body.public-ui .newsletter-form input[type="text"] {
    background: #fff !important;
    color: var(--qcp-text) !important;
    border: 1px solid var(--qcp-border) !important;
}

/* Soften CTA→footer handoff (footer is light now) */
body.page-home .cta-band + .site-footer::before,
body.page-home .cta-band + .premium-site-footer::before {
    background: linear-gradient(180deg,
        rgba(11,18,32,0.22) 0%,
        rgba(11,18,32,0) 100%) !important;
    height: 40px !important;
}


/* 24.9 · COMPONENT COHESION — unified micro-UI system */

/* Cards: one radius family */
body.public-ui .premium-panel,
body.public-ui .product-card,
body.public-ui .branch-card,
body.public-ui .how-step-card,
body.public-ui .pillar-card,
body.public-ui .next-step-card,
body.public-ui .review-card,
body.public-ui .mini-program-card,
body.public-ui .value-item,
body.public-ui .mv-card,
body.public-ui .why-trust-card,
body.public-ui .investment-card,
body.public-ui .image-showcase-card {
    border-radius: var(--qcp-card-radius) !important;
}
body.public-ui .executive-card,
body.public-ui .premium-branch-card {
    border-radius: var(--qcp-card-radius-lg) !important;
}

/* Chips / badges / pills: unified 999px */
body.public-ui .badge,
body.public-ui .catalog-type-chip,
body.public-ui .catalog-branch-chip,
body.public-ui .mini-program-pill,
body.public-ui .branch-pill,
body.public-ui .product-type-badge,
body.public-ui .executive-badge,
body.public-ui .catalog-count-chip,
body.public-ui .delivery-pill,
body.public-ui .stat-chip {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

/* Button family: unified radius + transitions */
body.public-ui .btn-primary-custom,
body.public-ui .btn-accent,
body.public-ui .btn-outline-primary-custom,
body.public-ui .btn-primary,
body.public-ui .btn-outline-primary {
    border-radius: 10px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease, background .22s ease,
                border-color .22s ease !important;
}
body.public-ui .btn-primary-custom:hover,
body.public-ui .btn-accent:hover {
    transform: translateY(-1px);
}

/* Icon circles — unified 48px geometry */
body.public-ui .how-step-icon,
body.public-ui .pillar-icon,
body.public-ui .value-icon {
    width: 48px; height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: var(--qcp-blue-tint);
    color: var(--qcp-blue-deep);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Hairline separators consistency */
body.public-ui hr {
    border: 0 !important;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--qcp-hairline-strong) 20%,
        var(--qcp-hairline-strong) 80%,
        transparent 100%);
    margin: 2rem 0;
    opacity: 1;
}


/* 24.10 · READABILITY / CONTRAST NORMALIZATION */

/* Muted text floor — comfortable across all public surfaces */
body.public-ui .text-muted {
    color: var(--qcp-text-mid) !important;
}
body.public-ui .section-tint .text-muted,
body.public-ui .bg-light-custom .text-muted {
    color: var(--qcp-text-mid) !important;
}

/* Page header intro copy */
body.public-ui .page-header-premium .page-header-copy,
body.public-ui .page-header-premium p {
    color: var(--qcp-text-soft) !important;
    font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
    line-height: 1.7;
    max-width: 44rem;
}

/* Panel body copy */
body.public-ui .mv-card p,
body.public-ui .premium-panel p,
body.public-ui .value-item p,
body.public-ui .pillar-card p {
    color: var(--qcp-text-soft) !important;
    font-size: 0.98rem;
    line-height: 1.7;
}

/* Programs short description */
body.page-programs .product-short-desc {
    color: var(--qcp-text-mid) !important;
    font-size: 0.9rem;
    line-height: 1.58;
}

/* Breadcrumb contrast */
body.public-ui .page-header-premium .breadcrumb-item a {
    color: var(--qcp-blue-deep) !important;
}
body.public-ui .page-header-premium .breadcrumb-item.active {
    color: var(--qcp-text-mid) !important;
}

/* Investment card text on programs page */
body.page-programs .investment-card .course-check-list li {
    color: var(--qcp-text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0.22rem 0;
}
body.page-programs .investment-card .course-check-list i {
    color: var(--qcp-green-deep);
}


/* 24.11 · CONTENT VISIBILITY SAFEGUARDS */

/* Never let overflow trick hide card body text */
body.public-ui .executive-card-body,
body.public-ui .premium-panel,
body.public-ui .branch-card-content,
body.public-ui .next-step-card,
body.public-ui .review-card,
body.public-ui .why-trust-card {
    overflow: visible;
}
/* Only media wrappers keep overflow for image crop */
body.public-ui .executive-card-media,
body.public-ui .product-card-image,
body.public-ui .image-showcase-card img,
body.public-ui .image-showcase-card {
    overflow: hidden;
}
/* Force visibility on known text containers */
body.public-ui .executive-card-body p,
body.public-ui .about-story-section p,
body.public-ui .why-trust-card p,
body.public-ui .next-step-card p,
body.public-ui .pillar-card p,
body.public-ui .value-item p,
body.public-ui .mv-card p {
    visibility: visible !important;
    display: block;
}


/* 24.12 · RESPONSIVE SAFETY */

@media (max-width: 991.98px) {
    body.public-ui .executive-card-media { max-height: 280px; }
    body.page-home .next-step-card { min-height: auto; }
}
@media (max-width: 767.98px) {
    body.public-ui .section-spacing { padding: var(--qcp-section-y-sm) 0 !important; }
    body.public-ui .section-spacing-sm { padding: var(--qcp-section-y-sm) 0 !important; }
    body.page-home .next-step-card {
        min-height: auto;
        padding: 1.3rem 1.15rem 1.15rem !important;
    }
    body.public-ui .executive-card-body {
        padding: 1.25rem 1.25rem 1.5rem !important;
    }
    body.public-ui .footer-contact-card {
        padding: 1rem !important;
    }
    body.public-ui .premium-site-footer {
        padding: 3rem 0 1.5rem !important;
    }
}


/* ============================================================
   SECTION 25 — REPAIR PASS REFINEMENT (v2)
   Addresses three user-reported regressions from SECTION 24:
     1) Footer color was "not pleasing" (ivory #F3EFE5 too warm)
     2) Broken spacing/padding/margin in 2 screenshots
     3) Footer words "can't be seen" (contrast regression)
   Scope: body.public-ui · body.page-home · body.page-about · body.page-programs
   Strategy: override > delete (keeps SECTION 24 intact, adjusts).
   ============================================================ */


/* 25.1 · FOOTER COLOR — swap warm ivory for pleasing cool paper
   A soft blue-grey paper tone that reads calm, clinical, premium
   and fits the blue-primary brand far better than the ivory cream.
   Gradient adds subtle tonal depth from top → bottom so the footer
   anchors the page without feeling dark. */

body.public-ui .premium-site-footer {
    background-color: #ECF1F8 !important;
    background-image:
        linear-gradient(180deg,
            #EDF2F9 0%,
            #E3EAF3 100%),
        radial-gradient(ellipse 900px 420px at 8% 8%,
            rgba(53,92,255,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 700px 360px at 92% 94%,
            rgba(169,216,78,0.055) 0%, transparent 62%),
        repeating-linear-gradient(135deg,
            rgba(30,42,58,0.022) 0px, rgba(30,42,58,0.022) 1px,
            transparent 1px, transparent 28px) !important;
    background-blend-mode: normal, normal, normal, multiply !important;
    color: #2F3B4C !important;
    border-top: 1px solid rgba(53,92,255,0.12) !important;
}
/* Slightly richer top-edge hairline on the new cool base */
body.public-ui .premium-site-footer::before {
    background: linear-gradient(90deg,
        rgba(63,123,196,0.00) 0%,
        rgba(63,123,196,0.55) 25%,
        rgba(91,155,216,0.55) 55%,
        rgba(162,210,255,0.55) 80%,
        rgba(63,123,196,0.00) 100%) !important;
    opacity: 0.90 !important;
}


/* 25.2 · FOOTER TEXT VISIBILITY
   Force the design-system ink color across every descendant of
   .premium-site-footer / .footer-bottom-bar so the cool-paper
   surface stays readable regardless of which element renders text. */

body.public-ui .premium-site-footer,
body.public-ui .premium-site-footer p,
body.public-ui .premium-site-footer span,
body.public-ui .premium-site-footer small,
body.public-ui .premium-site-footer li,
body.public-ui .premium-site-footer a {
    color: #2F3B4C !important;
}

/* Bottom-bar paragraphs and disclaimers — force readable */
body.public-ui .footer-bottom-bar,
body.public-ui .footer-bottom-bar p,
body.public-ui .footer-bottom-bar p.small,
body.public-ui .footer-bottom-bar .small,
body.public-ui .footer-bottom-bar span {
    color: #4A5869 !important;
}

/* Anchor hover — crisp blue on cool paper */
body.public-ui .footer-bottom-bar a,
body.public-ui .premium-site-footer a {
    color: #243347 !important;
    text-decoration: none;
}
body.public-ui .footer-bottom-bar a:hover,
body.public-ui .premium-site-footer a:hover {
    color: #3F7BC4 !important;
}
/* Clickable contact rows (phone / Maps / email) — clean, slate by default. */
body.public-ui .premium-site-footer .footer-contact-link {
    text-decoration: none;
    transition: color 0.2s ease;
}
body.public-ui .premium-site-footer .footer-contact-link:hover {
    color: #3F7BC4 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Brand lockup tuning for cool paper */
body.public-ui .footer-brand-card h3,
body.public-ui .footer-nav-card h5 {
    color: #1E2A3A !important;
}
body.public-ui .footer-description {
    color: #3B4656 !important;
}
body.public-ui .footer-contact-header strong {
    color: #1E2A3A !important;
}
body.public-ui .footer-contact-header span {
    color: #5F6B7A !important;
}
body.public-ui .footer-contact-list {
    color: #3B4656 !important;
}

/* Contact cards on cool paper — whiten slightly so they lift */
body.public-ui .footer-contact-card {
    background: #FBFCFE !important;
    border: 1px solid rgba(53,92,255,0.14) !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.04),
        0 16px 36px -28px rgba(30,42,58,0.20) !important;
}
body.public-ui .footer-contact-header {
    border-bottom-color: rgba(53,92,255,0.14) !important;
}
body.public-ui .footer-bottom-bar {
    border-top: 1px solid rgba(53,92,255,0.14) !important;
}

/* Social icons — cool-paper variant */
body.public-ui .footer-social-row a {
    background: #FBFCFE !important;
    color: #2F3B4C !important;
    border: 1px solid rgba(53,92,255,0.18) !important;
}
body.public-ui .footer-social-row a:hover {
    background: #355CFF !important;
    color: #ffffff !important;
    border-color: #355CFF !important;
}


/* 25.3 · SPACING OVERRIDE SCOPE CORRECTION
   SECTION 24.1 was too aggressive. Three specific fixes here. */

/* (a) REMOVE the blanket container narrowing — Bootstrap default is
   1320px at xxl already, our min(1320px, 92vw) was clipping some
   wider hero/image rows and causing visible side-gutter imbalance.
   Restore Bootstrap's defaults except where explicitly needed. */
body.public-ui .container {
    max-width: 1320px;
}
@media (max-width: 1399.98px) {
    body.public-ui .container { max-width: 1140px; }
}
@media (max-width: 1199.98px) {
    body.public-ui .container { max-width: 960px; }
}
@media (max-width: 991.98px) {
    body.public-ui .container { max-width: 720px; }
}
@media (max-width: 767.98px) {
    body.public-ui .container { max-width: 540px; }
}
@media (max-width: 575.98px) {
    body.public-ui .container { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

/* (b) RELAX the .section-spacing !important override — let specific
   per-section rules win again. Only apply the new rhythm where a
   section has NOT explicitly set its own padding. */
body.public-ui .section-spacing {
    padding-top: clamp(4rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(4rem, 5.5vw, 5.5rem);
}
body.public-ui .section-spacing-sm {
    padding-top: clamp(2.75rem, 4vw, 3.75rem);
    padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
}

/* (c) NARROW the .text-center.mb-4/.mb-5 block-gap override — it was
   hitting centered blocks OUTSIDE section headers, compressing
   unrelated UI. Restrict to direct children of section containers. */
body.public-ui .section-spacing > .container > .text-center.mb-4,
body.public-ui .section-spacing > .container > .text-center.mb-5,
body.public-ui .section-spacing-sm > .container > .text-center.mb-4,
body.public-ui .section-spacing-sm > .container > .text-center.mb-5 {
    margin-bottom: clamp(1.5rem, 2.2vw, 2.25rem) !important;
}

/* Undo the too-broad .text-center.mb-4 / .mb-5 global from SECTION 24.1
   by resetting anything not caught by the narrowed selector above. */
body.public-ui .row .text-center.mb-4:not(.section-header),
body.public-ui .row .text-center.mb-5:not(.section-header) {
    margin-bottom: 1.5rem;
}


/* 25.4 · PAGE-HEADER & HERO STACK BREATHING
   First section after hero needs more air so the handoff feels
   intentional (not cramped). */
body.public-ui .page-header-premium + section,
body.public-ui .hero-qcp + section {
    padding-top: clamp(3.5rem, 5vw, 4.75rem);
}


/* 25.5 · ABOUT PAGE — fix image/text column rhythm
   Screenshots often show the about leadership block with uneven
   rhythm. Re-balance gap + top alignment. */
body.page-about .about-story-section .row > [class*="col-"] {
    margin-bottom: 1rem;
}
body.page-about .leadership-section-premium .row {
    row-gap: clamp(1.75rem, 2.5vw, 2.25rem);
}
body.page-about .executive-card {
    display: flex;
    flex-direction: column;
}
body.page-about .executive-card-body {
    padding: 1.6rem 1.6rem 1.75rem !important;
}
@media (max-width: 767.98px) {
    body.page-about .executive-card-body {
        padding: 1.25rem 1.2rem 1.4rem !important;
    }
}


/* 25.6 · NEXT-STEP GRID — visible-card padding tightening
   If card content was landing awkwardly, ensure padding matches the
   new radius proportions. */
body.page-home .next-step-card {
    padding: 1.55rem 1.35rem 1.4rem !important;
    min-height: 240px;
}
@media (min-width: 992px) {
    body.page-home .next-step-card {
        min-height: 250px;
    }
}


/* 25.7 · PROGRAMS PAGE — catalog section rhythm normalization */
body.page-programs #product-catalog {
    padding-top: clamp(3rem, 4.5vw, 4.5rem);
    padding-bottom: clamp(4rem, 5.5vw, 5.5rem);
}
body.page-programs .catalog-group {
    margin-bottom: clamp(2.5rem, 3.5vw, 3.5rem);
}
body.page-programs .catalog-group:last-child {
    margin-bottom: 0;
}


/* 25.8 · CTA-BAND → FOOTER HANDOFF
   Footer is cool paper now — handoff veil must match the new tone. */
body.public-ui .cta-band + .site-footer::before,
body.public-ui .cta-band + .premium-site-footer::before {
    background: linear-gradient(180deg,
        rgba(53,92,255,0.10) 0%,
        rgba(53,92,255,0.00) 100%) !important;
    height: 36px !important;
    opacity: 1 !important;
}


/* 25.9 · SAFETY — final visibility catch for any footer descendant
   with inline color or utility class that would render illegible
   on cool paper. */
body.public-ui .premium-site-footer [class*="text-white"],
body.public-ui .premium-site-footer [style*="color: #fff"],
body.public-ui .premium-site-footer [style*="color:#fff"],
body.public-ui .premium-site-footer [style*="color: white"],
body.public-ui .premium-site-footer [style*="color:white"] {
    color: #2F3B4C !important;
}


/* ============================================================
   SECTION 26 — NEXT-STEP GRID HARD FIX
   Legacy SECTION 19.2 (line ~4258) set grid-template-columns to
   repeat(6, 1fr) at >=1200px AND applied grid-column: span 2|1|2|1
   on the four col children. SECTION 24 later changed the grid to
   repeat(4, 1fr) but the span rules on children were never undone,
   so at >=1200px card 3 wraps to a second row, creating two rows
   of 2 cards with a dead column on the right.

   This block forces:
   - Bootstrap gutter vars to zero (so .row gutters don't fight grid gap)
   - Every col child to grid-column: auto (kills the span rules)
   - Every col and card to width: 100% of their grid cell
   - Minmax(0, 1fr) to prevent content from stretching tracks unevenly
   - Equal heights via height: 100%
   ============================================================ */

body.page-home .next-step-section {
    padding-top: clamp(4rem, 5.5vw, 5.5rem) !important;
    padding-bottom: clamp(4rem, 5.5vw, 5.5rem) !important;
}
body.page-home .next-step-section > .container {
    max-width: 1320px;
}

/* Grid shell — neutralize Bootstrap row vars so grid-gap controls spacing */
body.page-home .next-step-grid,
body.page-home .next-step-grid.row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: clamp(1rem, 1.4vw, 1.25rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    body.page-home .next-step-grid,
    body.page-home .next-step-grid.row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 992px) {
    body.page-home .next-step-grid,
    body.page-home .next-step-grid.row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Kill the legacy span rules at EVERY breakpoint (including 1200px+) */
body.page-home .next-step-grid > [class*="col-"],
body.page-home .next-step-grid > div.col-md-6,
body.page-home .next-step-grid > div.col-lg-3,
body.page-home .next-step-grid > div.col-md-6.col-lg-3 {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Force it at the wide breakpoint too — the legacy @media is at 1200px */
@media (min-width: 1200px) {
    body.page-home .next-step-grid,
    body.page-home .next-step-grid.row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    body.page-home .next-step-grid > [class*="col-"]:nth-child(1),
    body.page-home .next-step-grid > [class*="col-"]:nth-child(2),
    body.page-home .next-step-grid > [class*="col-"]:nth-child(3),
    body.page-home .next-step-grid > [class*="col-"]:nth-child(4) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* The card itself — must stretch to fill its grid cell */
body.page-home .next-step-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 1.55rem 1.35rem 1.4rem !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(30,42,58,0.08) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.04),
        0 20px 40px -32px rgba(30,42,58,0.16) !important;
    color: var(--qcp-text-soft) !important;
    text-decoration: none !important;
    gap: 0.4rem !important;
    min-height: 220px;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease,
                border-color .28s ease !important;
}
body.page-home .next-step-card::after {
    /* legacy top-edge accent should not reshape layout */
    position: absolute !important;
}
body.page-home .next-step-card { position: relative !important; }

body.page-home .next-step-card p {
    flex: 1 1 auto !important;
    margin: 0 0 0.9rem !important;
}

/* Mobile sizing tweak */
@media (max-width: 575.98px) {
    body.page-home .next-step-card {
        min-height: auto;
        padding: 1.3rem 1.15rem 1.2rem !important;
    }
}


/* ============================================================
   SECTION 27 — BRANCH-EXPLAINER "SHARED INSTITUTIONAL STANDARD"
   RIBBON OVERLAP FIX

   Root cause: .branch-explainer has `overflow: hidden` (needed for
   clean rounded corners on the gradient), AND the ::before ribbon is
   positioned at top: -0.65rem. Overflow:hidden clips the ribbon's
   top half. The remaining bottom half visually crashes into the
   middle card's title "Local support & pricing".

   Fix: let the ribbon render OUTSIDE the container by switching the
   clip strategy — keep the gradient/border clean via border-radius
   + background-clip, drop overflow:hidden on the outer box, add
   top padding so cards don't sit under the ribbon, and reposition
   the ribbon fully above the container edge.
   ============================================================ */

body.page-home .branch-explainer {
    overflow: visible !important;
    padding-top: 1.5rem !important;
    margin-top: 1.75rem !important;
    border-radius: 18px !important;
    /* Keep the inner gradient clipped to rounded corners via clip-path fallback */
    background-clip: padding-box !important;
}

body.page-home .branch-explainer::before {
    /* Ribbon fully above the container, centered, readable */
    content: 'SHARED INSTITUTIONAL STANDARD' !important;
    top: -0.75rem !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: #1F47E0 !important;
    background: #FFFFFF !important;
    padding: 0.35rem 0.95rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(53, 92, 255, 0.28) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 6px 16px -8px rgba(53, 92, 255, 0.28) !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Mobile — ribbon width + items full-width */
@media (max-width: 767.98px) {
    body.page-home .branch-explainer {
        padding-top: 1.8rem !important;
        margin-top: 2rem !important;
    }
    body.page-home .branch-explainer::before {
        font-size: 0.58rem !important;
        padding: 0.3rem 0.7rem !important;
        letter-spacing: 0.18em !important;
    }
}
@media (max-width: 420px) {
    body.page-home .branch-explainer::before {
        /* Shorten for very small screens */
        content: 'SHARED STANDARD' !important;
    }
}


/* ============================================================
   SECTION 28 — CTA BAND LIGHT-THEME INTEGRATION
   Goal: The dark navy CTA band broke the flow of the otherwise
   light, airy site. Convert it to a soft cool-paper surface with
   subtle blue ambient glow, a brand-gradient hairline top edge,
   dark readable typography, and a confident primary button.
   Preserves the "confident institutional close" intent without
   going dark.
   ============================================================ */

body.public-ui .cta-band,
body.page-home .cta-band {
    position: relative !important;
    background:
        radial-gradient(ellipse 900px 460px at 18% 10%,
            rgba(53, 92, 255, 0.10) 0%,
            rgba(53, 92, 255, 0) 62%),
        radial-gradient(ellipse 800px 420px at 88% 92%,
            rgba(169, 216, 78, 0.08) 0%,
            rgba(169, 216, 78, 0) 62%),
        radial-gradient(ellipse 620px 380px at 50% 55%,
            rgba(232, 182, 216, 0.06) 0%,
            rgba(232, 182, 216, 0) 62%),
        linear-gradient(180deg, #F7F5EE 0%, #F1EEE3 55%, #ECE9DD 100%) !important;
    color: #1E2A3A !important;
    padding: clamp(4.25rem, 6.5vw, 5.75rem) 0 clamp(3.75rem, 6vw, 5rem) !important;
    overflow: hidden !important;
    z-index: 0;
    isolation: isolate;
    border-top: 1px solid rgba(53,92,255,0.12) !important;
    border-bottom: 1px solid rgba(53,92,255,0.12) !important;
}

/* Brand gradient hairline top AND a soft one bottom */
body.public-ui .cta-band::before,
body.page-home .cta-band::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    bottom: auto !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        rgba(53,92,255,0.00) 0%,
        rgba(53,92,255,0.85) 20%,
        rgba(169,216,78,0.85) 52%,
        rgba(232,182,216,0.85) 78%,
        rgba(53,92,255,0.00) 100%) !important;
    opacity: 0.95 !important;
    z-index: 2 !important;
}

/* Dot lattice — now dark-on-light, very whisper */
body.public-ui .cta-band::after,
body.page-home .cta-band::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        radial-gradient(circle, rgba(30,42,58,0.055) 1px, transparent 1.3px) !important;
    background-size: 22px 22px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.85;
}

body.public-ui .cta-band > .container,
body.page-home .cta-band > .container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    text-align: center !important;
}

/* Headline — dark display type on paper */
body.public-ui .cta-band h2,
body.page-home .cta-band h2 {
    font-family: var(--qcp-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.3rem, 3.4vw, 3.1rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.08 !important;
    color: #1E2A3A !important;
    margin: 0 0 0.75rem !important;
    text-shadow: none !important;
}

/* Eyebrow — brand blue-deep, refined */
body.public-ui .cta-band h3,
body.page-home .cta-band h3 {
    font-family: var(--qcp-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(0.82rem, 0.95vw, 0.95rem) !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #1F47E0 !important;
    margin: 0 0 1.2rem !important;
}

/* Support copy — mid-ink on paper */
body.public-ui .cta-band p,
body.page-home .cta-band p {
    font-family: var(--qcp-sans) !important;
    font-size: clamp(1rem, 1.05vw, 1.08rem) !important;
    line-height: 1.68 !important;
    color: #3B4656 !important;
    max-width: 44rem !important;
    margin: 0 auto 2.25rem !important;
}

/* Primary CTA button — keep it bold, blue-to-deep gradient, anchors the eye */
body.public-ui .cta-band .btn-cta,
body.page-home .cta-band .btn-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.95rem 1.75rem !important;
    font-family: var(--qcp-sans) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    background: linear-gradient(180deg, #4C72FF 0%, #355CFF 100%) !important;
    border: 1px solid rgba(53,92,255,0.55) !important;
    border-radius: 10px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 14px 28px -10px rgba(53,92,255,0.40),
        0 2px 5px rgba(30,42,58,0.08) !important;
    text-decoration: none !important;
    transition: transform .22s ease, box-shadow .28s ease, background .22s ease !important;
}
body.public-ui .cta-band .btn-cta:hover,
body.page-home .cta-band .btn-cta:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(180deg, #355CFF 0%, #1F47E0 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 18px 34px -10px rgba(31,71,224,0.50),
        0 2px 5px rgba(30,42,58,0.10) !important;
    color: #FFFFFF !important;
}

/* Secondary button — outline blue on paper (was outline-light on dark) */
body.public-ui .cta-band .btn-outline-light-custom,
body.page-home .cta-band .btn-outline-light-custom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.92rem 1.65rem !important;
    font-family: var(--qcp-sans) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    color: #1F47E0 !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(53,92,255,0.38) !important;
    border-radius: 10px !important;
    backdrop-filter: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 10px 22px -14px rgba(30,42,58,0.14) !important;
    text-decoration: none !important;
    transition: background .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
body.public-ui .cta-band .btn-outline-light-custom:hover,
body.page-home .cta-band .btn-outline-light-custom:hover {
    transform: translateY(-1px) !important;
    background: #F4F7FF !important;
    border-color: rgba(53,92,255,0.62) !important;
    color: #1F47E0 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 14px 26px -14px rgba(53,92,255,0.24) !important;
}

/* CTA → footer handoff — now both surfaces are light-cool, blend naturally */
body.public-ui .cta-band + .site-footer::before,
body.public-ui .cta-band + .premium-site-footer::before,
body.page-home .cta-band + .site-footer::before,
body.page-home .cta-band + .premium-site-footer::before {
    background: linear-gradient(180deg,
        rgba(53,92,255,0.10) 0%,
        rgba(53,92,255,0.00) 100%) !important;
    height: 28px !important;
    opacity: 1 !important;
}


/* ============================================================
   SECTION 29 — EXPECTATIONS SECTION LIGHT-THEME INTEGRATION
   style.css line ~976 sets .expectations-section to a dark blue
   gradient (linear-gradient(135deg, var(--secondary), var(--primary)))
   with white text. The section-label was rendering as brand-blue on
   blue (invisible), and the paragraph was white on a blue that no
   longer matches the rest of the site.

   Fix: convert the section to a paper-blue "section-tint" surface
   consistent with the rest of the public site, restore text ink,
   and keep the pillar cards elevated as white plates.
   ============================================================ */

body.public-ui .expectations-section {
    background:
        radial-gradient(ellipse 900px 440px at 12% 10%,
            rgba(53, 92, 255, 0.07) 0%,
            rgba(53, 92, 255, 0) 62%),
        radial-gradient(ellipse 720px 380px at 90% 92%,
            rgba(169, 216, 78, 0.05) 0%,
            rgba(169, 216, 78, 0) 62%),
        linear-gradient(180deg, #F5F8FE 0%, #EEF2FB 100%) !important;
    color: #1E2A3A !important;
    position: relative;
    isolation: isolate;
    border-top: 1px solid rgba(53,92,255,0.10);
    border-bottom: 1px solid rgba(53,92,255,0.10);
}

/* Section label — now readable on paper-blue */
body.public-ui .expectations-section .section-label {
    color: #1F47E0 !important;
    opacity: 1 !important;
}
body.public-ui .expectations-section .section-label::before {
    background: #1F47E0 !important;
}

/* Headline — dark display on paper */
body.public-ui .expectations-section h2 {
    color: #1E2A3A !important;
    font-family: var(--qcp-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Supporting paragraph — mid-ink on paper (AA contrast) */
body.public-ui .expectations-section p,
body.public-ui .expectations-section .text-center p {
    color: #3B4656 !important;
    font-size: clamp(1rem, 1.08vw, 1.08rem);
    line-height: 1.7;
    max-width: 44rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Pillar cards stay as white plates — just confirm contrast + shadow */
body.public-ui .expectations-section .pillar-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(30, 42, 58, 0.08) !important;
    border-radius: 16px !important;
    padding: 2rem 1.5rem 1.75rem !important;
    text-align: center !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.04),
        0 22px 44px -28px rgba(30,42,58,0.22) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease,
                border-color .28s ease;
}
body.public-ui .expectations-section .pillar-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53,92,255,0.24) !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.05),
        0 28px 52px -22px rgba(53,92,255,0.26) !important;
}
body.public-ui .expectations-section .pillar-icon {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 1rem !important;
    background: rgba(53, 92, 255, 0.09) !important;
    color: #1F47E0 !important;
    border-radius: 14px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 1.35rem !important;
}
body.public-ui .expectations-section .pillar-card h4 {
    color: #1E2A3A !important;
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.22rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.55rem !important;
}
body.public-ui .expectations-section .pillar-card p {
    color: #3B4656 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Accent tints per card — subtle chroma variation, matches brand */
body.public-ui .expectations-section .row > [class*="col-"]:nth-child(2) .pillar-icon {
    background: rgba(232, 182, 216, 0.28) !important;
    color: #B44A8A !important;
}
body.public-ui .expectations-section .row > [class*="col-"]:nth-child(3) .pillar-icon {
    background: rgba(169, 216, 78, 0.22) !important;
    color: #4E7A1F !important;
}


/* ============================================================
   SECTION 30 — FOOTER SOCIAL ICONS · BRANDED TREATMENT
   The white-on-cool-paper circles read flat and unbranded.
   Switch to soft brand-tinted circles with a brand-color rotation
   (blue → pink → green → blue), so the row feels part of the
   institution's color story rather than a generic utility strip.
   Hover: solid brand color with white glyph and subtle lift.
   ============================================================ */

body.public-ui .footer-social-row {
    display: inline-flex !important;
    gap: 0.6rem !important;
    flex-wrap: wrap;
    margin-top: 1rem !important;
}

/* Base — blue-tinted circle with deep blue glyph (first + any unspecified) */
body.public-ui .footer-social-row a {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(53, 92, 255, 0.10) !important;
    color: #1F47E0 !important;
    border: 1px solid rgba(53, 92, 255, 0.22) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.60) inset,
        0 6px 14px -10px rgba(30,42,58,0.18) !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                background .22s ease, color .22s ease,
                border-color .22s ease, box-shadow .28s ease !important;
}

/* Unified soft-blue socials — matches the topbar + the calm revamp
   (was a clashing blue/pink/green/navy rotation). */
body.public-ui .footer-social-row a:nth-child(1),
body.public-ui .footer-social-row a:nth-child(2),
body.public-ui .footer-social-row a:nth-child(3),
body.public-ui .footer-social-row a:nth-child(4) {
    background: rgba(63, 123, 196, 0.10) !important;
    color: #3F7BC4 !important;
    border-color: rgba(63, 123, 196, 0.24) !important;
}
body.public-ui .footer-social-row a:nth-child(1):hover,
body.public-ui .footer-social-row a:nth-child(2):hover,
body.public-ui .footer-social-row a:nth-child(3):hover,
body.public-ui .footer-social-row a:nth-child(4):hover {
    background: #3F7BC4 !important;
    color: #FFFFFF !important;
    border-color: #3F7BC4 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 12px 24px -10px rgba(44, 92, 150, 0.50) !important;
}

/* Shared hover lift */
body.public-ui .footer-social-row a:hover {
    transform: translateY(-2px) !important;
}

/* Focus ring — accessible */
body.public-ui .footer-social-row a:focus-visible {
    outline: 2px solid rgba(53, 92, 255, 0.55) !important;
    outline-offset: 2px !important;
}


/* ============================================================
   SECTION 31 — IMAGE SHOWCASE CARD · BRANDED GRADIENT OVERLAY
   The old overlay was a flat dark navy gradient at the bottom.
   Replace with a branded, layered gradient that reads across the
   whole image:
     • subtle warm highlight fading from top-left
     • soft brand-tint wash through the middle
     • confident dark-brand close at the bottom where the caption sits
   Two variants: default (blue-dominant) and .accent-showcase
   (pink-dominant). Matches the site's blue/pink/green/navy story.
   ============================================================ */

/* Shared card — bright image, airy shadow, clean hover */
body.public-ui .image-showcase-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid rgba(30, 42, 58, 0.08) !important;
    background: #FFFFFF !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.04),
        0 32px 64px -32px rgba(30,42,58,0.22) !important;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.2,.8,.2,1),
                box-shadow .45s ease,
                border-color .45s ease;
}
body.public-ui .image-showcase-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 92, 255, 0.24) !important;
    box-shadow:
        0 1px 2px rgba(30,42,58,0.06),
        0 40px 72px -30px rgba(53,92,255,0.22) !important;
}
body.public-ui .image-showcase-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
    filter: none !important;
}
body.public-ui .image-showcase-card:hover img {
    transform: scale(1.025);
}

/* SOLID BRANDED CAPTION PLATE — no gradient, sized by caption content
   The caption itself IS the solid-colored plate. No overlay wash
   above it. The image stays fully bright until the plate begins.
   Default (U.S.A. / Chicago card) = solid PINK plate
   .accent-showcase (Philippines / Makati card) = solid GREEN plate */

body.public-ui .image-showcase-card::before {
    /* remove the overlay entirely — caption provides the plate now */
    content: none !important;
    display: none !important;
}

/* Hairline top edge — each card's hairline leads with its own hue,
   passes through the other brand colors for cohesion, and tapers
   out at both edges. */
body.public-ui .image-showcase-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px !important;
    /* PINK card — pink dominant, passes through blue + green */
    background: linear-gradient(90deg,
        rgba(232,182,216,0.00) 0%,
        rgba(232,182,216,0.90) 22%,
        rgba(53,92,255,0.80) 52%,
        rgba(169,216,78,0.80) 78%,
        rgba(232,182,216,0.00) 100%) !important;
    opacity: 0.92 !important;
    z-index: 3 !important;
    pointer-events: none;
}
body.public-ui .image-showcase-card.accent-showcase::after {
    /* GREEN card — green dominant, passes through blue + pink */
    background: linear-gradient(90deg,
        rgba(169,216,78,0.00) 0%,
        rgba(169,216,78,0.90) 22%,
        rgba(53,92,255,0.80) 52%,
        rgba(232,182,216,0.80) 78%,
        rgba(169,216,78,0.00) 100%) !important;
}

/* Caption IS the solid plate — light pastel brand colors with dark ink */
body.public-ui .image-showcase-caption {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    padding: 1.35rem 1.45rem 1.25rem !important;
    background: #F1CFE1 !important;   /* soft pink plate (default card) */
    color: #3D0F2C !important;         /* deep berry ink — strong AA contrast */
    z-index: 2 !important;
}

/* Accent card — soft green plate with deep forest ink */
body.public-ui .image-showcase-card.accent-showcase .image-showcase-caption {
    background: #D4E8A0 !important;   /* soft green plate */
    color: #1F3808 !important;         /* deep forest ink — strong AA contrast */
}

/* Force headline on both cards to inherit the plate's ink */
body.public-ui .image-showcase-caption strong {
    color: #3D0F2C !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
body.public-ui .image-showcase-card.accent-showcase .image-showcase-caption strong {
    color: #1F3808 !important;
}


/* ============================================================
   SECTION 32 — LOCATION CARD BUTTONS · PER-BRANCH BRAND COLORS
   Each location card's buttons now match that branch's identity
   color (pink for U.S.A. / Chicago, green for Philippines / Makati),
   coherent with the showcase caption plates on the same page.

   Structure (from locations.php):
     .location-card.premium-location-card
         → U.S.A. / Chicago  → PINK buttons
     .location-card.premium-location-card.premium-location-card-secondary
         → Philippines / Makati → GREEN buttons
   ============================================================ */

/* ---- U.S.A. / CHICAGO CARD — PINK buttons ---- */
body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.btn-primary-custom {
    background: #B44A8A !important;
    border: 1px solid #9C3A76 !important;
    color: #FFFFFF !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 14px 28px -10px rgba(180,74,138,0.48),
        0 2px 5px rgba(60,12,44,0.12) !important;
    transition: background .22s ease, transform .22s ease, box-shadow .28s ease !important;
}
body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.btn-primary-custom:hover {
    background: #9C3A76 !important;
    border-color: #82305F !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 18px 34px -10px rgba(156,58,118,0.55),
        0 2px 5px rgba(60,12,44,0.16) !important;
}

body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.btn-outline-secondary.premium-outline,
body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.premium-outline {
    background: #FFFFFF !important;
    color: #9C3A76 !important;
    border: 1.5px solid rgba(180,74,138,0.45) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 10px 22px -14px rgba(60,12,44,0.14) !important;
    transition: background .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.btn-outline-secondary.premium-outline:hover,
body.public-ui .premium-location-card:not(.premium-location-card-secondary)
    .btn.premium-outline:hover {
    background: #FBE8F2 !important;
    color: #82305F !important;
    border-color: rgba(180,74,138,0.70) !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 14px 26px -14px rgba(180,74,138,0.28) !important;
}

/* ---- PHILIPPINES / MAKATI CARD — GREEN buttons ---- */
body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.btn-primary-custom {
    background: #5C8C24 !important;
    border: 1px solid #4A711C !important;
    color: #FFFFFF !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 14px 28px -10px rgba(92,140,36,0.48),
        0 2px 5px rgba(22,44,8,0.14) !important;
    transition: background .22s ease, transform .22s ease, box-shadow .28s ease !important;
}
body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.btn-primary-custom:hover {
    background: #4A711C !important;
    border-color: #3B5914 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.32) inset,
        0 18px 34px -10px rgba(74,113,28,0.55),
        0 2px 5px rgba(22,44,8,0.18) !important;
}

body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.btn-outline-secondary.premium-outline,
body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.premium-outline {
    background: #FFFFFF !important;
    color: #4A711C !important;
    border: 1.5px solid rgba(92,140,36,0.48) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 10px 22px -14px rgba(22,44,8,0.16) !important;
    transition: background .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.btn-outline-secondary.premium-outline:hover,
body.public-ui .premium-location-card.premium-location-card-secondary
    .btn.premium-outline:hover {
    background: #EDF7D6 !important;
    color: #3B5914 !important;
    border-color: rgba(92,140,36,0.72) !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 14px 26px -14px rgba(92,140,36,0.30) !important;
}

/* Shared button shape — keep the family consistent */
body.public-ui .premium-location-card .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.78rem 1.35rem !important;
    font-family: var(--qcp-sans) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

/* Accessible focus ring per branch */
body.public-ui .premium-location-card:not(.premium-location-card-secondary) .btn:focus-visible {
    outline: 2px solid rgba(180,74,138,0.55) !important;
    outline-offset: 2px !important;
}
body.public-ui .premium-location-card.premium-location-card-secondary .btn:focus-visible {
    outline: 2px solid rgba(92,140,36,0.60) !important;
    outline-offset: 2px !important;
}
body.public-ui .image-showcase-caption .eyebrow {
    display: inline-block !important;
    font-family: var(--qcp-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    /* On soft pink plate — deep berry text on white pill */
    color: #5A1B42 !important;
    background: rgba(255, 255, 255, 0.70) !important;
    border: 1px solid rgba(90, 27, 66, 0.22) !important;
    padding: 0.28rem 0.75rem !important;
    border-radius: 999px !important;
    margin-bottom: 0.6rem !important;
    backdrop-filter: none;
}
body.public-ui .image-showcase-card.accent-showcase .image-showcase-caption .eyebrow {
    /* On soft green plate — deep forest text on white pill */
    color: #2E4F0C !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(46, 79, 12, 0.24) !important;
}
/* Headline inherits caption color automatically, but force-override any
   legacy white rule so it reads as deep brand ink */
body.public-ui .image-showcase-caption strong {
    color: inherit !important;
    text-shadow: none !important;
}
body.public-ui .image-showcase-caption strong {
    font-family: var(--qcp-display) !important;
    font-size: clamp(1.05rem, 1.15vw, 1.2rem) !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    display: block !important;
    color: inherit !important;
    letter-spacing: -0.008em;
    text-shadow: none !important;
}

/* Ensure image sits behind overlay */
body.public-ui .image-showcase-card img {
    position: relative;
    z-index: 0;
}


/* ============================================================
   SECTION 33 — CONTACT PLATE · LONG-STRING OVERFLOW FIX
   Long emails (usnursingstudent@gmail.com) have no spaces, so
   they refuse to wrap and overflow the contact card. Force
   modern word-breaking on every known contact plate:
     • .location-detail-item   (locations.php email/phone tiles)
     • .footer-contact-list    (footer email/phone list)
     • .contact-info-list      (contact.php side panel)
     • .premium-location-card  (card body safety net)
   ============================================================ */

body.public-ui .location-detail-item p,
body.public-ui .location-detail-item span,
body.public-ui .footer-contact-list li,
body.public-ui .footer-contact-list li a,
body.public-ui .contact-info-list li,
body.public-ui .contact-info-list li span,
body.public-ui .contact-info-list li a,
body.public-ui .premium-location-card p,
body.public-ui .premium-location-card span,
body.public-ui .premium-location-card a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: none !important;
    min-width: 0 !important;
}

/* Make sure the wrapping containers themselves don't get wider
   than their flex/grid cell, which also contributes to overflow */
body.public-ui .location-detail-item,
body.public-ui .footer-contact-card,
body.public-ui .footer-contact-list,
body.public-ui .contact-info-list {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Keep the envelope icon from shrinking while the text wraps */
body.public-ui .location-detail-item h5 i,
body.public-ui .footer-contact-list li i,
body.public-ui .contact-info-list li i {
    flex-shrink: 0 !important;
}


/* ============================================================
   SECTION 34 — HERO READABILITY PLATE
   Symptom: dark headline text sits on the nurses' faces in the
   video. The existing veil drops to 0.28 alpha by 40% and 0 by
   72%, so the lede text has almost no contrast.
   Fix: (a) make the left-side veil a near-solid ivory that only
   tapers after the text zone ends, and (b) put a soft paper
   plate directly behind the lede so the words always read.
   Scope: home hero only — .hero-qcp-* classes.
   ============================================================ */

/* --- (a) ALL hero overlays removed. The lede glass plate below
   is the sole readability mechanism. Video runs full-bleed, no
   veils, no tints, no vignettes, no decorative rules/hairlines. */
body.page-home .hero-qcp-veil,
body.page-home .hero-qcp-tint,
body.page-home .hero-qcp-vignette {
    background: none !important;
    display: none !important;
}

/* Kill the top multi-color hairline and the vertical blue rule */
body.page-home .hero-qcp::before,
body.page-home .hero-qcp::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* --- (b) Lede plate REMOVED — the headline now sits on the hero's
   left→right wash, no box (redesign). --- */
body.page-home .hero-qcp-lede {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Slightly tighter leading & stronger ink on the plate */
body.page-home .hero-qcp-headline {
    color: #1E2A3A !important;
    text-shadow: none !important;
}
body.page-home .hero-qcp-sub {
    color: #3B4656 !important;
}
body.page-home .hero-qcp-eyebrow {
    color: #1F47E0 !important;
}

/* Mobile / tablet — plate stays, blur relaxes a touch */
@media (max-width: 991.98px) {
    body.page-home .hero-qcp-veil {
        background: none !important;
        display: none !important;
    }
    body.page-home .hero-qcp-lede {
        backdrop-filter: blur(8px) saturate(1.03);
        -webkit-backdrop-filter: blur(8px) saturate(1.03);
    }
}

@media (max-width: 575.98px) {
    body.page-home .hero-qcp-lede {
        padding: 1.5rem 1.25rem;
        border-radius: 14px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}


/* ============================================================
   SECTION 35 — TOPBAR BRAND ALIGNMENT
   The site-wide topbar ("RAISING THE BAR IN NCLEX REVIEW
   SUCCESS!" + socials) was monochrome ivory/grey. Bring it into
   the brand system: subtle brand-washed canvas, branded tagline,
   branded chip icons, and per-platform social rotation matching
   the footer (Facebook blue / YouTube pink / Instagram green /
   TikTok navy).
   Scope: body.public-ui — every public page.
   ============================================================ */

/* --- Background: soft multi-stop brand wash on ivory --- */
body.public-ui .premium-topbar {
    background:
        linear-gradient(90deg,
            rgba(53, 92, 255, 0.06) 0%,
            rgba(250, 248, 243, 0.94) 35%,
            rgba(250, 248, 243, 0.94) 65%,
            rgba(169, 216, 78, 0.07) 100%),
        var(--qcp-canvas) !important;
    border-bottom: 1px solid rgba(53, 92, 255, 0.14) !important;
}

/* Strengthen the existing multi-color hairline at the base */
body.public-ui .premium-topbar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(53, 92, 255, 0.55) 22%,
        rgba(232, 182, 216, 0.55) 50%,
        rgba(169, 216, 78, 0.55) 78%,
        transparent 100%) !important;
    height: 1px !important;
}

/* --- Chips: subtle blue-tinted ink --- */
body.public-ui .premium-topbar .topbar-chip {
    color: var(--qcp-text-mid) !important;
}
body.public-ui .premium-topbar .topbar-chip i {
    color: #355CFF !important;
}
body.public-ui .premium-topbar .topbar-chip + .topbar-chip::before {
    background: rgba(53, 92, 255, 0.35) !important;
}

/* --- Tagline: brand blue italic display --- */
body.public-ui .premium-topbar .topbar-tagline {
    color: #1F47E0 !important;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-style: italic;
    opacity: 0.92;
}

/* --- Social icons: BRAND COLORS AT REST (resting fill), with
   darker tone on hover. Rotation matches the footer:
   Facebook blue / YouTube pink / Instagram green / TikTok navy. */
body.public-ui .premium-topbar .social-icons a,
body.page-home .premium-topbar .social-icons a {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    transition: background .22s ease, transform .22s ease,
                box-shadow .22s ease, border-color .22s ease !important;
}

/* Facebook — BLUE (resting) */
body.public-ui .premium-topbar .social-icons a:nth-child(1),
body.page-home .premium-topbar .social-icons a:nth-child(1) {
    background: #355CFF !important;
    border: 1px solid #355CFF !important;
    box-shadow: 0 4px 10px -4px rgba(53, 92, 255, 0.45) !important;
}
body.public-ui .premium-topbar .social-icons a:nth-child(1):hover,
body.page-home .premium-topbar .social-icons a:nth-child(1):hover {
    background: #1F47E0 !important;
    border-color: #1F47E0 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(31, 71, 224, 0.55) !important;
}

/* YouTube — PINK (resting) */
body.public-ui .premium-topbar .social-icons a:nth-child(2),
body.page-home .premium-topbar .social-icons a:nth-child(2) {
    background: #C46AA0 !important;
    border: 1px solid #C46AA0 !important;
    box-shadow: 0 4px 10px -4px rgba(196, 106, 160, 0.45) !important;
}
body.public-ui .premium-topbar .social-icons a:nth-child(2):hover,
body.page-home .premium-topbar .social-icons a:nth-child(2):hover {
    background: #A84F86 !important;
    border-color: #A84F86 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(168, 79, 134, 0.55) !important;
}

/* Instagram — GREEN (resting) */
body.public-ui .premium-topbar .social-icons a:nth-child(3),
body.page-home .premium-topbar .social-icons a:nth-child(3) {
    background: #6E9B2A !important;
    border: 1px solid #6E9B2A !important;
    box-shadow: 0 4px 10px -4px rgba(110, 155, 42, 0.45) !important;
}
body.public-ui .premium-topbar .social-icons a:nth-child(3):hover,
body.page-home .premium-topbar .social-icons a:nth-child(3):hover {
    background: #547624 !important;
    border-color: #547624 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(84, 118, 36, 0.55) !important;
}

/* TikTok — NAVY (resting) */
body.public-ui .premium-topbar .social-icons a:nth-child(4),
body.page-home .premium-topbar .social-icons a:nth-child(4) {
    background: #1E2A3A !important;
    border: 1px solid #1E2A3A !important;
    box-shadow: 0 4px 10px -4px rgba(30, 42, 58, 0.45) !important;
}
body.public-ui .premium-topbar .social-icons a:nth-child(4):hover,
body.page-home .premium-topbar .social-icons a:nth-child(4):hover {
    background: #0F1826 !important;
    border-color: #0F1826 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(15, 24, 38, 0.65) !important;
}

/* Home-page override — same branded treatment so the home topbar
   doesn't revert to the plainer .page-home rules from earlier */
body.page-home .premium-topbar {
    background:
        linear-gradient(90deg,
            rgba(53, 92, 255, 0.06) 0%,
            rgba(250, 248, 243, 0.94) 35%,
            rgba(250, 248, 243, 0.94) 65%,
            rgba(169, 216, 78, 0.07) 100%),
        var(--qcp-canvas) !important;
}
body.page-home .premium-topbar .topbar-chip i { color: #355CFF !important; }
body.page-home .premium-topbar .topbar-tagline {
    color: #1F47E0 !important;
    opacity: 0.92;
}
/* (Home-page social icon resting/hover colors are defined above
   in the combined .public-ui / .page-home selector so the brand
   rotation wins on the home page too.) */


/* ============================================================
   SECTION 36 — ABOUT STAT CARDS · READABILITY REBUILD
   The "18+ Years / 99% / 2 Branches" cards were rendering with
   a tiny muted number and a larger label — hierarchy inverted.
   Force the number to be the hero (big display serif, brand
   blue) and the label to be the supporting caption.
   Scope: body.public-ui .story-stat-card (about.php + anywhere
   else the component appears).
   ============================================================ */

body.public-ui .story-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
}

body.public-ui .story-stat-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(53, 92, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 1.4rem 1.35rem 1.3rem !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.80) inset,
        0 12px 24px -16px rgba(30, 42, 58, 0.12) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

/* The NUMBER — big, bold, brand-blue display serif */
body.public-ui .story-stat-card strong,
body.public-ui .story-stat-card strong .count-up {
    display: block !important;
    font-family: var(--qcp-display) !important;
    font-size: clamp(1.85rem, 2.6vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: #1F47E0 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* The LABEL — smaller, readable mid-ink body text */
body.public-ui .story-stat-card span:not(.count-up) {
    display: block !important;
    font-family: var(--qcp-sans) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: #3B4656 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Optional hover lift */
body.public-ui .story-stat-card {
    transition: transform .22s ease, box-shadow .22s ease,
                border-color .22s ease !important;
}
body.public-ui .story-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(53, 92, 255, 0.28) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 18px 32px -16px rgba(30, 42, 58, 0.18) !important;
}

@media (max-width: 575.98px) {
    body.public-ui .story-stat-card {
        padding: 1.15rem 1.15rem 1.05rem !important;
    }
    body.public-ui .story-stat-card strong,
    body.public-ui .story-stat-card strong .count-up {
        font-size: 1.7rem !important;
    }
}


/* ============================================================
   SECTION 37 — CATALOG COUNTS LINK · PROPER CTA PILL
   The "See everything →" link was rendering as a thin outline
   pill that disappeared next to the count chips. Promote it to
   a solid brand-blue CTA pill so it reads as a real call-to-
   action, with an animated arrow on hover.
   Scope: all public pages (body.public-ui) — the same component
   appears in more than one place.
   ============================================================ */

body.public-ui .catalog-counts-link,
body.page-home .catalog-counts-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: var(--qcp-sans) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 0.58rem 1.15rem !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #4C72FF 0%, #355CFF 100%) !important;
    border: 1px solid #2F51E6 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 10px 22px -10px rgba(53, 92, 255, 0.55),
        0 2px 5px rgba(30, 42, 58, 0.12) !important;
    transition: background .22s ease, transform .22s ease,
                box-shadow .22s ease, border-color .22s ease !important;
}

body.public-ui .catalog-counts-link:hover,
body.page-home .catalog-counts-link:hover {
    background: linear-gradient(180deg, #3B63F3 0%, #1F47E0 100%) !important;
    border-color: #1F47E0 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 14px 28px -10px rgba(31, 71, 224, 0.65),
        0 2px 6px rgba(30, 42, 58, 0.14) !important;
}

body.public-ui .catalog-counts-link:focus-visible,
body.page-home .catalog-counts-link:focus-visible {
    outline: 2px solid rgba(53, 92, 255, 0.50) !important;
    outline-offset: 3px !important;
}

/* Arrow micro-interaction */
body.public-ui .catalog-counts-link i,
body.page-home .catalog-counts-link i {
    font-size: 0.95em !important;
    transition: transform .22s ease !important;
    display: inline-block;
}
body.public-ui .catalog-counts-link:hover i,
body.page-home .catalog-counts-link:hover i {
    transform: translateX(3px) !important;
}

/* Ensure the strip itself lets the pill sit cleanly next to the chips */
body.public-ui .catalog-counts-strip {
    align-items: center !important;
}
body.public-ui .catalog-counts-strip .catalog-count-chip {
    /* Keep chips readable alongside the new solid CTA */
    color: var(--qcp-text-mid) !important;
}


/* ============================================================
   SECTION 38 — CATALOG COUNT CHIPS · TINTED BRAND PLATES
   Flat outline pills with faint color numbers (the yellow "1"
   was nearly invisible on white). Replace with soft brand-tinted
   plates — each chip carries its category color as a subtle
   background wash, darker number, and matching border. The chip
   set now reads as a row of brand-coded metrics.
   Rotation matches the earlier chip order:
     #1 Review Courses     → BLUE
     #2 Advanced Programs  → YELLOW / AMBER
     #3 Books & Materials  → PINK
     #4 Support Services   → GREEN
   ============================================================ */

/* Shared chip shape — works whether the chip is a <span> or an <a>
   (they now link to the matching programs.php section anchor) */
body.public-ui .catalog-count-chip,
body.page-home .catalog-count-chip,
body.public-ui a.catalog-count-chip,
body.page-home a.catalog-count-chip {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.45rem !important;
    padding: 0.48rem 0.95rem !important;
    font-family: var(--qcp-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform .22s ease, box-shadow .22s ease,
                border-color .22s ease, background .22s ease !important;
}

/* Kill default anchor visited/focus styles on chip links */
body.public-ui a.catalog-count-chip:visited,
body.page-home a.catalog-count-chip:visited {
    color: inherit !important;
}
body.public-ui a.catalog-count-chip:focus-visible,
body.page-home a.catalog-count-chip:focus-visible {
    outline: 2px solid rgba(53, 92, 255, 0.50) !important;
    outline-offset: 3px !important;
}

body.public-ui .catalog-count-chip strong,
body.page-home .catalog-count-chip strong {
    font-family: var(--qcp-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
}

/* #1 · Review Courses — BLUE */
body.public-ui .catalog-count-chip:nth-child(1),
body.page-home .catalog-count-chip:nth-child(1) {
    background: #EEF2FF !important;
    border-color: rgba(53, 92, 255, 0.32) !important;
    color: #1F2A44 !important;
}
body.public-ui .catalog-count-chip:nth-child(1) strong,
body.page-home .catalog-count-chip:nth-child(1) strong {
    color: #1F47E0 !important;
}

/* #2 · Advanced Programs — AMBER (readable, not washed) */
body.public-ui .catalog-count-chip:nth-child(2),
body.page-home .catalog-count-chip:nth-child(2) {
    background: #FFF5DD !important;
    border-color: rgba(184, 134, 11, 0.38) !important;
    color: #3A2A05 !important;
}
body.public-ui .catalog-count-chip:nth-child(2) strong,
body.page-home .catalog-count-chip:nth-child(2) strong {
    color: #8A5A00 !important;
}

/* #3 · Books & Materials — PINK */
body.public-ui .catalog-count-chip:nth-child(3),
body.page-home .catalog-count-chip:nth-child(3) {
    background: #FBE8F2 !important;
    border-color: rgba(180, 74, 138, 0.35) !important;
    color: #3D0F2C !important;
}
body.public-ui .catalog-count-chip:nth-child(3) strong,
body.page-home .catalog-count-chip:nth-child(3) strong {
    color: #9C3A76 !important;
}

/* #4 · Support Services — GREEN */
body.public-ui .catalog-count-chip:nth-child(4),
body.page-home .catalog-count-chip:nth-child(4) {
    background: #EDF7D6 !important;
    border-color: rgba(92, 140, 36, 0.38) !important;
    color: #1F3808 !important;
}
body.public-ui .catalog-count-chip:nth-child(4) strong,
body.page-home .catalog-count-chip:nth-child(4) strong {
    color: #4A711C !important;
}

/* Unified lift on hover for the whole chip family */
body.public-ui .catalog-count-chip:hover,
body.page-home .catalog-count-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(30, 42, 58, 0.18) !important;
}
body.public-ui .catalog-count-chip:nth-child(1):hover,
body.page-home .catalog-count-chip:nth-child(1):hover {
    border-color: rgba(53, 92, 255, 0.55) !important;
}
body.public-ui .catalog-count-chip:nth-child(2):hover,
body.page-home .catalog-count-chip:nth-child(2):hover {
    border-color: rgba(184, 134, 11, 0.60) !important;
}
body.public-ui .catalog-count-chip:nth-child(3):hover,
body.page-home .catalog-count-chip:nth-child(3):hover {
    border-color: rgba(180, 74, 138, 0.60) !important;
}
body.public-ui .catalog-count-chip:nth-child(4):hover,
body.page-home .catalog-count-chip:nth-child(4):hover {
    border-color: rgba(92, 140, 36, 0.60) !important;
}


/* ============================================================
   SECTION 39 — INNER PAGE HEADERS · EDITORIAL REBUILD
   Inner-page headers (About, Programs, Locations, Resources,
   Contact) currently read as plain ivory bands with centered
   text — they don't carry the weight of a real page header.
   Rebuild them as editorial chapter openers:
     • Richer layered background (stronger brand radials + paper
       texture + deeper top-to-bottom gradient)
     • Proper decorative frame (top hairline already there, add
       a bottom one that fades into content)
     • Larger, more confident headline with subtle gradient
       accent under it
     • Kicker label rendered as a branded pill (tinted bg, small)
     • Breadcrumb rendered as an inline card
   Scope: every inner public page with .page-header-premium
   (explicitly skip body.page-home which has its own hero).
   ============================================================ */

/* --- Rich layered background with brand ambiance --- */
body.public-ui:not(.page-home) .page-header-premium,
body.public-ui:not(.page-home) .page-header {
    padding: clamp(5rem, 9vw, 7rem) 0 clamp(4rem, 7vw, 5.5rem) !important;
    background:
        /* Soft diagonal paper texture */
        repeating-linear-gradient(135deg,
            rgba(53, 92, 255, 0.028) 0px,
            rgba(53, 92, 255, 0.028) 1px,
            transparent 1px,
            transparent 26px),
        /* Pink glow - upper right */
        radial-gradient(ellipse 800px 480px at 96% 6%,
            rgba(232, 182, 216, 0.32) 0%,
            rgba(232, 182, 216, 0.00) 60%),
        /* Green glow - lower left */
        radial-gradient(ellipse 720px 500px at 4% 96%,
            rgba(169, 216, 78, 0.28) 0%,
            rgba(169, 216, 78, 0.00) 60%),
        /* Blue wash - top center (the editorial mood) */
        radial-gradient(ellipse 1100px 360px at 50% -10%,
            rgba(53, 92, 255, 0.10) 0%,
            rgba(53, 92, 255, 0.00) 70%),
        /* Base gradient - ivory to paper-blue */
        linear-gradient(180deg, #FBF9F4 0%, #F4F1E8 100%) !important;
    border-bottom: 1px solid rgba(53, 92, 255, 0.12) !important;
    overflow: hidden;
    color: var(--qcp-text) !important;
}

/* Top brand hairline — more assertive */
body.public-ui:not(.page-home) .page-header-premium::before,
body.public-ui:not(.page-home) .page-header::before {
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; top: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        #355CFF 0%,
        #C46AA0 38%,
        #6E9B2A 72%,
        #D4B24D 100%) !important;
    opacity: 1 !important;
    z-index: 2;
}

/* Bottom fade — soft editorial close */
body.public-ui:not(.page-home) .page-header-premium::after,
body.public-ui:not(.page-home) .page-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(53, 92, 255, 0.22) 25%,
        rgba(232, 182, 216, 0.22) 50%,
        rgba(169, 216, 78, 0.22) 75%,
        transparent 100%) !important;
    opacity: 1 !important;
    z-index: 2;
}

/* --- Kicker label rendered as a branded pill --- */
body.public-ui:not(.page-home) .page-header-premium .section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 1rem !important;
    background: #FFFFFF !important;
    color: #1F47E0 !important;
    font-family: var(--qcp-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(53, 92, 255, 0.25) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px -2px rgba(53, 92, 255, 0.20) !important;
    margin-bottom: 1.25rem !important;
}
/* Keep the existing dash accent but make it brand-blue and slimmer */
body.public-ui:not(.page-home) .page-header-premium .section-label::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #355CFF, #1F47E0) !important;
    border-radius: 2px !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
}

/* --- Headline: more editorial confidence --- */
body.public-ui:not(.page-home) .page-header-premium h1,
body.public-ui:not(.page-home) .page-header h1 {
    font-family: var(--qcp-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.4rem, 4.8vw, 3.4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
    color: #1E2A3A !important;
    margin-bottom: 1.1rem !important;
    -webkit-text-fill-color: #1E2A3A !important;
    background: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Decorative accent rule directly below the headline */
body.public-ui:not(.page-home) .page-header-premium h1::after {
    content: "" !important;
    display: block !important;
    width: 72px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #355CFF 0%, #C46AA0 60%, #6E9B2A 100%) !important;
    border-radius: 3px !important;
    margin: 1.1rem auto 0 !important;
    opacity: 0.75;
}

/* --- Supporting copy --- */
body.public-ui:not(.page-home) .page-header-premium .page-header-copy,
body.public-ui:not(.page-home) .page-header-premium p,
body.public-ui:not(.page-home) .page-header p {
    color: #3B4656 !important;
    font-size: clamp(1.02rem, 1.2vw, 1.12rem) !important;
    line-height: 1.55 !important;
    max-width: 740px !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
}

/* --- Breadcrumb as a floating glass pill --- */
body.public-ui:not(.page-home) .page-header-premium .breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(53, 92, 255, 0.15) !important;
    border-radius: 999px !important;
    padding: 0.4rem 1rem !important;
    margin: 1.5rem auto 0 !important;
    box-shadow: 0 2px 6px -2px rgba(30, 42, 58, 0.08) !important;
    font-size: 0.82rem !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.public-ui:not(.page-home) .page-header-premium .breadcrumb-item,
body.public-ui:not(.page-home) .page-header-premium .breadcrumb-item a {
    color: #3B4656 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.public-ui:not(.page-home) .page-header-premium .breadcrumb-item a:hover {
    color: #1F47E0 !important;
}
body.public-ui:not(.page-home) .page-header-premium .breadcrumb-item.active {
    color: #1F47E0 !important;
    font-weight: 600 !important;
}
body.public-ui:not(.page-home) .page-header-premium .breadcrumb-item + .breadcrumb-item::before {
    content: "›" !important;
    color: rgba(53, 92, 255, 0.45) !important;
    padding: 0 0.5rem !important;
    font-weight: 500 !important;
}

/* Container - ensure centered stack alignment */
body.public-ui:not(.page-home) .page-header-premium .container,
body.public-ui:not(.page-home) .page-header .container {
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Responsive tuning */
@media (max-width: 767.98px) {
    body.public-ui:not(.page-home) .page-header-premium,
    body.public-ui:not(.page-home) .page-header {
        padding: 3.5rem 0 3rem !important;
    }
    body.public-ui:not(.page-home) .page-header-premium h1::after {
        width: 56px !important;
    }
}

/* ===========================================================================
   SECTION 40 — Student / Admin Login Portal Redesign
   Student → PINK accent  |  Admin → GREEN accent
   Textured brand background (paper-dot diagonal + radial washes)
   Branded editorial header: "U.S. Nursing Review | Log in Portal | Role"
   Scoped to body.page-auth (login pages render with public-ui + page-auth)
   =========================================================================== */

/* -- Shell: full-height textured brand background ---------------------------*/
body.page-auth .auth-shell-branded {
    position: relative !important;
    min-height: 100vh !important;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem) !important;
    overflow: hidden !important;
}

/* Student shell — pink-tinted base */
body.page-auth .auth-shell-branded.student-auth-shell {
    background:
        repeating-linear-gradient(135deg, rgba(196,106,160,0.05) 0px, rgba(196,106,160,0.05) 1px, transparent 1px, transparent 26px),
        radial-gradient(ellipse 900px 500px at 90% 8%, rgba(232,182,216,0.42) 0%, transparent 62%),
        radial-gradient(ellipse 800px 520px at 6% 96%, rgba(255,214,234,0.38) 0%, transparent 62%),
        radial-gradient(ellipse 1200px 380px at 50% -8%, rgba(196,106,160,0.14) 0%, transparent 72%),
        linear-gradient(180deg, #FBF6F8 0%, #F4ECEF 100%) !important;
}

/* Admin shell — green-tinted base */
body.page-auth .auth-shell-branded.admin-auth-shell {
    background:
        repeating-linear-gradient(135deg, rgba(110,155,42,0.05) 0px, rgba(110,155,42,0.05) 1px, transparent 1px, transparent 26px),
        radial-gradient(ellipse 900px 500px at 90% 8%, rgba(212,232,160,0.44) 0%, transparent 62%),
        radial-gradient(ellipse 800px 520px at 6% 96%, rgba(234,246,198,0.40) 0%, transparent 62%),
        radial-gradient(ellipse 1200px 380px at 50% -8%, rgba(110,155,42,0.14) 0%, transparent 72%),
        linear-gradient(180deg, #F9FBF2 0%, #EEF2E3 100%) !important;
}

/* Top brand hairline across shell */
body.page-auth .auth-shell-branded::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    z-index: 2 !important;
}
body.page-auth .student-auth-shell.auth-shell-branded::before {
    background: linear-gradient(90deg, #C46AA0 0%, #B44A8A 38%, #9C3A76 72%, #C46AA0 100%) !important;
}
body.page-auth .admin-auth-shell.auth-shell-branded::before {
    background: linear-gradient(90deg, #6E9B2A 0%, #5C8C24 38%, #4A711C 72%, #6E9B2A 100%) !important;
}

/* Hide legacy orbs in favor of textured background */
body.page-auth .auth-shell-branded .auth-backdrop-orb {
    display: none !important;
}

/* -- Branded editorial header ---------------------------------------------- */
body.page-auth .auth-brand-header {
    position: relative !important;
    padding: 1.5rem 1rem 1.75rem !important;
    margin: 0 auto 2rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    max-width: 680px !important;
}

body.page-auth .auth-brand-header .auth-brand-kicker {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 0.42rem 1rem !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(10px) saturate(1.1) !important;
    margin: 0 !important;
}
body.page-auth .auth-brand-header-student .auth-brand-kicker {
    color: #9C3A76 !important;
    border: 1px solid rgba(196,106,160,0.30) !important;
    box-shadow: 0 4px 12px -6px rgba(196,106,160,0.25) !important;
}
body.page-auth .auth-brand-header-admin .auth-brand-kicker {
    color: #4A711C !important;
    border: 1px solid rgba(110,155,42,0.30) !important;
    box-shadow: 0 4px 12px -6px rgba(110,155,42,0.25) !important;
}

body.page-auth .auth-brand-header .auth-brand-title {
    font-family: 'Source Serif 4', serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.2rem, 4.5vw, 3rem) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
    color: #1E2A3A !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
}
body.page-auth .auth-brand-header .auth-brand-title::after {
    content: "" !important;
    display: block !important;
    width: 72px !important;
    height: 3px !important;
    border-radius: 999px !important;
    margin: 0.9rem auto 0 !important;
}
body.page-auth .auth-brand-header-student .auth-brand-title::after {
    background: linear-gradient(90deg, #C46AA0 0%, #9C3A76 100%) !important;
}
body.page-auth .auth-brand-header-admin .auth-brand-title::after {
    background: linear-gradient(90deg, #6E9B2A 0%, #4A711C 100%) !important;
}

body.page-auth .auth-brand-header .auth-brand-role {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.52rem 1.25rem !important;
    border-radius: 999px !important;
    margin: 0.35rem 0 0 !important;
}
body.page-auth .auth-brand-header-student .auth-brand-role {
    background: linear-gradient(180deg, #D47FAE 0%, #C46AA0 100%) !important;
    border: 1px solid #B44A8A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset,
                0 10px 22px -10px rgba(196,106,160,0.55),
                0 2px 5px rgba(30,42,58,0.12) !important;
}
body.page-auth .auth-brand-header-admin .auth-brand-role {
    background: linear-gradient(180deg, #7FAA3A 0%, #6E9B2A 100%) !important;
    border: 1px solid #5C8C24 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset,
                0 10px 22px -10px rgba(110,155,42,0.55),
                0 2px 5px rgba(30,42,58,0.12) !important;
}
body.page-auth .auth-brand-header .auth-brand-role i {
    font-size: 1rem !important;
}

body.page-auth .auth-brand-header .auth-website-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.9rem !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.76) !important;
    border: 1px solid rgba(30,42,58,0.10) !important;
    box-shadow: 0 10px 24px -18px rgba(30,42,58,0.35) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
}
body.page-auth .auth-brand-header .auth-website-link:hover,
body.page-auth .auth-brand-header .auth-website-link:focus-visible {
    transform: translateY(-1px) !important;
    background: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 14px 28px -18px rgba(30,42,58,0.45) !important;
}
body.page-auth .auth-brand-header .auth-website-link i {
    font-size: 0.95rem !important;
}
body.page-auth .auth-brand-header-student .auth-website-link {
    color: #9C3A76 !important;
    border-color: rgba(196,106,160,0.24) !important;
}
body.page-auth .auth-brand-header-student .auth-website-link:hover,
body.page-auth .auth-brand-header-student .auth-website-link:focus-visible {
    color: #B44A8A !important;
    box-shadow: 0 14px 28px -18px rgba(196,106,160,0.55) !important;
}
body.page-auth .auth-brand-header-admin .auth-website-link {
    color: #4A711C !important;
    border-color: rgba(110,155,42,0.24) !important;
}
body.page-auth .auth-brand-header-admin .auth-website-link:hover,
body.page-auth .auth-brand-header-admin .auth-website-link:focus-visible {
    color: #5C8C24 !important;
    box-shadow: 0 14px 28px -18px rgba(110,155,42,0.55) !important;
}

/* -- Auth card: premium glass plate ---------------------------------------- */
body.page-auth .auth-card {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.85) inset,
        0 34px 72px -26px rgba(30,42,58,0.26),
        0 8px 18px -6px rgba(30,42,58,0.08) !important;
    position: relative !important;
    z-index: 1 !important;
}
body.page-auth .student-auth-card {
    border: 1px solid rgba(196,106,160,0.20) !important;
}
body.page-auth .admin-auth-card {
    border: 1px solid rgba(110,155,42,0.20) !important;
}

/* -- Left visual panel (themed per role) ----------------------------------- */
body.page-auth .auth-visual {
    position: relative !important;
    padding: clamp(2rem, 4vw, 3rem) !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
}

body.page-auth .student-auth-visual {
    background:
        radial-gradient(ellipse 600px 400px at 100% 0%, rgba(255,255,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 500px 380px at 0% 100%, rgba(255,255,255,0.10) 0%, transparent 60%),
        linear-gradient(160deg, #C46AA0 0%, #B44A8A 50%, #9C3A76 100%) !important;
}
body.page-auth .admin-auth-visual {
    background:
        radial-gradient(ellipse 600px 400px at 100% 0%, rgba(255,255,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 500px 380px at 0% 100%, rgba(255,255,255,0.10) 0%, transparent 60%),
        linear-gradient(160deg, #6E9B2A 0%, #5C8C24 50%, #4A711C 100%) !important;
}

body.page-auth .auth-visual::before,
body.page-auth .auth-visual::after {
    content: none !important;
}

body.page-auth .auth-visual h1 {
    font-family: 'Source Serif 4', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.75rem, 2.8vw, 2.25rem) !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 1rem !important;
}

body.page-auth .auth-visual p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
}

/* Role badge on visual panel */
body.page-auth .auth-role-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    color: #FFFFFF !important;
    padding: 0.42rem 0.9rem !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(6px) !important;
}

/* Student points / admin metrics */
body.page-auth .student-auth-points,
body.page-auth .admin-auth-metrics {
    display: grid !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}
body.page-auth .student-auth-point,
body.page-auth .admin-auth-metric {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-radius: 12px !important;
    padding: 0.75rem 0.95rem !important;
    backdrop-filter: blur(6px) !important;
}
body.page-auth .student-auth-point span,
body.page-auth .admin-auth-metric span {
    display: block !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.25rem !important;
}
body.page-auth .student-auth-point strong,
body.page-auth .admin-auth-metric strong {
    display: block !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    line-height: 1.45 !important;
}

/* -- Right form panel ------------------------------------------------------ */
body.page-auth .student-auth-form-col,
body.page-auth .admin-auth-form-col {
    background: #FFFFFF !important;
    position: relative !important;
}

body.page-auth .auth-form-title {
    font-family: 'Source Serif 4', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
    color: #1E2A3A !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.5rem !important;
}

body.page-auth .auth-kicker.metric-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.55rem !important;
}
body.page-auth .student-auth-card .auth-kicker.metric-label {
    color: #9C3A76 !important;
}
body.page-auth .admin-auth-card .auth-kicker.metric-label {
    color: #4A711C !important;
}

/* Field inputs */
body.page-auth .auth-input-wrap {
    position: relative !important;
}
body.page-auth .auth-input-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #8A94A6 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
body.page-auth .auth-card .form-control {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E6EE !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem 0.85rem 2.75rem !important;
    font-size: 0.95rem !important;
    color: #1E2A3A !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.page-auth .student-auth-card .form-control:focus {
    border-color: #C46AA0 !important;
    box-shadow: 0 0 0 4px rgba(196,106,160,0.12) !important;
}
body.page-auth .admin-auth-card .form-control:focus {
    border-color: #6E9B2A !important;
    box-shadow: 0 0 0 4px rgba(110,155,42,0.12) !important;
}

body.page-auth .auth-input-toggle {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #8A94A6 !important;
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
body.page-auth .student-auth-card .auth-input-toggle:hover {
    color: #9C3A76 !important;
}
body.page-auth .admin-auth-card .auth-input-toggle:hover {
    color: #4A711C !important;
}

/* Field notes / helper text */
body.page-auth .auth-field-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    font-size: 0.78rem !important;
    color: #6B7280 !important;
    line-height: 1.5 !important;
}
body.page-auth .student-auth-card .auth-field-note i {
    color: #B44A8A !important;
}
body.page-auth .admin-auth-card .auth-field-note i {
    color: #5C8C24 !important;
}
body.page-auth .auth-field-note i {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* Submit button — themed accent */
body.page-auth .auth-card .btn-accent {
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0.85rem 1.5rem !important;
    border: 1px solid transparent !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
body.page-auth .student-auth-card .btn-accent {
    background: linear-gradient(180deg, #D47FAE 0%, #C46AA0 100%) !important;
    border-color: #B44A8A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 12px 24px -10px rgba(196,106,160,0.55),
                0 3px 6px rgba(30,42,58,0.12) !important;
}
body.page-auth .student-auth-card .btn-accent:hover,
body.page-auth .student-auth-card .btn-accent:focus-visible {
    filter: brightness(0.96) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 16px 30px -12px rgba(196,106,160,0.65),
                0 4px 8px rgba(30,42,58,0.14) !important;
}
body.page-auth .admin-auth-card .btn-accent {
    background: linear-gradient(180deg, #7FAA3A 0%, #6E9B2A 100%) !important;
    border-color: #5C8C24 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 12px 24px -10px rgba(110,155,42,0.55),
                0 3px 6px rgba(30,42,58,0.12) !important;
}
body.page-auth .admin-auth-card .btn-accent:hover,
body.page-auth .admin-auth-card .btn-accent:focus-visible {
    filter: brightness(0.96) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 16px 30px -12px rgba(110,155,42,0.65),
                0 4px 8px rgba(30,42,58,0.14) !important;
}

/* Form links (forgot password, help, footnote) */
body.page-auth .student-auth-card a {
    color: #9C3A76 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.page-auth .student-auth-card a:hover {
    color: #B44A8A !important;
    text-decoration: underline !important;
}
body.page-auth .admin-auth-card a {
    color: #4A711C !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.page-auth .admin-auth-card a:hover {
    color: #5C8C24 !important;
    text-decoration: underline !important;
}

/* Support row layout */
body.page-auth .auth-support-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}
body.page-auth .auth-assist-links {
    display: inline-flex !important;
    gap: 1rem !important;
    align-items: center !important;
}

/* Form check (remember me) */
body.page-auth .auth-card .form-check-input:checked {
    border-color: transparent !important;
}
body.page-auth .student-auth-card .form-check-input:checked {
    background-color: #C46AA0 !important;
}
body.page-auth .admin-auth-card .form-check-input:checked {
    background-color: #6E9B2A !important;
}
body.page-auth .student-auth-card .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(196,106,160,0.22) !important;
    border-color: #C46AA0 !important;
}
body.page-auth .admin-auth-card .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(110,155,42,0.22) !important;
    border-color: #6E9B2A !important;
}

/* Divider between sections */
body.page-auth .auth-form-divider {
    position: relative !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #8A94A6 !important;
    margin: 0.5rem 0 !important;
}
body.page-auth .auth-form-divider::before,
body.page-auth .auth-form-divider::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: calc(50% - 5rem) !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(138,148,166,0.35) 100%) !important;
}
body.page-auth .auth-form-divider::before {
    left: 0 !important;
}
body.page-auth .auth-form-divider::after {
    right: 0 !important;
    background: linear-gradient(90deg, rgba(138,148,166,0.35) 0%, transparent 100%) !important;
}

/* Inline help / notes blocks */
body.page-auth .auth-inline-help,
body.page-auth .student-auth-inline-note,
body.page-auth .admin-auth-inline-note {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}
body.page-auth .student-auth-card .auth-inline-help,
body.page-auth .student-auth-inline-note {
    background: #FBE8F2 !important;
    border: 1px solid rgba(196,106,160,0.22) !important;
    color: #6B4259 !important;
}
body.page-auth .admin-auth-card .auth-inline-help,
body.page-auth .admin-auth-inline-note {
    background: #EDF7D6 !important;
    border: 1px solid rgba(110,155,42,0.22) !important;
    color: #3E5A16 !important;
}
body.page-auth .auth-inline-help i,
body.page-auth .student-auth-inline-note i,
body.page-auth .admin-auth-inline-note i {
    flex-shrink: 0 !important;
    font-size: 1.15rem !important;
    margin-top: 2px !important;
}
body.page-auth .student-auth-card .auth-inline-help i,
body.page-auth .student-auth-inline-note i {
    color: #B44A8A !important;
}
body.page-auth .admin-auth-card .auth-inline-help i,
body.page-auth .admin-auth-inline-note i {
    color: #5C8C24 !important;
}
body.page-auth .auth-inline-help strong {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 0.15rem !important;
    color: #1E2A3A !important;
}

/* Alerts */
body.page-auth .auth-alert {
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.88rem !important;
    border-width: 1px !important;
}

/* Footnote */
body.page-auth .auth-form-footnote {
    color: #6B7280 !important;
    padding-top: 0.5rem !important;
    border-top: 1px dashed rgba(138,148,166,0.25) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 40B — Cross-brand accent layer
   Weaves blue + amber (+ cross-role touches) into both pages so they
   don't read as single-color monochromes. Brand colors:
   BLUE #355CFF  |  PINK #C46AA0  |  GREEN #6E9B2A  |  AMBER #D4B24D
   --------------------------------------------------------------------------- */

/* Full brand rainbow ribbon across the top of the card (overrides role-only) */
body.page-auth .auth-card {
    position: relative !important;
}
body.page-auth .auth-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #355CFF 0%, #C46AA0 38%, #6E9B2A 72%, #D4B24D 100%) !important;
    z-index: 3 !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
}

/* Decorative accent orbs on visual panel — different hues per role */
body.page-auth .auth-visual {
    isolation: isolate !important;
}
body.page-auth .auth-visual::before,
body.page-auth .auth-visual::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(40px) !important;
    opacity: 0.55 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
/* Student visual — blue + amber cross-accents */
body.page-auth .student-auth-visual::before {
    width: 220px !important;
    height: 220px !important;
    top: -70px !important;
    right: -60px !important;
    background: radial-gradient(circle, rgba(53,92,255,0.55) 0%, transparent 70%) !important;
}
body.page-auth .student-auth-visual::after {
    width: 200px !important;
    height: 200px !important;
    bottom: -70px !important;
    left: -50px !important;
    background: radial-gradient(circle, rgba(212,178,77,0.50) 0%, transparent 70%) !important;
}
/* Admin visual — blue + amber cross-accents too */
body.page-auth .admin-auth-visual::before {
    width: 220px !important;
    height: 220px !important;
    top: -70px !important;
    right: -60px !important;
    background: radial-gradient(circle, rgba(53,92,255,0.55) 0%, transparent 70%) !important;
}
body.page-auth .admin-auth-visual::after {
    width: 200px !important;
    height: 200px !important;
    bottom: -70px !important;
    left: -50px !important;
    background: radial-gradient(circle, rgba(212,178,77,0.55) 0%, transparent 70%) !important;
}

/* Keep visual panel content above the orbs */
body.page-auth .auth-visual > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Accent-colored left rules on the bullet/metric cards (rotating) */
body.page-auth .student-auth-point,
body.page-auth .admin-auth-metric {
    border-left: 3px solid transparent !important;
    padding-left: 0.85rem !important;
    position: relative !important;
}
body.page-auth .student-auth-point:nth-child(1),
body.page-auth .admin-auth-metric:nth-child(1) {
    border-left-color: #D4B24D !important;
}
body.page-auth .student-auth-point:nth-child(2),
body.page-auth .admin-auth-metric:nth-child(2) {
    border-left-color: #7FAACE !important;
}

/* Tint the small-caps eyebrow on bullets with accent amber */
body.page-auth .student-auth-point:nth-child(1) span,
body.page-auth .admin-auth-metric:nth-child(1) span {
    color: #F6E4A8 !important;
}
body.page-auth .student-auth-point:nth-child(2) span,
body.page-auth .admin-auth-metric:nth-child(2) span {
    color: #CCE1F2 !important;
}

/* Accent dots row under the brand title (rainbow) */
body.page-auth .auth-brand-header .auth-brand-title::after {
    background: linear-gradient(90deg, #355CFF 0%, #C46AA0 38%, #6E9B2A 72%, #D4B24D 100%) !important;
    width: 88px !important;
    height: 3px !important;
}

/* Brand-plate mini chips floating behind the header on large screens */
body.page-auth .auth-brand-header::before,
body.page-auth .auth-brand-header::after {
    content: "" !important;
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.55 !important;
    filter: blur(1px) !important;
}
body.page-auth .auth-brand-header-student::before {
    background: #355CFF !important;
    left: 6% !important;
}
body.page-auth .auth-brand-header-student::after {
    background: #D4B24D !important;
    right: 6% !important;
}
body.page-auth .auth-brand-header-admin::before {
    background: #355CFF !important;
    left: 6% !important;
}
body.page-auth .auth-brand-header-admin::after {
    background: #D4B24D !important;
    right: 6% !important;
}
@media (max-width: 767.98px) {
    body.page-auth .auth-brand-header::before,
    body.page-auth .auth-brand-header::after {
        display: none !important;
    }
}

/* Rotate helper-note icon colors so form side picks up accents too */
body.page-auth .auth-field:nth-of-type(1) .auth-field-note i {
    color: #355CFF !important;
}
body.page-auth .auth-field:nth-of-type(2) .auth-field-note i {
    color: #8A5A00 !important;
}

/* Inline help blocks: alternate accent icon colors */
body.page-auth .student-auth-inline-note i,
body.page-auth .admin-auth-inline-note i {
    color: #355CFF !important;
}
body.page-auth .col-12.auth-inline-help:nth-of-type(odd) i {
    color: #355CFF !important;
}
body.page-auth .col-12.auth-inline-help:nth-of-type(even) i {
    color: #8A5A00 !important;
}

/* Amber accent on form-divider line */
body.page-auth .auth-form-divider {
    color: #8A5A00 !important;
}
body.page-auth .auth-form-divider::before,
body.page-auth .auth-form-divider::after {
    background: linear-gradient(90deg, transparent 0%, rgba(212,178,77,0.45) 100%) !important;
}
body.page-auth .auth-form-divider::after {
    background: linear-gradient(90deg, rgba(212,178,77,0.45) 0%, transparent 100%) !important;
}

/* Role badge on visual panel — glass with amber ring */
body.page-auth .auth-role-badge {
    border: 1px solid rgba(255,214,120,0.45) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset,
                0 8px 18px -6px rgba(0,0,0,0.18) !important;
}
body.page-auth .auth-role-badge i {
    color: #FFD778 !important;
}

/* Responsive tuning for login pages */
@media (max-width: 991.98px) {
    body.page-auth .auth-card {
        flex-direction: column !important;
    }
    body.page-auth .auth-visual {
        padding: 2rem 1.5rem !important;
    }
    body.page-auth .auth-visual h1 {
        font-size: 1.5rem !important;
    }
}
@media (max-width: 575.98px) {
    body.page-auth .auth-brand-header .auth-brand-title {
        font-size: 1.85rem !important;
    }
    body.page-auth .auth-support-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    body.page-auth .auth-assist-links {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   SECTION 41 — MASTHEAD LIFT
   ------------------------------------------------------------
   Goal: make the public-site top actually FEEL like a header.
   The navbar previously sat on the same cream background as
   the hero below it, with only a 1px hairline separating
   them — flat, no depth, reads like drifting text.
   This section:
     - gives the navbar an atmospheric, brand-tinted gradient
       background (warm ivory with faint blue + green edge
       washes at the lower corners)
     - lifts it off the page with a real soft drop shadow
       (visible at rest, stronger when scrolled)
     - installs a 3px brand-rainbow ribbon flush beneath
       (replaces the thin hairline as the "end of header" line)
     - applies identically to body.public-ui AND body.page-home
       so inner pages and the homepage read as the same brand
   ============================================================ */

/* --- Navbar — atmospheric background + true drop shadow --- */
body.public-ui .premium-navbar,
body.page-home .premium-navbar {
    position: relative !important;
    background:
        radial-gradient(ellipse 900px 150px at 15% 100%,
            rgba(53, 92, 255, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 760px 150px at 85% 100%,
            rgba(169, 216, 78, 0.055) 0%, transparent 60%),
        radial-gradient(ellipse 500px 100px at 50% 0%,
            rgba(232, 182, 216, 0.05) 0%, transparent 62%),
        linear-gradient(180deg,
            rgba(254, 252, 248, 0.98) 0%,
            rgba(249, 246, 239, 0.97) 100%) !important;
    backdrop-filter: saturate(140%) blur(12px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px) !important;
    border-bottom: 1px solid rgba(30, 42, 58, 0.10) !important;
    box-shadow:
        0 8px 24px -12px rgba(30, 42, 58, 0.14),
        0 2px 6px -2px rgba(30, 42, 58, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    padding: 0.9rem 0 !important;
}

/* Clearer lift once the user scrolls */
body.public-ui .premium-navbar.is-scrolled,
body.page-home .premium-navbar.is-scrolled {
    background:
        radial-gradient(ellipse 900px 150px at 15% 100%,
            rgba(53, 92, 255, 0.08) 0%, transparent 58%),
        radial-gradient(ellipse 760px 150px at 85% 100%,
            rgba(169, 216, 78, 0.065) 0%, transparent 58%),
        linear-gradient(180deg,
            rgba(254, 252, 248, 0.99) 0%,
            rgba(249, 246, 239, 0.98) 100%) !important;
    border-bottom-color: rgba(30, 42, 58, 0.14) !important;
    box-shadow:
        0 16px 34px -14px rgba(30, 42, 58, 0.22),
        0 4px 10px -3px rgba(30, 42, 58, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* --- The "end of header" — 3px brand rainbow ribbon --- */
body.public-ui .premium-navbar::after,
body.page-home .premium-navbar::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -3px !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        rgba(63, 123, 196, 0.0)  0%,
        rgba(63, 123, 196, 0.50) 12%,
        rgba(91, 155, 216, 0.55) 38%,
        rgba(162, 210, 255, 0.55) 62%,
        rgba(91, 155, 216, 0.50) 88%,
        rgba(63, 123, 196, 0.0) 100%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0.9;
}

/* --- Topbar ties into the masthead (subtle inner shadow so
   topbar + navbar read as one header assembly, not two strips) --- */
body.public-ui .premium-topbar,
body.page-home .premium-topbar {
    box-shadow: inset 0 -1px 0 rgba(30, 42, 58, 0.04) !important;
}

/* --- First section / page-header below the navbar pulls away
   from the ribbon so the rainbow stays crisp, not muddied. --- */
body.public-ui .page-header,
body.public-ui .page-header-premium,
body.public-ui .hero-section,
body.page-home .hero-section {
    margin-top: 3px !important;
}

/* ============================================================
   SECTION 42 — UNIFY LEFT-OUT PUBLIC SECTIONS
   -------------------------------------------------------------
   User feedback: pricing tabs, mission/vision cards, the
   "What to Expect" expectations section, and the footer felt
   visually disconnected from the rest of the site (which now
   speaks warm cream + pink porcelain + soft sky/green radials
   + a 3px rainbow masthead ribbon).

   This section pulls those four touchpoints into the same
   vocabulary:
     · Warm ivory canvas with brand radial washes (replaces the
       cold #F5F8FE pale-blue that felt "institutional blue").
     · All kicker labels in these contexts reroute to pink,
       mirroring the navbar's porcelain-pink active pill.
     · Cards gain a "porcelain" finish — inset highlight + inset
       hairline + soft drop shadow with a brand-tinted hover.
     · Pricing tabs + category/service filter pills adopt the
       same porcelain pink pill the navbar active tab uses, so
       "this is the selected thing" reads identically everywhere.
     · Footer gets a 3px rainbow top hairline so it bookends
       the header — same ribbon, top and bottom of the page.
   ============================================================ */

/* ---- 42.1 · Expectations section — warm ivory canvas ---- */
body.public-ui .expectations-section {
    background:
        radial-gradient(ellipse 900px 440px at 12% 8%,
            rgba(232, 182, 216, 0.18) 0%,
            rgba(232, 182, 216, 0) 60%),
        radial-gradient(ellipse 780px 420px at 90% 92%,
            rgba(140, 190, 220, 0.14) 0%,
            rgba(140, 190, 220, 0) 60%),
        radial-gradient(ellipse 620px 320px at 50% 100%,
            rgba(169, 216, 78, 0.08) 0%,
            rgba(169, 216, 78, 0) 60%),
        linear-gradient(180deg, #F8F6F1 0%, #F1EDE3 100%) !important;
    border-top: 1px solid rgba(196, 106, 160, 0.10) !important;
    border-bottom: 1px solid rgba(196, 106, 160, 0.10) !important;
}
/* Kicker unified to pink — matches navbar pill + #reviews */
body.public-ui .expectations-section .section-label {
    color: #B44A8A !important;
}
body.public-ui .expectations-section .section-label::before {
    background: linear-gradient(90deg,
        rgba(232, 182, 216, 0.9) 0%,
        #B44A8A 100%) !important;
}

/* ---- 42.2 · Pillar cards (What to Expect) — porcelain finish ---- */
body.public-ui .expectations-section .pillar-card {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(250, 246, 240, 0.92) 100%) !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(30, 42, 58, 0.07),
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 44px -28px rgba(30, 42, 58, 0.18) !important;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease !important;
}
body.public-ui .expectations-section .pillar-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(196, 106, 160, 0.22),
        0 1px 2px rgba(30, 42, 58, 0.05),
        0 28px 52px -22px rgba(196, 106, 160, 0.22) !important;
}

/* ---- 42.3 · Mission / Vision cards — porcelain panel ---- */
body.public-ui .mv-card.premium-panel {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(250, 246, 240, 0.92) 100%) !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(30, 42, 58, 0.07),
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 24px 52px -28px rgba(30, 42, 58, 0.18) !important;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease !important;
    overflow: hidden;
}
/* Subtle rainbow hairline at the top of each mv-card — ties back
   to the masthead ribbon so these panels feel "stamped" by the
   same brand system. */
body.public-ui .mv-card.premium-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(232, 182, 216, 0.75) 0%,
        rgba(140, 190, 220, 0.75) 48%,
        rgba(169, 216, 78, 0.75) 100%);
    opacity: 0.55;
    transition: opacity .3s ease;
}
body.public-ui .mv-card.premium-panel:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(196, 106, 160, 0.22),
        0 1px 2px rgba(30, 42, 58, 0.05),
        0 30px 60px -24px rgba(196, 106, 160, 0.22) !important;
}
body.public-ui .mv-card.premium-panel:hover::before {
    opacity: 1;
}
/* Icon accent — keep the brand-blue, but softer */
body.public-ui .mv-card.premium-panel .text-accent {
    color: #4A86BE !important;
}

/* ---- 42.4 · Branch (Pricing) toggle — porcelain pink pill ---- */
body.public-ui .branch-toggle-btn.active,
body.public-ui .branch-toggle-btn[aria-selected="true"] {
    background: linear-gradient(180deg,
        rgba(232, 182, 216, 0.40) 0%,
        rgba(196, 106, 160, 0.18) 100%) !important;
    color: #B44A8A !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(196, 106, 160, 0.26),
        0 3px 10px -3px rgba(196, 106, 160, 0.30) !important;
    font-weight: 600 !important;
}
body.public-ui .branch-toggle-btn:hover:not(.active) {
    background: rgba(232, 182, 216, 0.14) !important;
    color: #B44A8A !important;
}

/* ---- 42.5 · Category + Service filter pills — porcelain pink ---- */
body.public-ui .category-filter-pill.active,
body.public-ui .category-filter-pill[aria-selected="true"],
body.public-ui .service-filter-pill.active,
body.public-ui .service-filter-pill[aria-selected="true"] {
    background: linear-gradient(180deg,
        rgba(232, 182, 216, 0.40) 0%,
        rgba(196, 106, 160, 0.18) 100%) !important;
    color: #B44A8A !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(196, 106, 160, 0.26),
        0 3px 10px -3px rgba(196, 106, 160, 0.28) !important;
    font-weight: 600 !important;
}
body.public-ui .category-filter-pill.active .pill-badge,
body.public-ui .service-filter-pill.active .pill-badge {
    background: rgba(196, 106, 160, 0.16) !important;
    color: #B44A8A !important;
}
body.public-ui .category-filter-pill:hover:not(.active),
body.public-ui .service-filter-pill:hover:not(.active) {
    background: rgba(232, 182, 216, 0.14) !important;
    color: #B44A8A !important;
    border-color: rgba(196, 106, 160, 0.18) !important;
}

/* ---- 42.6 · Site footer — rainbow bookend hairline ---- */
/* A 3px rainbow ribbon at the TOP of the footer, mirroring the
   one at the bottom of the masthead. Page now opens and closes
   with the same brand signature. Placed on ::after so it layers
   above any existing footer ::before decoration. */
body.public-ui .premium-site-footer,
body.public-ui .site-footer {
    position: relative;
}
body.public-ui .premium-site-footer::after,
body.public-ui .site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(63, 123, 196, 0.0) 0%,
        rgba(63, 123, 196, 0.55) 22%,
        rgba(91, 155, 216, 0.60) 50%,
        rgba(162, 210, 255, 0.55) 78%,
        rgba(63, 123, 196, 0.0) 100%);
    pointer-events: none;
    z-index: 2;
}


/* ============================================================
   SECTION 43 — PUBLIC BUTTON FAMILY + SECTION-TINT WARMUP
   -------------------------------------------------------------
   User feedback on the Student Portal landing page + the
   locations intro band: "the buttons + the background — revamp".

   The culprits this section addresses:
     1. style.css line 2834 paints .section-tint with
        linear-gradient(rgba(255,255,255,.86) → rgba(238,243,250,.9))
        — that rgba(238,243,250) is a cold pale-blue wash and it's a
        `background:` shorthand, so it beats quiet-clinical's
        background-color. We replace it with warm ivory + brand radials.
     2. .btn-login uses var(--primary) (deep navy) as a flat fill — it
        now reads "stock admin button", disconnected from the warm
        porcelain system. We give it a confident warm-ink gradient
        with inset highlight + pink-tinted glow so it belongs.
     3. .btn-accent on public pages keeps the brand amber but gains a
        refined porcelain finish (inset highlight, warmer shadow,
        softer gradient) so it reads "of-a-piece" with the pink pills.
     4. .btn-outline-secondary on public pages gets a warm ivory +
        pink hover treatment so outline CTAs stop reading as grey
        bureaucratic chips.
     5. .login-card itself gets the porcelain card treatment with a
        rainbow top hairline — same language as mv-card + pillar-card.
   ============================================================ */

/* ---- 43.1 · Section-tint — warm ivory canvas, no cold blue ---- */
body.public-ui .section-tint,
body.public-ui .bg-light-custom {
    background:
        radial-gradient(ellipse 880px 440px at 12% 8%,
            rgba(232, 182, 216, 0.16) 0%,
            rgba(232, 182, 216, 0) 60%),
        radial-gradient(ellipse 760px 400px at 90% 92%,
            rgba(140, 190, 220, 0.12) 0%,
            rgba(140, 190, 220, 0) 60%),
        radial-gradient(ellipse 620px 320px at 50% 100%,
            rgba(169, 216, 78, 0.08) 0%,
            rgba(169, 216, 78, 0) 60%),
        linear-gradient(180deg, #F8F6F1 0%, #F1EDE3 100%) !important;
    border-top: 1px solid rgba(196, 106, 160, 0.08);
    border-bottom: 1px solid rgba(196, 106, 160, 0.08);
}
/* Kicker unified to pink across .section-tint (was already partial) */
body.public-ui .section-tint .lead {
    color: #3B4656 !important;
}

/* ---- 43.2 · Login card — porcelain with rainbow hairline ---- */
body.public-ui .login-card {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(250, 246, 240, 0.94) 100%) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(30, 42, 58, 0.06),
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 34px 72px -30px rgba(30, 42, 58, 0.22) !important;
    overflow: hidden;
}
body.public-ui .login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(232, 182, 216, 0.85) 0%,
        rgba(196, 106, 160, 0.85) 28%,
        rgba(140, 190, 220, 0.85) 55%,
        rgba(169, 216, 78, 0.85) 82%,
        rgba(233, 209, 91, 0.85) 100%);
    opacity: 0.75;
    pointer-events: none;
}
body.public-ui .login-card .login-logo .fw-bold {
    color: #1E2A3A !important;
}

/* ---- 43.3 · .btn-login — confident warm ink with pink glow ---- */
body.public-ui .btn-login,
body.public-ui .login-card .btn-login {
    background: linear-gradient(180deg, #233243 0%, #172230 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0.95rem 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(23, 34, 48, 0.18),
        0 18px 32px -14px rgba(196, 106, 160, 0.35) !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        background .22s ease !important;
}
body.public-ui .btn-login:hover,
body.public-ui .login-card .btn-login:hover {
    background: linear-gradient(180deg, #2A3A4D 0%, #1B2838 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 8px rgba(23, 34, 48, 0.2),
        0 26px 42px -14px rgba(196, 106, 160, 0.48) !important;
}
body.public-ui .btn-login:focus-visible,
body.public-ui .login-card .btn-login:focus-visible {
    outline: 2px solid rgba(196, 106, 160, 0.55) !important;
    outline-offset: 2px !important;
}

/* ---- 43.4 · .btn-accent — refined honey amber porcelain ---- */
/* The brand amber stays — this is the institution's accent. We just
   soften the gradient, add an inset highlight, and warm the shadow so
   it sits in the same porcelain family as the pink pills. */
body.public-ui .btn-accent {
    background: linear-gradient(180deg, #F4A83A 0%, #E28E1E 100%) !important;
    color: #1E2A3A !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(180, 110, 30, 0.18),
        0 2px 4px rgba(180, 110, 30, 0.14),
        0 14px 28px -10px rgba(226, 142, 30, 0.38) !important;
    font-weight: 600 !important;
}
body.public-ui .btn-accent:hover {
    background: linear-gradient(180deg, #F7B54B 0%, #E8992A 100%) !important;
    color: #1E2A3A !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 0 1px rgba(180, 110, 30, 0.22),
        0 4px 8px rgba(180, 110, 30, 0.16),
        0 20px 36px -10px rgba(226, 142, 30, 0.46) !important;
}

/* ---- 43.5 · .btn-outline-secondary on public — warm porcelain ---- */
body.public-ui .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #3B4656 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(30, 42, 58, 0.14) !important;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        background .22s ease,
        color .22s ease !important;
}
body.public-ui .btn-outline-secondary:hover,
body.public-ui .btn-outline-secondary:focus-visible {
    background: linear-gradient(180deg,
        rgba(232, 182, 216, 0.32) 0%,
        rgba(196, 106, 160, 0.14) 100%) !important;
    color: #B44A8A !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 0 0 1px rgba(196, 106, 160, 0.26),
        0 3px 10px -3px rgba(196, 106, 160, 0.26) !important;
}

/* ---- 43.6 · Student-portal helper cards — gentle lift ---- */
/* The three helper columns (Not Enrolled Yet? / Need Help? / Find Your
   Branch) currently sit on plain paper. Give them a hover feel so they
   stop reading as static copy. */
body.page-portal section.section-spacing .row.g-4.text-center > [class*="col-"] > .p-3 {
    border-radius: 14px;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        background .22s ease;
}
body.page-portal section.section-spacing .row.g-4.text-center > [class*="col-"] > .p-3:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.55);
}
body.page-portal .text-accent {
    color: #E28E1E !important;
}


/* ============================================================
   SECTION 44 — PROGRAM CATALOG · ON-THEME TREATMENT
   -------------------------------------------------------------
   Pulls the pricing catalog (.product-card + surrounding chrome)
   into the site's warm ivory + pink-porcelain vocabulary.

   Seven moves batched:
     44.1 · Catalog kicker unified to pink
     44.2 · Porcelain product card (gradient + triple-shadow)
     44.3 · Type-badge BRAND ROTATION via [data-tag="…"]
            (RN = sky · RN/LPN = pink · LPN = green · NEW = coral)
     44.4 · Elegant serif price (warm ink, display font, muted $-symbol)
     44.5 · Most Popular — pink→amber gradient rim + porcelain ribbon
     44.6 · View Details — warm ink with pink hover + › affordance
     44.7 · Carousel nav arrows — porcelain pink hover
   ============================================================ */

/* ---- 44.1 · Catalog-group kicker unified to pink ---- */
body.public-ui .catalog-group-header .section-label,
body.public-ui .catalog-subheader .section-label {
    color: #B44A8A !important;
}
body.public-ui .catalog-group-header .section-label::before,
body.public-ui .catalog-subheader .section-label::before {
    background: linear-gradient(90deg,
        rgba(232, 182, 216, 0.9) 0%,
        #B44A8A 100%) !important;
}
body.public-ui .catalog-group-header h3,
body.public-ui .catalog-group-header .catalog-subheader-title,
body.public-ui .catalog-group-header h4 {
    color: #1E2A3A !important;
    font-family: var(--qcp-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}
body.public-ui .catalog-group-header p {
    color: #3B4656;
    font-size: 1rem;
    line-height: 1.65;
}
body.public-ui .carousel-hint {
    color: #6B7685 !important;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

/* ---- 44.2 · Porcelain product card ---- */
body.public-ui .product-card {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(250, 246, 240, 0.94) 100%) !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(30, 42, 58, 0.07),
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 44px -28px rgba(30, 42, 58, 0.18) !important;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease !important;
}
body.public-ui .product-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(196, 106, 160, 0.22),
        0 1px 2px rgba(30, 42, 58, 0.05),
        0 28px 52px -22px rgba(196, 106, 160, 0.20) !important;
}
body.public-ui .product-card-image {
    background: rgba(241, 237, 227, 0.6) !important;
}
body.public-ui .product-card-body h5 {
    font-family: var(--qcp-display);
    color: #1E2A3A !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.15rem;
}
body.public-ui .product-short-desc {
    color: #4B5866 !important;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ---- 44.3 · Type badge — brand rotation by data-tag slug ---- */
/* Fallback (any unslugged tag): soft sky — reads as "metadata chip" */
body.public-ui .product-type-badge {
    background: rgba(140, 190, 220, 0.18) !important;
    color: #3A6FA0 !important;
    font-size: 0.7rem !important;
    padding: 0.38rem 0.8rem !important;
    box-shadow: inset 0 0 0 1px rgba(140, 190, 220, 0.30) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}
/* RN → sky blue */
body.public-ui .product-type-badge[data-tag="rn"] {
    background: rgba(140, 190, 220, 0.18) !important;
    color: #3A6FA0 !important;
    box-shadow: inset 0 0 0 1px rgba(140, 190, 220, 0.32) !important;
}
/* RN / LPN → soft pink */
body.public-ui .product-type-badge[data-tag="rn-lpn"],
body.public-ui .product-type-badge[data-tag="rn-and-lpn"],
body.public-ui .product-type-badge[data-tag="rnlpn"] {
    background: rgba(232, 182, 216, 0.32) !important;
    color: #B44A8A !important;
    box-shadow: inset 0 0 0 1px rgba(196, 106, 160, 0.28) !important;
}
/* LPN → soft green */
body.public-ui .product-type-badge[data-tag="lpn"] {
    background: rgba(169, 216, 78, 0.22) !important;
    color: #4E7A1F !important;
    box-shadow: inset 0 0 0 1px rgba(140, 190, 80, 0.34) !important;
}
/* NEW → coral rose (distinct from pink AND from amber rim) */
body.public-ui .product-type-badge[data-tag="new"] {
    background: rgba(251, 230, 236, 0.95) !important;
    color: #B44A68 !important;
    box-shadow: inset 0 0 0 1px rgba(216, 110, 134, 0.30) !important;
}
/* Bundle / Course / Book / Service — warm sepia */
body.public-ui .product-type-badge[data-tag="bundle"],
body.public-ui .product-type-badge[data-tag="course"],
body.public-ui .product-type-badge[data-tag="book"],
body.public-ui .product-type-badge[data-tag="service"] {
    background: rgba(233, 209, 91, 0.22) !important;
    color: #8A6A14 !important;
    box-shadow: inset 0 0 0 1px rgba(180, 150, 30, 0.26) !important;
}
/* Icon inside badge uses the same color */
body.public-ui .product-type-badge i {
    color: inherit !important;
    opacity: 0.85;
}

/* ---- 44.4 · Elegant serif price ---- */
body.public-ui .product-price-row > span:not(.old-price):not(.card-unavail-msg) {
    font-family: var(--qcp-display) !important;
    font-size: 1.85rem !important;
    font-weight: 600 !important;
    color: #1E2A3A !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
body.public-ui .product-price-row .old-price {
    font-family: var(--qcp-sans, "Inter", sans-serif) !important;
    font-size: 0.88rem !important;
    color: #8A95A5 !important;
    opacity: 0.85 !important;
    font-weight: 500 !important;
    text-decoration: line-through;
    margin-right: 0.4rem;
}

/* ---- 44.5 · Most Popular — gradient rim + porcelain ribbon ---- */
body.public-ui .product-card-featured {
    position: relative;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(196, 106, 160, 0.16),
        0 1px 2px rgba(30, 42, 58, 0.05),
        0 26px 52px -20px rgba(226, 142, 30, 0.24) !important;
}
/* Gradient rim (pink → amber) applied via masked ::before so the
   card keeps its existing radius + the rim never affects layout */
body.public-ui .product-card-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(232, 182, 216, 0.85) 0%,
        rgba(196, 106, 160, 0.65) 28%,
        #F4A83A 62%,
        #E28E1E 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}
/* Most Popular ribbon — porcelain amber pill (was a flat orange block) */
body.public-ui .product-badge {
    background: linear-gradient(180deg, #F4A83A 0%, #E28E1E 100%) !important;
    color: #1E2A3A !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    padding: 0.45rem 0.95rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        inset 0 0 0 1px rgba(180, 110, 30, 0.20),
        0 2px 6px rgba(196, 106, 160, 0.18),
        0 8px 16px -4px rgba(226, 142, 30, 0.40) !important;
    z-index: 6 !important;
}

/* ---- 44.6 · View Details — warm ink with pink hover + arrow ---- */
body.public-ui .product-card .btn-link,
body.public-ui .product-card .view-details-btn {
    color: #3B4656 !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    position: relative;
    transition: color .2s ease !important;
}
body.public-ui .product-card .btn-link::after,
body.public-ui .product-card .view-details-btn::after {
    content: "\00A0\203A"; /* non-breaking space + › */
    opacity: 0;
    display: inline-block;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateX(-4px);
}
body.public-ui .product-card .btn-link:hover,
body.public-ui .product-card .view-details-btn:hover,
body.public-ui .product-card .btn-link:focus-visible,
body.public-ui .product-card .view-details-btn:focus-visible {
    color: #B44A8A !important;
    text-decoration: none !important;
}
body.public-ui .product-card .btn-link:hover::after,
body.public-ui .product-card .view-details-btn:hover::after,
body.public-ui .product-card .btn-link:focus-visible::after,
body.public-ui .product-card .view-details-btn:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* ---- 44.7 · Carousel navigation arrows — porcelain pink hover ---- */
body.public-ui .carousel-nav,
body.public-ui .carousel-header-nav .carousel-nav {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(250, 246, 240, 0.94) 100%) !important;
    border: 0 !important;
    color: #3B4656 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(30, 42, 58, 0.10),
        0 2px 6px rgba(30, 42, 58, 0.08) !important;
    transition:
        transform .2s ease,
        color .2s ease,
        box-shadow .3s ease !important;
}
body.public-ui .carousel-nav:hover:not([disabled]),
body.public-ui .carousel-header-nav .carousel-nav:hover:not([disabled]) {
    color: #B44A8A !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(196, 106, 160, 0.30) !important,
        0 6px 14px -4px rgba(196, 106, 160, 0.24) !important;
}
body.public-ui .carousel-nav[disabled] {
    opacity: 0.4 !important;
}


/* ============================================================
   SECTION 45 — PHASE 1 LOCK · "QUIET CLINICAL PRESTIGE"
   -------------------------------------------------------------
   Scope: public-facing site only (body.public-ui + body.page-home).
   Does NOT touch student/admin/backend logic.

   Phase 1 delivers:
     45.1 · Token lock  — porcelain canvas, primary ink family,
                          clinical blue (retires the royal SaaS
                          #355CFF), one warm accent (amber honey).
     45.2 · Typography lock — editorial type scale, stronger
                              hierarchy, cleaner rhythm.
     45.3 · Homepage hero  — cinematic video bg, premium
                             composition, eyebrow + headline +
                             sub + primary/ghost CTAs + proof row.
     45.4 · Video handling — readability veils, mobile hide,
                             reduced-motion fallback, poster bg.
     45.5 · Top-of-page rhythm — nav→hero→trust-strip spacing.

   LATER PHASES intentionally NOT touched here:
     · Lower homepage sections (branch, how-it-works, reviews)
     · Testimonials module
     · Full-site motion / parallax
     · Footer redesign
   ============================================================ */

/* ============================================================
   45.1 · TOKEN LOCK — Phase 1
   Later cascade wins, so these override the earlier values in
   Section 1 (where --qcp-blue was the royal #355CFF).
   ============================================================ */
body.public-ui,
body.page-home {
    /* — Porcelain canvas family (warmth over cleanliness) — */
    --qcp-canvas:        #F7F4EE;   /* warm ivory page base */
    --qcp-canvas-deep:   #EFEBE1;   /* tint bands */
    --qcp-canvas-warm:   #FAF7F1;   /* lighter pockets */
    --qcp-paper:         #FFFFFF;   /* cards */
    --qcp-paper-warm:    rgba(250, 246, 240, 0.94);

    /* — Primary INK family (replaces muddled text tokens) — */
    --qcp-ink:           #1A2332;   /* primary copy — warm deep charcoal */
    --qcp-ink-soft:      #394556;   /* secondary copy */
    --qcp-ink-mid:       #4B5866;   /* tertiary copy */
    --qcp-ink-muted:     #6B7685;   /* captions / meta */
    --qcp-ink-faint:     #8A95A5;   /* dim / disabled */

    /* Legacy text-* alias so prior sections don't go grey-on-grey */
    --qcp-text:          #1A2332;
    --qcp-text-soft:     #394556;
    --qcp-text-mid:      #4B5866;
    --qcp-text-muted:    #6B7685;
    --qcp-text-faint:    #8A95A5;

    /* — Clinical blue (NOT SaaS royal) — healthcare-trustworthy — */
    --qcp-blue:          #3A6FA0;
    --qcp-blue-deep:     #2C527F;
    --qcp-blue-soft:     #85B5DC;
    --qcp-blue-tint:     rgba(58, 111, 160, 0.10);

    /* — ONE warm accent — amber honey (the only loud color) — */
    --qcp-accent:        #E28E1E;
    --qcp-accent-soft:   #F4A83A;
    --qcp-accent-deep:   #B87018;
    --qcp-accent-tint:   rgba(226, 142, 30, 0.14);

    /* — Supporting ornamentals (kickers, hover, radial washes) — */
    --qcp-pink:          #E8B6D8;
    --qcp-pink-soft:     #F2C7E7;
    --qcp-pink-deep:     #B44A8A;
    --qcp-green:         #A9D84E;
    --qcp-green-soft:    #C4E581;
    --qcp-green-deep:    #4E7A1F;
    --qcp-yellow:        #E9D15B;
    --qcp-yellow-deep:   #8A6A14;

    /* — Hairlines — */
    --qcp-border:           rgba(26, 35, 50, 0.08);
    --qcp-border-strong:    rgba(26, 35, 50, 0.16);
    --qcp-hairline:         rgba(30, 42, 58, 0.10);
    --qcp-hairline-strong:  rgba(30, 42, 58, 0.18);

    /* — Shadows — */
    --qcp-shadow-soft:
        0 1px 2px rgba(26, 35, 50, 0.05);
    --qcp-shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(26, 35, 50, 0.06),
        0 1px 2px rgba(26, 35, 50, 0.04),
        0 22px 48px -28px rgba(26, 35, 50, 0.22);
    --qcp-shadow-elev:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(26, 35, 50, 0.06),
        0 1px 2px rgba(26, 35, 50, 0.05),
        0 34px 72px -30px rgba(26, 35, 50, 0.28);

    /* — Rhythm tokens (spacing system) — */
    --qcp-gutter:        clamp(1.25rem, 2.4vw, 1.9rem);
    --qcp-section-pad:   clamp(4.5rem, 7vw, 7rem);
    --qcp-rhythm-xxs:    0.35rem;
    --qcp-rhythm-xs:     0.6rem;
    --qcp-rhythm-sm:     0.9rem;
    --qcp-rhythm-md:     1.35rem;
    --qcp-rhythm-lg:     2rem;
    --qcp-rhythm-xl:     3rem;

    /* — Radii — */
    --qcp-radius-xs:     6px;
    --qcp-radius-sm:     10px;
    --qcp-radius:        14px;
    --qcp-radius-lg:     20px;
    --qcp-radius-xl:     28px;
    --qcp-pill:          999px;

    /* — Display / sans already set; re-declared for authority — */
    --qcp-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --qcp-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   45.2 · EDITORIAL TYPOGRAPHY LOCK
   Larger scale, stronger hierarchy, calmer body rhythm.
   Scoped to public pages so admin/portal are untouched.
   ============================================================ */
body.public-ui {
    font-family: var(--qcp-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--qcp-ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.public-ui h1,
body.public-ui h2,
body.public-ui h3,
body.public-ui h4,
body.public-ui h5 {
    font-family: var(--qcp-display);
    color: var(--qcp-ink);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.12;
}

body.public-ui h1 {
    font-size: clamp(2.5rem, 5.2vw, 4.25rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.06;
}
body.public-ui h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    letter-spacing: -0.022em;
    line-height: 1.1;
}
body.public-ui h3 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    letter-spacing: -0.015em;
    line-height: 1.22;
}
body.public-ui h4 {
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

body.public-ui p {
    color: var(--qcp-ink-soft);
    font-size: 1.0625rem;
    line-height: 1.68;
}
body.public-ui p.lead,
body.public-ui .section-intro {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--qcp-ink-mid);
}

body.public-ui .eyebrow,
body.public-ui .metric-label {
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qcp-ink-muted);
}

body.public-ui em,
body.public-ui i.serif-em {
    font-family: var(--qcp-display);
    font-style: italic;
    color: var(--qcp-accent-deep);
    font-weight: 600;
}

/* ============================================================
   45.3 · HOMEPAGE HERO — .hero-qcp
   Editorial cinematic treatment on top of the static
   header/hero-study-chicago.webp background.
   Composition:
     [eyebrow]
     [big serif headline with one italic emphasis word]
     [short sub line]
     [primary CTA]  [ghost CTA]
     ------------------------------------
     [proof row — 4 editorial stats divided by hairlines]
   ============================================================ */
body.public-ui .hero-qcp,
body.page-home .hero-qcp {
    position: relative;
    width: 100%;
    min-height: clamp(660px, 88vh, 900px);
    /* top: breathing room under navbar
       bottom: RESERVED for the absolute-positioned proofbar (~130px incl. its 32px offset)
               so .hero-qcp-actions never renders underneath it. This replaced an earlier
               rule that used only top padding — which caused desktop buttons to be covered. */
    padding: clamp(5rem, 10vh, 8rem) 0 clamp(7.5rem, 13vh, 10rem);
    overflow: hidden;
    isolation: isolate;
    color: #F5EFE3;
    margin-top: 0 !important;
    /* Poster fallback — deep ink gradient so something premium paints
       even if the video never loads / is blocked / mobile-hidden. */
    background:
        radial-gradient(ellipse 1100px 620px at 20% 18%,
            rgba(58, 111, 160, 0.35) 0%, rgba(58, 111, 160, 0) 60%),
        radial-gradient(ellipse 900px 540px at 85% 90%,
            rgba(226, 142, 30, 0.22) 0%, rgba(226, 142, 30, 0) 62%),
        linear-gradient(180deg, #0F1A29 0%, #162335 55%, #1B2C42 100%);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

/* — Veil: top→bottom dark wash for headline readability — */
body.public-ui .hero-qcp-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(15, 26, 41, 0.62) 0%,
            rgba(15, 26, 41, 0.35) 38%,
            rgba(15, 26, 41, 0.55) 78%,
            rgba(15, 26, 41, 0.82) 100%);
}

/* — Tint: warm brand wash so the hero doesn't feel blue/cold — */
body.public-ui .hero-qcp-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 900px 540px at 18% 22%,
            rgba(226, 142, 30, 0.14) 0%, rgba(226, 142, 30, 0) 60%),
        radial-gradient(ellipse 700px 440px at 90% 80%,
            rgba(196, 106, 160, 0.10) 0%, rgba(196, 106, 160, 0) 60%);
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* — Vignette: radial darken at edges, keeps focus on lede — */
body.public-ui .hero-qcp-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 130% 100% at 50% 50%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.45) 100%);
}

/* — Inner container — editorial max-width — */
body.public-ui .hero-qcp-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(3rem, 6vh, 5.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vh, 4rem);
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

/* — Lede column — left-aligned editorial block — */
body.public-ui .hero-qcp-lede {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: var(--qcp-rhythm-md);
}

/* — Eyebrow — U.S. Nursing Review · Established 2008 — */
body.public-ui .hero-qcp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--qcp-sans);
    /* Pass 28b: bumped from 0.74rem to 0.92rem to scale with the
       larger headline below. */
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(245, 239, 227, 0.85);
    padding: 0 0 0.25rem 0;
    align-self: flex-start;
}
body.public-ui .hero-qcp-eyebrow-mark {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(244, 168, 58, 0.95) 0%,
        rgba(226, 142, 30, 0.95) 100%);
    border-radius: 2px;
    flex: 0 0 auto;
}

/* — Headline — big editorial serif, restrained color — */
body.public-ui .hero-qcp-headline {
    font-family: var(--qcp-display);
    /* Pass 28b: 3rd size bump — baseline 3.4→4.4rem, vw 7.5→9.5,
       cap 6.6→8.6rem. The hero now feels properly editorial against
       the wider trust strip below it. */
    font-size: clamp(4.4rem, 9.5vw, 8.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: #FAF6EC;
    margin: 0;
    text-wrap: balance;
    max-width: 20ch;
}

/* "and" — script connector word, smaller + Parisienne cursive so it
   reads as a soft breath between the three hard-hit verbs. */
body.public-ui .hero-qcp-headline .hero-qcp-and {
    font-family: 'Parisienne', 'Brush Script MT', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.62em;           /* scales with parent headline */
    letter-spacing: 0;
    color: inherit;
    padding: 0 0.08em;
    vertical-align: baseline;
    line-height: 1;
}

/* Tail — the "—at a review center measured by outcomes, not marketing."
   subordinate clause. Sized way down so it reads as a quiet modifier
   beneath the three-word hero declaration, not as a headline peer. */
body.public-ui .hero-qcp-headline .hero-qcp-tail {
    display: inline-block;
    font-size: 0.38em;           /* ~40% of the headline — clearly subordinate */
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.005em;
    line-height: 1.35;
    color: inherit;
    opacity: 0.92;
    margin-top: 0.45em;
    max-width: 28ch;
    text-wrap: balance;
}
body.public-ui .hero-qcp-headline em {
    font-style: italic;
    color: #F4A83A;
    font-family: var(--qcp-display);
    font-weight: 600;
    position: relative;
    padding: 0 0.04em;
}

/* PASS — green emphasis word at the climax of the hero headline.
   Overrides the baseline amber color, bumps weight for all-caps impact. */
body.public-ui .hero-qcp-headline em.hero-qcp-pass {
    color: #0E7C3A;
    font-weight: 900;                              /* max — browsers synthesize from 700 */
    font-size: 1.15em;                             /* a notch bigger than "Prepare" / "Practice" */
    letter-spacing: 0.02em;
    line-height: 1;
    /* Stroke thickens the glyphs reliably on top of weight synthesis.
       Sized in em so it scales with the headline; paint-order keeps
       the fill on top of the stroke so letters don't look hollow. */
    -webkit-text-stroke: 0.025em currentColor;
    paint-order: stroke fill;
}

/* — Sub line — muted reading copy — */
body.public-ui .hero-qcp-sub {
    font-family: var(--qcp-sans);
    font-size: clamp(1.05rem, 1.3vw, 1.22rem);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(245, 239, 227, 0.82);
    max-width: 58ch;
    margin: 0;
}

/* — Actions row — primary + ghost — */
body.public-ui .hero-qcp-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.4rem;
    align-items: center;
}

body.public-ui .hero-qcp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.95rem 1.7rem;
    border-radius: var(--qcp-pill);
    font-family: var(--qcp-sans);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
    white-space: nowrap;
}
body.public-ui .hero-qcp-btn-arrow {
    display: inline-block;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
body.public-ui .hero-qcp-btn:hover .hero-qcp-btn-arrow {
    transform: translateX(3px);
}

/* Primary — emerald (semantic "go", matches PASS + Review Center) */
body.public-ui .hero-qcp-btn--primary {
    position: relative;
    background: linear-gradient(180deg, #13A04A 0%, #0E7C3A 52%, #0A5F2B 100%);
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(8, 77, 36, 0.35),
        0 2px 4px rgba(8, 60, 28, 0.22),
        0 18px 36px -12px rgba(14, 124, 58, 0.55);
}
body.public-ui .hero-qcp-btn--primary::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 45%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
body.public-ui .hero-qcp-btn--primary:hover,
body.public-ui .hero-qcp-btn--primary:focus-visible {
    background: linear-gradient(180deg, #17B657 0%, #109043 52%, #0D6F33 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(8, 77, 36, 0.4),
        0 4px 8px rgba(8, 60, 28, 0.26),
        0 26px 48px -12px rgba(22, 179, 84, 0.62);
}
body.public-ui .hero-qcp-btn--primary:active {
    transform: translateY(0);
    background: linear-gradient(180deg, #0E7C3A 0%, #0A5F2B 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(8, 60, 28, 0.45),
        0 1px 2px rgba(8, 60, 28, 0.15);
}

/* Ghost — legible on ANY video frame (light or dark).
   Earlier iteration used 6% white + ivory text assuming a
   reliably dark overlay; that failed on lighter video frames
   and on the poster image. Now an opaque porcelain pill with
   dark ink so it's readable regardless of what's behind it. */
body.public-ui .hero-qcp-btn--ghost {
    background: rgba(250, 246, 236, 0.94);
    color: #1A2332;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(26, 35, 50, 0.12),
        0 10px 24px -12px rgba(26, 35, 50, 0.35);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
body.public-ui .hero-qcp-btn--ghost .hero-qcp-btn-arrow {
    color: var(--qcp-accent-deep, #B87018);
}
body.public-ui .hero-qcp-btn--ghost:hover,
body.public-ui .hero-qcp-btn--ghost:focus-visible {
    background: #FFFFFF;
    color: #1A2332;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(26, 35, 50, 0.16),
        0 18px 32px -12px rgba(26, 35, 50, 0.42);
}

/* — Proof bar — NOTE —
   SECTION 45 originally overrode proof-bar text colors to light ivory
   assuming the bar sat on top of a dark video overlay. The actual panel
   is the porcelain card defined at lines ~522-641 of this file, so the
   ivory text rendered invisible on the white panel. That override has
   been removed — the original porcelain styling (dark ink numbers,
   per-column colored brand labels, gradient rim) is the correct design
   and is allowed to win here. Responsive adjustments below still apply. */

/* ============================================================
   45.4 · VIDEO HANDLING — readability + performance + a11y
   ============================================================ */

/* Mobile — proof bar stacks; hero stays full-bleed. */
@media (max-width: 768px) {
    body.public-ui .hero-qcp {
        min-height: 620px;
        padding-top: clamp(3.5rem, 6vh, 5rem);
    }
    body.public-ui .hero-qcp-proofbar-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.25rem;
    }
    body.public-ui .hero-qcp-proofbar .proof-item + .proof-item::before {
        display: none;
    }
    body.public-ui .hero-qcp-actions {
        width: 100%;
    }
    body.public-ui .hero-qcp-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Very small screens — tighter rhythm */
@media (max-width: 480px) {
    body.public-ui .hero-qcp-proofbar-inner {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
    body.public-ui .hero-qcp-headline {
        /* 2-notch bump at mobile scale */
        font-size: clamp(2.8rem, 10.5vw, 3.6rem);
    }
}

/* Reduced motion — respect a11y preference */
@media (prefers-reduced-motion: reduce) {
    body.public-ui .hero-qcp-btn,
    body.public-ui .hero-qcp-btn-arrow {
        transition: none !important;
    }
}

/* ============================================================
   45.5 · TOP-OF-PAGE SPACING RHYTHM
   Nav sits flush against the masthead rainbow ribbon (SECTION 41
   already provides this). The hero sits flush against the navbar.
   Trust-strip below the hero gets room to breathe.
   ============================================================ */

/* Remove legacy .hero-section margin on home — .hero-qcp owns it */
body.page-home .hero-qcp {
    margin-top: 0 !important;
}

/* Push the trust-strip away from the hero so they read as TWO
   moments, not one crowded block. */
body.public-ui .trust-strip,
body.page-home .trust-strip {
    margin-top: 0 !important;
    padding: clamp(1.5rem, 2.4vw, 2.25rem) 0 !important;
    background: var(--qcp-canvas) !important;
    border-bottom: 1px solid var(--qcp-border);
}

/* First section after the trust-strip gets editorial breathing room */
body.page-home .trust-strip + section {
    padding-top: clamp(4rem, 7vw, 6.5rem) !important;
}

/* ============================================================
   END SECTION 45 — Phase 1
   ============================================================ */


/* ============================================================
   SECTION 46 — SITE MASTHEAD / BRAND LOCKUP
   ------------------------------------------------------------
   Typography-only brand mark. No image, no SVG, no canvas.

     U.S. NURSING          <- Dicot Bold, largest, royal blue
     REVIEW CENTER         <- Dicot Bold, slightly smaller, dark teal
                       with Dr. MJ Evangelista  <- Montserrat 800

   Dicot Bold is loaded from /assets/fonts/Dicot-Bold.(woff2|woff)
   if present. font-display:swap + a strong fallback stack keeps the
   mark crisp and readable without layout shift if the file is absent.
   Montserrat 700/800/900 is loaded via the Google Fonts <link> in
   includes/header.php — @import is deliberately avoided here to keep
   font loading off the render-blocking CSS chain.
   ============================================================ */

/* --- Dicot Bold — local-only, graceful degrade --- */
@font-face {
    font-family: 'Dicot Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        url("../fonts/Dicot-Bold.270a5c58b3fd.woff2") format('woff2'),
        url("../fonts/Dicot-Bold.a73eb71f67ba.woff")  format('woff');
}

/* ---------- Baseline lockup (standalone / display-sized) ---------- */
.usn-brand-lockup {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Phase 15.K — Optional shield logo image alongside the wordmark.
   Sizes scoped per context (navbar / sidebar) by selectors below. */
.usn-brand-logo {
    width: auto;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

/* Stacked variant + logo: render logo to the left, text stacked
   vertically to the right. Without `--logo-side`, the stacked
   variant remains text-only column-flex (login modal etc.). */
.usn-brand-lockup--logo-side {
    /* Override the stacked variant's column flex so the logo sits
       BESIDE the text block, not above it. The `.usn-text-block`
       child holds the title-wrap + byline and stacks them on the
       inside. */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
}
.usn-brand-lockup--logo-side .usn-text-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
}
.usn-brand-lockup--logo-side .usn-title-wrap {
    align-items: flex-start;
    text-align: left;
}
.usn-brand-lockup--logo-side .usn-byline {
    text-align: left;
    padding-bottom: 0;
    margin-top: 4px;
    white-space: normal;
}
.usn-brand-lockup:hover,
.usn-brand-lockup:focus-visible {
    text-decoration: none;
    color: inherit;
}

.usn-title-wrap {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    min-width: 0;
}

.usn-line {
    margin: 0;
    font-family: 'Dicot Bold', 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.usn-line-1 {
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    color: #2D39F5;
}

.usn-line-2 {
    /* Script/cursive override — Parisienne reads visually smaller than the
       uppercase block of line-1, so sizes are bumped. We drop the inherited
       uppercase transform and letterspacing from .usn-line because scripts
       only work properly in title case with natural tracking. */
    font-family: 'Parisienne', 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(2.4rem, 5.2vw, 5rem);
    line-height: 1;
    color: #0E7C3A;
    margin-top: 2px;
}

.usn-byline {
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 1.7vw, 2rem);
    color: #f0267a;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    padding-bottom: 8px;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* "with" rendered in black — the rest of the byline inherits the pink. */
.usn-byline .usn-byline-with {
    color: #111111;
}

/* ---------- Stacked variant — e.g. the student portal login card.
   Title above, byline under, left-aligned.
   Sizes scoped DOWN from the baseline display sizes because this
   variant always lives inside a narrow container (login card,
   modal, sidebar); the baseline 4.8rem would overflow at col-lg-5
   card widths. These sizes match the stacked container comfortably
   from ~320px up. ---------- */
.usn-brand-lockup.usn-brand-lockup--stacked {
    flex-direction: column;
    align-items: center;        /* center-align to match the login card */
    text-align: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
}
.usn-brand-lockup.usn-brand-lockup--stacked .usn-title-wrap {
    align-items: center;
    max-width: 100%;
}
.usn-brand-lockup.usn-brand-lockup--stacked .usn-line {
    max-width: 100%;
}
.usn-brand-lockup.usn-brand-lockup--stacked .usn-line-1 {
    font-size: clamp(1.5rem, 5.2vw, 2.1rem);
    letter-spacing: 0.015em;
}
.usn-brand-lockup.usn-brand-lockup--stacked .usn-line-2 {
    /* Cursive needs a size bump inside the login card to stay legible. */
    font-size: clamp(1.6rem, 5.2vw, 2.3rem);
    letter-spacing: 0;
    margin-top: 2px;
}
.usn-brand-lockup.usn-brand-lockup--stacked .usn-byline {
    text-align: center;
    padding-bottom: 0;
    white-space: normal;
    font-size: clamp(0.72rem, 2vw, 0.88rem);
    margin-top: 4px;
}

/* ---------- Navbar-context compaction ----------
   The baseline sizes above are calibrated for a standalone display
   masthead (line 1 up to ~77px). Inside the sticky navbar the same
   component is scoped smaller so it doesn't bloat the bar height.
   Layout: title on top, byline BELOW the title, both left-aligned. */
body.public-ui .navbar .usn-brand-lockup {
    width: auto;
    flex-direction: row;           /* logo left, text-block right */
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
body.public-ui .navbar .usn-title-wrap {
    align-items: flex-start;
}
/* Navbar logo size — bumped from 44 to 56 px so the shield reads
   clearly at desktop. Falls back to 44 px on phones where space
   is tight (handled in the < 768 px block below). */
body.public-ui .navbar .usn-brand-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}
/* Stack the title-wrap + byline vertically inside the navbar lockup —
   this preserves the original "byline below title" feel while letting
   the logo sit beside the whole text block. */
body.public-ui .navbar .usn-brand-lockup .usn-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
body.public-ui .navbar .usn-brand-lockup .usn-byline {
    align-self: flex-start;
}
body.public-ui .navbar .usn-line-1 {
    font-size: clamp(1.1rem, 1.55vw, 1.55rem);
}
body.public-ui .navbar .usn-line-2 {
    /* Parisienne at navbar scale — bump ~30% so it's still legible next to the
       Dicot Bold caps above it. */
    font-size: clamp(1.2rem, 1.7vw, 1.7rem);
    line-height: 1;
}
body.public-ui .navbar .usn-byline {
    font-size: clamp(0.66rem, 0.78vw, 0.82rem);
    padding-bottom: 0;             /* no longer baseline-aligned to title */
    text-align: left;
    white-space: nowrap;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* ---------- Responsive (desktop → mobile transition at 768px) ---------- */
@media (max-width: 768px) {
    .usn-brand-lockup {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .usn-byline {
        text-align: left;
        padding-bottom: 0;
        white-space: normal;
    }
    .usn-line-1 {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }
    .usn-line-2 {
        font-size: clamp(1.9rem, 9vw, 3.1rem);
    }

    /* Navbar on mobile — tighter to keep the bar a reasonable height.
       Byline still visible, wraps below title per baseline mobile rule. */
    body.public-ui .navbar .usn-brand-lockup {
        gap: 2px 10px;
    }
    body.public-ui .navbar .usn-line-1 { font-size: 1.05rem; }
    body.public-ui .navbar .usn-line-2 { font-size: 1.15rem; }
    body.public-ui .navbar .usn-byline { font-size: 0.68rem; }
    /* Logo at phone — slightly smaller than desktop to keep bar
       height reasonable. */
    body.public-ui .navbar .usn-brand-logo { height: 44px; }
}

/* ---------- Print ---------- */
@media print {
    .usn-line-1, .usn-line-2, .usn-byline { color: #000 !important; }
}

/* ============================================================
   END SECTION 46 — Site Masthead
   ============================================================ */


/* ============================================================
   SECTION 47 — STUDENT PORTAL / HELP CARD TRIO
   ------------------------------------------------------------
   Three "what next?" help cards below the login card:
     - Not Enrolled Yet?  (amber / primary action)
     - Need Help?         (blue / support)
     - Find Your Branch   (pink / discovery)
   Porcelain panels, branded icon chip per card, equal heights,
   consistent buttons, one primary CTA + two secondary.
   ============================================================ */

body.page-portal .portal-help-grid { align-items: stretch; }

body.page-portal .portal-help-card {
    --chip-bg:    rgba(226, 142, 30, 0.14);
    --chip-ring:  rgba(226, 142, 30, 0.28);
    --chip-ink:   #B87018;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 1.85rem 1.4rem 1.6rem;
    background:
        linear-gradient(180deg, #FFFDF8 0%, #FAF6EC 100%);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(26, 35, 50, 0.08),
        0 2px 4px rgba(26, 35, 50, 0.04),
        0 16px 36px -22px rgba(26, 35, 50, 0.22);
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.32s ease;
}
body.page-portal .portal-help-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 1px rgba(26, 35, 50, 0.10),
        0 4px 8px rgba(26, 35, 50, 0.06),
        0 24px 48px -20px rgba(26, 35, 50, 0.28);
}

/* Per-card accent variants — drive icon chip color via CSS vars */
body.page-portal .portal-help-card--amber {
    --chip-bg:    rgba(226, 142, 30, 0.14);
    --chip-ring:  rgba(226, 142, 30, 0.30);
    --chip-ink:   #B87018;
}
body.page-portal .portal-help-card--blue {
    --chip-bg:    rgba(58, 111, 160, 0.12);
    --chip-ring:  rgba(58, 111, 160, 0.28);
    --chip-ink:   #2C527F;
}
body.page-portal .portal-help-card--pink {
    --chip-bg:    rgba(196, 127, 174, 0.16);
    --chip-ring:  rgba(196, 127, 174, 0.30);
    --chip-ink:   #9C4F7C;
}

/* Icon chip */
body.page-portal .portal-help-icon {
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    box-shadow: inset 0 0 0 1px var(--chip-ring);
    font-size: 1.45rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}

/* Title */
body.page-portal .portal-help-card .portal-help-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-weight: 600;
    font-size: 1.3rem;
    color: #1A2332;
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

/* Body copy */
body.page-portal .portal-help-card .portal-help-copy {
    font-size: 0.92rem;
    color: #4B5866;
    line-height: 1.5;
    margin: 0 0 0.4rem;
    max-width: 28ch;
}

/* Button base — porcelain pill, consistent sizing across all 3 cards */
body.page-portal .portal-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;              /* pin to bottom → equal heights */
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    font-family: var(--qcp-sans, 'Inter', system-ui, sans-serif);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    background: #FFFFFF;
    color: #1A2332;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(26, 35, 50, 0.14),
        0 1px 2px rgba(26, 35, 50, 0.05);
    transition:
        transform 0.2s cubic-bezier(.2,.8,.2,1),
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.28s ease;
    white-space: nowrap;
}
body.page-portal .portal-help-btn > span {
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1);
}
body.page-portal .portal-help-btn:hover,
body.page-portal .portal-help-btn:focus-visible {
    background: #FAF6EC;
    color: #0F1A29;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 1px rgba(26, 35, 50, 0.22),
        0 6px 14px -6px rgba(26, 35, 50, 0.25);
    transform: translateY(-1px);
}
body.page-portal .portal-help-btn:hover > span,
body.page-portal .portal-help-btn:focus-visible > span {
    transform: translateX(3px);
}

/* Primary variant — amber honey, anchors the "enroll" action */
body.page-portal .portal-help-btn--primary {
    background: linear-gradient(180deg, #F4A83A 0%, #E28E1E 100%);
    color: #1A2332;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 0 1px rgba(180, 110, 30, 0.22),
        0 2px 4px rgba(26, 35, 50, 0.15),
        0 12px 24px -10px rgba(226, 142, 30, 0.42);
}
body.page-portal .portal-help-btn--primary:hover,
body.page-portal .portal-help-btn--primary:focus-visible {
    background: linear-gradient(180deg, #F7B54B 0%, #E8992A 100%);
    color: #1A2332;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(180, 110, 30, 0.28),
        0 4px 8px rgba(26, 35, 50, 0.18),
        0 18px 32px -10px rgba(226, 142, 30, 0.52);
}

/* Responsive */
@media (max-width: 767.98px) {
    body.page-portal .portal-help-card { padding: 1.5rem 1.1rem 1.35rem; }
    body.page-portal .portal-help-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    body.page-portal .portal-help-card .portal-help-title { font-size: 1.2rem; }
    body.page-portal .portal-help-card .portal-help-copy { font-size: 0.88rem; }
}

/* ============================================================
   END SECTION 47 — Portal Help Cards
   ============================================================ */


/* ============================================================
   SECTION 48 — Program Package Card (programs.php)
   ============================================================
   Premium replacement for the old "Investment Cost" card.
   Layout: eyebrow → title → subtitle → emerald checklist → divider → amber CTA.
   Porcelain panel with triple-shadow depth matching the hero/portal cards.
   Emerald check markers pull the PASS hero color into the page narrative;
   amber CTA matches the "Begin Enrollment" hero button for conversion consistency. */

body.public-ui .program-package-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FDF9EF 100%);
    border-radius: 22px;
    padding: 2rem 1.85rem 1.65rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(26, 35, 50, 0.08),
        0 2px 4px rgba(26, 35, 50, 0.04),
        0 24px 48px -26px rgba(26, 35, 50, 0.22);
    overflow: hidden;
}

/* Eyebrow — amber tick + uppercase blue micro-caps */
body.public-ui .program-package-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--qcp-sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2C527F;
    margin-bottom: 0.95rem;
}
body.public-ui .program-package-eyebrow-mark {
    display: inline-block;
    width: 1.6rem;
    height: 2px;
    border-radius: 999px;
    background: #E28E1E;
}

/* Title — display serif, tight tracking for presence */
body.public-ui .program-package-title {
    font-family: var(--qcp-display);
    font-size: clamp(1.65rem, 2.3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.08;
    color: #1A2332;
    margin: 0 0 0.55rem;
    text-align: left;
}

/* Subtitle — readable explanatory line */
body.public-ui .program-package-sub {
    font-family: var(--qcp-sans);
    font-size: 0.96rem;
    line-height: 1.55;
    color: #55657F;
    margin: 0 0 1.55rem;
    max-width: 34ch;
}

/* Checklist — vertical stack of porcelain rows */
body.public-ui .program-package-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
body.public-ui .program-package-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-family: var(--qcp-sans);
    font-size: 0.97rem;
    line-height: 1.45;
    color: #2A3445;
    margin: 0;
    padding: 0;
}

/* Emerald check chip — matches PASS green #0E7C3A with gradient + shadow */
body.public-ui .program-package-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #17A355 0%, #0E7C3A 100%);
    color: #FFFFFF;
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(10, 80, 40, 0.25),
        0 4px 10px -4px rgba(14, 124, 58, 0.45);
    margin-top: 0.08em;
}
body.public-ui .program-package-mark i {
    line-height: 1;
    color: inherit;
    margin-right: 0;   /* override the legacy .course-check-list inherited margin */
    margin-top: 0;
}

body.public-ui .program-package-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Divider — fades to transparent at both ends for a softer seam */
body.public-ui .program-package-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(26, 35, 50, 0.14) 20%,
        rgba(26, 35, 50, 0.14) 80%,
        transparent 100%
    );
    margin: 0.25rem 0 1.1rem;
}

/* CTA — amber gradient pill, mirrors the hero "Begin Enrollment" button */
body.public-ui .program-package-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.95rem 1.4rem;
    font-family: var(--qcp-sans);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #17253D;
    text-decoration: none;
    background: linear-gradient(180deg, #F4A83A 0%, #E28E1E 100%);
    border: 1px solid rgba(180, 110, 30, 0.35);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(180, 110, 30, 0.18),
        0 2px 4px rgba(26, 35, 50, 0.08),
        0 14px 28px -14px rgba(226, 142, 30, 0.55);
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}
body.public-ui .program-package-cta:hover,
body.public-ui .program-package-cta:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #F7B54B 0%, #E8992A 100%);
    color: #17253D;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(180, 110, 30, 0.28),
        0 4px 8px rgba(26, 35, 50, 0.10),
        0 18px 34px -12px rgba(226, 142, 30, 0.65);
    text-decoration: none;
}
body.public-ui .program-package-cta-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
body.public-ui .program-package-cta:hover .program-package-cta-arrow,
body.public-ui .program-package-cta:focus-visible .program-package-cta-arrow {
    transform: translateX(4px);
}

/* Mobile — tighter padding, slightly smaller type */
@media (max-width: 767.98px) {
    body.public-ui .program-package-card {
        padding: 1.65rem 1.35rem 1.35rem;
        border-radius: 18px;
    }
    body.public-ui .program-package-title {
        font-size: clamp(1.45rem, 5.5vw, 1.75rem);
    }
    body.public-ui .program-package-list li { font-size: 0.93rem; }
    body.public-ui .program-package-cta { padding: 0.85rem 1.2rem; font-size: 0.94rem; }
}

/* ============================================================
   END SECTION 48 — Program Package Card
   ============================================================ */


/* ============================================================
   SECTION 49 — Custom Scrollbar (site-wide, public UI)
   ============================================================
   Premium scrollbar that echoes the brand palette:
   - Track: warm cream porcelain gradient
   - Thumb: amber gradient matching the primary CTA
   - Hover: amber fades into hot pink (#f0267a) — same pink as the
     PASS highlighter and the Dr. MJ Evangelista byline
   - Active: deeper pressed amber

   Uses WebKit pseudo-elements (Chrome/Edge/Safari) + Firefox
   scrollbar-width/scrollbar-color for cross-browser coverage. */

/* ---------- Firefox ---------- */
html {
    scrollbar-width: thin;
    scrollbar-color: #f0267a #FAF6EC;
}

/* ---------- WebKit (Chrome, Edge, Safari) ---------- */

/* Bar dimensions */
body.public-ui::-webkit-scrollbar,
html::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Track — warm porcelain with a subtle inset shadow for depth */
::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #FDF9EF 0%, #F7F2E8 100%);
    border-left: 1px solid rgba(26, 35, 50, 0.05);
    box-shadow: inset 0 0 6px rgba(26, 35, 50, 0.035);
}

/* Thumb — pure pink gradient (#f0267a → #C4457A) with cream halo
   so it appears to float inside the track rather than butt up against the edges */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 100%);
    border-radius: 999px;
    border: 2px solid #FDF9EF;              /* cream halo creates inset effect */
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(160, 35, 90, 0.32),
        0 2px 6px rgba(240, 38, 122, 0.30);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    min-height: 48px;                       /* prevents the thumb from becoming a tiny nub on long pages */
}

/* Hover — brighter hot pink with stronger glow */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF4090 0%, #D4397E 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 0 0 1px rgba(160, 35, 90, 0.4),
        0 4px 14px rgba(240, 38, 122, 0.45);
}

/* Active (dragging) — pressed deep rose */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #C4457A 0%, #9A2E5C 100%);
    box-shadow:
        inset 0 1px 2px rgba(90, 20, 50, 0.35),
        inset 0 0 0 1px rgba(140, 30, 80, 0.45);
}

/* Hide native arrow buttons (they look clunky and are rarely used) */
::-webkit-scrollbar-button {
    display: none;
}

/* Corner where horizontal + vertical bars meet */
::-webkit-scrollbar-corner {
    background: #FAF6EC;
}

/* ---------- Touch devices — slimmer, less visual weight ---------- */
@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
}

/* ---------- Admin / Portal UIs keep the cleaner chrome scrollbars ----------
   These have their own UI languages; leave them untouched. */
body.admin-ui,
body.portal-ui {
    scrollbar-width: auto;
    scrollbar-color: auto;
}
body.admin-ui::-webkit-scrollbar-thumb,
body.portal-ui::-webkit-scrollbar-thumb {
    background: #C9CFD8;
    border: 2px solid #F5F7FA;
}
body.admin-ui::-webkit-scrollbar-track,
body.portal-ui::-webkit-scrollbar-track {
    background: #F5F7FA;
    box-shadow: none;
}

/* ============================================================
   END SECTION 49 — Custom Scrollbar
   ============================================================ */


/* ============================================================
   SECTION 50 — Fast Homepage Hero Reveal
   ============================================================
   A restrained, homepage-only entrance that keeps content visible:

   1. TOPBAR HAIRLINE — the existing soft-blue accent sweeps in from
      left to right over 450ms.

   2. HERO COPY — eyebrow, headline rotator wrapper, then CTAs lift
      and fade into place in a tight sequence that settles within
      600ms. The wrapper is animated instead of either headline so the
      separate 10-second promise crossfade remains independent.

   Inner pages render immediately. CSS-only. Respects
   prefers-reduced-motion. */

@keyframes qcp-home-line-sweep {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes qcp-home-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.page-home .premium-topbar::before {
    transform-origin: left center;
    animation: qcp-home-line-sweep 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.page-home .hero-qcp-eyebrow {
    animation: qcp-home-fade-up 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s backwards;
}

body.page-home .hero-qcp-rotator {
    animation: qcp-home-fade-up 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) 0.10s backwards;
}

body.page-home .hero-qcp-actions {
    animation: qcp-home-fade-up 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) 0.16s backwards;
}

/* ---------- Reduced-motion — content displays immediately ---------- */
@media (prefers-reduced-motion: reduce) {
    body.page-home .premium-topbar::before,
    body.page-home .hero-qcp-eyebrow,
    body.page-home .hero-qcp-rotator,
    body.page-home .hero-qcp-actions {
        animation: none;
    }
}

/* ============================================================
   END SECTION 50 — Fast Homepage Hero Reveal
   ============================================================ */


/* ============================================================
   SECTION 51 — TEXTBOOK PAGE (scoped to body.page-textbook)

   A single-product landing. Pink accent, editorial rhythm,
   10 stacked sections. Designed to make ONE book feel abundant,
   not catalog-thin. Whitespace is a feature, not a leftover.
   ============================================================ */

body.page-textbook {
    background: var(--qcp-canvas, #FAF6EC);
    color: var(--qcp-text, #1E2A3A);
}

body.page-textbook .textbook-eyebrow,
body.page-textbook .textbook-section-eyebrow {
    display: inline-block;
    font-family: var(--qcp-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #C4457A;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(240, 38, 122, 0.20);
    background: rgba(240, 38, 122, 0.06);
    margin-bottom: 1.2rem;
}

body.page-textbook .textbook-section-title {
    font-family: var(--qcp-display, "Cormorant Garamond", serif);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--qcp-text, #1E2A3A);
    margin-bottom: 1rem;
}

body.page-textbook .textbook-lede {
    font-family: var(--qcp-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(30, 42, 58, 0.78);
}

body.page-textbook .textbook-body {
    font-family: var(--qcp-sans);
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(30, 42, 58, 0.82);
    margin-bottom: 1.15rem;
}

/* ---------- 1 · HERO ---------- */
body.page-textbook .textbook-hero {
    padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(3.5rem, 8vh, 6rem);
    background:
        radial-gradient(ellipse 780px 520px at 85% 12%,
            rgba(240, 38, 122, 0.10) 0%,
            rgba(240, 38, 122, 0.00) 70%),
        radial-gradient(ellipse 680px 480px at 10% 95%,
            rgba(14, 124, 58, 0.07) 0%,
            rgba(14, 124, 58, 0.00) 70%),
        linear-gradient(180deg, #FDF9EF 0%, #FAF6EC 100%);
    position: relative;
    overflow: hidden;
}
body.page-textbook .textbook-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #f0267a 0%,
        #E8B63C 38%,
        #0E7C3A 72%,
        #355CFF 100%);
    opacity: 0.9;
}

body.page-textbook .textbook-cover-stage {
    position: relative;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}

body.page-textbook .textbook-cover {
    position: relative;
    width: clamp(220px, 28vw, 320px);
    height: clamp(330px, 42vw, 480px);
    background: linear-gradient(135deg,
        #C4457A 0%,
        #f0267a 45%,
        #B13269 100%);
    border-radius: 4px 10px 10px 4px;
    box-shadow:
        inset 2px 0 0 rgba(0, 0, 0, 0.25),
        inset -1px 0 0 rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 12px 24px -8px rgba(138, 30, 78, 0.45),
        0 30px 60px -20px rgba(138, 30, 78, 0.55);
    transform: rotateY(-14deg) rotateX(1.5deg);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.page-textbook .textbook-cover:hover {
    transform: rotateY(-6deg) rotateX(1deg);
}

body.page-textbook .textbook-cover-inner {
    position: absolute;
    inset: 0;
    padding: 2rem 1.5rem 1.8rem 1.85rem;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    border-radius: inherit;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.00) 40%,
            rgba(0, 0, 0, 0.10) 100%);
    overflow: hidden;
}

body.page-textbook .textbook-cover-eyebrow {
    font-family: var(--qcp-sans);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: 0.7rem;
}
body.page-textbook .textbook-cover-title {
    font-family: var(--qcp-display, "Cormorant Garamond", serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 1.8rem 0 0.3rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.page-textbook .textbook-cover-sub {
    font-family: var(--qcp-display);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: auto;
}
body.page-textbook .textbook-cover-byline {
    font-family: var(--qcp-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-top: 0.7rem;
}
body.page-textbook .textbook-cover-emblem {
    position: absolute;
    top: 1.2rem; right: 1.2rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
}

body.page-textbook .textbook-cover-spine {
    position: absolute;
    top: 0; bottom: 0;
    left: -14px;
    width: 14px;
    background: linear-gradient(90deg, #8A1E4E 0%, #B13269 100%);
    border-radius: 4px 0 0 4px;
    transform: rotateY(-35deg);
    transform-origin: right center;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.3);
}
body.page-textbook .textbook-cover-pages {
    position: absolute;
    top: 2px; right: -6px; bottom: 2px;
    width: 7px;
    background: repeating-linear-gradient(
        90deg,
        #F5EEDD 0px, #F5EEDD 0.5px,
        #E8DCC0 0.5px, #E8DCC0 1px);
    border-radius: 0 3px 3px 0;
}

body.page-textbook .textbook-cover-shadow {
    position: absolute;
    left: 10%; right: 10%;
    bottom: -10px;
    height: 30px;
    background: radial-gradient(ellipse at center,
        rgba(138, 30, 78, 0.35) 0%,
        rgba(138, 30, 78, 0) 70%);
    filter: blur(10px);
    z-index: -1;
}

body.page-textbook .textbook-hero-copy {
    padding-left: clamp(0rem, 2vw, 1.5rem);
}
body.page-textbook .textbook-headline {
    font-family: var(--qcp-display, "Cormorant Garamond", serif);
    font-weight: 600;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--qcp-text);
    margin-bottom: 1.5rem;
}
body.page-textbook .textbook-headline em {
    font-style: italic;
    color: #C4457A;
    font-family: "Parisienne", var(--qcp-display), serif;
    font-weight: 400;
    font-size: 1.08em;
}

body.page-textbook .textbook-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(240, 38, 122, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.page-textbook .textbook-price {
    display: flex;
    flex-direction: column;
    min-width: 8rem;
}
body.page-textbook .textbook-price-value {
    font-family: var(--qcp-display);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--qcp-text);
}
body.page-textbook .textbook-price-label {
    font-family: var(--qcp-sans);
    font-size: 0.78rem;
    color: rgba(30, 42, 58, 0.60);
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
}
body.page-textbook .textbook-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 1;
}

body.page-textbook .textbook-trust-strip {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
body.page-textbook .textbook-trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--qcp-sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(30, 42, 58, 0.68);
}
body.page-textbook .textbook-trust-strip i {
    color: #C4457A;
    font-size: 0.95rem;
}

/* ---------- BUTTONS (used across all sections) ---------- */
body.page-textbook .textbook-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.55rem;
    border-radius: 999px;
    font-family: var(--qcp-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                background 0.22s ease,
                color 0.22s ease;
    white-space: nowrap;
}
body.page-textbook .textbook-btn--primary {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 55%, #9A2E5C 100%);
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(138, 30, 78, 0.22),
        0 18px 36px -12px rgba(240, 38, 122, 0.50);
}
body.page-textbook .textbook-btn--primary:hover,
body.page-textbook .textbook-btn--primary:focus-visible {
    background: linear-gradient(180deg, #FF4090 0%, #D4397E 55%, #A83567 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 4px 8px rgba(138, 30, 78, 0.26),
        0 26px 48px -12px rgba(240, 38, 122, 0.60);
    color: #FFFFFF;
}
body.page-textbook .textbook-btn--ghost {
    background: rgba(255, 255, 255, 0.92);
    color: var(--qcp-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 0 0 1px rgba(30, 42, 58, 0.12),
        0 6px 16px -8px rgba(30, 42, 58, 0.28);
}
body.page-textbook .textbook-btn--ghost:hover,
body.page-textbook .textbook-btn--ghost:focus-visible {
    background: #FFFFFF;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(30, 42, 58, 0.18),
        0 12px 24px -10px rgba(30, 42, 58, 0.35);
    color: var(--qcp-text);
}

/* ---------- 2 · PULL QUOTE ---------- */
body.page-textbook .textbook-quote-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
    border-bottom: 1px solid rgba(30, 42, 58, 0.06);
}
body.page-textbook .textbook-pullquote {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
}
body.page-textbook .textbook-quote-mark {
    display: block;
    font-family: var(--qcp-display);
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.7;
    color: rgba(240, 38, 122, 0.22);
    margin-bottom: -0.5rem;
}
body.page-textbook .textbook-pullquote p {
    font-family: var(--qcp-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--qcp-text);
    margin-bottom: 2rem;
}
body.page-textbook .textbook-pullquote p em {
    font-style: italic;
    color: #C4457A;
    font-family: "Parisienne", var(--qcp-display), serif;
    font-weight: 400;
    font-size: 1.05em;
}
body.page-textbook .textbook-pullquote footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
body.page-textbook .textbook-pullquote cite {
    font-family: var(--qcp-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--qcp-text);
}
body.page-textbook .textbook-pullquote footer span {
    font-family: var(--qcp-sans);
    font-size: 0.82rem;
    color: rgba(30, 42, 58, 0.60);
    letter-spacing: 0.02em;
}

/* ---------- 3 · AT-A-GLANCE STATS ---------- */
body.page-textbook .textbook-stats-section {
    padding: clamp(3.5rem, 8vh, 5.5rem) 0;
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-stat {
    text-align: center;
    padding: 1.5rem 0.5rem;
}
body.page-textbook .textbook-stat strong {
    display: block;
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #C4457A;
    margin-bottom: 0.45rem;
}
body.page-textbook .textbook-stat strong sup {
    font-size: 0.4em;
    font-weight: 600;
    vertical-align: super;
    margin-left: 0.1em;
    color: rgba(196, 69, 122, 0.75);
}
body.page-textbook .textbook-stat span {
    display: block;
    font-family: var(--qcp-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(30, 42, 58, 0.65);
}

/* ---------- 4 · ABOUT THE AUTHOR ---------- */
body.page-textbook .textbook-author-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
    border-bottom: 1px solid rgba(30, 42, 58, 0.06);
}
body.page-textbook .textbook-author-portrait {
    position: relative;
    padding: 1rem;
}
body.page-textbook .textbook-author-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 24px;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 50%),
        linear-gradient(135deg,
            #FDF0F6 0%,
            #F6D9E5 55%,
            #E8B6CC 100%);
    border: 1px solid rgba(240, 38, 122, 0.14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 20px 40px -16px rgba(138, 30, 78, 0.30);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body.page-textbook .textbook-author-initials {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(4rem, 10vw, 7rem);
    color: rgba(196, 69, 122, 0.55);
    letter-spacing: -0.02em;
}
body.page-textbook .textbook-author-badge {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(30, 42, 58, 0.10),
        0 10px 24px -10px rgba(30, 42, 58, 0.32);
    font-family: var(--qcp-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qcp-text);
}
body.page-textbook .textbook-author-badge i {
    color: #C4457A;
    font-size: 0.9rem;
}
body.page-textbook .textbook-credentials-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.2rem;
}
body.page-textbook .textbook-credentials-list li {
    font-family: var(--qcp-sans);
    font-size: 0.92rem;
    color: rgba(30, 42, 58, 0.78);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
body.page-textbook .textbook-credentials-list i {
    color: #C4457A;
    font-size: 1rem;
}

/* ---------- 5 · WHAT'S INSIDE  ·  Table of contents ---------- */
body.page-textbook .textbook-toc-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-toc {
    border-radius: 18px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 1px 3px rgba(30, 42, 58, 0.06),
        0 20px 44px -20px rgba(30, 42, 58, 0.20);
    border: 1px solid rgba(30, 42, 58, 0.08);
}
body.page-textbook .textbook-toc-item {
    border: 0;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    background: transparent;
}
body.page-textbook .textbook-toc-item:first-child {
    border-top: 0;
}
body.page-textbook .textbook-toc-button {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 1.5rem;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: var(--qcp-sans);
    font-size: 1rem;
    color: var(--qcp-text);
    box-shadow: none !important;
}
body.page-textbook .textbook-toc-button:not(.collapsed) {
    background: rgba(240, 38, 122, 0.05);
    color: var(--qcp-text);
}
body.page-textbook .textbook-toc-num {
    font-family: var(--qcp-display);
    font-weight: 500;
    font-size: 1.35rem;
    color: #C4457A;
    min-width: 2.5rem;
    letter-spacing: -0.01em;
}
body.page-textbook .textbook-toc-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.005em;
    flex: 1;
}
body.page-textbook .textbook-toc-body {
    padding: 0.3rem 1.5rem 1.35rem 4.4rem;
    font-family: var(--qcp-sans);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(30, 42, 58, 0.75);
}
body.page-textbook .textbook-toc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--qcp-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: #C4457A;
    text-decoration: none;
    padding: 0.4rem 0;
    transition: gap 0.22s ease, color 0.22s ease;
}
body.page-textbook .textbook-toc-link:hover {
    color: #9A2E5C;
    gap: 0.7rem;
}

/* ---------- 6 · LOOK INSIDE  ·  Sample spreads ---------- */
body.page-textbook .textbook-spreads-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
    border-bottom: 1px solid rgba(30, 42, 58, 0.06);
}
body.page-textbook .textbook-spread {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FAF6EC 100%);
    border: 1px solid rgba(30, 42, 58, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(30, 42, 58, 0.06),
        0 18px 40px -18px rgba(30, 42, 58, 0.25);
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
body.page-textbook .textbook-spread:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 3px 6px rgba(30, 42, 58, 0.08),
        0 26px 50px -18px rgba(30, 42, 58, 0.30);
}
body.page-textbook .textbook-spread::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(30, 42, 58, 0) 0%,
        rgba(30, 42, 58, 0.12) 10%,
        rgba(30, 42, 58, 0.12) 90%,
        rgba(30, 42, 58, 0) 100%);
}
body.page-textbook .textbook-spread-label {
    position: absolute;
    top: 0.8rem; left: 1rem;
    font-family: var(--qcp-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(30, 42, 58, 0.55);
    z-index: 1;
}
body.page-textbook .textbook-spread-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 1.2rem;
}
body.page-textbook .textbook-spread-heading {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--qcp-text);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
body.page-textbook .textbook-spread-subhead {
    font-family: var(--qcp-sans);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(30, 42, 58, 0.78);
    margin-bottom: 0.9rem;
}
body.page-textbook .textbook-spread-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: auto;
}
body.page-textbook .textbook-spread-lines span {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(30, 42, 58, 0.14), rgba(30, 42, 58, 0.06));
}
body.page-textbook .textbook-spread-lines span:nth-child(even) { width: 85%; }
body.page-textbook .textbook-spread-lines span:nth-child(3) { width: 70%; }
body.page-textbook .textbook-spread-pill {
    align-self: flex-start;
    padding: 0.35rem 0.8rem;
    font-family: var(--qcp-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0E7C3A;
    background: rgba(14, 124, 58, 0.10);
    border: 1px solid rgba(14, 124, 58, 0.22);
    border-radius: 999px;
    margin-top: auto;
}
body.page-textbook .textbook-spread-pill--pink {
    color: #C4457A;
    background: rgba(240, 38, 122, 0.10);
    border-color: rgba(240, 38, 122, 0.22);
}
body.page-textbook .textbook-spread-choices {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
body.page-textbook .textbook-spread-choices li {
    padding: 0.45rem 0.6rem;
    background: rgba(30, 42, 58, 0.04);
    border-radius: 4px;
    font-family: var(--qcp-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(30, 42, 58, 0.70);
}

/* ---------- 7 · WHO IT'S FOR ---------- */
body.page-textbook .textbook-audience-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-audience-card {
    height: 100%;
    padding: 2rem 1.75rem;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(30, 42, 58, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 32px -18px rgba(30, 42, 58, 0.20);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
body.page-textbook .textbook-audience-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 20px 44px -18px rgba(30, 42, 58, 0.28);
}
body.page-textbook .textbook-audience-card--featured {
    background: linear-gradient(180deg, #FFFFFF 0%, #FDF0F6 100%);
    border-color: rgba(240, 38, 122, 0.24);
}
body.page-textbook .textbook-audience-card--featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f0267a, #C4457A);
}
body.page-textbook .textbook-audience-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: rgba(240, 38, 122, 0.10);
    color: #C4457A;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.1rem;
}
body.page-textbook .textbook-audience-card h3 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--qcp-text);
    margin-bottom: 0.75rem;
}
body.page-textbook .textbook-audience-card p {
    font-family: var(--qcp-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(30, 42, 58, 0.75);
    margin: 0;
}

/* ---------- 8 · ENDORSEMENTS ---------- */
body.page-textbook .textbook-endorsements-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
    border-bottom: 1px solid rgba(30, 42, 58, 0.06);
}
body.page-textbook .textbook-endorsement {
    margin: 0;
    padding: 2rem 1.75rem;
    background: var(--qcp-canvas, #FAF6EC);
    border-radius: 16px;
    border: 1px solid rgba(30, 42, 58, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
body.page-textbook .textbook-endorsement::before {
    content: '\201C';
    position: absolute;
    top: -0.2rem; left: 1.5rem;
    font-family: var(--qcp-display);
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(240, 38, 122, 0.35);
}
body.page-textbook .textbook-endorsement blockquote {
    font-family: var(--qcp-display);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--qcp-text);
    margin: 1.5rem 0 1.5rem;
    padding: 0;
}
body.page-textbook .textbook-endorsement figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 42, 58, 0.10);
}
body.page-textbook .textbook-endorsement figcaption strong {
    font-family: var(--qcp-sans);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--qcp-text);
}
body.page-textbook .textbook-endorsement figcaption span {
    font-family: var(--qcp-sans);
    font-size: 0.8rem;
    color: rgba(30, 42, 58, 0.60);
    letter-spacing: 0.02em;
}

/* ---------- 9 · BUY OPTIONS ---------- */
body.page-textbook .textbook-buy-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-buy-card {
    position: relative;
    height: 100%;
    padding: 2.25rem 1.9rem 2rem;
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid rgba(30, 42, 58, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 32px -18px rgba(30, 42, 58, 0.22);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
body.page-textbook .textbook-buy-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 22px 50px -18px rgba(30, 42, 58, 0.32);
}
body.page-textbook .textbook-buy-card--featured {
    background: linear-gradient(180deg, #FFFFFF 0%, #FDF0F6 100%);
    border-color: rgba(240, 38, 122, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 18px 40px -18px rgba(240, 38, 122, 0.30);
}
body.page-textbook .textbook-buy-badge {
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 0.85rem;
    font-family: var(--qcp-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C4457A;
    background: #FFFFFF;
    border: 1px solid rgba(240, 38, 122, 0.30);
    border-radius: 999px;
    white-space: nowrap;
}
body.page-textbook .textbook-buy-badge--featured {
    color: #FFFFFF;
    background: linear-gradient(180deg, #f0267a, #C4457A);
    border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(240, 38, 122, 0.50);
}
body.page-textbook .textbook-buy-card h3 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -0.01em;
    color: var(--qcp-text);
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
body.page-textbook .textbook-buy-price {
    font-family: var(--qcp-display);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    color: #C4457A;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}
body.page-textbook .textbook-buy-currency {
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(196, 69, 122, 0.7);
}
body.page-textbook .textbook-buy-price-note {
    display: block;
    width: 100%;
    font-family: var(--qcp-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(30, 42, 58, 0.55);
    letter-spacing: 0.04em;
    margin-top: 0.4rem;
}
body.page-textbook .textbook-buy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
body.page-textbook .textbook-buy-list li {
    font-family: var(--qcp-sans);
    font-size: 0.92rem;
    color: rgba(30, 42, 58, 0.80);
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
body.page-textbook .textbook-buy-list i {
    color: #0E7C3A;
    font-size: 1.05rem;
    margin-top: 0.08rem;
    flex-shrink: 0;
}

/* ---------- 10 · FAQ ---------- */
body.page-textbook .textbook-faq-section {
    padding: clamp(4.5rem, 10vh, 7rem) 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
}
body.page-textbook .textbook-faq {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(30, 42, 58, 0.10);
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-faq-item {
    border: 0;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    background: transparent;
}
body.page-textbook .textbook-faq-item:first-child { border-top: 0; }
body.page-textbook .textbook-faq .accordion-button {
    padding: 1.2rem 1.5rem;
    background: transparent;
    font-family: var(--qcp-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--qcp-text);
    box-shadow: none !important;
}
body.page-textbook .textbook-faq .accordion-button:not(.collapsed) {
    background: rgba(240, 38, 122, 0.05);
    color: var(--qcp-text);
}
body.page-textbook .textbook-faq .accordion-body {
    padding: 0 1.5rem 1.3rem;
    font-family: var(--qcp-sans);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(30, 42, 58, 0.78);
}

/* ---------- CROSS-SELL CTA ---------- */
body.page-textbook .textbook-crosssell-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
    background: var(--qcp-canvas, #FAF6EC);
}
body.page-textbook .textbook-crosssell {
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    background:
        radial-gradient(ellipse 600px 400px at 50% 0%,
            rgba(14, 124, 58, 0.10) 0%,
            rgba(14, 124, 58, 0.00) 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBF0 100%);
    border-radius: 24px;
    border: 1px solid rgba(14, 124, 58, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 60px -24px rgba(14, 124, 58, 0.25);
    position: relative;
    overflow: hidden;
}
body.page-textbook .textbook-crosssell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0E7C3A, #13A04A, #0E7C3A);
}
body.page-textbook .textbook-crosssell-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(14, 124, 58, 0.12);
    color: #0E7C3A;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}
body.page-textbook .textbook-crosssell h2 {
    font-family: var(--qcp-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--qcp-text);
    margin-bottom: 1rem;
}
body.page-textbook .textbook-crosssell p {
    font-family: var(--qcp-sans);
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(30, 42, 58, 0.78);
    max-width: 38rem;
    margin: 0 auto 2rem;
}
body.page-textbook .textbook-crosssell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 767.98px) {
    body.page-textbook .textbook-hero-copy {
        padding-left: 0;
        padding-top: 1rem;
    }
    body.page-textbook .textbook-cover-stage {
        margin-bottom: 1rem;
    }
    body.page-textbook .textbook-price-row {
        flex-direction: column;
        align-items: flex-start;
    }
    body.page-textbook .textbook-cta-group {
        width: 100%;
    }
    body.page-textbook .textbook-cta-group .textbook-btn {
        flex: 1;
    }
    body.page-textbook .textbook-credentials-list {
        grid-template-columns: 1fr;
    }
    body.page-textbook .textbook-toc-body {
        padding-left: 1.5rem;
    }
    body.page-textbook .textbook-toc-num {
        min-width: 2rem;
    }
}

/* ============================================================
   END SECTION 51 — Textbook page
   ============================================================ */


/* ============================================================
   SECTION 52 — COURSES PAGE (scoped to body.page-courses)
   Flagship NCLEX review course landing page
   Emerald-accented narrative, four-phase method storytelling
   ============================================================ */

body.page-courses {
    background: #FAFAF7;
}

/* ---------- Shared typography primitives ---------- */
body.page-courses .courses-eyebrow,
body.page-courses .courses-section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0E7C3A;
    background: rgba(14, 124, 58, 0.08);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(14, 124, 58, 0.18);
}

body.page-courses .courses-section-title {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

body.page-courses .courses-section-lede {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #4a4a5a;
    margin-bottom: 0;
}

body.page-courses .courses-inline-link {
    color: #0E7C3A;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 124, 58, 0.3);
}

body.page-courses .courses-inline-link:hover {
    color: #0A5F2B;
    border-bottom-color: #0A5F2B;
}

/* ---------- Hero ---------- */
body.page-courses .courses-hero {
    position: relative;
    padding: 6rem 0 5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #F4FAF5 0%, #E8F4EC 100%);
}

body.page-courses .courses-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 10% 15%, rgba(14, 124, 58, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 85%, rgba(19, 160, 74, 0.08) 0%, transparent 60%);
}

body.page-courses .courses-hero-inner {
    position: relative;
    z-index: 1;
}

body.page-courses .courses-headline {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0A2818;
    margin-bottom: 1.25rem;
}

body.page-courses .courses-headline em {
    font-family: 'Parisienne', 'Brush Script MT', cursive;
    font-style: normal;
    font-weight: 400;
    color: #0E7C3A;
    font-size: 1.1em;
    padding: 0 0.1em;
}

body.page-courses .courses-lede {
    font-size: 1.15rem;
    line-height: 1.65;
    color: #3a3a4a;
    margin-bottom: 1.75rem;
    max-width: 560px;
}

body.page-courses .courses-trust-strip {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

body.page-courses .courses-trust-strip li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1a2e;
}

body.page-courses .courses-trust-strip i {
    color: #0E7C3A;
    font-size: 1.1rem;
}

body.page-courses .courses-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Hero stage — three floating phase cards */
body.page-courses .courses-hero-stage {
    position: relative;
    min-height: 420px;
}

body.page-courses .courses-hero-card {
    position: absolute;
    width: 86%;
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    box-shadow:
      0 20px 40px -12px rgba(14, 124, 58, 0.18),
      0 8px 20px -6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(14, 124, 58, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-courses .courses-hero-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 24px 48px -12px rgba(14, 124, 58, 0.24),
      0 10px 24px -6px rgba(0, 0, 0, 0.1);
}

body.page-courses .courses-hero-card--top {
    top: 0;
    left: 0;
    transform: rotate(-2deg);
    z-index: 3;
}

body.page-courses .courses-hero-card--mid {
    top: 38%;
    right: 0;
    transform: rotate(1.5deg);
    z-index: 2;
}

body.page-courses .courses-hero-card--bot {
    bottom: 0;
    left: 8%;
    transform: rotate(-1deg);
    z-index: 1;
}

body.page-courses .courses-hero-card-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0E7C3A;
    background: rgba(14, 124, 58, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

body.page-courses .courses-hero-card h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.4rem;
}

body.page-courses .courses-hero-card p {
    font-size: 0.88rem;
    color: #5a5a6a;
    margin-bottom: 0.85rem;
    line-height: 1.5;
}

body.page-courses .courses-hero-card-meter {
    height: 6px;
    background: rgba(14, 124, 58, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

body.page-courses .courses-hero-card-meter span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #13A04A, #0E7C3A);
    border-radius: 999px;
}

/* ---------- Buttons ---------- */
body.page-courses .courses-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}

body.page-courses .courses-btn--primary {
    background: linear-gradient(180deg, #13A04A 0%, #0E7C3A 52%, #0A5F2B 100%);
    color: #fff;
    box-shadow:
      0 8px 20px -6px rgba(14, 124, 58, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.08);
}

body.page-courses .courses-btn--primary:hover,
body.page-courses .courses-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 12px 28px -6px rgba(14, 124, 58, 0.5),
      0 4px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
}

body.page-courses .courses-btn--ghost {
    background: transparent;
    color: #0E7C3A;
    border-color: rgba(14, 124, 58, 0.25);
}

body.page-courses .courses-btn--ghost:hover,
body.page-courses .courses-btn--ghost:focus-visible {
    background: rgba(14, 124, 58, 0.06);
    border-color: #0E7C3A;
    color: #0A5F2B;
}

body.page-courses .courses-btn--outline {
    background: #fff;
    color: #0E7C3A;
    border-color: #0E7C3A;
}

body.page-courses .courses-btn--outline:hover,
body.page-courses .courses-btn--outline:focus-visible {
    background: #0E7C3A;
    color: #fff;
}

/* ---------- Method section ---------- */
body.page-courses .courses-method-grid {
    counter-reset: method-counter;
}

body.page-courses .courses-method-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(14, 124, 58, 0.12);
    border-radius: 1rem;
    padding: 2rem 1.5rem 1.75rem;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.page-courses .courses-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(14, 124, 58, 0.15);
    border-color: rgba(14, 124, 58, 0.25);
}

body.page-courses .courses-method-num {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: 'Source Serif 4', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(14, 124, 58, 0.12);
    letter-spacing: -0.02em;
}

body.page-courses .courses-method-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 124, 58, 0.12), rgba(19, 160, 74, 0.06));
    color: #0E7C3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

body.page-courses .courses-method-card h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}

body.page-courses .courses-method-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4a4a5a;
    margin-bottom: 1rem;
}

body.page-courses .courses-method-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed rgba(14, 124, 58, 0.18);
    padding-top: 0.9rem;
}

body.page-courses .courses-method-list li {
    font-size: 0.88rem;
    color: #5a5a6a;
    padding: 0.25rem 0 0.25rem 1.25rem;
    position: relative;
}

body.page-courses .courses-method-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    background: #0E7C3A;
    border-radius: 50%;
}

/* ---------- Lineup cards ---------- */
body.page-courses .courses-lineup-card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(14, 124, 58, 0.12);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.page-courses .courses-lineup-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(14, 124, 58, 0.18);
}

body.page-courses .courses-lineup-card--featured {
    border-color: #0E7C3A;
    background: linear-gradient(180deg, #fff 0%, #F4FAF5 100%);
    box-shadow: 0 12px 28px -8px rgba(14, 124, 58, 0.18);
}

body.page-courses .courses-lineup-card--advanced {
    border-color: rgba(26, 26, 46, 0.15);
}

body.page-courses .courses-lineup-badge {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    background: linear-gradient(180deg, #13A04A 0%, #0E7C3A 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(14, 124, 58, 0.3);
}

body.page-courses .courses-lineup-badge--us {
    background: linear-gradient(180deg, #FFB800 0%, #CC8800 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
}

body.page-courses .courses-lineup-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0E7C3A;
    margin-bottom: 0.75rem;
}

body.page-courses .courses-lineup-card h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

body.page-courses .courses-lineup-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4a4a5a;
    margin-bottom: 1.25rem;
}

body.page-courses .courses-lineup-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

body.page-courses .courses-lineup-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    color: #3a3a4a;
    line-height: 1.45;
}

body.page-courses .courses-lineup-list i {
    color: #0E7C3A;
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 1rem;
}

body.page-courses .courses-lineup-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px dashed rgba(14, 124, 58, 0.2);
    border-bottom: 1px dashed rgba(14, 124, 58, 0.2);
    margin-bottom: 1.25rem;
}

body.page-courses .courses-lineup-price-label {
    font-size: 0.82rem;
    color: #7a7a8a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.page-courses .courses-lineup-price {
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0E7C3A;
}

/* Discounted price block — original strikethrough + bigger sale price + small SALE chip.
   Triggered when shop_render_card() detects discount_active=1 with a non-empty
   us_sale_price. Layout: stack original + new on the right side of the row, badge below. */
body.page-courses .courses-lineup-price-row.has-discount {
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
}
body.page-courses .courses-lineup-price-original {
    font-family: 'Source Serif 4', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #b3becd;
    text-decoration: line-through;
    text-decoration-color: rgba(196, 69, 122, 0.55);
    text-decoration-thickness: 1.5px;
    margin-left: auto; /* push to the right alongside the new price */
}
body.page-courses .courses-lineup-price.has-sale {
    color: #C4457A;
}
body.page-courses .courses-lineup-sale-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #C4457A 0%, #6B1840 100%);
    color: #FFFFFF;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
}
/* On smaller cards the original price wraps onto its own line below the new
   price for readability. */
@media (max-width: 575.98px) {
    body.page-courses .courses-lineup-price-row.has-discount {
        align-items: flex-end;
    }
    body.page-courses .courses-lineup-price-original {
        flex: 0 0 100%;
        text-align: right;
        margin-left: 0;
    }
}

/* ---------- What's Inside grid ---------- */
body.page-courses .courses-inside-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

body.page-courses .courses-inside-grid li {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 0.85rem;
    border: 1px solid rgba(14, 124, 58, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-courses .courses-inside-grid li:hover {
    border-color: rgba(14, 124, 58, 0.3);
    box-shadow: 0 8px 20px -6px rgba(14, 124, 58, 0.1);
}

body.page-courses .courses-inside-grid i {
    color: #0E7C3A;
    font-size: 1.75rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

body.page-courses .courses-inside-grid h4 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.3rem;
}

body.page-courses .courses-inside-grid p {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5a5a6a;
    margin-bottom: 0;
}

/* ---------- Outcomes ---------- */
body.page-courses .courses-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}

body.page-courses .courses-stat strong {
    display: block;
    font-family: 'Source Serif 4', serif;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    color: #0E7C3A;
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

body.page-courses .courses-stat strong sup {
    font-size: 0.5em;
    color: #5a5a6a;
    margin-left: 0.1em;
    top: -0.5em;
}

body.page-courses .courses-stat span {
    display: block;
    font-size: 0.88rem;
    color: #4a4a5a;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* ---------- Testimonials ---------- */
body.page-courses .courses-testimonial {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1.75rem 1.5rem;
    margin: 0;
    height: 100%;
    border: 1px solid rgba(14, 124, 58, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-courses .courses-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(14, 124, 58, 0.15);
}

body.page-courses .courses-testimonial--featured {
    background: linear-gradient(180deg, #0E7C3A 0%, #0A5F2B 100%);
    color: #fff;
    border-color: #0E7C3A;
}

body.page-courses .courses-testimonial blockquote {
    font-size: 1rem;
    line-height: 1.6;
    color: #2a2a3a;
    font-style: italic;
    margin: 0 0 1.25rem 0;
    position: relative;
    padding-left: 1.25rem;
    border-left: 3px solid #0E7C3A;
}

body.page-courses .courses-testimonial--featured blockquote {
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.7);
}

body.page-courses .courses-testimonial figcaption strong {
    display: block;
    font-weight: 700;
    color: #1a1a2e;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

body.page-courses .courses-testimonial--featured figcaption strong {
    color: #fff;
}

body.page-courses .courses-testimonial figcaption span {
    font-size: 0.82rem;
    color: #6a6a7a;
    letter-spacing: 0.02em;
}

body.page-courses .courses-testimonial--featured figcaption span {
    color: rgba(255, 255, 255, 0.8);
}

/* ---------- FAQ ---------- */
body.page-courses .courses-faq {
    background: transparent;
}

body.page-courses .courses-faq-item {
    background: #fff;
    border: 1px solid rgba(14, 124, 58, 0.12);
    border-radius: 0.85rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

body.page-courses .courses-faq .accordion-button {
    padding: 1.1rem 1.25rem;
    background: #fff;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: none;
    border: 0;
}

body.page-courses .courses-faq .accordion-button:not(.collapsed) {
    background: rgba(14, 124, 58, 0.05);
    color: #0E7C3A;
    box-shadow: none;
}

body.page-courses .courses-faq .accordion-body {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4a4a5a;
}

/* ---------- Cross-sell ---------- */
body.page-courses .courses-crosssell {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    height: 100%;
    border: 1px solid rgba(14, 124, 58, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-courses .courses-crosssell:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(14, 124, 58, 0.12);
}

body.page-courses .courses-crosssell--book {
    background: linear-gradient(135deg, #FFF5F9 0%, #FFFDFD 100%);
    border-color: rgba(240, 38, 122, 0.15);
}

body.page-courses .courses-crosssell--service {
    background: linear-gradient(135deg, #F4FAF5 0%, #FDFFFD 100%);
    border-color: rgba(14, 124, 58, 0.15);
}

body.page-courses .courses-crosssell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: rgba(14, 124, 58, 0.1);
    color: #0E7C3A;
    border-radius: 14px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

body.page-courses .courses-crosssell--book .courses-crosssell-icon {
    background: rgba(240, 38, 122, 0.1);
    color: #f0267a;
}

body.page-courses .courses-crosssell h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}

body.page-courses .courses-crosssell p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4a4a5a;
    margin-bottom: 1.25rem;
}

body.page-courses .courses-crosssell--book .courses-btn--outline {
    color: #f0267a;
    border-color: #f0267a;
}

body.page-courses .courses-crosssell--book .courses-btn--outline:hover {
    background: #f0267a;
    color: #fff;
}

/* ---------- Mobile overrides ---------- */
@media (max-width: 991.98px) {
    body.page-courses .courses-hero-stage {
        min-height: 380px;
        margin-top: 2rem;
    }
}

@media (max-width: 767.98px) {
    body.page-courses .courses-hero {
        padding: 4rem 0 3rem;
    }
    body.page-courses .courses-hero-stage {
        min-height: 360px;
    }
    body.page-courses .courses-hero-card {
        width: 92%;
    }
    body.page-courses .courses-inside-grid {
        grid-template-columns: 1fr;
    }
    body.page-courses .courses-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-courses .courses-hero-actions .courses-btn {
        width: 100%;
    }
}

/* ============================================================
   END SECTION 52 — Courses page
   ============================================================ */


/* ============================================================
   SECTION 53 — LICENSURE PAGE (scoped to body.page-licensure)
   Service-consultative tone, navy trust palette
   ============================================================ */

body.page-licensure {
    background: #FAFAF7;
}

/* ---------- Shared typography primitives ---------- */
body.page-licensure .licensure-eyebrow,
body.page-licensure .licensure-section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2a4d7a;
    background: rgba(42, 77, 122, 0.08);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(42, 77, 122, 0.18);
}

body.page-licensure .licensure-section-title {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #1a2540;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

body.page-licensure .licensure-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #4a4a5a;
    margin-bottom: 1rem;
}

body.page-licensure .licensure-inline-link {
    color: #2a4d7a;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(42, 77, 122, 0.3);
}

body.page-licensure .licensure-inline-link:hover {
    color: #1a3560;
    border-bottom-color: #1a3560;
}

/* ---------- Hero ---------- */
body.page-licensure .licensure-hero {
    position: relative;
    padding: 6rem 0 5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #F2F5FA 0%, #E8EEF6 100%);
}

body.page-licensure .licensure-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 90% 10%, rgba(42, 77, 122, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 10% 90%, rgba(80, 120, 170, 0.08) 0%, transparent 60%);
}

body.page-licensure .licensure-hero-inner {
    position: relative;
    z-index: 1;
}

body.page-licensure .licensure-headline {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E1A33;
    margin-bottom: 1.25rem;
}

body.page-licensure .licensure-headline em {
    font-family: 'Parisienne', 'Brush Script MT', cursive;
    font-style: normal;
    font-weight: 400;
    color: #2a4d7a;
    font-size: 1.1em;
    padding: 0 0.1em;
}

body.page-licensure .licensure-lede {
    font-size: 1.15rem;
    line-height: 1.65;
    color: #3a3a4a;
    margin-bottom: 1.75rem;
    max-width: 560px;
}

body.page-licensure .licensure-trust-strip {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

body.page-licensure .licensure-trust-strip li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a2540;
}

body.page-licensure .licensure-trust-strip i {
    color: #2a4d7a;
    font-size: 1.1rem;
}

body.page-licensure .licensure-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Hero checklist card */
body.page-licensure .licensure-hero-checklist {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow:
      0 24px 48px -12px rgba(42, 77, 122, 0.15),
      0 8px 20px -6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(42, 77, 122, 0.1);
    position: relative;
}

body.page-licensure .licensure-hero-checklist::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(135deg, rgba(42, 77, 122, 0.08), transparent);
    border-radius: 1.35rem;
    z-index: -1;
}

body.page-licensure .licensure-hero-checklist-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(42, 77, 122, 0.2);
}

body.page-licensure .licensure-hero-checklist-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2a4d7a;
    background: rgba(42, 77, 122, 0.08);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

body.page-licensure .licensure-hero-checklist h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2540;
    margin-bottom: 0;
}

body.page-licensure .licensure-hero-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.page-licensure .licensure-hero-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    color: #3a3a4a;
    line-height: 1.45;
}

body.page-licensure .licensure-hero-checklist i {
    color: #2a4d7a;
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 1rem;
}

/* ---------- Buttons ---------- */
body.page-licensure .licensure-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}

body.page-licensure .licensure-btn--primary {
    background: linear-gradient(180deg, #3A63A0 0%, #2a4d7a 52%, #1a3560 100%);
    color: #fff;
    box-shadow:
      0 8px 20px -6px rgba(42, 77, 122, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.08);
}

body.page-licensure .licensure-btn--primary:hover,
body.page-licensure .licensure-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 12px 28px -6px rgba(42, 77, 122, 0.5),
      0 4px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
}

body.page-licensure .licensure-btn--ghost {
    background: transparent;
    color: #2a4d7a;
    border-color: rgba(42, 77, 122, 0.25);
}

body.page-licensure .licensure-btn--ghost:hover,
body.page-licensure .licensure-btn--ghost:focus-visible {
    background: rgba(42, 77, 122, 0.06);
    border-color: #2a4d7a;
    color: #1a3560;
}

/* ---------- Why stats ---------- */
body.page-licensure .licensure-why-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

body.page-licensure .licensure-why-stat {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid #2a4d7a;
    box-shadow: 0 8px 20px -6px rgba(42, 77, 122, 0.1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

body.page-licensure .licensure-why-stat strong {
    font-family: 'Source Serif 4', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2a4d7a;
    line-height: 1;
    min-width: 5rem;
    letter-spacing: -0.02em;
}

body.page-licensure .licensure-why-stat strong sup {
    font-size: 0.45em;
    color: #5a5a6a;
    margin-left: 0.1em;
    top: -0.7em;
}

body.page-licensure .licensure-why-stat span {
    font-size: 0.95rem;
    color: #3a3a4a;
    line-height: 1.5;
}

/* ---------- Services grid ---------- */
body.page-licensure .licensure-service-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(42, 77, 122, 0.12);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.page-licensure .licensure-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(42, 77, 122, 0.15);
    border-color: rgba(42, 77, 122, 0.3);
}

body.page-licensure .licensure-service-card--featured {
    border-color: #2a4d7a;
    background: linear-gradient(180deg, #fff 0%, #F2F5FA 100%);
    box-shadow: 0 12px 28px -8px rgba(42, 77, 122, 0.15);
}

body.page-licensure .licensure-service-badge {
    position: absolute;
    top: -11px;
    left: 1.5rem;
    background: linear-gradient(180deg, #3A63A0 0%, #2a4d7a 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(42, 77, 122, 0.3);
}

body.page-licensure .licensure-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(42, 77, 122, 0.1);
    color: #2a4d7a;
    border-radius: 13px;
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
}

body.page-licensure .licensure-service-card h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2540;
    margin-bottom: 0.6rem;
    line-height: 1.25;
}

body.page-licensure .licensure-service-card > p {
    font-size: 0.93rem;
    line-height: 1.55;
    color: #4a4a5a;
    margin-bottom: 1.1rem;
}

body.page-licensure .licensure-service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    flex: 1;
    border-top: 1px dashed rgba(42, 77, 122, 0.18);
    padding-top: 0.9rem;
}

body.page-licensure .licensure-service-list li {
    font-size: 0.87rem;
    color: #5a5a6a;
    padding: 0.3rem 0 0.3rem 1.2rem;
    position: relative;
    line-height: 1.45;
}

body.page-licensure .licensure-service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    background: #2a4d7a;
    border-radius: 50%;
}

body.page-licensure .licensure-service-cta {
    color: #2a4d7a;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(42, 77, 122, 0.2);
    padding-bottom: 0.2rem;
    align-self: flex-start;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.page-licensure .licensure-service-cta:hover {
    color: #1a3560;
    border-bottom-color: #1a3560;
}

/* Bundle promo */
body.page-licensure .licensure-bundle-promo {
    background: linear-gradient(135deg, #2a4d7a 0%, #1a3560 100%);
    border-radius: 1.25rem;
    padding: 2rem 2.25rem;
    color: #fff;
    box-shadow: 0 20px 40px -10px rgba(42, 77, 122, 0.3);
}

body.page-licensure .licensure-bundle-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.page-licensure .licensure-bundle-promo h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

body.page-licensure .licensure-bundle-promo p {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

body.page-licensure .licensure-bundle-promo .licensure-btn--primary {
    background: #fff;
    color: #2a4d7a;
    font-weight: 700;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
}

body.page-licensure .licensure-bundle-promo .licensure-btn--primary:hover {
    background: #F2F5FA;
    color: #1a3560;
}

/* ---------- Process timeline ---------- */
body.page-licensure .licensure-process-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    counter-reset: process-counter;
}

body.page-licensure .licensure-process-timeline::before {
    content: '';
    position: absolute;
    left: 2.25rem;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(42, 77, 122, 0.3), rgba(42, 77, 122, 0.05));
    z-index: 0;
}

body.page-licensure .licensure-process-step {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin-bottom: 2.25rem;
    position: relative;
    z-index: 1;
}

body.page-licensure .licensure-process-step:last-child {
    margin-bottom: 0;
}

body.page-licensure .licensure-process-num {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, #3A63A0 0%, #2a4d7a 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -4px rgba(42, 77, 122, 0.35);
    border: 4px solid #fff;
}

body.page-licensure .licensure-process-body {
    flex: 1;
    padding-top: 0.5rem;
}

body.page-licensure .licensure-process-body h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2540;
    margin-bottom: 0.5rem;
}

body.page-licensure .licensure-process-body p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #4a4a5a;
    margin: 0;
}

/* ---------- Testimonial ---------- */
body.page-licensure .licensure-testimonial {
    position: relative;
    background: #fff;
    border-radius: 1.5rem;
    padding: 3rem 2.5rem 2rem;
    margin: 0;
    box-shadow: 0 24px 48px -12px rgba(42, 77, 122, 0.15);
    border: 1px solid rgba(42, 77, 122, 0.08);
}

body.page-licensure .licensure-testimonial-mark {
    position: absolute;
    top: 0.5rem;
    left: 1.75rem;
    font-family: 'Source Serif 4', serif;
    font-size: 6rem;
    line-height: 1;
    color: rgba(42, 77, 122, 0.12);
}

body.page-licensure .licensure-testimonial blockquote {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #2a2a3a;
    font-style: italic;
    margin: 0 0 1.5rem 0;
    position: relative;
}

body.page-licensure .licensure-testimonial figcaption {
    border-top: 1px dashed rgba(42, 77, 122, 0.2);
    padding-top: 1rem;
}

body.page-licensure .licensure-testimonial figcaption strong {
    display: block;
    font-weight: 700;
    color: #1a2540;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

body.page-licensure .licensure-testimonial figcaption span {
    font-size: 0.88rem;
    color: #6a6a7a;
    letter-spacing: 0.02em;
}

/* ---------- FAQ ---------- */
body.page-licensure .licensure-faq {
    background: transparent;
}

body.page-licensure .licensure-faq-item {
    background: #fff;
    border: 1px solid rgba(42, 77, 122, 0.12);
    border-radius: 0.85rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

body.page-licensure .licensure-faq .accordion-button {
    padding: 1.1rem 1.25rem;
    background: #fff;
    color: #1a2540;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: none;
    border: 0;
}

body.page-licensure .licensure-faq .accordion-button:not(.collapsed) {
    background: rgba(42, 77, 122, 0.05);
    color: #2a4d7a;
    box-shadow: none;
}

body.page-licensure .licensure-faq .accordion-body {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4a4a5a;
}

/* ---------- Cross-sell ---------- */
body.page-licensure .licensure-crosssell {
    position: relative;
    background: linear-gradient(135deg, #2a4d7a 0%, #1a3560 100%);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(42, 77, 122, 0.3);
}

body.page-licensure .licensure-crosssell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 10% 10%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 90% 90%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

body.page-licensure .licensure-crosssell-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 16px;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.page-licensure .licensure-crosssell h2 {
    position: relative;
    font-family: 'Source Serif 4', serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

body.page-licensure .licensure-crosssell p {
    position: relative;
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 600px;
    margin: 0 auto 2rem;
}

body.page-licensure .licensure-crosssell-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

body.page-licensure .licensure-crosssell .licensure-btn--primary {
    background: #fff;
    color: #2a4d7a;
    font-weight: 700;
}

body.page-licensure .licensure-crosssell .licensure-btn--primary:hover {
    background: #F2F5FA;
    color: #1a3560;
}

body.page-licensure .licensure-crosssell .licensure-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

body.page-licensure .licensure-crosssell .licensure-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* ---------- Mobile overrides ---------- */
@media (max-width: 991.98px) {
    body.page-licensure .licensure-hero-checklist {
        margin-top: 2rem;
    }
}

@media (max-width: 767.98px) {
    body.page-licensure .licensure-hero {
        padding: 4rem 0 3rem;
    }
    body.page-licensure .licensure-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-licensure .licensure-hero-actions .licensure-btn {
        width: 100%;
    }
    body.page-licensure .licensure-why-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    body.page-licensure .licensure-why-stat strong {
        font-size: 2rem;
    }
    body.page-licensure .licensure-bundle-promo {
        padding: 1.75rem 1.5rem;
        text-align: center;
    }
    body.page-licensure .licensure-process-step {
        gap: 1rem;
    }
    body.page-licensure .licensure-process-num {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.2rem;
    }
    body.page-licensure .licensure-process-timeline::before {
        left: 1.75rem;
    }
    body.page-licensure .licensure-testimonial {
        padding: 2rem 1.5rem 1.5rem;
    }
    body.page-licensure .licensure-crosssell {
        padding: 2.25rem 1.5rem;
    }
    body.page-licensure .licensure-crosssell-actions {
        flex-direction: column;
    }
    body.page-licensure .licensure-crosssell .licensure-btn {
        width: 100%;
    }
}

/* ============================================================
   END SECTION 53 — Licensure page
   ============================================================ */


/* ============================================================
   SECTION 54 — FEATURED IMAGE SLOTS (multi-page)
   --------------------------------------------------------------
   Scoped image/meta slots for the new public pages:
     - courses.php   (body.page-courses)
     - pmhnp.php     (body.page-pmhnp, inherits page-courses)
     - books.php     (body.page-books, inherits page-textbook)
     - licensure.php (body.page-licensure)
   All image wrappers share the "quiet clinical" aesthetic:
   soft radius, subtle tinted frame, fixed aspect ratios,
   lazy-loaded object-fit: cover, and tasteful placeholders
   for records where featured_image is NULL.
   ============================================================ */

/* ---- Courses / PMHNP lineup card image ----
   Aspect ratio matches the 4:3 master images uploaded for every
   product in admin/products-edit.php so featured photos cover the
   container cleanly without horizontal cropping. */
body.page-courses .courses-lineup-image,
body.page-pmhnp   .courses-lineup-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #f5f7fb 0%, #e9eef5 100%);
    box-shadow:
        0 1px 0 rgba(15, 35, 65, 0.04),
        inset 0 0 0 1px rgba(15, 35, 65, 0.05);
}
body.page-courses .courses-lineup-image img,
body.page-pmhnp   .courses-lineup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
body.page-courses .courses-lineup-image:hover img,
body.page-pmhnp   .courses-lineup-image:hover img {
    transform: scale(1.03);
}

body.page-courses .courses-lineup-meta,
body.page-pmhnp   .courses-lineup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    background: rgba(15, 35, 65, 0.035);
    font-size: 0.85rem;
    color: var(--text-muted, #4d5769);
}
body.page-courses .courses-lineup-meta .meta-item,
body.page-pmhnp   .courses-lineup-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
body.page-courses .courses-lineup-meta i,
body.page-pmhnp   .courses-lineup-meta i {
    color: var(--primary, #0f2341);
}

/* ---- Books page: real cover image ----
   Switched from 3:4 portrait to 4:3 landscape so the master images
   uploaded under admin/products-edit.php (all 4:3) cover the container
   without horizontal cropping. The CSS-drawn placeholder mirrors this
   ratio so a placeholder row and a real-image row align in the grid. */
body.page-books .books-cover-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #f5f7fb 0%, #e9eef5 100%);
    box-shadow:
        0 14px 40px -22px rgba(15, 35, 65, 0.38),
        0 1px 0 rgba(15, 35, 65, 0.05);
}
body.page-books .books-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Books page: CSS-drawn cover placeholder (no featured_image) ---- */
body.page-books .books-cover-placeholder {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.75rem 1.5rem;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(145deg, #1d2f54 0%, #0f2341 60%, #0a1b33 100%);
    box-shadow:
        0 18px 50px -24px rgba(15, 35, 65, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.page-books .books-cover-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
    pointer-events: none;
}
body.page-books .books-cover-placeholder::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%);
}
body.page-books .books-cover-placeholder .placeholder-brand {
    position: relative;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.78;
    font-weight: 600;
}
body.page-books .books-cover-placeholder .placeholder-title {
    position: relative;
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}
body.page-books .books-cover-placeholder .placeholder-kicker {
    position: relative;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    opacity: 0.82;
    margin-top: 0.35rem;
    font-weight: 400;
}

/* NCLEX accent — brand navy (explicit variant for readability) */
body.page-books .books-cover-placeholder--nclex {
    background: linear-gradient(145deg, #1d2f54 0%, #0f2341 60%, #0a1b33 100%);
}
/* PMHNP accent — deep teal-navy to signal the advanced/clinical track */
body.page-books .books-cover-placeholder--pmhnp {
    background: linear-gradient(145deg, #0f3a46 0%, #0c2a36 60%, #081d27 100%);
}

body.page-books .books-description {
    color: var(--text-muted, #4d5769);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.98rem;
}
body.page-books .books-buy-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary, #0f2341);
    margin-bottom: 0.75rem;
}
body.page-books .books-buy-price-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted, #4d5769);
}

/* ---- Licensure service card: featured image + meta ---- */
body.page-licensure .licensure-service-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #f5f7fb 0%, #e9eef5 100%);
    box-shadow:
        0 1px 0 rgba(15, 35, 65, 0.05),
        inset 0 0 0 1px rgba(15, 35, 65, 0.05);
}
body.page-licensure .licensure-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
body.page-licensure .licensure-service-image:hover img {
    transform: scale(1.03);
}

body.page-licensure .licensure-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted, #4d5769);
}
body.page-licensure .licensure-service-meta i {
    color: var(--primary, #0f2341);
}

/* ---- Responsive tweaks ---- */
@media (max-width: 767.98px) {
    body.page-books .books-cover-image,
    body.page-books .books-cover-placeholder {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    body.page-licensure .licensure-service-image {
        /* Keep the same 4:3 ratio on mobile so service images don't
           letterbox. Matches the desktop rule above. */
        aspect-ratio: 4 / 3;
    }
    body.page-courses .courses-lineup-meta,
    body.page-pmhnp   .courses-lineup-meta {
        font-size: 0.8rem;
        gap: 0.35rem 0.75rem;
    }
}

/* Reduced-motion — kill hover zoom */
@media (prefers-reduced-motion: reduce) {
    body.page-courses .courses-lineup-image img,
    body.page-pmhnp   .courses-lineup-image img,
    body.page-licensure .licensure-service-image img {
        transition: none;
    }
    body.page-courses .courses-lineup-image:hover img,
    body.page-pmhnp   .courses-lineup-image:hover img,
    body.page-licensure .licensure-service-image:hover img {
        transform: none;
    }
}

/* ---- Courses page: per-card branch availability chip ---- */
body.page-courses .courses-lineup-avail {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0.25rem 0 1rem;
    color: var(--primary, #0f2341);
    background: rgba(15, 35, 65, 0.06);
    border: 1px solid rgba(15, 35, 65, 0.08);
    white-space: nowrap;
}
body.page-courses .courses-lineup-avail i {
    color: inherit;
}
body.page-courses .courses-lineup-avail--avail-both {
    color: #0b6b3a;
    background: rgba(16, 122, 62, 0.08);
    border-color: rgba(16, 122, 62, 0.18);
}
body.page-courses .courses-lineup-avail--avail-us {
    color: #8b5a00;
    background: rgba(212, 140, 0, 0.09);
    border-color: rgba(212, 140, 0, 0.22);
}
body.page-courses .courses-lineup-avail--avail-ph {
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.18);
}

/* ---- Courses page: branch-note banner under the toggle ---- */
body.page-courses .courses-branch-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(15, 35, 65, 0.035);
    border: 1px solid rgba(15, 35, 65, 0.08);
    color: var(--text-muted, #4d5769);
    font-size: 0.88rem;
}
body.page-courses .courses-branch-note strong {
    color: var(--primary, #0f2341);
    font-weight: 700;
}

/* Small adjust: tighten card heading spacing now that a chip sits
   between the title and the description. */
body.page-courses .courses-lineup-card > h3 + .courses-lineup-avail {
    margin-top: 0.25rem;
}

@media (max-width: 575.98px) {
    body.page-courses .courses-lineup-avail,
    body.page-courses .courses-branch-note {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
}

/* ---- PMHNP page: single U.S.-only banner above the three tracks ---- */
body.page-pmhnp .pmhnp-us-only-banner {
    margin-top: -0.5rem;
}
body.page-pmhnp .pmhnp-us-only-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-size: 0.92rem;
    color: #8b5a00;
    background: rgba(212, 140, 0, 0.09);
    border: 1px solid rgba(212, 140, 0, 0.25);
    line-height: 1.45;
    text-align: left;
}
body.page-pmhnp .pmhnp-us-only-pill strong {
    color: #6b4500;
    font-weight: 700;
}
body.page-pmhnp .pmhnp-us-only-pill i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* ---- PMHNP page: positive per-track badge variants ---- */
/* Practice Focus (Question Bank) — cool blue */
body.page-pmhnp .courses-lineup-badge--practice {
    background: rgba(29, 78, 216, 0.10);
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.25);
}
/* Final Stage (Last-Minute Review) — warm amber */
body.page-pmhnp .courses-lineup-badge--final {
    background: rgba(196, 94, 25, 0.10);
    color: #a24810;
    border-color: rgba(196, 94, 25, 0.28);
}

@media (max-width: 575.98px) {
    body.page-pmhnp .pmhnp-us-only-pill {
        font-size: 0.82rem;
        padding: 0.5rem 0.9rem;
        gap: 0.4rem;
    }
}

/* ============================================================
   END SECTION 54 — Featured image slots
   ============================================================ */


/* ============================================================
   SECTION 55 — COURSES + PMHNP · BOOKS-PALETTE HARMONIZATION
   --------------------------------------------------------------
   The courses.php and pmhnp.php pages previously read as heavily
   green-dominant, which visually disconnected them from the books
   page (warm cream + pink/gold palette) and created asymmetry
   across the catalog.
   This section:
     (1) Re-tints every green-dominant selector to the books
         palette  (warm cream canvas · pink primary · gold
         secondary · brand navy text).
     (2) Layers home-page-style background effects on the hero —
         a top 3px multi-brand rainbow strip, large soft radial
         orbs, and a thin editorial left rule.
   Because pmhnp.php sets  $body_class_extra = 'page-courses',
   every `body.page-courses` override here naturally flows through
   to the PMHNP page too, without duplication.

   Palette reference (matches /books.php):
     --bk-cream-1: #FDF9EF   canvas top
     --bk-cream-2: #FAF6EC   canvas bottom
     --bk-pink:    #f0267a   primary accent
     --bk-pink-2:  #C4457A   mid-tone
     --bk-pink-3:  #B13269   deep
     --bk-gold:    #E8B63C
     --bk-green:   #0E7C3A   (strip/rainbow only)
     --bk-blue:    #355CFF   (strip/rainbow only)
     --bk-text:    #1a1a2e
   ============================================================ */

/* ---------- (1) Hero canvas: warm cream + radial orbs + top strip ---------- */
body.page-courses .courses-hero {
    /* Editorial blue hero background — the abstract blue artwork (flowing
       arcs + sparkles) is the WebP; a soft left-white wash keeps the
       headline legible over it. Fallback gradient shows if the image fails. */
    background:
        linear-gradient(90deg,
            rgba(244, 249, 255, 0.92) 0%,
            rgba(244, 249, 255, 0.55) 26%,
            rgba(244, 249, 255, 0.12) 48%,
            rgba(244, 249, 255, 0.00) 66%),
        url("../images/header/courses-hero-bg2.e9df71ffd833.webp") center center / cover no-repeat,
        linear-gradient(135deg, #eef4ff 0%, #f6faff 50%, #e9f1ff 100%);
}

/* Soft blue mesh overlay — replaces the pink/gold mesh so the whole
   hero reads as the editorial blue composition from the target. */
body.page-courses .courses-hero-bg {
    background:
        radial-gradient(ellipse at 18% 22%, rgba(53, 92, 255, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(48, 92, 222, 0.08) 0%, transparent 60%);
}

/* Home-style top multi-brand rainbow hairline (matches books page) */
body.page-courses .courses-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #f0267a 0%,
        #E8B63C 38%,
        #0E7C3A 72%,
        #355CFF 100%);
    opacity: 0.92;
    z-index: 3;
    pointer-events: none;
}

/* Home-style thin editorial left rule inside the hero — tasteful accent */
body.page-courses .courses-hero::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 22%;
    left: clamp(1rem, 2.5vw, 1.75rem);
    width: 2px;
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.55) 0%,
        rgba(196, 69, 122, 0.00) 100%);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
}

/* Subtle dot-pattern overlay for home-page-style depth */
body.page-courses .courses-hero-inner {
    position: relative;
}
body.page-courses .courses-hero-inner::before {
    content: '';
    position: absolute;
    inset: -40px -20px 0 -20px;
    background-image:
        radial-gradient(rgba(196, 69, 122, 0.055) 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
body.page-courses .courses-hero-inner > .row {
    position: relative;
    z-index: 1;
}

/* ---------- (2) Script "done right." — pink instead of green ---------- */
body.page-courses .courses-headline em {
    color: #C4457A;
}

/* ---------- (3) Trust strip icons — pink accent ---------- */
body.page-courses .courses-trust-strip i {
    color: #C4457A;
}

/* ---------- (4) Hero floating cards — pink-tinted shadow, pink eyebrow ---------- */
body.page-courses .courses-hero-card {
    box-shadow:
        0 20px 40px -12px rgba(196, 69, 122, 0.18),
        0 8px 20px -6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(196, 69, 122, 0.10);
}
body.page-courses .courses-hero-card:hover {
    box-shadow:
        0 24px 48px -12px rgba(196, 69, 122, 0.26),
        0 10px 24px -6px rgba(0, 0, 0, 0.10);
}
body.page-courses .courses-hero-card-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.08);
}
body.page-courses .courses-hero-card-meter {
    background: rgba(196, 69, 122, 0.12);
}
body.page-courses .courses-hero-card-meter span {
    background: linear-gradient(90deg, #f0267a, #C4457A);
}

/* ---------- (5) Buttons — pink primary / pink outline ---------- */
body.page-courses .courses-btn--primary {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%);
    box-shadow:
        0 8px 20px -6px rgba(196, 69, 122, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
body.page-courses .courses-btn--primary:hover,
body.page-courses .courses-btn--primary:focus-visible {
    box-shadow:
        0 12px 28px -6px rgba(196, 69, 122, 0.52),
        0 4px 10px rgba(0, 0, 0, 0.10);
}
body.page-courses .courses-btn--ghost {
    color: #C4457A;
    border-color: rgba(196, 69, 122, 0.28);
}
body.page-courses .courses-btn--ghost:hover,
body.page-courses .courses-btn--ghost:focus-visible {
    background: rgba(240, 38, 122, 0.06);
    border-color: #C4457A;
    color: #B13269;
}
body.page-courses .courses-btn--outline {
    color: #C4457A;
    border-color: #C4457A;
}
body.page-courses .courses-btn--outline:hover,
body.page-courses .courses-btn--outline:focus-visible {
    background: #C4457A;
    color: #fff;
}

/* ---------- (6) Eyebrow pills across the page — pink ---------- */
body.page-courses .courses-section-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
    border: 1px solid rgba(196, 69, 122, 0.18);
}

/* ---------- (7) Method cards — pink border/accents ---------- */
body.page-courses .courses-method-card {
    border-color: rgba(196, 69, 122, 0.12);
}
body.page-courses .courses-method-card:hover {
    box-shadow: 0 16px 32px -8px rgba(196, 69, 122, 0.16);
    border-color: rgba(196, 69, 122, 0.26);
}
body.page-courses .courses-method-num {
    color: rgba(196, 69, 122, 0.16);
}
body.page-courses .courses-method-icon {
    background: linear-gradient(135deg, rgba(240, 38, 122, 0.14), rgba(232, 182, 60, 0.10));
    color: #C4457A;
}
body.page-courses .courses-method-list {
    border-top-color: rgba(196, 69, 122, 0.20);
}
body.page-courses .courses-method-list li::before {
    background: #C4457A;
}

/* ---------- (8) Lineup cards — pink border/shadow ---------- */
body.page-courses .courses-lineup-card {
    border-color: rgba(196, 69, 122, 0.14);
}
body.page-courses .courses-lineup-card:hover {
    box-shadow: 0 20px 40px -10px rgba(196, 69, 122, 0.18);
    border-color: rgba(196, 69, 122, 0.28);
}
body.page-courses .courses-lineup-card--featured {
    border-color: rgba(240, 38, 122, 0.42);
    box-shadow:
        0 20px 40px -12px rgba(240, 38, 122, 0.18),
        0 0 0 3px rgba(240, 38, 122, 0.08);
}
body.page-courses .courses-lineup-card--featured:hover {
    box-shadow:
        0 24px 48px -12px rgba(240, 38, 122, 0.24),
        0 0 0 3px rgba(240, 38, 122, 0.12);
}

/* "Most Popular" / "Flagship Track" pill — pink */
body.page-courses .courses-lineup-badge {
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(196, 69, 122, 0.45);
    border: none;
}

/* Eyebrow inside each lineup card (e.g. "NCLEX-RN") */
body.page-courses .courses-lineup-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.08);
}
body.page-courses .courses-lineup-eyebrow i {
    color: inherit;
}

/* Price row — pink */
body.page-courses .courses-lineup-price {
    color: #C4457A;
}

/* Delivery meta (e.g. "Online") keep neutral but shift icon to pink */
body.page-courses .courses-lineup-meta i {
    color: #C4457A;
}

/* ---------- (9) Lineup section background + section-tint ---------- */
body.page-courses .courses-lineup-section.section-tint,
body.page-courses .courses-outcomes-section.section-tint {
    background:
        radial-gradient(ellipse 700px 420px at 90% 10%,
            rgba(240, 38, 122, 0.06) 0%,
            rgba(240, 38, 122, 0.00) 65%),
        radial-gradient(ellipse 640px 380px at 8% 95%,
            rgba(232, 182, 60, 0.07) 0%,
            rgba(232, 182, 60, 0.00) 70%),
        linear-gradient(180deg, #FDF9EF 0%, #F7F1E4 100%);
    position: relative;
    overflow: hidden;
}

/* ---------- (10) Stats (numbers in outcomes section) — pink ---------- */
body.page-courses .courses-stat strong {
    color: #C4457A;
}
body.page-courses .courses-stat sup {
    color: #B13269;
}

/* ---------- (11) Testimonials — pink accent bar ---------- */
body.page-courses .courses-testimonial::before {
    background: linear-gradient(180deg, #f0267a, #C4457A) !important;
}
body.page-courses .courses-testimonial--featured {
    border-color: rgba(240, 38, 122, 0.35);
    box-shadow: 0 18px 36px -12px rgba(240, 38, 122, 0.20);
}
body.page-courses .courses-testimonial figcaption strong {
    color: #B13269;
}

/* ---------- (12) FAQ accordion — pink accent ---------- */
body.page-courses .courses-faq-item {
    border-color: rgba(196, 69, 122, 0.14);
}
body.page-courses .courses-faq-item .accordion-button:not(.collapsed) {
    color: #B13269;
    background: rgba(240, 38, 122, 0.06);
    box-shadow: inset 0 -2px 0 rgba(240, 38, 122, 0.22);
}
body.page-courses .courses-faq-item .accordion-button:focus {
    border-color: rgba(196, 69, 122, 0.35);
    box-shadow: 0 0 0 0.25rem rgba(240, 38, 122, 0.18);
}
body.page-courses .courses-inline-link {
    color: #C4457A;
    text-decoration-color: rgba(196, 69, 122, 0.35);
}
body.page-courses .courses-inline-link:hover {
    color: #B13269;
    text-decoration-color: #B13269;
}

/* ---------- (13) Cross-sell cards — pink ---------- */
body.page-courses .courses-crosssell {
    border-color: rgba(196, 69, 122, 0.14);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8FC 100%);
}
body.page-courses .courses-crosssell:hover {
    border-color: rgba(196, 69, 122, 0.30);
    box-shadow: 0 20px 40px -12px rgba(196, 69, 122, 0.16);
}
body.page-courses .courses-crosssell-icon {
    background: linear-gradient(135deg, rgba(240, 38, 122, 0.14), rgba(232, 182, 60, 0.10));
    color: #C4457A;
}

/* ---------- (14) Inside grid icons (What's Inside section) — pink ---------- */
body.page-courses .courses-inside-grid i {
    color: #C4457A;
}

/* ---------- (15) Availability chip recoloring — keep semantic colors
                  (both/us-only/ph-only stay green/amber/blue — those are
                  state signals, not brand accents) ---------- */
/* The .courses-lineup-avail rules from SECTION 54 remain canonical.
   Only tweak: the neutral default now reads on warm-cream rather than
   cool-blue. */
body.page-courses .courses-lineup-avail {
    background: rgba(26, 26, 46, 0.04);
    border-color: rgba(26, 26, 46, 0.07);
}

/* ---------- (16) PMHNP-specific refinements ---------- */
/* On PMHNP, the hero "Advanced Certification" feel calls for a
   slightly deeper pink on the script-italic "done right." — same
   palette family, different weight — so the page still reads as
   the advanced/flagship track. */
body.page-pmhnp .courses-headline em {
    color: #B13269;
}

/* The editorial left rule switches to a pink-to-blue gradient on
   PMHNP — a quiet nod to "advanced certification" without breaking
   palette. */
body.page-pmhnp .courses-hero::after {
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.55) 0%,
        rgba(53, 92, 255, 0.25) 55%,
        rgba(53, 92, 255, 0.00) 100%);
}

/* Keep the U.S.-only amber banner — amber IS the right signal for a
   geographic restriction; we do not harmonize it to pink. But make
   sure it sits correctly on the new warm-cream section background. */
body.page-pmhnp .pmhnp-us-only-pill {
    box-shadow: 0 2px 6px rgba(212, 140, 0, 0.08);
}

/* The per-card positive badges (Flagship / Practice Focus / Final
   Stage) keep their identity:
     Flagship  → pink   (handled above via .courses-lineup-badge)
     Practice  → blue   (kept, from SECTION 54)
     Final     → amber  (kept, from SECTION 54)
   That way the three tracks still read as three distinct paths. */

/* ---------- (17) Responsive refinements ---------- */
@media (max-width: 767.98px) {
    body.page-courses .courses-hero::after {
        display: none;        /* editorial rule hidden on narrow screens */
    }
    body.page-courses .courses-hero-inner::before {
        background-size: 18px 18px;
        opacity: 0.4;
    }
}

/* ---------- (18) Reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
    body.page-courses .courses-btn--primary:hover,
    body.page-courses .courses-btn--primary:focus-visible,
    body.page-courses .courses-hero-card:hover,
    body.page-courses .courses-method-card:hover,
    body.page-courses .courses-lineup-card:hover,
    body.page-courses .courses-crosssell:hover {
        transform: none;
    }
}

/* ============================================================
   END SECTION 55 — Courses + PMHNP books-palette harmonization
   ============================================================ */


/* ============================================================
   SECTION 56 — LICENSURE + BOOKS · PALETTE & EFFECTS PARITY
   --------------------------------------------------------------
   Brings the remaining two public pages into the same visual
   family as courses + pmhnp + books:
     (1) licensure.php — shifts from navy-dominant to the warm
         cream + pink/gold palette; lays in the full home-style
         hero background stack (rainbow strip, radial orbs,
         thin editorial left rule, dot-pattern overlay).
     (2) books.php / textbook scope — tops up the hero with the
         matching editorial left rule + dot pattern; recolors
         the cross-sell band from green to pink so the whole
         bottom of the page stays on-palette.
   Navy is kept only where it's structural dark-mode contrast
   (the bundle promo panel + cross-sell panel) — but re-tinted
   to a deep plum/pink so those dark surfaces now read as part
   of the brand family, not as a separate page.
   Palette reference (matches /books.php + SECTION 55):
     --bk-cream-1: #FDF9EF   canvas top
     --bk-cream-2: #FAF6EC   canvas bottom
     --bk-pink:    #f0267a   primary accent
     --bk-pink-2:  #C4457A   mid-tone
     --bk-pink-3:  #B13269   deep
     --bk-plum:    #6B1840   dark-surface background base
     --bk-gold:    #E8B63C   secondary accent
     --bk-text:    #1a2540   (retained, already cross-page)
   ============================================================ */

/* =====================================================================
   PART A — LICENSURE PAGE  (body.page-licensure)
   ===================================================================== */

/* ---------- (A.1) Page canvas shifts to warm cream ---------- */
body.page-licensure {
    background: #FAF6EC;
}

/* ---------- (A.2) Typography primitives — pink tint ---------- */
body.page-licensure .licensure-eyebrow,
body.page-licensure .licensure-section-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.08);
    border: 1px solid rgba(196, 69, 122, 0.20);
}
body.page-licensure .licensure-inline-link {
    color: #C4457A;
    border-bottom-color: rgba(196, 69, 122, 0.30);
}
body.page-licensure .licensure-inline-link:hover {
    color: #B13269;
    border-bottom-color: #B13269;
}

/* ---------- (A.3) Hero canvas — cream + radial orbs ---------- */
body.page-licensure .licensure-hero {
    background:
        radial-gradient(ellipse 820px 540px at 88% 12%,
            rgba(240, 38, 122, 0.11) 0%,
            rgba(240, 38, 122, 0.00) 68%),
        radial-gradient(ellipse 720px 500px at 8% 92%,
            rgba(232, 182, 60, 0.14) 0%,
            rgba(232, 182, 60, 0.00) 70%),
        radial-gradient(circle 420px at 46% 48%,
            rgba(53, 92, 255, 0.05) 0%,
            rgba(53, 92, 255, 0.00) 70%),
        linear-gradient(180deg, #FDF9EF 0%, #FAF6EC 100%);
}
body.page-licensure .licensure-hero-bg {
    background:
        radial-gradient(ellipse at 18% 22%, rgba(240, 38, 122, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(232, 182, 60, 0.10) 0%, transparent 60%);
}

/* ---------- (A.4) Top multi-brand rainbow hairline ---------- */
body.page-licensure .licensure-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #f0267a 0%,
        #E8B63C 38%,
        #0E7C3A 72%,
        #355CFF 100%);
    opacity: 0.92;
    z-index: 3;
    pointer-events: none;
}

/* ---------- (A.5) Thin editorial left rule ---------- */
body.page-licensure .licensure-hero::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 22%;
    left: clamp(1rem, 2.5vw, 1.75rem);
    width: 2px;
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.55) 0%,
        rgba(196, 69, 122, 0.00) 100%);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
}

/* ---------- (A.6) Dot-pattern overlay ---------- */
body.page-licensure .licensure-hero-inner {
    position: relative;
}
body.page-licensure .licensure-hero-inner::before {
    content: '';
    position: absolute;
    inset: -40px -20px 0 -20px;
    background-image:
        radial-gradient(rgba(196, 69, 122, 0.055) 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
body.page-licensure .licensure-hero-inner > .row {
    position: relative;
    z-index: 1;
}

/* ---------- (A.7) Script "em" highlight — pink ---------- */
body.page-licensure .licensure-headline em {
    color: #C4457A;
}

/* ---------- (A.8) Trust strip icons ---------- */
body.page-licensure .licensure-trust-strip i {
    color: #C4457A;
}

/* ---------- (A.9) Hero checklist card — pink shadow + accent ---------- */
body.page-licensure .licensure-hero-checklist {
    box-shadow:
        0 24px 48px -12px rgba(196, 69, 122, 0.18),
        0 8px 20px -6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(196, 69, 122, 0.12);
}
body.page-licensure .licensure-hero-checklist::before {
    background: linear-gradient(135deg, rgba(240, 38, 122, 0.10), transparent);
}
body.page-licensure .licensure-hero-checklist-header {
    border-bottom-color: rgba(196, 69, 122, 0.22);
}
body.page-licensure .licensure-hero-checklist-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
}
body.page-licensure .licensure-hero-checklist i {
    color: #C4457A;
}

/* ---------- (A.10) Buttons — pink primary / pink ghost ---------- */
body.page-licensure .licensure-btn--primary {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%);
    box-shadow:
        0 8px 20px -6px rgba(196, 69, 122, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
body.page-licensure .licensure-btn--primary:hover,
body.page-licensure .licensure-btn--primary:focus-visible {
    box-shadow:
        0 12px 28px -6px rgba(196, 69, 122, 0.52),
        0 4px 10px rgba(0, 0, 0, 0.10);
}
body.page-licensure .licensure-btn--ghost {
    color: #C4457A;
    border-color: rgba(196, 69, 122, 0.28);
}
body.page-licensure .licensure-btn--ghost:hover,
body.page-licensure .licensure-btn--ghost:focus-visible {
    background: rgba(240, 38, 122, 0.06);
    border-color: #C4457A;
    color: #B13269;
}

/* ---------- (A.11) Why stats — pink accent bar + numerals ---------- */
body.page-licensure .licensure-why-stat {
    border-left-color: #C4457A;
    box-shadow: 0 8px 20px -6px rgba(196, 69, 122, 0.12);
}
body.page-licensure .licensure-why-stat strong {
    color: #C4457A;
}

/* ---------- (A.12) Service cards ---------- */
body.page-licensure .licensure-service-card {
    border-color: rgba(196, 69, 122, 0.14);
}
body.page-licensure .licensure-service-card:hover {
    box-shadow: 0 16px 32px -8px rgba(196, 69, 122, 0.16);
    border-color: rgba(196, 69, 122, 0.30);
}
body.page-licensure .licensure-service-card--featured {
    border-color: rgba(240, 38, 122, 0.42);
    background: linear-gradient(180deg, #fff 0%, #FFF5F9 100%);
    box-shadow: 0 12px 28px -8px rgba(240, 38, 122, 0.18);
}
body.page-licensure .licensure-service-badge {
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    box-shadow: 0 6px 14px -4px rgba(196, 69, 122, 0.45);
}
body.page-licensure .licensure-service-icon {
    background: linear-gradient(135deg, rgba(240, 38, 122, 0.14), rgba(232, 182, 60, 0.10));
    color: #C4457A;
}
body.page-licensure .licensure-service-list {
    border-top-color: rgba(196, 69, 122, 0.20);
}
body.page-licensure .licensure-service-list li::before {
    background: #C4457A;
}
body.page-licensure .licensure-service-cta {
    color: #C4457A;
    border-bottom-color: rgba(196, 69, 122, 0.25);
}
body.page-licensure .licensure-service-cta:hover {
    color: #B13269;
    border-bottom-color: #B13269;
}

/* Latent cart form on priced services — surfaces only when an admin sets
   a numeric us_price. Reset the underline-hover styling since this variant
   is a full button, not a text CTA. */
body.page-licensure .licensure-service-cart-form {
    margin: 0 0 0.5rem 0;
}
body.page-licensure .licensure-service-cta--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #C4457A 0%, #8B2154 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px -6px rgba(196, 69, 122, 0.45);
    cursor: pointer;
}
body.page-licensure .licensure-service-cta--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(196, 69, 122, 0.55);
    color: #fff;
    border-bottom-color: transparent;
}
body.page-licensure .licensure-service-cta--secondary {
    font-size: 0.88rem;
    font-weight: 500;
    margin-top: 0.15rem;
}

/* ---------- (A.13) Bundle promo — deep pink/plum instead of navy ---------- */
body.page-licensure .licensure-bundle-promo {
    background: linear-gradient(135deg, #B13269 0%, #6B1840 100%);
    box-shadow: 0 20px 40px -10px rgba(107, 24, 64, 0.30);
}
body.page-licensure .licensure-bundle-eyebrow {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
body.page-licensure .licensure-bundle-promo .licensure-btn--primary {
    background: #fff;
    color: #B13269;
}
body.page-licensure .licensure-bundle-promo .licensure-btn--primary:hover {
    background: #FFF5F9;
    color: #6B1840;
}

/* ---------- (A.14) Process timeline — pink rule + pink numerals ---------- */
body.page-licensure .licensure-process-timeline::before {
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.30),
        rgba(196, 69, 122, 0.05));
}
body.page-licensure .licensure-process-num {
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    box-shadow: 0 8px 20px -4px rgba(196, 69, 122, 0.35);
}

/* ---------- (A.15) Testimonial — pink quote mark + pink accents ---------- */
body.page-licensure .licensure-testimonial {
    box-shadow: 0 24px 48px -12px rgba(196, 69, 122, 0.16);
    border: 1px solid rgba(196, 69, 122, 0.10);
}
body.page-licensure .licensure-testimonial-mark {
    color: rgba(240, 38, 122, 0.14);
}
body.page-licensure .licensure-testimonial figcaption {
    border-top-color: rgba(196, 69, 122, 0.22);
}

/* ---------- (A.16) FAQ accordion — pink accent ---------- */
body.page-licensure .licensure-faq-item {
    border-color: rgba(196, 69, 122, 0.14);
}
body.page-licensure .licensure-faq .accordion-button:not(.collapsed) {
    color: #B13269;
    background: rgba(240, 38, 122, 0.06);
    box-shadow: inset 0 -2px 0 rgba(240, 38, 122, 0.22);
}

/* ---------- (A.17) Cross-sell — light blush panel on-brand ---------- */
body.page-licensure .licensure-crosssell {
    background:
        linear-gradient(135deg, rgba(255, 246, 250, 0.98) 0%, rgba(248, 221, 233, 0.98) 100%);
    border: 1px solid rgba(180, 74, 138, 0.22);
    box-shadow: 0 24px 48px -18px rgba(107, 24, 64, 0.20);
}
body.page-licensure .licensure-crosssell-icon {
    background: linear-gradient(135deg, #FFFFFF 0%, #F7D8E8 100%);
    border: 1px solid rgba(177, 50, 105, 0.32);
    color: #8F2555;
    box-shadow:
        0 10px 22px -14px rgba(107, 24, 64, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
body.page-licensure .licensure-crosssell-icon i,
body.page-licensure .licensure-crosssell-icon svg {
    color: #8F2555;
}
body.page-licensure .licensure-crosssell h2 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
    color: #4A1432;
}
body.page-licensure .licensure-crosssell p {
    color: #5C2D44;
    text-shadow: none;
}
body.page-licensure .licensure-crosssell .licensure-btn--primary {
    background: #B13269;
    color: #fff;
    border-color: #B13269;
}
body.page-licensure .licensure-crosssell .licensure-btn--primary:hover {
    background: #8F2555;
    color: #fff;
    border-color: #8F2555;
}
body.page-licensure .licensure-crosssell .licensure-btn--ghost {
    background: #FFFFFF;
    border-color: rgba(177, 50, 105, 0.42);
    color: #6B1840;
}
body.page-licensure .licensure-crosssell .licensure-btn--ghost:hover {
    background: #FBE8F2;
    border-color: rgba(177, 50, 105, 0.70);
    color: #4A1432;
}

/* Contact form primary action — keep the pink brand button legible. */
body.public-ui .contact-form .btn-primary-custom {
    background: linear-gradient(135deg, #B44A8A 0%, #9C3A76 100%) !important;
    border: 1px solid rgba(156, 58, 118, 0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 28px -12px rgba(180, 74, 138, 0.52) !important;
}
body.public-ui .contact-form .btn-primary-custom:hover,
body.public-ui .contact-form .btn-primary-custom:focus-visible {
    background: linear-gradient(135deg, #C45F9B 0%, #8F316B 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -12px rgba(156, 58, 118, 0.60) !important;
}


/* =====================================================================
   PART B — BOOKS / TEXTBOOK PAGE PARITY TOP-UP
   (body.page-textbook, which body.page-books inherits)
   ===================================================================== */

/* ---------- (B.1) Editorial left rule on the textbook hero ---------- */
body.page-textbook .textbook-hero {
    position: relative;
}
body.page-textbook .textbook-hero::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 22%;
    left: clamp(1rem, 2.5vw, 1.75rem);
    width: 2px;
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.55) 0%,
        rgba(196, 69, 122, 0.00) 100%);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
}

/* ---------- (B.2) Dot-pattern overlay on textbook hero ---------- */
body.page-textbook .textbook-hero-inner {
    position: relative;
}
body.page-textbook .textbook-hero-inner::before {
    content: '';
    position: absolute;
    inset: -40px -20px 0 -20px;
    background-image:
        radial-gradient(rgba(196, 69, 122, 0.055) 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
body.page-textbook .textbook-hero-inner > .row {
    position: relative;
    z-index: 1;
}

/* ---------- (B.3) Cross-sell band — green → pink ---------- */
body.page-textbook .textbook-crosssell {
    background:
        radial-gradient(ellipse 600px 400px at 50% 0%,
            rgba(240, 38, 122, 0.10) 0%,
            rgba(240, 38, 122, 0.00) 70%),
        linear-gradient(180deg, #FFFFFF 0%, #FFF5F9 100%);
    border: 1px solid rgba(196, 69, 122, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 60px -24px rgba(196, 69, 122, 0.22);
}
body.page-textbook .textbook-crosssell::before {
    background: linear-gradient(90deg, #f0267a, #C4457A, #f0267a);
}
body.page-textbook .textbook-crosssell-icon {
    background: rgba(240, 38, 122, 0.12);
    color: #C4457A;
}

/* ---------- (B.4) Textbook buy-list green checkmarks — pink ---------- */
body.page-textbook .textbook-buy-list i {
    color: #C4457A;
}


/* =====================================================================
   PART C — Responsive + reduced-motion guards (licensure-scoped)
   ===================================================================== */
@media (max-width: 767.98px) {
    body.page-licensure .licensure-hero::after,
    body.page-textbook  .textbook-hero::after {
        display: none;    /* hide editorial rule on narrow screens */
    }
    body.page-licensure .licensure-hero-inner::before,
    body.page-textbook  .textbook-hero-inner::before {
        background-size: 18px 18px;
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-licensure .licensure-btn--primary:hover,
    body.page-licensure .licensure-btn--primary:focus-visible,
    body.page-licensure .licensure-service-card:hover {
        transform: none;
    }
}

/* ============================================================
   END SECTION 56 — Licensure + Books parity
   ============================================================ */


/* ============================================================
   SECTION 57 — DEEP-LINK SCROLL OFFSETS
   --------------------------------------------------------------
   When a visitor lands on a page with a hash anchor (e.g.
   /courses.php?branch=ph#courses-lineup or
   /about.php#chicago), the sticky navbar would normally cover
   the target element's heading. scroll-margin-top pushes the
   natural scroll position down so the heading sits comfortably
   below the nav.
   Premium navbar height ~76–80px; we add breathing room.
   ============================================================ */
#courses-lineup,
#locations,
#chicago,
#philippines {
    scroll-margin-top: 96px;
}

@media (max-width: 767.98px) {
    #courses-lineup,
    #locations,
    #chicago,
    #philippines {
        scroll-margin-top: 80px;
    }
}

/* ============================================================
   END SECTION 57 — Deep-link scroll offsets
   ============================================================ */


/* ============================================================
   SECTION 58 — OUR CATALOG (programs.php) · PALETTE PARITY
   --------------------------------------------------------------
   The Catalog page (body.page-programs) was the last public
   page still reading primarily as brand-navy with a muted
   porcelain pink. This section brings it into the same warm
   cream + pink/gold family as courses, pmhnp, books, and
   licensure — same effect vocabulary (rainbow strip, radial
   orbs, editorial left rule, dot-pattern overlay) on the hero,
   and a deeper pink/plum for the bundle hero panel (so the
   dark surface reads as family, not as a different page).

   Palette reference (matches SECTIONS 55–56 and /books.php):
     --bk-cream-1: #FDF9EF   canvas top
     --bk-cream-2: #FAF6EC   canvas bottom
     --bk-pink:    #f0267a   primary accent
     --bk-pink-2:  #C4457A   mid-tone
     --bk-pink-3:  #B13269   deep
     --bk-plum:    #6B1840   dark-surface base
     --bk-gold:    #E8B63C   secondary accent

   Note on the bundle hero panel:
     programs.php line 502 applies an inline `style=` with a
     navy gradient. Inline styles beat external CSS — so the
     overrides below use `!important` combined with a body-
     scoped selector that stays specific enough to win cleanly.
   ============================================================ */

/* ---------- (58.1) Page canvas ---------- */
body.page-programs {
    background: #FAF6EC;
}

/* ---------- (58.2) Hero canvas — cream + radial orbs ---------- */
/* NOTE: chained body.public-ui.page-programs so specificity matches
   the existing body.public-ui:not(.page-home) rules in SECTION 7500s;
   source order then wins (SECTION 58 comes later). */
body.public-ui.page-programs .page-header-premium {
    position: relative;
    background:
        radial-gradient(ellipse 820px 540px at 88% 12%,
            rgba(240, 38, 122, 0.11) 0%,
            rgba(240, 38, 122, 0.00) 68%),
        radial-gradient(ellipse 720px 500px at 8% 92%,
            rgba(232, 182, 60, 0.14) 0%,
            rgba(232, 182, 60, 0.00) 70%),
        radial-gradient(circle 420px at 46% 48%,
            rgba(53, 92, 255, 0.05) 0%,
            rgba(53, 92, 255, 0.00) 70%),
        linear-gradient(180deg, #FDF9EF 0%, #FAF6EC 100%) !important;
    overflow: hidden;
}

/* ---------- (58.3) Top multi-brand rainbow hairline ---------- */
body.public-ui.page-programs .page-header-premium::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 3px !important;
    width: auto !important;
    background: linear-gradient(90deg,
        #f0267a 0%,
        #E8B63C 38%,
        #0E7C3A 72%,
        #355CFF 100%) !important;
    opacity: 0.92 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    display: block !important;
}

/* ---------- (58.4) Thin editorial left rule ---------- */
body.public-ui.page-programs .page-header-premium::after {
    content: '' !important;
    position: absolute !important;
    top: 18% !important;
    bottom: 22% !important;
    left: clamp(1rem, 2.5vw, 1.75rem) !important;
    right: auto !important;
    width: 2px !important;
    height: auto !important;
    background: linear-gradient(180deg,
        rgba(196, 69, 122, 0.55) 0%,
        rgba(196, 69, 122, 0.00) 100%) !important;
    border-radius: 2px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
    display: block !important;
}

/* ---------- (58.5) Dot-pattern overlay on the hero container ---------- */
body.public-ui.page-programs .page-header-premium > .container {
    position: relative;
    z-index: 1;
}
body.public-ui.page-programs .page-header-premium > .container::before {
    content: '';
    position: absolute;
    inset: -40px -20px 0 -20px;
    background-image:
        radial-gradient(rgba(196, 69, 122, 0.055) 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
body.public-ui.page-programs .page-header-premium > .container > * {
    position: relative;
    z-index: 1;
}

/* ---------- (58.6) Hero typography — pink eyebrow, navy headline ---------- */
body.public-ui.page-programs .page-header-premium .section-label {
    color: #B13269 !important;
    background: rgba(240, 38, 122, 0.09) !important;
    border: 1px solid rgba(196, 69, 122, 0.20) !important;
}
body.public-ui.page-programs .page-header-premium .section-label::before {
    background: #C4457A !important;
}
body.public-ui.page-programs .page-header-premium h1 {
    color: #1a2540 !important;
}
body.public-ui.page-programs .page-header-premium .page-header-copy,
body.public-ui.page-programs .page-header-premium p {
    color: #4A5366 !important;
}
body.public-ui.page-programs .page-header-premium .breadcrumb-item a {
    color: #C4457A !important;
}
body.public-ui.page-programs .page-header-premium .breadcrumb-item a:hover {
    color: #B13269 !important;
}
body.public-ui.page-programs .page-header-premium .breadcrumb-item.active {
    color: #1a2540 !important;
}

/* ---------- (58.7) Branch toggle pills — saturated pink active ---------- */
body.page-programs .branch-toggle-btn.active,
body.page-programs .branch-toggle-btn[aria-selected="true"] {
    background: linear-gradient(180deg,
        rgba(240, 38, 122, 0.12) 0%,
        rgba(196, 69, 122, 0.22) 100%) !important;
    color: #B13269 !important;
    border-color: rgba(196, 69, 122, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 0 0 1px rgba(196, 69, 122, 0.30),
        0 4px 12px -3px rgba(196, 69, 122, 0.32) !important;
    font-weight: 600 !important;
}
body.page-programs .branch-toggle-btn:hover:not(.active) {
    background: rgba(240, 38, 122, 0.06) !important;
    color: #B13269 !important;
    border-color: rgba(196, 69, 122, 0.22) !important;
}

/* ---------- (58.8) Category + service filter pills — saturated pink ---------- */
body.page-programs .category-filter-pill.active,
body.page-programs .category-filter-pill[aria-selected="true"],
body.page-programs .service-filter-pill.active,
body.page-programs .service-filter-pill[aria-selected="true"] {
    background: linear-gradient(180deg,
        rgba(240, 38, 122, 0.12) 0%,
        rgba(196, 69, 122, 0.22) 100%) !important;
    color: #B13269 !important;
    border-color: rgba(196, 69, 122, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 0 0 1px rgba(196, 69, 122, 0.30),
        0 4px 12px -3px rgba(196, 69, 122, 0.30) !important;
    font-weight: 600 !important;
}
body.page-programs .category-filter-pill.active .pill-badge,
body.page-programs .service-filter-pill.active .pill-badge {
    background: rgba(196, 69, 122, 0.18) !important;
    color: #B13269 !important;
}
body.page-programs .category-filter-pill:hover:not(.active),
body.page-programs .service-filter-pill:hover:not(.active) {
    background: rgba(240, 38, 122, 0.06) !important;
    color: #B13269 !important;
    border-color: rgba(196, 69, 122, 0.22) !important;
}

/* ---------- (58.9) Carousel nav buttons — pink hover / focus ---------- */
body.page-programs .carousel-nav,
body.page-programs .carousel-header-nav .carousel-nav {
    color: #B13269;
    border-color: rgba(196, 69, 122, 0.22);
    background: rgba(255, 255, 255, 0.92);
}
body.page-programs .carousel-nav:hover:not([disabled]),
body.page-programs .carousel-header-nav .carousel-nav:hover:not([disabled]),
body.page-programs .carousel-nav:focus-visible,
body.page-programs .carousel-header-nav .carousel-nav:focus-visible {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 100%);
    border-color: #B13269;
    color: #ffffff;
    box-shadow: 0 8px 20px -6px rgba(196, 69, 122, 0.36);
}

/* ---------- (58.10) Catalog group headers — pink eyebrow + navy title ---------- */
body.page-programs .catalog-group-header .section-label {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
    border: 1px solid rgba(196, 69, 122, 0.20);
}
body.page-programs .catalog-group-header .section-label::before {
    background: #C4457A;
}
body.page-programs .catalog-group-header h3,
body.page-programs .catalog-group-header h4,
body.page-programs .catalog-group-header .catalog-subheader-title {
    color: #1a2540;
}
body.page-programs .catalog-group-header p {
    color: #4A5366;
}
body.page-programs .catalog-group-header .carousel-hint {
    color: #C4457A;
}

/* ---------- (58.11) Section-tint band (behind branch toggle) — cream ---------- */
body.page-programs .section-tint {
    background: linear-gradient(180deg, #FDF9EF 0%, #FAF6EC 100%) !important;
}
body.page-programs .section-tint .text-muted {
    color: #4A5366 !important;
}
body.page-programs .section-tint .text-muted .bi {
    color: #C4457A;
}

/* ---------- (58.12) Bundle hero panel — light blush, navy text ---------- *
   Overrides the inline style= on line ~529 of programs.php via
   !important. The previous dark plum read too heavy next to the
   cream page; switch to a soft blush panel with a pink accent rule,
   navy body copy, and a pink h3 so it feels warm & premium without
   going dark.
 * ---------------------------------------------------------------- */
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] {
    position: relative;
    background: linear-gradient(135deg, #FFF5FA 0%, #FCE7F1 100%) !important;
    color: #1a2540 !important;                               /* dark navy body text */
    box-shadow:
        0 14px 36px -16px rgba(196, 69, 122, 0.22),
        0 2px 6px rgba(26, 37, 64, 0.04) !important;
    border: 1px solid rgba(196, 69, 122, 0.20) !important;
    overflow: hidden;
}

/* Pink accent left-rule inside the panel — matches the editorial hero rule */
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"]::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 60%, #B13269 100%);
    box-shadow: 0 4px 10px rgba(196, 69, 122, 0.35);
}

/* Headings — pink serif so the panel reads premium without dark chrome */
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] h3,
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] h4,
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] h5 {
    color: #B13269 !important;
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* Body copy — soft navy (not white) — readable on blush background */
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] p {
    color: rgba(26, 37, 64, 0.78) !important;
    opacity: 1 !important;
}

/* U.S.-only amber badge inside bundle panel — keep warm amber signal */
body.page-programs .catalog-group .premium-panel[style*="linear-gradient"] .badge.bg-warning {
    background: #E8B63C !important;
    color: #2a1213 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(212, 140, 0, 0.18) !important;
}

/* ---------- (58.13) U.S.-only notice panel (shown when PH branch active) ---------- */
body.page-programs .catalog-group-notice .premium-panel {
    background: #ffffff;
    border: 1px solid rgba(196, 69, 122, 0.18) !important;
    box-shadow: 0 8px 20px -6px rgba(196, 69, 122, 0.12);
}
body.page-programs .catalog-group-notice .premium-panel .bi-building {
    color: #C4457A !important;
}
body.page-programs .catalog-group-notice .premium-panel h5 {
    color: #1a2540;
}
body.page-programs .catalog-group-notice .premium-panel .btn-outline-primary {
    color: #C4457A;
    border-color: rgba(196, 69, 122, 0.35);
}
body.page-programs .catalog-group-notice .premium-panel .btn-outline-primary:hover,
body.page-programs .catalog-group-notice .premium-panel .btn-outline-primary:focus-visible {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 100%);
    border-color: #B13269;
    color: #ffffff;
}

/* ---------- (58.14) Expectations section — pink pillars ---------- */
body.page-programs .expectations-section .pillar-card {
    border-color: rgba(196, 69, 122, 0.14);
    box-shadow: 0 12px 28px -16px rgba(196, 69, 122, 0.18);
}
body.page-programs .expectations-section .pillar-card:hover {
    border-color: rgba(196, 69, 122, 0.30);
    box-shadow: 0 18px 36px -16px rgba(196, 69, 122, 0.28);
}
body.page-programs .expectations-section .pillar-icon {
    background: linear-gradient(135deg, rgba(240, 38, 122, 0.10), rgba(232, 182, 60, 0.08));
    color: #C4457A;
    border: 1px solid rgba(196, 69, 122, 0.18);
}
body.page-programs .expectations-section .row > [class*="col-"]:nth-child(2) .pillar-icon {
    background: linear-gradient(135deg, rgba(232, 182, 60, 0.14), rgba(240, 38, 122, 0.08));
    color: #B88A1A;
    border-color: rgba(232, 182, 60, 0.28);
}
body.page-programs .expectations-section .row > [class*="col-"]:nth-child(3) .pillar-icon {
    background: linear-gradient(135deg, rgba(196, 69, 122, 0.12), rgba(107, 24, 64, 0.06));
    color: #6B1840;
    border-color: rgba(107, 24, 64, 0.22);
}
body.page-programs .expectations-section .section-label {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
    border: 1px solid rgba(196, 69, 122, 0.20);
}
body.page-programs .expectations-section .section-label::before {
    background: #C4457A;
}
body.page-programs .expectations-section h2 {
    color: #1a2540;
}

/* ---------- (58.15) Program Package card — pink accents ---------- */
body.page-programs .program-package-card {
    border-color: rgba(196, 69, 122, 0.14);
    box-shadow:
        0 24px 48px -12px rgba(196, 69, 122, 0.16),
        0 8px 20px -6px rgba(0, 0, 0, 0.05);
}
body.page-programs .program-package-eyebrow {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
    border: 1px solid rgba(196, 69, 122, 0.20);
}
body.page-programs .program-package-eyebrow-mark {
    background: #C4457A;
}
body.page-programs .program-package-title {
    color: #1a2540;
}
body.page-programs .program-package-sub {
    color: #4A5366;
}
body.page-programs .program-package-mark {
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px -2px rgba(196, 69, 122, 0.30);
}
body.page-programs .program-package-divider {
    background: linear-gradient(90deg,
        rgba(196, 69, 122, 0.00) 0%,
        rgba(196, 69, 122, 0.28) 50%,
        rgba(196, 69, 122, 0.00) 100%);
}
body.page-programs .program-package-cta {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%);
    color: #ffffff;
    box-shadow:
        0 8px 20px -6px rgba(196, 69, 122, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
body.page-programs .program-package-cta:hover,
body.page-programs .program-package-cta:focus-visible {
    box-shadow:
        0 12px 28px -6px rgba(196, 69, 122, 0.52),
        0 4px 10px rgba(0, 0, 0, 0.10);
    color: #ffffff;
}

/* ---------- (58.16) "Take your career forward" section — pink accent ---------- */
body.page-programs .section-spacing .section-label {
    color: #B13269;
    background: rgba(240, 38, 122, 0.09);
    border: 1px solid rgba(196, 69, 122, 0.20);
}
body.page-programs .section-spacing .section-label::before {
    background: #C4457A;
}
body.page-programs .section-spacing h2 .text-accent {
    color: #C4457A !important;
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.page-programs .image-showcase-card {
    border: 1px solid rgba(196, 69, 122, 0.14);
    box-shadow:
        0 24px 48px -14px rgba(196, 69, 122, 0.18),
        0 8px 20px -6px rgba(0, 0, 0, 0.05);
}

/* ---------- (58.17) Responsive guards ---------- */
@media (max-width: 767.98px) {
    body.page-programs .page-header-premium::after {
        top: 14%;
        bottom: 14%;
        left: 0.9rem;
        width: 1.5px;
    }
    body.page-programs .page-header-premium > .container::before {
        background-size: 18px 18px;
    }
}

/* ---------- (58.18) Reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
    body.page-programs .expectations-section .pillar-card,
    body.page-programs .program-package-cta,
    body.page-programs .carousel-nav {
        transition: none !important;
    }
}

/* ============================================================
   END SECTION 58 — Our Catalog (programs.php) palette parity
   ============================================================ */


/* ============================================================
   SECTION 59 — CATALOG CARDS MIRROR COURSES-LINEUP-CARD
   --------------------------------------------------------------
   render_product_card() in programs.php now emits dual-classed
   markup: <div class="product-card courses-lineup-card ...">
   with courses-lineup-* children (eyebrow pill, availability
   chip, meta pill, price label+price row, courses-btn CTA).

   This section paints body.page-programs .courses-lineup-card
   with the SAME pink/cream look users already see on
   courses.php / pmhnp.php (via SECTIONS 54-55), plus neutralizes
   the legacy .product-card chrome (porcelain bg, heavy shadow,
   pink-amber rim ::before, big serif h5 rules) that would
   otherwise fight the new paint.

   Specificity strategy: body.public-ui.page-programs beats the
   body.public-ui .product-card rules at line 9014+ (0,4,1 vs 0,2,1).
   ============================================================ */

/* ---------------------------------------------------------------
   (1) Neutralize legacy .product-card chrome on the catalog page
   --------------------------------------------------------------- */
body.public-ui.page-programs .product-card.courses-lineup-card {
    /* Reset the porcelain-white + heavy shadow from SECTION around line 9014 */
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: none;
    overflow: visible;                     /* let the -12px badge stick out */
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Strip the legacy pink-to-amber ::before rim from product-card-featured
   (line 9136+) so only the new pink rim paints. */
body.public-ui.page-programs .product-card.courses-lineup-card::before {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* Kill the legacy pink serif h5 rule (line 9040+) — the card no
   longer renders an h5, but belt-and-suspenders. */
body.public-ui.page-programs .product-card.courses-lineup-card h5 {
    all: unset;
}

/* ---------------------------------------------------------------
   (2) Lineup card paint — pink border, white bg, hover lift
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-card {
    border: 1.5px solid rgba(196, 69, 122, 0.14);
}
body.page-programs .courses-lineup-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(196, 69, 122, 0.18);
    border-color: rgba(196, 69, 122, 0.28);
}

/* ---------------------------------------------------------------
   (3) Featured variant — thicker pink border + outer pink ring
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-card--featured {
    background: linear-gradient(180deg, #ffffff 0%, #FFF8FC 100%);
    border-color: rgba(240, 38, 122, 0.42);
    box-shadow:
        0 20px 40px -12px rgba(240, 38, 122, 0.18),
        0 0 0 3px rgba(240, 38, 122, 0.08);
}
body.page-programs .courses-lineup-card--featured:hover {
    box-shadow:
        0 24px 48px -12px rgba(240, 38, 122, 0.24),
        0 0 0 3px rgba(240, 38, 122, 0.12);
}

/* ---------------------------------------------------------------
   (4) "Most Popular" floating pink pill (top:-12px)
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-badge {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    background: linear-gradient(135deg, #f0267a 0%, #C4457A 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px -4px rgba(196, 69, 122, 0.45);
    border: none;
    z-index: 2;
}

/* ---------------------------------------------------------------
   (5) Category eyebrow — pink soft pill with icon
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B13269;
    background: rgba(240, 38, 122, 0.08);
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
body.page-programs .courses-lineup-eyebrow i {
    color: inherit;
}

/* ---------------------------------------------------------------
   (6) Title h3 — Playfair, navy, tight line-height
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-card h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
    line-height: 1.25;
}

/* ---------------------------------------------------------------
   (7) Availability chip — green / amber / blue by state
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-avail {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0.25rem 0 1rem;
    color: #1a1a2e;
    background: rgba(26, 26, 46, 0.04);
    border: 1px solid rgba(26, 26, 46, 0.07);
    white-space: nowrap;
    width: fit-content;
}
body.page-programs .courses-lineup-avail i { color: inherit; }
body.page-programs .courses-lineup-avail--avail-both {
    color: #0b6b3a;
    background: rgba(16, 122, 62, 0.08);
    border-color: rgba(16, 122, 62, 0.18);
}
body.page-programs .courses-lineup-avail--avail-us {
    color: #8b5a00;
    background: rgba(212, 140, 0, 0.09);
    border-color: rgba(212, 140, 0, 0.22);
}
body.page-programs .courses-lineup-avail--avail-ph {
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.18);
}
body.page-programs .courses-lineup-card > h3 + .courses-lineup-avail {
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------
   (8) Description paragraph
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4a4a5a;
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   (9) Delivery meta pill (grey, rounded, left-aligned)
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.25rem 0 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    background: rgba(15, 35, 65, 0.035);
    font-size: 0.85rem;
    color: var(--text-muted, #4d5769);
    width: fit-content;
}
body.page-programs .courses-lineup-meta i { color: #C4457A; }

/* ---------------------------------------------------------------
   (10) Price row — dashed-rule top/bottom, label+price layout
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px dashed rgba(196, 69, 122, 0.20);
    border-bottom: 1px dashed rgba(196, 69, 122, 0.20);
    margin-bottom: 1.25rem;
}
body.page-programs .courses-lineup-price-label {
    font-size: 0.82rem;
    color: #7a7a8a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
body.page-programs .courses-lineup-price-label small {
    font-size: 0.7rem;
    color: #9a9aac;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}
body.page-programs .courses-lineup-price {
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #C4457A;
    line-height: 1.1;
    text-align: right;
}
body.page-programs .courses-lineup-price .old-price {
    display: block;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #9a9aac;
    text-decoration: line-through;
    margin-bottom: 0.15rem;
}
body.page-programs .card-unavail-msg {
    flex-basis: 100%;
    margin-top: 0.35rem;
}

/* ---------------------------------------------------------------
   (11) Optional hero image (only when featured_image is set)
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-image {
    position: relative;
    /* 4:3 to match the master images uploaded under admin/products-edit.php. */
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    margin: -0.5rem 0 1.25rem;
    background: linear-gradient(135deg, #f5f7fb 0%, #e9eef5 100%);
    box-shadow:
        0 1px 0 rgba(15, 35, 65, 0.04),
        inset 0 0 0 1px rgba(15, 35, 65, 0.05);
}
body.page-programs .courses-lineup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
body.page-programs .courses-lineup-image:hover img {
    transform: scale(1.03);
}

/* ---------------------------------------------------------------
   (12) CTA buttons — pink primary gradient / pink outline
   --------------------------------------------------------------- */
body.page-programs .courses-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}
body.page-programs .courses-btn--primary {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%);
    color: #fff;
    box-shadow:
        0 8px 20px -6px rgba(196, 69, 122, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
body.page-programs .courses-btn--primary:hover,
body.page-programs .courses-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px -6px rgba(196, 69, 122, 0.52),
        0 4px 10px rgba(0, 0, 0, 0.10);
    color: #fff;
}
body.page-programs .courses-btn--outline {
    background: #fff;
    color: #C4457A;
    border-color: #C4457A;
}
body.page-programs .courses-btn--outline:hover,
body.page-programs .courses-btn--outline:focus-visible {
    background: #C4457A;
    color: #fff;
}
body.page-programs .courses-btn--disabled {
    background: #f1f1f4;
    color: #8a8a95;
    border-color: rgba(26, 26, 46, 0.08);
    cursor: not-allowed;
    box-shadow: none;
}
body.page-programs .courses-btn--disabled:hover {
    transform: none;
}

/* Stack CTA + view-details neatly in the card footer */
body.page-programs .courses-lineup-cta {
    margin-top: auto;            /* push CTA to the bottom regardless of copy length */
}

/* Cart form wrapper — make the form itself behave like a block CTA slot so
   the inner button hugs the card footer and the secondary enroll link stacks
   directly beneath without a gap. */
body.page-programs .course-card-cart-form.courses-lineup-cta {
    margin: 0;
    padding: 0;
    display: block;
}
body.page-programs .course-card-cart-form.courses-lineup-cta .courses-btn {
    margin: 0;
}

/* Secondary "Enroll Now" under the cart button — lighter visual weight so
   it reads as the alternate path ("or enroll with payment plan"). Shared
   across programs.php (catalog), courses.php (NCLEX), and pmhnp.php where
   the dual-CTA pattern appears. */
body.page-programs .courses-lineup-cta-secondary,
body.page-courses .courses-lineup-cta-secondary,
body.page-pmhnp .courses-lineup-cta-secondary {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-weight: 600;
}

/* Product details modal — secondary enroll CTA under the Add-to-Cart form.
   Sits globally (not body-scoped) since the modal is a single shared
   component and the class only appears inside #productDetailsModal. */
#productDetailsModal .modal-cta-secondary {
    font-size: 0.92rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   (13) "View Details" secondary link under the CTA
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-details-link,
body.page-programs .view-details-btn {
    background: none;
    border: 0;
    padding: 0.6rem 0.25rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #B13269;
    letter-spacing: 0.02em;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: color 0.2s ease;
}
body.page-programs .courses-lineup-details-link:hover,
body.page-programs .view-details-btn:hover,
body.page-programs .courses-lineup-details-link:focus-visible,
body.page-programs .view-details-btn:focus-visible {
    color: #f0267a;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(240, 38, 122, 0.5);
}

/* ---------------------------------------------------------------
   (14) Unavailable state — soften the card and grey the title
   --------------------------------------------------------------- */
body.page-programs .courses-lineup-card.card-unavailable {
    opacity: 0.72;
}
body.page-programs .courses-lineup-card.card-unavailable:hover {
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------
   (15) Responsive + reduced-motion guards
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.page-programs .courses-lineup-card {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    body.page-programs .courses-lineup-card h3 {
        font-size: 1.3rem;
    }
    body.page-programs .courses-lineup-price {
        font-size: 1.3rem;
    }
    body.page-programs .courses-lineup-meta {
        font-size: 0.8rem;
        gap: 0.35rem 0.75rem;
    }
}
@media (max-width: 575.98px) {
    body.page-programs .courses-lineup-avail {
        font-size: 0.72rem;
        padding: 0.22rem 0.55rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-programs .courses-lineup-card,
    body.page-programs .courses-lineup-card:hover,
    body.page-programs .courses-btn,
    body.page-programs .courses-btn:hover,
    body.page-programs .courses-lineup-image img,
    body.page-programs .courses-lineup-image:hover img {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   END SECTION 59 — Catalog cards mirror courses-lineup-card
   ============================================================ */

/* ============================================================
   SECTION 60 — Companion-book editorial section + featured-card palette fix
   Scope: body.page-courses (covers courses.php + pmhnp.php via body_class_extra)
   Fixes:
     (a) Companion book section on courses.php / pmhnp.php blends visually
         with the adjacent WHAT'S INSIDE block — add tint + rule.
     (b) Companion book title (product title from DB) renders oversized —
         clamp it below the hero-title scale so it reads as a section, not a banner.
     (c) "Who It's For" featured testimonial uses a deep-green gradient that
         clashes with the pink/plum/cream brand — repaint it in palette.
   ============================================================ */

/* (60.1) Companion book section — visual separation from adjacent sections */
body.page-courses .courses-companion-book {
    position: relative;
    background-color: #FBF7EE;
    background-image:
        radial-gradient(ellipse 620px 420px at 88% 8%, rgba(240, 38, 122, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 520px 380px at 6% 92%, rgba(107, 24, 64, 0.05) 0%, transparent 70%);
}

body.page-courses .courses-companion-book::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 82%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(196, 69, 122, 0.25) 20%,
        rgba(196, 69, 122, 0.45) 50%,
        rgba(196, 69, 122, 0.25) 80%,
        transparent 100%);
}

/* (60.2) Companion title — dial the serif down so it feels like a section header,
         not a display headline (product titles from DB can run long). */
body.page-courses .courses-companion-title {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
}

/* (60.3) Constrain the placeholder card so it visually balances
         the left column (otherwise it looks like a giant empty block). */
body.page-courses .courses-companion-book .courses-lineup-card--advanced {
    padding: 1.75rem 1.9rem;
    border: 1px solid rgba(196, 69, 122, 0.18);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5FA 100%);
    box-shadow: 0 18px 36px -16px rgba(196, 69, 122, 0.22);
}

body.page-courses .courses-companion-book .courses-lineup-card--advanced h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.4rem;
    color: #6B1840;
}

body.page-courses .courses-companion-book .courses-lineup-list li {
    color: #2a2a3a;
    padding: 0.45rem 0;
}

body.page-courses .courses-companion-book .courses-lineup-list i {
    color: #B13269;
}

/* (60.4) Who-It's-For: repaint the featured (middle) testimonial in palette.
         Overrides the default deep-green gradient from the base testimonials
         block. Uses the same pink→plum gradient as the primary CTA buttons. */
body.page-courses .courses-testimonial--featured {
    background: linear-gradient(180deg, #C4457A 0%, #6B1840 100%) !important;
    border-color: rgba(107, 24, 64, 0.40) !important;
    box-shadow: 0 22px 44px -14px rgba(107, 24, 64, 0.35),
                0 4px 10px rgba(107, 24, 64, 0.10) !important;
}

body.page-courses .courses-testimonial--featured::before {
    background: linear-gradient(180deg, #FFC98A, #E8B63C) !important;
}

body.page-courses .courses-testimonial--featured blockquote {
    color: #fff !important;
    border-left-color: rgba(255, 255, 255, 0.55) !important;
}

body.page-courses .courses-testimonial--featured figcaption strong {
    color: #FFE4BE !important;
}

body.page-courses .courses-testimonial--featured figcaption span {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* (60.5) Reduce redundant top-spacing when two .section-spacing
         blocks stack back-to-back (companion-book → what's-inside) so
         the join doesn't carry 6rem+6rem of vertical air. */
body.page-courses .courses-companion-book + .courses-inside-section {
    padding-top: clamp(2.5rem, 4vw, 4rem) !important;
}

/* ============================================================
   END SECTION 60 — Companion-book editorial + featured-card palette
   ============================================================ */

/* ============================================================
   SECTION 61 — Shop hub (/shop.php)
   Scope: body.page-shop (current_page='shop') — also pulls in
          body.page-courses styling via $body_class_extra='page-courses',
          so .courses-lineup-card, .courses-btn, .courses-hero all apply.
   Adds:
     (61.1) .shop-hero — center-stage tweaks on the courses-hero
     (61.2) .shop-chip-row / .shop-chip — pill filter (All/Books/…)
     (61.3) .shop-cover-placeholder — fallback "art" when featured_image is null
     (61.4) .shop-empty-state — per-category "Coming soon" block
     (61.5) .shop-product-card — compact tweaks for card density
     (61.6) Mobile overrides
   ============================================================ */

/* (61.1) Hero — center the stage (hero is already styled via .courses-hero) */
body.page-shop .shop-hero .courses-hero-inner {
    padding-top: clamp(3.5rem, 5vw, 5.5rem);
    padding-bottom: clamp(3rem, 4.5vw, 4.5rem);
}

body.page-shop .shop-hero .courses-trust-strip {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

body.page-shop .shop-hero .courses-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* (61.1b) Search bar — above the chips. Combines with the active chip
   via AND. Pink-aligned styling matches the chip palette so the two
   feel like one filter row. */
body.page-shop .shop-search-wrap {
    max-width: 640px;
    margin: 0 auto;
}
body.page-shop .shop-search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid rgba(196, 69, 122, 0.22);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(26, 37, 64, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.page-shop .shop-search-field:focus-within {
    border-color: rgba(196, 69, 122, 0.55);
    box-shadow: 0 0 0 4px rgba(196, 69, 122, 0.10),
                0 6px 14px -6px rgba(196, 69, 122, 0.25);
}
body.page-shop .shop-search-icon {
    color: #C4457A;
    font-size: 1.05rem;
    margin-left: 1.1rem;
    flex: 0 0 auto;
    pointer-events: none;
}
body.page-shop .shop-search-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.85rem 0.75rem 0.85rem 0.6rem;
    font-size: 1rem;
    color: #1d2a3a;
    border-radius: 999px;
}
body.page-shop .shop-search-input::placeholder {
    color: #8a98ad;
}
/* Hide the default Webkit/Edge ✕ inside type=search — we render our own. */
body.page-shop .shop-search-input::-webkit-search-decoration,
body.page-shop .shop-search-input::-webkit-search-cancel-button,
body.page-shop .shop-search-input::-webkit-search-results-button,
body.page-shop .shop-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
body.page-shop .shop-search-clear {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border: 0;
    background: rgba(196, 69, 122, 0.08);
    color: #6B1840;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
body.page-shop .shop-search-clear:hover {
    background: rgba(196, 69, 122, 0.16);
}
body.page-shop .shop-search-summary {
    text-align: center;
}

/* (61.2) Chip row — pill buttons, pink-active, count badge */
body.page-shop .shop-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin: 1.25rem auto 1.75rem;
    max-width: 900px;
}

body.page-shop .shop-chip {
    --chip-bg:     #FFFFFF;
    --chip-border: rgba(196, 69, 122, 0.22);
    --chip-color:  #6B1840;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--chip-bg);
    color: var(--chip-color);
    border: 1.5px solid var(--chip-border);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-shadow: 0 1px 3px rgba(26, 37, 64, 0.04);
    white-space: nowrap;
}

body.page-shop .shop-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(196, 69, 122, 0.45);
    box-shadow: 0 6px 14px -6px rgba(196, 69, 122, 0.25);
}

body.page-shop .shop-chip.active,
body.page-shop .shop-chip[aria-selected="true"] {
    --chip-bg:     linear-gradient(135deg, #C4457A 0%, #6B1840 100%);
    --chip-border: #6B1840;
    --chip-color:  #FFFFFF;
    background: var(--chip-bg);
    color: var(--chip-color);
    border-color: var(--chip-border);
    box-shadow: 0 10px 22px -10px rgba(107, 24, 64, 0.45);
}

body.page-shop .shop-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(196, 69, 122, 0.10);
    color: #6B1840;
    letter-spacing: 0;
}

body.page-shop .shop-chip.active .shop-chip-count,
body.page-shop .shop-chip[aria-selected="true"] .shop-chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* (61.3) Cover placeholder — used when featured_image is null.
   Aspect locked to 4:3 so a placeholder card and a real-image card
   align perfectly side-by-side in the shop grid. */
body.page-shop .shop-cover-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    color: #FFFFFF;
    text-align: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #FBE7F1 0%, #F5D5E5 100%);
    color: #6B1840;
    border: 1px solid rgba(196, 69, 122, 0.18);
}

body.page-shop .shop-cover-placeholder i {
    font-size: 2.8rem;
    line-height: 1;
    opacity: 0.85;
}

body.page-shop .shop-cover-placeholder-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6B1840;
    opacity: 0.85;
}

/* Category-specific placeholder tints */
body.page-shop .shop-cover--books        { background: linear-gradient(135deg, #FBE7F1 0%, #F5D5E5 100%); color: #6B1840; }

/* (61.4) Empty-state — shown by JS when a filtered category has 0 items */
body.page-shop .shop-empty-state {
    padding: 2.5rem 1rem;
}

body.page-shop .shop-empty-state[hidden] {
    display: none !important;
}

body.page-shop .shop-empty-state-inner {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
    padding: 2.75rem 1.75rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5FA 100%);
    border: 1px dashed rgba(196, 69, 122, 0.35);
    border-radius: 14px;
    box-shadow: 0 14px 32px -18px rgba(196, 69, 122, 0.22);
}

body.page-shop .shop-empty-state-inner i {
    font-size: 2.6rem;
    color: #C4457A;
    display: block;
    margin-bottom: 0.75rem;
}

body.page-shop .shop-empty-state-inner h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.6rem;
    color: #6B1840;
    margin: 0 0 0.5rem;
}

body.page-shop .shop-empty-state-inner p {
    color: #4a4a5a;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

/* (61.5) Product-card compacting — shop grid is denser than the course grid */
body.page-shop .shop-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.page-shop .shop-product-card > a.courses-btn,
body.page-shop .shop-product-card .shop-card-ctas {
    margin-top: auto;            /* pin CTA to bottom so cards align across the row */
}

body.page-shop .shop-card-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

body.page-shop .shop-card-quickadd-form {
    margin: 0;
}

body.page-shop .shop-card-add-cart-btn {
    justify-content: center;
}

body.page-shop .shop-card-secondary-link {
    color: #6B1840;
    font-size: 0.88rem;
}

body.page-courses .course-card-cart-form {
    margin: 0;
}

body.page-courses .course-card-cart-form .courses-btn {
    justify-content: center;
}

body.page-shop .shop-product-card .courses-lineup-price-label {
    font-size: 0.75rem;
    color: #6a6a7a;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-shop .shop-product-card .courses-lineup-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #2a2a3a;
}

/* (61.6) Featured row — subtle visual lift on the whole band */
body.page-shop .shop-featured {
    background:
        radial-gradient(ellipse 720px 420px at 88% 8%, rgba(240, 38, 122, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 540px 380px at 6% 92%, rgba(232, 182, 60, 0.09) 0%, transparent 70%);
}

body.page-shop .shop-featured .courses-lineup-badge {
    background: linear-gradient(135deg, #E8B63C 0%, #C48A1C 100%);
    color: #2a1f00;
    box-shadow: 0 6px 14px -6px rgba(196, 138, 28, 0.55);
}

/* (61.7) Mobile overrides */
@media (max-width: 575.98px) {
    body.page-shop .shop-chip {
        font-size: 0.88rem;
        padding: 0.5rem 0.9rem;
    }
    body.page-shop .shop-chip-row {
        gap: 0.4rem;
    }
    body.page-shop .shop-cover-placeholder {
        aspect-ratio: 4 / 3;
    }
    body.page-shop .shop-cover-placeholder i {
        font-size: 2.2rem;
    }
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    body.page-shop .shop-chip,
    body.page-shop .shop-chip:hover {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   END SECTION 61 — Shop hub (/shop.php)
   ============================================================ */

/* ============================================================
   SECTION 62 — Product detail page (/product.php)
   Scope: body.page-shop (current_page='shop' on product.php)
   Components:
     (62.1) Breadcrumb row
     (62.2) Gallery (main + thumbnails)
     (62.3) Buy panel (title, price, availability, variants, qty, CTA)
     (62.4) Size pills / color swatches
     (62.5) Quantity stepper
     (62.6) Trust strip + SKU
     (62.7) Long-description section
     (62.8) Related products row
     (62.9) Shop card clickable title/image affordances
     (62.10) Mobile overrides
   ============================================================ */

/* (62.1) Breadcrumb */
body.page-shop .product-breadcrumb-section {
    padding: 1.25rem 0 0.25rem;
    background: transparent;
}

body.page-shop .product-breadcrumb .breadcrumb {
    font-size: 0.86rem;
    color: #6a6a7a;
    padding: 0;
    margin: 0;
    background: transparent;
}

body.page-shop .product-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: rgba(196, 69, 122, 0.45);
    padding: 0 0.4rem;
}

body.page-shop .product-breadcrumb a {
    color: #6B1840;
    text-decoration: none;
    font-weight: 500;
}

body.page-shop .product-breadcrumb a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(196, 69, 122, 0.55);
}

body.page-shop .product-breadcrumb .breadcrumb-item.active {
    color: #2a2a3a;
    font-weight: 600;
}

/* (62.2) Detail section wrapper */
body.page-shop .product-detail-section {
    padding: 1.5rem 0 clamp(3rem, 5vw, 5rem);
}

/* (62.2) Gallery — main image */
body.page-shop .product-gallery-main {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5FA 100%);
    border: 1px solid rgba(196, 69, 122, 0.14);
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 48px -24px rgba(107, 24, 64, 0.22);
}

body.page-shop .product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.5rem;
    transition: transform 0.35s ease;
}

body.page-shop .product-gallery-main:hover img {
    transform: scale(1.02);
}

/* Placeholder inside main gallery */
body.page-shop .product-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
    padding: 2rem;
    color: #6B1840;
}

body.page-shop .product-gallery-placeholder i {
    font-size: 5rem;
    opacity: 0.85;
}

body.page-shop .product-gallery-placeholder-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.80;
}

/* Bucket-specific tints for placeholder */
body.page-shop .product-gallery-placeholder--books       { background: linear-gradient(135deg, #FBE7F1 0%, #F5D5E5 100%); color: #6B1840; }

/* (62.2) Gallery — thumbnail strip */
body.page-shop .product-gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

body.page-shop .product-gallery-thumb {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    padding: 0;
    background: #FFFFFF;
    border: 2px solid rgba(196, 69, 122, 0.14);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.page-shop .product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-shop .product-gallery-thumb:hover {
    border-color: rgba(196, 69, 122, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(196, 69, 122, 0.30);
}

body.page-shop .product-gallery-thumb.active,
body.page-shop .product-gallery-thumb[aria-selected="true"] {
    border-color: #C4457A;
    box-shadow: 0 0 0 3px rgba(196, 69, 122, 0.20);
}

/* (62.3) Buy panel */
body.page-shop .product-buy-panel {
    position: sticky;
    top: 100px;
    background: #FFFFFF;
    border: 1px solid rgba(196, 69, 122, 0.14);
    border-radius: 18px;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    box-shadow: 0 24px 48px -24px rgba(107, 24, 64, 0.18);
}

body.page-shop .product-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C4457A;
    background: rgba(240, 38, 122, 0.08);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

body.page-shop .product-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    color: #1a1a2e;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

body.page-shop .product-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

body.page-shop .product-price-main {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.75rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: #6B1840;
    line-height: 1;
}

body.page-shop .product-price-sub {
    font-size: 0.95rem;
    color: #6a6a7a;
}

body.page-shop .product-price-sub strong {
    color: #1a2540;
}

/* Discount state on the product detail page price row. */
body.page-shop .product-price-row.has-discount {
    align-items: center;
}
body.page-shop .product-price-original {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #b3becd;
    text-decoration: line-through;
    text-decoration-color: rgba(196, 69, 122, 0.6);
    text-decoration-thickness: 2px;
}
body.page-shop .product-price-main.has-sale {
    color: #C4457A;
}
body.page-shop .product-price-sale-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #C4457A 0%, #6B1840 100%);
    color: #FFFFFF;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    text-transform: uppercase;
}

body.page-shop .product-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

body.page-shop .product-stock-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

body.page-shop .product-stock-chip--in {
    background: rgba(14, 124, 58, 0.10);
    color: #0E7C3A;
    border: 1px solid rgba(14, 124, 58, 0.25);
}

body.page-shop .product-stock-chip--out {
    background: rgba(200, 40, 40, 0.08);
    color: #B42323;
    border: 1px solid rgba(200, 40, 40, 0.25);
}

body.page-shop .product-short-desc {
    color: #2a2a3a;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* (62.4) Variant groups */
body.page-shop .product-variant-group {
    margin-bottom: 1.25rem;
}

body.page-shop .product-variant-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}

body.page-shop .product-variant-value {
    font-weight: 500;
    color: #6a6a7a;
    text-transform: none;
    letter-spacing: 0;
}

body.page-shop .product-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Size pill */
body.page-shop .product-size-pill {
    min-width: 2.75rem;
    padding: 0.55rem 0.9rem;
    background: #FFFFFF;
    color: #1a1a2e;
    border: 1.5px solid rgba(26, 26, 46, 0.18);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.page-shop .product-size-pill:hover {
    border-color: rgba(196, 69, 122, 0.55);
    transform: translateY(-1px);
}

body.page-shop .product-size-pill.selected {
    background: linear-gradient(135deg, #C4457A 0%, #6B1840 100%);
    color: #FFFFFF;
    border-color: #6B1840;
    box-shadow: 0 6px 14px -6px rgba(107, 24, 64, 0.45);
}

/* Color swatch */
body.page-shop .product-color-swatch {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 50%;
    background: var(--swatch-color, #ccc);
    border: 2px solid #FFFFFF;
    outline: 1.5px solid rgba(26, 26, 46, 0.18);
    outline-offset: 0;
    cursor: pointer;
    transition: transform 0.15s ease, outline-color 0.15s ease, outline-offset 0.15s ease;
}

body.page-shop .product-color-swatch:hover {
    transform: scale(1.08);
    outline-color: rgba(196, 69, 122, 0.55);
}

body.page-shop .product-color-swatch.selected {
    outline: 2.5px solid #C4457A;
    outline-offset: 2px;
    box-shadow: 0 6px 12px -4px rgba(196, 69, 122, 0.35);
}

/* (62.5) Quantity stepper */
body.page-shop .product-qty-group {
    margin-bottom: 1.5rem;
}

body.page-shop .product-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid rgba(26, 26, 46, 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

body.page-shop .product-qty-btn {
    width: 2.75rem;
    background: #F8F6F0;
    color: #1a1a2e;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

body.page-shop .product-qty-btn:hover {
    background: rgba(196, 69, 122, 0.10);
    color: #6B1840;
}

body.page-shop .product-qty-input {
    width: 3.75rem;
    padding: 0.55rem 0.5rem;
    text-align: center;
    border: none;
    border-left: 1px solid rgba(26, 26, 46, 0.12);
    border-right: 1px solid rgba(26, 26, 46, 0.12);
    font-weight: 600;
    color: #1a1a2e;
    background: #FFFFFF;
    -moz-appearance: textfield;
}

body.page-shop .product-qty-input::-webkit-outer-spin-button,
body.page-shop .product-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* (62.3) CTA disabled state */
body.page-shop .product-order-cta.disabled,
body.page-shop .product-order-cta[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* (62.6) Trust strip + SKU */
body.page-shop .product-trust-strip {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid rgba(26, 26, 46, 0.08);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: #4a4a5a;
}

body.page-shop .product-trust-strip li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

body.page-shop .product-trust-strip i {
    color: #C4457A;
    font-size: 1rem;
}

body.page-shop .product-sku {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: #8a8a98;
    letter-spacing: 0.04em;
}

body.page-shop .product-sku code {
    background: rgba(196, 69, 122, 0.08);
    color: #6B1840;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* (62.7) Long description */
body.page-shop .product-long-desc p {
    color: #2a2a3a;
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0 0 1.15rem;
}

body.page-shop .product-delivery-note {
    background: rgba(196, 69, 122, 0.06);
    border: 1px solid rgba(196, 69, 122, 0.18);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    color: #6B1840;
    font-size: 0.95rem;
}

/* (62.8) Related products row */
body.page-shop .product-related-section .shop-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.page-shop .product-related-section .shop-product-card > a.courses-btn {
    margin-top: auto;
}

body.page-shop .product-related-imglink,
body.page-shop .product-related-titlelink {
    color: inherit;
    text-decoration: none;
    display: block;
}

body.page-shop .product-related-titlelink:hover {
    color: #C4457A;
}

/* (62.9) Shop card clickable title/image affordances (shop.php) */
body.page-shop .shop-card-imglink,
body.page-shop .shop-card-titlelink {
    color: inherit;
    text-decoration: none;
    display: block;
}

body.page-shop .shop-card-titlelink:hover {
    color: #C4457A;
    text-decoration: none;
}

/* Shop cards with a real featured_image: lock the container to 4:3 so the
   master images (all uploaded at 4:3 under admin/products-edit.php) cover
   cleanly. The placeholder rule above (.shop-cover-placeholder) is also 4:3
   so real-image and placeholder cards align side-by-side in the grid. */
body.page-shop .shop-card-imglink .courses-lineup-image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #FBE7F1 0%, #F5D5E5 100%);
    transition: transform 0.25s ease;
}
body.page-shop .shop-card-imglink .courses-lineup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-shop .shop-card-imglink:hover .courses-lineup-image {
    transform: scale(1.015);
}

/* (62.10) Mobile overrides */
@media (max-width: 991.98px) {
    body.page-shop .product-buy-panel {
        position: static;       /* no sticky on narrow viewports */
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    body.page-shop .product-gallery-thumb {
        width: 64px;
        height: 64px;
    }
    body.page-shop .product-price-main {
        font-size: 1.85rem;
    }
    body.page-shop .product-trust-strip {
        font-size: 0.82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-shop .product-gallery-main img,
    body.page-shop .product-gallery-thumb,
    body.page-shop .product-size-pill,
    body.page-shop .product-color-swatch,
    body.page-shop .shop-card-imglink .courses-lineup-image {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   END SECTION 62 — Product detail page (/product.php)
   ============================================================ */


/* ============================================================
   SECTION 63 — LEADER SPOTLIGHTS (about page)
   Full-width two-column "letter from the leader" treatment for
   the executive leadership section. Replaces the old cramped
   two-card grid with alternating photo/body blocks — photo on
   one side, body on the other, reversed for the second leader.
   Scope: body.page-about .leadership-section-premium only.
   HTML: .leader-spotlights > .leader-spotlight (+ -reversed)
         > .leader-spotlight-grid
           > .leader-spotlight-media > .leader-spotlight-photo > img
           > .leader-spotlight-body (badge, name, credentials,
             experience, blockquote, copy paragraphs)
   ============================================================ */
body.page-about .leader-spotlights {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 6vw, 6rem);
}
body.page-about .leader-spotlight {
    position: relative;
}
body.page-about .leader-spotlight-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
}
body.page-about .leader-spotlight-reversed .leader-spotlight-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
body.page-about .leader-spotlight-reversed .leader-spotlight-media {
    order: 2;
}
body.page-about .leader-spotlight-reversed .leader-spotlight-body {
    order: 1;
}

/* Photo frame — big, premium, rounded, with accent top-bar and soft shadow */
body.page-about .leader-spotlight-photo {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--qcp-canvas-deep);
    box-shadow:
        0 2px 4px rgba(30,42,58,0.06),
        0 50px 100px -40px rgba(30,42,58,0.28);
    border: 1px solid var(--qcp-border);
    isolation: isolate;
}
body.page-about .leader-spotlight-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}
body.page-about .leader-spotlight-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--qcp-blue), rgba(53,92,255,0));
    z-index: 2;
}
body.page-about .leader-spotlight-photo-green::before {
    background: linear-gradient(90deg, var(--qcp-green-deep), rgba(169,216,78,0));
}
/* Subtle decorative offset-frame behind the photo */
body.page-about .leader-spotlight-photo::after {
    content: '';
    position: absolute;
    inset: 14px 14px 14px 14px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 18px;
    pointer-events: none;
    z-index: 1;
}

/* Body typography */
body.page-about .leader-spotlight-body {
    display: flex;
    flex-direction: column;
}
body.page-about .leader-spotlight-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 1.15rem;
    line-height: 1;
}
body.page-about .leader-spotlight-badge-blue {
    color: var(--qcp-blue-deep);
    background: var(--qcp-blue-tint);
}
body.page-about .leader-spotlight-badge-green {
    color: var(--qcp-green-deep);
    background: rgba(169,216,78,0.18);
}
body.page-about .leader-spotlight-name {
    font-family: var(--qcp-display);
    font-size: clamp(1.85rem, 2.8vw, 2.6rem);
    font-weight: 600;
    color: var(--qcp-text);
    margin: 0 0 0.85rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
}
body.page-about .leader-spotlight-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
body.page-about .leader-spotlight-credentials span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.7rem;
    background: var(--qcp-paper);
    color: var(--qcp-text);
    border: 1px solid var(--qcp-border);
    border-radius: 999px;
    line-height: 1;
}
body.page-about .leader-spotlight-role {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--qcp-blue-deep);
    margin: 0 0 0.9rem;
    letter-spacing: 0.01em;
}
body.page-about .leader-spotlight-reversed .leader-spotlight-role {
    color: var(--qcp-green-deep);
}
body.page-about .leader-spotlight-experience {
    font-size: 0.92rem;
    color: var(--qcp-text-mid);
    margin-bottom: 1.3rem;
    font-weight: 500;
}
body.page-about .leader-spotlight-experience i {
    color: var(--qcp-blue);
}
body.page-about .leader-spotlight-reversed .leader-spotlight-experience i {
    color: var(--qcp-green-deep);
}
body.page-about .leader-spotlight-quote {
    position: relative;
    padding: 1.15rem 1.35rem;
    margin: 0 0 1.6rem;
    background: linear-gradient(180deg, rgba(53,92,255,0.06), rgba(53,92,255,0));
    border-left: 3px solid var(--qcp-blue);
    border-radius: 0 14px 14px 0;
    font-family: var(--qcp-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.35vw, 1.25rem);
    color: var(--qcp-text);
    line-height: 1.55;
    font-weight: 500;
}
body.page-about .leader-spotlight-reversed .leader-spotlight-quote {
    background: linear-gradient(180deg, rgba(169,216,78,0.12), rgba(169,216,78,0));
    border-left-color: var(--qcp-green-deep);
}
body.page-about .leader-spotlight-copy p {
    color: var(--qcp-text-soft);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.05rem;
}
body.page-about .leader-spotlight-copy p:last-child {
    margin-bottom: 0;
}

/* Responsive — tablet + mobile stack the grid vertically */
@media (max-width: 991.98px) {
    body.page-about .leader-spotlight-grid,
    body.page-about .leader-spotlight-reversed .leader-spotlight-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    body.page-about .leader-spotlight-reversed .leader-spotlight-media {
        order: 0;
    }
    body.page-about .leader-spotlight-reversed .leader-spotlight-body {
        order: 0;
    }
    body.page-about .leader-spotlight-photo {
        aspect-ratio: 4 / 4.3;
        max-width: 520px;
        margin: 0 auto;
    }
    body.page-about .leader-spotlights {
        gap: clamp(3rem, 8vw, 4.5rem);
    }
}
@media (max-width: 575.98px) {
    body.page-about .leader-spotlight-photo {
        aspect-ratio: 4 / 5;
        border-radius: 22px;
    }
    body.page-about .leader-spotlight-photo::after {
        inset: 10px;
        border-radius: 14px;
    }
    body.page-about .leader-spotlight-quote {
        padding: 1rem 1.15rem;
    }
}
/* ============================================================
   END SECTION 63 — Leader spotlights
   ============================================================ */

/* ============================================================
   SECTION 64 — Home hero: FULL-BLEED heart video + logo stamp
   ------------------------------------------------------------
   Three concerns:

   1) HEIGHT — the base .hero-qcp declared min-height up to 920px
      + 140px bottom padding = ~1060px, pushing the navbar off
      the fold on standard laptop viewports. Ratcheted down the
      full responsive ladder so navbar + topbar + hero + proof
      bar all sit inside 768-900px of vertical space.

   2) FULL-BLEED VIDEO — one element, 100% wide, covers the
      entire hero. No left-half canvas, no split. The 1920x1080
      heart-arc source fits via object-fit:cover; at shorter
      hero heights the video crops top/bottom but the heart
      (vertically centered in the source) stays on-screen.

   3) LOGO STAMP — centered over the heart on desktop/tablet,
      static-stacked on phones where the video is hidden. Fades
      in on the video's `ended` event.

   The video is tinted with a soft ivory wash on the left third
   only, so the hero copy (white on-video) stays legible without
   covering the heart itself.
   ============================================================ */

/* --- 1. Responsive height ladder (fits in ONE viewport everywhere) ---
   The base .hero-qcp (line 9457) declared padding: clamp(5rem,10vh,8rem) 0
   clamp(7.5rem,13vh,10rem) — ~128px top + ~160px bottom. Its min-height
   also went up to 900px. Combined with the huge base headline
   (clamp(3.4rem,7.5vw,6.6rem)), the hero alone was 900-1100px tall —
   taller than a laptop viewport on its own.

   This override pulls everything down hard. Targets:
     1366x768  → 768 - ~85 browser-chrome - ~45 topbar - ~86 navbar = 552 for hero
     1920x900  → ~770 for hero
     1920x1080 → ~935 for hero
   We design to the 552 target and let the larger screens have extra air.
*/
body.page-home .hero-qcp {
    /* Full photo aspect — shows the WHOLE scene uncropped (skyline, books,
       scrubs, mug, notebook, pen). Height scales with width; the trust strip
       sits just below the fold (intentional — full image over fold-fit). */
    aspect-ratio: 1768 / 889;
    min-height: 0;
    /* Bottom reserve for the absolute-positioned proof-bar. */
    padding: clamp(1.25rem, 2.2vh, 2rem) 0 6.5rem;
}
body.page-home .hero-qcp-container {
    padding-top: clamp(0.5rem, 1vh, 1rem);
    padding-bottom: clamp(0.5rem, 1vh, 1rem);
    /* Pass 28c: align the lede plate's left edge with the wide trust
       strip below. Trust strip uses width: calc(100% - clamp(1rem, 2vw, 2rem))
       — match that exactly so both bands start at the same x-coordinate.
       Old behavior pinned the container to Bootstrap widths
       (540/720/960/1140/1320), which left the lede ~50px inset from the
       trust strip's left edge after the trust strip went edge-to-edge. */
    max-width: none !important;
    width: calc(100% - clamp(1rem, 2vw, 2rem));
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Pin the lede plate to the left edge of the container so the
       headline starts right above the leftmost trust signal. */
    align-items: flex-start;
}
/* The old narrower-Bootstrap caps below were intentionally removed in
   Pass 28c so the hero container stays edge-to-edge at every desktop
   width, matching the trust strip. */
/* Pass 28c: editorial-scale lede plate — taller, roomier so the
   3-line headline sits inside a properly-proportioned white card.
   Was clamp(1rem, 1.8vw, 1.5rem) padding, gap 0.85rem; bumped to
   ~2.5rem padding and 1.2rem gap for an editorial feel. */
body.page-home .hero-qcp-lede {
    max-width: min(40rem, 60vw);
    padding: clamp(1.75rem, 2.6vw, 2.6rem) clamp(1.5rem, 2.4vw, 2.2rem) !important;
    gap: clamp(0.85rem, 1.4vh, 1.25rem) !important;
    border-radius: 16px !important;
}
/* Pass 28b: editorial-scale headline — sized to spill over the plant
   in the hero background like the reference design. Caps almost
   doubled from the previous baseline (2rem→3.6rem → 3.4rem→7.2rem). */
body.page-home .hero-qcp-headline {
    font-size: clamp(3.4rem, 7.5vw, 7.2rem) !important;
    line-height: 1.0 !important;
    max-width: none;
}
body.page-home .hero-qcp-sub {
    font-size: clamp(1.05rem, 1.2vw, 1.2rem) !important;
    line-height: 1.5 !important;
}
body.page-home .hero-qcp-eyebrow {
    font-size: 0.92rem !important;
    letter-spacing: 0.24em !important;
    padding-bottom: 0.2rem !important;
}
body.page-home .hero-qcp-actions {
    gap: 0.85rem !important;
    margin-top: 0.55rem !important;
}
/* Lede plate widens so the bigger headline has room to breathe. */
body.page-home .hero-qcp-lede {
    max-width: 920px !important;
}

/* Short-laptop viewports (1366x768, 1440x900). */
@media (max-height: 820px) and (min-width: 992px) {
    body.page-home .hero-qcp {
        padding: 0.75rem 0 6rem;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(3rem, 6vw, 5.6rem) !important;
    }
    body.page-home .hero-qcp-lede {
        padding: 1rem 1.2rem !important;
        gap: 0.6rem !important;
    }
    body.page-home .hero-qcp-sub {
        font-size: 1rem !important;
    }
}

/* Tablet (≤991). */
@media (max-width: 991.98px) {
    body.page-home .hero-qcp {
        aspect-ratio: auto;
        padding: 1rem 0 clamp(5.5rem, 14vh, 11rem);
        min-height: 0;
    }
    body.page-home .hero-qcp-container {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        max-width: 720px;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(2.8rem, 7vw, 4.4rem) !important;
    }
    body.page-home .hero-qcp-lede {
        max-width: 100% !important;
    }
    body.page-home .hero-qcp-bg-image {
        object-position: center 70%;
    }
}
@media (max-width: 767.98px) {
    body.page-home .hero-qcp-container { max-width: 540px; }
}
/* Phone (≤575): proof card unpins and natural-flows below the hero. */
@media (max-width: 575.98px) {
    body.page-home .hero-qcp {
        aspect-ratio: auto;
        padding: 0.5rem 0 0;
        min-height: 0;
    }
    body.page-home .hero-qcp-container {
        max-width: 100%;
        padding: 1rem 0.75rem 1.25rem !important;
    }
    body.page-home .hero-qcp-lede {
        max-width: 100% !important;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(2.4rem, 10vw, 3.6rem) !important;
    }
}

/* --- 2. Image: FULL-BLEED hero background ---
   <img class="hero-qcp-bg-image"> replaces the earlier heart-arc video.
   It's a bright Chicago-skyline study-desk photograph (~3300x1700, JPG-
   sized PNG), composed with the open sky + water on the LEFT and the
   branded books/scrubs/notebook on the RIGHT — so the lede plate (left-
   anchored) sits over a calmer zone and the USN-branded objects stay
   visible on the right.

   The hero base used a dark navy fallback background; we keep the ivory
   canvas override so the page blends cleanly if the image fails to load. */
body.page-home .hero-qcp {
    background: var(--qcp-canvas) !important;
}
body.page-home .hero-qcp-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    /* No filter — natural daylight colors read best on this photo. */
    filter: none;
    transform: none;
}

/* --- 3. Left-biased readability veil ---
   The image is bright and busy on the left (sky + windows). The lede
   plate has its own backdrop-blur but gets an extra boost from a soft
   white wash that fades to transparent past the lede's right edge,
   leaving the branded books/scrubs/notebook visible unobstructed on
   the right. Tint + vignette disabled. */
body.page-home .hero-qcp-tint,
body.page-home .hero-qcp-vignette {
    display: none !important;
}
body.page-home .hero-qcp-veil {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.38) 20%,
            rgba(255, 255, 255, 0.18) 40%,
            rgba(255, 255, 255, 0.00) 58%,
            rgba(255, 255, 255, 0.00) 100%);
}
@media (max-width: 991.98px) {
    /* Tablet: stronger veil since the lede stretches wider relative
       to the image, and the text overlays more of the photo. */
    body.page-home .hero-qcp-veil {
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.72) 0%,
                rgba(255, 255, 255, 0.52) 35%,
                rgba(255, 255, 255, 0.22) 65%,
                rgba(255, 255, 255, 0.00) 100%);
    }
}
@media (max-width: 575.98px) {
    /* Phone: lede runs full-width, so apply a near-opaque vertical
       wash the copy can sit on top of. */
    body.page-home .hero-qcp-veil {
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.80) 0%,
                rgba(255, 255, 255, 0.60) 60%,
                rgba(255, 255, 255, 0.40) 100%);
    }
}

/* --- 4. Heart-stamp overlay — REMOVED.
   Obsolete as of the image swap. The heart-arc video and its
   CSS-overlay stamp have both been retired in favor of the static
   hero-study-chicago.webp hero image. */

/* --- 5. Trust strip (ANA Accredited / 99% NCLEX … etc) spacing ---
   Previously added a big margin-top to "lower" the strip, which
   created dead whitespace between the hero's bottom edge and the
   strip. Pulled that margin back to 0 and also reduced the hero's
   padding-bottom reserve (block 6 below) so the proof-bar sits
   right at the hero's bottom edge with no leftover image below it. */
body.page-home .trust-strip {
    margin-top: 0 !important;
    padding-top: clamp(1.25rem, 2vw, 1.75rem) !important;
    padding-bottom: clamp(1.25rem, 2vw, 1.75rem) !important;
}

/* --- 6. Tighten hero padding-bottom + proof-bar offset ---
   Base .hero-qcp padding-bottom was 8rem (128px) and .hero-qcp-proofbar
   was pinned at bottom:32px. That left 32px of image visible below
   the proof-bar (dead space). Pull the proof-bar down to 12px and
   reduce the reserve to 6.5rem so the hero ends right at the
   bar's lower edge with ~12px of padding, not 32px. */
body.page-home .hero-qcp {
    padding-bottom: 6.5rem !important;  /* was 8rem — saves 24px below the bar */
}
body.page-home .hero-qcp-proofbar {
    bottom: 12px !important;             /* was 32px — saves 20px below the bar */
    /* Pass 28b: trust strip stretches edge-to-edge instead of being capped
       at the Bootstrap .container content width. Width formula matches the
       base rule at the top of this file: viewport minus a small gutter. */
    max-width: none !important;
    width: calc(100% - clamp(1rem, 2vw, 2rem)) !important;
}
/* The 1399 / 1199 caps were intentionally removed in Pass 28b — at every
   viewport above tablet, the strip should now span nearly the full width. */
@media (max-width: 991.98px) {
    body.page-home .hero-qcp {
        /* Tablet: proof-bar re-stacks 2x2, so it's ~2x taller and
           needs more bottom reserve. */
        padding-bottom: clamp(5rem, 13vh, 10rem) !important;
    }
    body.page-home .hero-qcp-proofbar {
        bottom: 16px !important;
        /* Tablet still stretches edge-to-edge. */
        max-width: none !important;
        width: calc(100% - clamp(1rem, 3vw, 2rem)) !important;
    }
}
@media (max-width: 767.98px) {
    body.page-home .hero-qcp-proofbar {
        max-width: none !important;
        width: calc(100% - 1.5rem) !important;
    }
}
@media (max-width: 575.98px) {
    /* Phone: proof-bar unpins and flows naturally, so these overrides
       don't need to apply. */
    body.page-home .hero-qcp {
        padding-bottom: 0 !important;
    }
}
/* ============================================================
   END SECTION 64 — Home hero heart + stamp
   ============================================================ */

/* ============================================================
   SECTION 65 — Auth role themes + brand lockup
   Admin: pink theme. Student: blue theme.
   ============================================================ */
body.page-auth .auth-brand-header {
    padding-top: 1rem !important;
}
body.page-auth .auth-brand-lockup {
    display: inline-block !important;
    position: relative !important;
    padding: 0.9rem 1.35rem 1.05rem !important;
    min-width: min(100%, 290px) !important;
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(30,42,58,0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 36px -28px rgba(30,42,58,0.35) !important;
}
body.page-auth .auth-brand-lockup::after {
    content: "" !important;
    position: absolute !important;
    left: 0.65rem !important;
    right: 0.65rem !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #2A3CFF 0%, #2F86D9 46%, #EC2A7B 78%, #D8B45E 100%) !important;
}
body.page-auth .auth-logo-us {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    color: #2A3CFF !important;
    text-transform: uppercase !important;
}
body.page-auth .auth-logo-review {
    font-family: 'Parisienne', cursive !important;
    font-size: clamp(1.65rem, 4vw, 2.15rem) !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    color: #17864E !important;
    margin-top: 0.1rem !important;
}
body.page-auth .auth-logo-doctor {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.83rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #111827 !important;
    margin-top: 0.25rem !important;
}
body.page-auth .auth-logo-doctor strong {
    color: #EC2A7B !important;
    font-weight: 900 !important;
}
body.page-auth .auth-role-line {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
}
body.page-auth .auth-role-line .auth-brand-role {
    margin: 0 !important;
}
body.page-auth .auth-role-line .auth-website-link {
    margin: 0 !important;
}

/* Student login: blue theme */
body.page-auth .auth-shell-branded.student-auth-shell {
    background:
        repeating-linear-gradient(135deg, rgba(47,134,217,0.05) 0px, rgba(47,134,217,0.05) 1px, transparent 1px, transparent 26px),
        radial-gradient(ellipse 900px 500px at 90% 8%, rgba(191,226,255,0.50) 0%, transparent 62%),
        radial-gradient(ellipse 800px 520px at 6% 96%, rgba(219,240,255,0.55) 0%, transparent 62%),
        linear-gradient(180deg, #F7FBFF 0%, #EDF7FF 100%) !important;
}
body.page-auth .student-auth-shell.auth-shell-branded::before {
    background: linear-gradient(90deg, #2A3CFF 0%, #1E70C1 44%, #2F86D9 100%) !important;
}
body.page-auth .auth-brand-header-student .auth-brand-role {
    background: linear-gradient(180deg, #3A91E8 0%, #1E70C1 100%) !important;
    border-color: #185AA7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 12px 26px -16px rgba(31,112,193,0.70),
                0 2px 5px rgba(30,42,58,0.12) !important;
}
body.page-auth .auth-brand-header-student .auth-website-link {
    color: #1E70C1 !important;
    border-color: rgba(47,134,217,0.24) !important;
}
body.page-auth .auth-brand-header-student .auth-website-link:hover,
body.page-auth .auth-brand-header-student .auth-website-link:focus-visible {
    color: #155DA8 !important;
    box-shadow: 0 14px 28px -18px rgba(47,134,217,0.62) !important;
}
body.page-auth .student-auth-card {
    border-color: rgba(47,134,217,0.22) !important;
}
body.page-auth .student-auth-visual {
    background: linear-gradient(180deg, rgba(21,78,158,0.96) 0%, rgba(30,112,193,0.97) 58%, rgba(47,134,217,0.98) 100%) !important;
}
body.page-auth .student-auth-visual::before {
    background: radial-gradient(circle at top right, rgba(255,255,255,0.20), transparent 46%) !important;
}
body.page-auth .student-auth-card .auth-kicker.metric-label,
body.page-auth .student-auth-card a,
body.page-auth .student-auth-card a:hover {
    color: #1E70C1 !important;
}
body.page-auth .student-auth-card .form-control:focus {
    border-color: #2F86D9 !important;
    box-shadow: 0 0 0 4px rgba(47,134,217,0.13) !important;
}
body.page-auth .student-auth-card .auth-input-toggle:hover,
body.page-auth .student-auth-card .auth-field-note i {
    color: #1E70C1 !important;
}
body.page-auth .student-auth-card .btn-accent {
    background: linear-gradient(180deg, #3A91E8 0%, #1E70C1 100%) !important;
    border-color: #185AA7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 14px 30px -18px rgba(47,134,217,0.75),
                0 3px 6px rgba(30,42,58,0.12) !important;
}
body.page-auth .student-auth-card .auth-inline-help,
body.page-auth .student-auth-inline-note {
    background: #E8F3FF !important;
    border-color: rgba(47,134,217,0.20) !important;
    color: #315B80 !important;
}

/* Admin login: pink theme */
body.page-auth .auth-shell-branded.admin-auth-shell {
    background:
        repeating-linear-gradient(135deg, rgba(196,106,160,0.05) 0px, rgba(196,106,160,0.05) 1px, transparent 1px, transparent 26px),
        radial-gradient(ellipse 900px 500px at 90% 8%, rgba(249,204,228,0.48) 0%, transparent 62%),
        radial-gradient(ellipse 800px 520px at 6% 96%, rgba(255,226,240,0.55) 0%, transparent 62%),
        linear-gradient(180deg, #FFF8FC 0%, #FBE8F2 100%) !important;
}
body.page-auth .admin-auth-shell.auth-shell-branded::before {
    background: linear-gradient(90deg, #EC2A7B 0%, #C46AA0 44%, #9C3A76 100%) !important;
}
body.page-auth .auth-brand-header-admin .auth-brand-role {
    background: linear-gradient(180deg, #D47FAE 0%, #C46AA0 100%) !important;
    border-color: #B44A8A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 12px 26px -16px rgba(196,106,160,0.72),
                0 2px 5px rgba(30,42,58,0.12) !important;
}
body.page-auth .auth-brand-header-admin .auth-website-link {
    color: #9C3A76 !important;
    border-color: rgba(196,106,160,0.24) !important;
}
body.page-auth .auth-brand-header-admin .auth-website-link:hover,
body.page-auth .auth-brand-header-admin .auth-website-link:focus-visible {
    color: #B44A8A !important;
    box-shadow: 0 14px 28px -18px rgba(196,106,160,0.62) !important;
}
body.page-auth .admin-auth-card {
    border-color: rgba(196,106,160,0.22) !important;
}
body.page-auth .admin-auth-visual {
    background: linear-gradient(180deg, rgba(124,31,82,0.96) 0%, rgba(156,58,118,0.97) 58%, rgba(196,106,160,0.98) 100%) !important;
}
body.page-auth .admin-auth-visual::before {
    background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 45%) !important;
}
body.page-auth .admin-auth-card .auth-kicker.metric-label,
body.page-auth .admin-auth-card a,
body.page-auth .admin-auth-card a:hover {
    color: #9C3A76 !important;
}
body.page-auth .admin-auth-card .form-control:focus {
    border-color: #C46AA0 !important;
    box-shadow: 0 0 0 4px rgba(196,106,160,0.13) !important;
}
body.page-auth .admin-auth-card .auth-input-toggle:hover,
body.page-auth .admin-auth-card .auth-field-note i {
    color: #9C3A76 !important;
}
body.page-auth .admin-auth-card .btn-accent {
    background: linear-gradient(180deg, #D47FAE 0%, #C46AA0 100%) !important;
    border-color: #B44A8A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset,
                0 14px 30px -18px rgba(196,106,160,0.75),
                0 3px 6px rgba(30,42,58,0.12) !important;
}
body.page-auth .admin-auth-card .auth-inline-help,
body.page-auth .admin-auth-inline-note {
    background: #FBE8F2 !important;
    border-color: rgba(196,106,160,0.22) !important;
    color: #6B4259 !important;
}

@media (max-width: 575.98px) {
    body.page-auth .auth-brand-lockup {
        padding-inline: 1rem !important;
        min-width: min(100%, 250px) !important;
    }
    body.page-auth .auth-logo-us {
        font-size: 1.45rem !important;
    }
    body.page-auth .auth-logo-review {
        font-size: 1.7rem !important;
    }
    body.page-auth .auth-role-line {
        gap: 0.55rem !important;
    }
}

/* ===========================================================================
   Auth visual — skyline-photo card on top of the original blue / pink
   role panels. The Chicago skyline renders as a contained card at the
   top of the panel; the rest of the panel keeps the original bright
   blue (student) or bright pink (admin) gradient as the dominant color
   so the role identity is preserved. Headline below the photo uses the
   "Prepare. Practice. and PASS." typography (white serif, green PASS,
   pink underline).
   =========================================================================== */
body.page-auth .auth-visual--skyline {
    /* Inherit the existing student-auth-visual / admin-auth-visual
       gradient backgrounds from earlier in this file — do NOT override.
       Only adjust spacing + stacking context for the photo card. */
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
/* The skyline photo renders as a featured card at the top of the panel,
   not as a full-bleed background. Rounded corners, soft shadow, sits in
   the normal flex flow above the role badge + headline. */
body.page-auth .auth-visual--skyline .auth-visual-bg-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 35% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55),
                0 6px 14px -8px rgba(0, 0, 0, 0.30) !important;
    margin-bottom: 1.5rem !important;
    z-index: 1 !important;
    pointer-events: none;
    user-select: none;
}
/* All real content sits above the decorative orbs. */
body.page-auth .auth-visual--skyline > .auth-visual-content,
body.page-auth .auth-visual--skyline > .auth-demo {
    position: relative;
    z-index: 2;
}

/* Headline typography — serif, white, with a green PASS + pink underline,
   sized down to fit the side panel rather than the homepage hero. */
body.page-auth .auth-visual-headline {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.05;
    font-size: clamp(2.2rem, 3.6vw, 3.1rem);
    letter-spacing: -0.01em;
    margin: 0 0 1rem 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.30),
                 0 4px 16px rgba(0, 0, 0, 0.40);
}
body.page-auth .auth-visual-and {
    font-style: italic;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78em;
    margin-left: 0.15em;
}
body.page-auth .auth-visual-pass {
    display: inline-block;
    position: relative;
    font-style: normal;
    font-weight: 800;
    color: #138A4A; /* deep nursing green — reads strong on pale pink */
    padding: 0 0.18em;
    margin-top: 0.12em;
}
body.page-auth .auth-visual-pass::before {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.12em;
    height: 0.36em;
    /* Solid darker pink so the underline stays visible on a pale-pink
       panel — the previous F8AECF-to-EC2A7B gradient washed out at the
       light end. */
    background: linear-gradient(90deg, #EC2A7B 0%, #B41E5D 100%);
    border-radius: 0.08em;
    z-index: -1;
    opacity: 1;
}
body.page-auth .auth-visual-lede {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 0.5rem;
    margin-bottom: 0;
    max-width: 28rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
                 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* Inner cards (Continue Learning / Stay Guided + the admin metrics) — glass
   treatment dense enough to read against the bright blue / pink panel. */
body.page-auth .auth-visual--skyline .student-auth-point,
body.page-auth .auth-visual--skyline .admin-auth-metric {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Eyebrow label inside the bullet cards — bright + tight letter-spacing
   so "CONTINUE LEARNING" / "STAY GUIDED" / "Operations" / "Security"
   read clearly. */
body.page-auth .auth-visual--skyline .student-auth-point span,
body.page-auth .auth-visual--skyline .admin-auth-metric span {
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}
body.page-auth .auth-visual--skyline .student-auth-point strong,
body.page-auth .auth-visual--skyline .admin-auth-metric strong {
    color: #FFFFFF !important;
}

/* Mobile: shrink the headline so the panel doesn't dominate on phones. */
@media (max-width: 991.98px) {
    body.page-auth .auth-visual--skyline {
        padding: 2rem 1.5rem;
    }
    body.page-auth .auth-visual-headline {
        font-size: clamp(1.9rem, 7vw, 2.4rem);
    }
}

/* High-contrast role badge on the skyline login panels — replaces the
   default translucent gold-on-dark pill with a near-solid white pill
   carrying role-colored text. Way more legible against the bright blue
   (student) / bright pink (admin) panels. */
body.page-auth .auth-visual--skyline .auth-role-badge {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45) !important;
    padding: 0.45rem 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}
body.page-auth .student-auth-visual.auth-visual--skyline .auth-role-badge,
body.page-auth .student-auth-visual.auth-visual--skyline .auth-role-badge i {
    color: #154E9E !important; /* deep blue, matches student form-card primary */
}
body.page-auth .admin-auth-visual.auth-visual--skyline .auth-role-badge,
body.page-auth .admin-auth-visual.auth-visual--skyline .auth-role-badge i {
    color: #9C3A76 !important; /* deep pink, matches admin form-card primary */
}

/* ===========================================================================
   Auth visual — PALE MODE override.

   The user asked to flip both panels from "dark color + white text" to
   "pale color + black text" so the dark pink in particular doesn't feel
   so heavy. This block overrides the panel backgrounds and the body
   text / badge / inner-card styling that was tuned for the dark mode.
   The skyline photo card, the layout, and the "Prepare. Practice. and
   PASS." typography all stay; only colors change.
   =========================================================================== */

/* Pale gradient backgrounds — the same hues as before, just very high
   on the lightness scale so deep navy text reads like newsprint. */
body.page-auth .student-auth-visual.auth-visual--skyline {
    background: linear-gradient(180deg,
        #EAF2FB 0%,
        #DCE9F8 55%,
        #C9DDF3 100%) !important;
}
body.page-auth .admin-auth-visual.auth-visual--skyline {
    background: linear-gradient(180deg,
        #FCEDF5 0%,
        #F8DCEA 55%,
        #F2C8DB 100%) !important;
}

/* Decorative orb tints become VERY subtle on pale backgrounds — keep
   them but soften so they don't muddy the panel. */
body.page-auth .student-auth-visual.auth-visual--skyline::before,
body.page-auth .student-auth-visual.auth-visual--skyline::after,
body.page-auth .admin-auth-visual.auth-visual--skyline::before,
body.page-auth .admin-auth-visual.auth-visual--skyline::after {
    opacity: 0.18 !important;
}

/* Headline + lede + italic "and" — deep navy text, no white halo so the
   edges read crisp against the pale background. */
body.page-auth .auth-visual--skyline .auth-visual-headline {
    color: #1A2540 !important;
    text-shadow: none !important;
}
body.page-auth .auth-visual--skyline .auth-visual-and {
    color: rgba(26, 37, 64, 0.85) !important;
}
body.page-auth .auth-visual--skyline .auth-visual-lede {
    color: #1A2540 !important;
    text-shadow: none !important;
}

/* Skyline photo card — switch the white-glaze border to a soft dark
   border so it reads against the pale background. */
body.page-auth .auth-visual--skyline .auth-visual-bg-image {
    border-color: rgba(26, 37, 64, 0.14) !important;
    box-shadow: 0 18px 36px -22px rgba(26, 37, 64, 0.30),
                0 6px 12px -8px rgba(26, 37, 64, 0.18) !important;
}

/* Role badge — flip from white pill (good on dark) to deep-color pill
   with white text (good on pale). Strong color identity. */
body.page-auth .student-auth-visual.auth-visual--skyline .auth-role-badge {
    background: linear-gradient(180deg, #2F86D9 0%, #1E70C1 100%) !important;
    border-color: #185AA7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px -12px rgba(21, 78, 158, 0.55),
                0 1px 0 rgba(255, 255, 255, 0.30) inset !important;
}
body.page-auth .student-auth-visual.auth-visual--skyline .auth-role-badge i {
    color: #FFFFFF !important;
}
body.page-auth .admin-auth-visual.auth-visual--skyline .auth-role-badge {
    background: linear-gradient(180deg, #C46AA0 0%, #9C3A76 100%) !important;
    border-color: #7C1F52 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px -12px rgba(156, 58, 118, 0.55),
                0 1px 0 rgba(255, 255, 255, 0.30) inset !important;
}
body.page-auth .admin-auth-visual.auth-visual--skyline .auth-role-badge i {
    color: #FFFFFF !important;
}

/* Inner cards — switch from semi-transparent white glass (good on dark)
   to solid white with a soft role-tinted border + deep navy body text
   (good on pale). */
body.page-auth .auth-visual--skyline .student-auth-point,
body.page-auth .auth-visual--skyline .admin-auth-metric {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 20px -14px rgba(26, 37, 64, 0.22) !important;
}
body.page-auth .student-auth-visual.auth-visual--skyline .student-auth-point {
    border-color: rgba(21, 78, 158, 0.18) !important;
}
body.page-auth .admin-auth-visual.auth-visual--skyline .admin-auth-metric {
    border-color: rgba(156, 58, 118, 0.20) !important;
}
/* Eyebrow label inside the cards — role color, bold, slight tracking. */
body.page-auth .student-auth-visual.auth-visual--skyline .student-auth-point span {
    color: #1E70C1 !important;
}
body.page-auth .admin-auth-visual.auth-visual--skyline .admin-auth-metric span {
    color: #9C3A76 !important;
}
/* Card body text — deep navy. */
body.page-auth .auth-visual--skyline .student-auth-point strong,
body.page-auth .auth-visual--skyline .admin-auth-metric strong {
    color: #1A2540 !important;
}

/* Public CTA polish — shared pink primary language for newsletter, contact,
   and licensure cross-sell buttons. */
body.public-ui .newsletter-form .btn-accent,
body.public-ui .contact-form .btn-primary-custom,
body.page-licensure .licensure-crosssell .licensure-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0.88rem 1.95rem !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #EB3D91 0%, #C8337C 55%, #A72867 100%) !important;
    border: 1px solid rgba(151, 31, 91, 0.20) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 16px 30px -13px rgba(167, 40, 103, 0.62) !important;
}
body.public-ui .newsletter-form .btn-accent:hover,
body.public-ui .newsletter-form .btn-accent:focus-visible,
body.public-ui .contact-form .btn-primary-custom:hover,
body.public-ui .contact-form .btn-primary-custom:focus-visible,
body.page-licensure .licensure-crosssell .licensure-btn--primary:hover,
body.page-licensure .licensure-crosssell .licensure-btn--primary:focus-visible {
    background: linear-gradient(180deg, #F0529F 0%, #D23886 55%, #94245C 100%) !important;
    border-color: rgba(148, 36, 92, 0.32) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.40) inset,
        0 20px 36px -13px rgba(148, 36, 92, 0.68) !important;
}

body.page-licensure .licensure-crosssell .licensure-btn--ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0.88rem 1.95rem !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(200, 51, 124, 0.34) !important;
    color: #6B1840 !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px -18px rgba(107, 24, 64, 0.30) !important;
}
body.page-licensure .licensure-crosssell .licensure-btn--ghost:hover,
body.page-licensure .licensure-crosssell .licensure-btn--ghost:focus-visible {
    background: #FFF8FC !important;
    border-color: rgba(200, 51, 124, 0.58) !important;
    color: #4A1432 !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -18px rgba(107, 24, 64, 0.42) !important;
}


/* ============================================================
   SECTION 66 — WHY-TRUST GRID HARD FIX (homepage)
   Scope: body.page-home .why-trust-grid
   Goal: force the two why-trust cards to sit side-by-side at
   >=992px regardless of Bootstrap col flex quirks. We replace
   the .row's flex layout with an explicit 2-column CSS grid at
   the lg breakpoint. Below lg the cards stack naturally — this
   matches the asymmetric heading breakpoint in SECTION 19.1.
   ============================================================ */
@media (min-width: 992px) {
    body.page-home .why-trust-grid,
    body.page-home .why-trust-grid.row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--wt-gap, clamp(1.25rem, 2.2vw, 2.25rem)) !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    body.page-home .why-trust-grid > [class*="col-"] {
        grid-column: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.page-home .why-trust-grid > [class*="col-"] > .why-trust-card {
        height: 100%;
    }
}
/* END SECTION 66 — Why-trust grid hard fix */

/* ============================================================
   SECTION 67 — Schedule page polish (real revamp)
   ============================================================
   Powers the public /schedule/ page:
     - Featured event spotlight (.schedule-spotlight*)
     - Typical Week 7-column rhythm (.schedule-typical-week*)
     - Filter chips bar (.schedule-chip-filter*)
     - List/grid view toggle (.schedule-view-*)
     - Event-type chips (.schedule-chip*)
     - List-mode card chrome (.schedule-event-card)
     - Marketing empty state for anons (.schedule-empty-marketing)
     - Subscribe-to-calendar bar (.schedule-subscribe-*)
     - FullCalendar v6 brand overrides (.fc-*)
   Scoped to body.page-schedule so nothing leaks elsewhere.
   ============================================================ */

/* ---------- Brand tokens reused ---------- */
/* Falls back to literals so the section is portable if the
   --qcp-* token names change. */

/* ---------- Featured event spotlight ---------- */
body.page-schedule .schedule-spotlight {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%);
    border: 1px solid rgba(196, 69, 122, 0.18);
    border-radius: 18px;
    padding: 1.75rem 2rem;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04),
                0 32px 56px -28px rgba(196, 69, 122, 0.18);
    position: relative;
    overflow: hidden;
}
body.page-schedule .schedule-spotlight::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--qcp-blue, #355CFF) 0%,
        var(--qcp-green, #A9D84E) 38%,
        var(--qcp-pink, #E8B6D8) 70%,
        var(--qcp-yellow, #E9D15B) 100%);
}
body.page-schedule .schedule-spotlight-eyebrow {
    display: inline-flex;
    align-items: center;
    color: #C2185B;
    font-family: var(--qcp-sans, Inter, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
body.page-schedule .schedule-spotlight-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 575.98px) {
    body.page-schedule .schedule-spotlight-grid {
        grid-template-columns: 1fr;
    }
}
body.page-schedule .schedule-spotlight-date {
    text-align: center;
    padding: 1rem 0.75rem;
    background: #FFFFFF;
    border: 1px solid rgba(196, 69, 122, 0.18);
    border-radius: 14px;
}
body.page-schedule .schedule-spotlight-month {
    font-family: var(--qcp-sans, Inter, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-pink-deep, #A72867);
}
body.page-schedule .schedule-spotlight-day {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    margin: 0.25rem 0;
}
body.page-schedule .schedule-spotlight-weekday {
    font-size: 0.85rem;
    color: var(--qcp-text-muted, #5A6B7E);
    font-weight: 500;
}
body.page-schedule .schedule-spotlight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
body.page-schedule .schedule-spotlight-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
body.page-schedule .schedule-spotlight-when {
    color: var(--qcp-text-muted, #5A6B7E);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
body.page-schedule .schedule-spotlight-desc {
    color: var(--qcp-text-mid, #3F4F60);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
body.page-schedule .schedule-spotlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Event-type chips ---------- */
body.page-schedule .schedule-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #FFFFFF;
}
body.page-schedule .schedule-chip--live      { background: var(--qcp-blue-deep, #2849D8); }
body.page-schedule .schedule-chip--deadline  { background: var(--qcp-pink-deep, #A72867); }
body.page-schedule .schedule-chip--holiday   { background: #7E8C9E; }
body.page-schedule .schedule-chip--other     { background: var(--qcp-green-deep, #0E7C3A); }
body.page-schedule .schedule-chip--course {
    background: rgba(53, 92, 255, 0.10);
    color: var(--qcp-blue-deep, #2849D8);
}
body.page-schedule .schedule-chip--live-now {
    background: #dc3545;
    animation: schedulePulse 1.6s ease-in-out infinite;
}
@keyframes schedulePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ---------- Typical Week ---------- */
body.page-schedule .schedule-typical-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 991.98px) {
    body.page-schedule .schedule-typical-week {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    body.page-schedule .schedule-typical-week {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body.page-schedule .schedule-week-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 12px;
    padding: 0.85rem 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.page-schedule .schedule-week-card:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 69, 122, 0.32);
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.06),
                0 24px 48px -28px rgba(196, 69, 122, 0.20);
    color: inherit;
    text-decoration: none;
}
body.page-schedule .schedule-week-card-day {
    font-family: var(--qcp-sans, Inter, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-pink-deep, #A72867);
}
body.page-schedule .schedule-week-card-time {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    font-size: 1.1rem;
    margin: 0.1rem 0 0.3rem;
}
body.page-schedule .schedule-week-card-title {
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    font-size: 0.9rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}
body.page-schedule .schedule-week-card-desc {
    color: var(--qcp-text-muted, #5A6B7E);
    font-size: 0.78rem;
    line-height: 1.4;
}
body.page-schedule .schedule-week-card-course {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--qcp-blue-deep, #2849D8);
    font-weight: 600;
}
body.page-schedule .schedule-typical-week-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(196, 69, 122, 0.24);
    border-radius: 14px;
}
body.page-schedule .schedule-typical-week-empty i {
    font-size: 2.5rem;
    color: var(--qcp-pink-deep, #A72867);
    margin-bottom: 0.5rem;
    display: block;
}
body.page-schedule .schedule-typical-week-empty h3 {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}
body.page-schedule .schedule-typical-week-empty p {
    color: var(--qcp-text-muted, #5A6B7E);
    margin: 0;
}

/* ---------- Filter chips bar ---------- */
body.page-schedule .schedule-chip-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.10);
    color: var(--qcp-text-mid, #3F4F60);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-schedule .schedule-chip-filter:hover {
    color: #C2185B;
    border-color: rgba(196, 69, 122, 0.3);
    text-decoration: none;
}
body.page-schedule .schedule-chip-filter--active {
    background: rgba(196, 69, 122, 0.08);
    border-color: rgba(196, 69, 122, 0.32);
    color: #C2185B;
}

/* ---------- View toggle ---------- */
body.page-schedule .schedule-view-toggle {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.10);
    border-radius: 999px;
    padding: 0.25rem;
    margin: 0 auto;
    width: max-content;
    gap: 0.25rem;
}
body.page-schedule .schedule-view-btn {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    color: var(--qcp-text-mid, #3F4F60);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}
body.page-schedule .schedule-view-btn:hover {
    color: #C2185B;
    text-decoration: none;
}
body.page-schedule .schedule-view-btn--active {
    background: rgba(196, 69, 122, 0.10);
    color: #C2185B;
}

/* ---------- List-mode event cards ---------- */
body.page-schedule .schedule-event-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
body.page-schedule .schedule-event-card {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04),
                0 24px 48px -36px rgba(30, 42, 58, 0.14);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.page-schedule .schedule-event-card:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 69, 122, 0.32);
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.06),
                0 32px 56px -28px rgba(30, 42, 58, 0.20);
    color: inherit;
    text-decoration: none;
}
body.page-schedule .schedule-event-date {
    flex-shrink: 0;
    text-align: center;
    min-width: 84px;
    padding: 0.6rem 0.75rem;
    background: #FBF8F1;
    border: 1px solid rgba(30, 42, 58, 0.06);
    border-radius: 12px;
    align-self: flex-start;
}
body.page-schedule .schedule-event-month {
    font-family: var(--qcp-sans, Inter, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qcp-pink-deep, #A72867);
}
body.page-schedule .schedule-event-day {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
}
body.page-schedule .schedule-event-weekday {
    font-size: 0.78rem;
    color: var(--qcp-text-muted, #5A6B7E);
    font-weight: 500;
}
body.page-schedule .schedule-event-body {
    flex-grow: 1;
    min-width: 0;
}
body.page-schedule .schedule-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
body.page-schedule .schedule-event-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    color: var(--qcp-text, #1E2A3A);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}
body.page-schedule .schedule-event-when {
    font-size: 0.85rem;
    color: var(--qcp-text-muted, #5A6B7E);
    font-weight: 500;
}
body.page-schedule .schedule-event-desc {
    margin-top: 0.5rem;
    color: var(--qcp-text-mid, #3F4F60);
    font-size: 0.9rem;
    line-height: 1.55;
}
body.page-schedule .schedule-event-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--qcp-pink-deep, #A72867);
    font-size: 1.25rem;
    transition: transform 0.25s ease;
}
body.page-schedule .schedule-event-card:hover .schedule-event-arrow {
    transform: translateX(4px);
}

/* ---------- Marketing-grade empty state ---------- */
body.page-schedule .schedule-empty-marketing {
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 18px;
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04),
                0 24px 48px -36px rgba(30, 42, 58, 0.14);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
body.page-schedule .schedule-empty-marketing > i {
    font-size: 3rem;
    color: var(--qcp-pink-deep, #A72867);
    display: block;
    margin-bottom: 0.5rem;
}
body.page-schedule .schedule-empty-marketing-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) {
    body.page-schedule .schedule-empty-marketing-stats {
        grid-template-columns: 1fr;
    }
}
body.page-schedule .schedule-empty-stat {
    padding: 0.75rem;
    background: #FBF8F1;
    border-radius: 12px;
}
body.page-schedule .schedule-empty-stat-num {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    color: var(--qcp-pink-deep, #A72867);
}
body.page-schedule .schedule-empty-stat-label {
    font-size: 0.78rem;
    color: var(--qcp-text-muted, #5A6B7E);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-top: 0.25rem;
}
body.page-schedule .schedule-empty-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    margin-bottom: 0.5rem;
}
body.page-schedule .schedule-empty-copy {
    color: var(--qcp-text-muted, #5A6B7E);
    margin-bottom: 1.25rem;
}
body.page-schedule .schedule-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* ---------- Subscribe-to-calendar bar ---------- */
body.page-schedule .schedule-subscribe-bar {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%);
    border: 1px solid rgba(196, 69, 122, 0.18);
    border-radius: 18px;
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}
@media (max-width: 767.98px) {
    body.page-schedule .schedule-subscribe-bar {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
body.page-schedule .schedule-subscribe-eyebrow {
    display: inline-flex;
    align-items: center;
    color: #C2185B;
    font-family: var(--qcp-sans, Inter, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
body.page-schedule .schedule-subscribe-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
}
body.page-schedule .schedule-subscribe-desc {
    color: var(--qcp-text-muted, #5A6B7E);
    margin: 0;
    font-size: 0.95rem;
}
body.page-schedule .schedule-subscribe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}
@media (max-width: 767.98px) {
    body.page-schedule .schedule-subscribe-actions {
        justify-content: center;
    }
}

/* ---------- FullCalendar v6 brand overrides ---------- */
body.page-schedule #schedule-fullcalendar {
    background: #FFFFFF;
    border: 1px solid rgba(30, 42, 58, 0.08);
    border-radius: 14px;
    padding: 1rem;
}
body.page-schedule .fc {
    font-family: var(--qcp-sans, Inter, sans-serif);
}
body.page-schedule .fc .fc-toolbar-title {
    font-family: var(--qcp-display, 'Source Serif 4', Georgia, serif);
    font-weight: 600;
    color: var(--qcp-text, #1E2A3A);
}
body.page-schedule .fc .fc-button-primary {
    background: rgba(196, 69, 122, 0.10);
    border-color: rgba(196, 69, 122, 0.18);
    color: #C2185B;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: none;
}
body.page-schedule .fc .fc-button-primary:hover,
body.page-schedule .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #C4457A;
    border-color: #C4457A;
    color: #FFFFFF;
}
body.page-schedule .fc-event-live_session {
    background-color: var(--qcp-blue-deep, #2849D8) !important;
    border-color: var(--qcp-blue-deep, #2849D8) !important;
}
body.page-schedule .fc-event-deadline {
    background-color: var(--qcp-pink-deep, #A72867) !important;
    border-color: var(--qcp-pink-deep, #A72867) !important;
}
body.page-schedule .fc-event-holiday {
    background-color: #7E8C9E !important;
    border-color: #7E8C9E !important;
}
body.page-schedule .fc-event-other {
    background-color: var(--qcp-green-deep, #0E7C3A) !important;
    border-color: var(--qcp-green-deep, #0E7C3A) !important;
}
body.page-schedule .fc-day-today {
    background: rgba(196, 69, 122, 0.06) !important;
}
/* END SECTION 67 — Schedule page polish */


/* ============================================================
   SECTION 68 — Mobile flat-list account menu
   ------------------------------------------------------------
   When logged in, < lg renders the same items as a clean stacked
   list inside the navbar-collapse instead of a nested dropdown.
   Desktop (>= lg) is untouched.
   ============================================================ */
@media (max-width: 991.98px) {
    body.public-ui .mobile-account-section {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(30, 42, 58, 0.10);
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    body.public-ui .mobile-account-header {
        font-size: 0.78rem;
        color: rgba(30, 42, 58, 0.6);
        padding: 0 0.5rem 0.5rem;
        line-height: 1.3;
        word-break: break-all;
    }
    body.public-ui .mobile-account-header strong {
        color: #1E2A3A;
        font-weight: 700;
    }
    body.public-ui .mobile-account-link {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 0.55rem 0.85rem !important;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(30, 42, 58, 0.86) !important;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }
    body.public-ui .mobile-account-link i {
        color: rgba(45, 57, 245, 0.75);
        font-size: 1rem;
        flex-shrink: 0;
    }
    body.public-ui .mobile-account-link:hover,
    body.public-ui .mobile-account-link:focus {
        background: rgba(53, 92, 255, 0.06);
        color: #1E2A3A !important;
    }
    body.public-ui .mobile-signout-btn {
        margin-top: 0.85rem;
        padding: 0.7rem 1rem;
        font-weight: 700;
        font-size: 0.92rem;
        border-radius: 12px;
    }
}
/* END SECTION 68 — Mobile flat-list account menu */


/* ============================================================
   SECTION 69 — Phase 2 responsive overflow fixes
   ------------------------------------------------------------
   Targeted overflow fixes flagged by the Playwright sweep on
   public pages. Each rule fixes one confirmed overflow at a
   specific viewport range.
   ============================================================ */

/* (A) Long email/phone strings in branch contact cards must wrap
       on phones — `usnursingela@gmail.com` overflows at 320px otherwise. */
body.public-ui .branch-meta li span,
body.public-ui .branch-meta a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* (B) Trust-strip overflow at tablet-landscape (1024px).
       Five 1fr columns can't fit the inline-flex content at this
       width; wrap to 3 columns × 2 rows between 768 and 1199. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    body.page-home .trust-strip .trust-strip-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0.6rem;
    }
    body.page-home .trust-strip .trust-item {
        min-width: 0;
        border-right: none;
    }
}

/* (C) Public navbar items at lg-tablet (992-1199) just barely don't fit.
       Tighten nav-link horizontal padding so the inline navbar fits the
       container without overflow. Desktop ≥ 1200 unchanged.
       The base rule at `body.public-ui .navbar .nav-link` (line ~1961)
       uses `!important`, so we need `!important` here too. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.public-ui .premium-navbar .navbar-nav .nav-link {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }
    body.public-ui .premium-navbar .navbar-nav {
        gap: 0;
    }
}

/* (D) `.row.g-5` overflow on phones: the -1.5rem horizontal margin
       isn't always absorbed by the parent's padding (some hero sections
       use `<section class="container ..-hero">` with zero horizontal
       padding), causing 8-12px overflow. Cap the gutter on phones. */
@media (max-width: 575.98px) {
    body.public-ui .row.g-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}

/* (E) `.contact-hero` and `.apply-hero` use `<section class="container ..-hero">`
       with zero horizontal padding, so the row's default -12px gutter
       margin overflows the section. Restore horizontal padding so the
       row's negative margin has something to absorb against. */
body.public-ui section.container.contact-hero,
body.public-ui section.container.apply-hero {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* (F) Safety-net: prevent any sub-pixel / Bootstrap negative-margin
       overflow from causing horizontal page scroll on the public site.
       Content that fits is unaffected; tiny edge-case overflows are
       clipped at the viewport edge. `clip` (vs `hidden`) preserves
       position:sticky behavior on the navbar. */
html, body.public-ui {
    overflow-x: clip;
}
/* END SECTION 69 — Phase 2 responsive overflow fixes */

/* ============================================================
   SECTION 70 — Phase 9 responsive UX (Real-device pass)

   Added with Phase 9 to fix the catastrophic UX gaps surfaced by
   real-device testing at iPhone XR (414×896): sticky shop filter
   bar so 30 paginated products are searchable without scrolling
   back up, mobile-only sticky CTA bar on product detail so
   "Add to cart" is reachable above the fold.
   ============================================================ */

/* ---- Shop sticky filter bar at < lg ---- */
@media (max-width: 991.98px) {
    body.page-shop .shop-filter-bar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #FAF7F0;
        padding: 0.5rem 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        box-shadow: 0 2px 8px rgba(30, 42, 58, 0.06);
    }
}

/* ---- Mobile-only sticky CTA bar on product detail ---- */
.mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border-top: 1px solid rgba(30, 42, 58, 0.08);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.mobile-cta-bar .mobile-cta-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1E2A3A;
    flex: 0 0 auto;
}
.mobile-cta-bar form,
.mobile-cta-bar > form {
    margin: 0;
    flex: 1 1 auto;
}
.mobile-cta-bar .btn {
    width: 100%;
    padding: 0.6rem 1rem;
    font-weight: 600;
}
/* Add bottom padding to body when the mobile sticky CTA is present
   so the last paragraph isn't covered. Scoped to product detail
   (page-shop-detail) where we add the bar. */
@media (max-width: 991.98px) {
    body.page-shop-detail {
        padding-bottom: 80px;
    }
}
/* ---- Cart-added modal — iPhone SE (375) polish ----
   Default Bootstrap modal renders fine at 375 (margin:.5rem, max-width
   stretches), but the footer buttons crowd a bit and the X close
   target is below 44×44. Bump touch targets and stack the footer
   buttons on very small phones (< 380 px). */
@media (max-width: 991.98px) {
    #cartAddedModal .btn-close {
        padding: 0.85rem;
        opacity: 0.7;
    }
    #cartAddedModal .modal-footer .btn {
        min-height: 48px;
        font-size: 0.95rem;
    }
}
@media (max-width: 379.98px) {
    #cartAddedModal .modal-footer {
        flex-direction: column-reverse;
    }
    #cartAddedModal .modal-footer .btn {
        width: 100%;
        margin-left: 0 !important;
    }
    #cartAddedModal .modal-dialog {
        margin: 0.5rem;
    }
}
/* ---- Phase 9 follow-up: shop hero compression on mobile ----
   The /shop/ hero sat ~1700 px tall on iPhone XR (eyebrow + h1 + lede +
   trust strip + 2 stacked CTAs). Above-grid overhead pushed the
   already-paginated catalog out to 29 scroll-screens. This block
   trims the hero to ~600 px on phone by tightening typography,
   inlining the trust strip, and putting CTAs side-by-side. Desktop
   (>= lg) is untouched. */
@media (max-width: 991.98px) {
    body.page-shop .courses-hero {
        padding: 2rem 0 1.5rem;
    }
    /* Hide the eyebrow chip on phone — page title duplicates it. */
    body.page-shop .courses-hero .courses-eyebrow {
        display: none;
    }
    body.page-shop .courses-headline {
        font-size: clamp(1.55rem, 6.5vw, 2.1rem);
        line-height: 1.15;
        margin-bottom: 0.6rem;
    }
    body.page-shop .courses-lede {
        font-size: 0.98rem;
        line-height: 1.45;
        margin-bottom: 1rem;
    }
    /* Single-line trust strip — three short tokens fit at 414 px wide. */
    body.page-shop .courses-trust-strip {
        gap: 0.4rem 0.85rem;
        margin-bottom: 1rem;
        font-size: 0.78rem;
    }
    body.page-shop .courses-trust-strip li {
        font-size: 0.78rem;
        gap: 0.3rem;
    }
    body.page-shop .courses-trust-strip i {
        font-size: 0.9rem;
    }
    /* Two CTAs side by side instead of stacked. */
    body.page-shop .courses-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    body.page-shop .courses-hero-actions .courses-btn {
        flex: 1 1 auto;
        width: auto;
        padding: 0.6rem 0.9rem;
        font-size: 0.88rem;
    }
    /* Tighten the catalog section's intro too — h2 + lede was big. */
    body.page-shop .courses-lineup-section .courses-section-title {
        font-size: clamp(1.4rem, 5vw, 1.85rem);
        line-height: 1.2;
    }
    body.page-shop .courses-lineup-section .courses-section-lede {
        font-size: 0.92rem;
        line-height: 1.4;
        margin-bottom: 0.85rem;
    }
}
/* END SECTION 70 — Phase 9 responsive UX */

/* ============================================================
   SECTION 71 — Phase 15.F: Shop catalog 2-up grid at < md
   Cards now sit 2-per-row on phones (was 1-per-row). Tighten
   typography + paddings so each ~160px-wide card fits cleanly
   without text bleeding past the price/CTA region. Only kicks
   in at < md (< 768px); md+ retains the existing card sizing.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Card padding inward — claw back ~16px of horizontal space. */
    body.page-shop .shop-grid .courses-lineup-card {
        padding: 0.85rem;
        border-radius: 14px;
    }
    /* Tighter image — keep aspect-ratio but shorter on a small card. */
    body.page-shop .shop-grid .courses-lineup-image {
        margin-bottom: 0.65rem;
        border-radius: 10px;
    }
    /* Title — 2-line clamp prevents super-long titles from swelling
       a card and making siblings look mis-aligned. */
    body.page-shop .shop-grid .courses-lineup-card h3 {
        font-size: 0.98rem;
        line-height: 1.25;
        margin-bottom: 0.35rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Eyebrow / category label — smaller. */
    body.page-shop .shop-grid .courses-lineup-eyebrow {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }
    /* Availability chip — slightly smaller and wraps cleanly. */
    body.page-shop .shop-grid .courses-lineup-avail {
        font-size: 0.72rem;
        padding: 0.2rem 0.45rem;
        margin-bottom: 0.4rem;
    }
    /* Description — clamp to 2 lines so card heights stay even. */
    body.page-shop .shop-grid .courses-lineup-desc {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Price row — drop the inline "Sale" badge font, keep the price
       readable. */
    body.page-shop .shop-grid .courses-lineup-price-row {
        gap: 0.3rem;
        margin-bottom: 0.35rem;
    }
    body.page-shop .shop-grid .courses-lineup-price {
        font-size: 1.05rem;
    }
    body.page-shop .shop-grid .courses-lineup-price-original {
        font-size: 0.78rem;
    }
    body.page-shop .shop-grid .courses-lineup-sale-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.35rem;
    }
    body.page-shop .shop-grid .courses-lineup-price-cross {
        font-size: 0.72rem;
        margin-bottom: 0.4rem;
    }
    /* Buttons — keep full-width but tighter. The secondary
       "View Details" link is hidden on phones since the whole card
       is already a tap target via the title + image links. */
    body.page-shop .shop-grid .courses-btn {
        padding: 0.55rem 0.6rem;
        font-size: 0.83rem;
        line-height: 1.2;
    }
    body.page-shop .shop-grid .shop-card-secondary-link {
        display: none;
    }
    /* Tighter row gutters at phone — Bootstrap's g-4 is 1.5rem which
       eats a lot of horizontal room when the cards are 2-up. */
    body.page-shop .row.shop-grid {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
}
/* END SECTION 71 — Phase 15.F shop 2-up grid */

/* ============================================================
   PHASE 46 — Unified pagination component.

   Provides the connected pill-group pagination across all 3
   contexts (admin, student portal, public site) since
   quiet-clinical.css loads in every base template. Class names
   are unique to the component (`.dashboard-pagination`,
   `.dashboard-pager`, etc.) so the rules don't bleed to other
   Bootstrap `.pagination` instances.

   Used by templates/dashboard/partials/_pagination.html, included
   in admin list pages, student-portal Resources + Quiz history,
   and public Shop catalog.
   ============================================================ */
.dashboard-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 42, 58, 0.06);
}
.dashboard-pagination-summary,
.dashboard-pagination-page-of {
    font-size: 0.85rem;
    color: rgba(30, 42, 58, 0.6);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.dashboard-pagination-range,
.dashboard-pagination-total,
.dashboard-pagination-page-of strong {
    font-weight: 600;
    color: #1E2A3A;
}
.pagination.dashboard-pager {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(30, 42, 58, 0.14);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04);
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    list-style: none;
    margin: 0;
}
.dashboard-pager .page-item {
    margin: 0 !important;
    display: inline-flex;
}
.dashboard-pager .page-link {
    border: 0 !important;
    border-right: 1px solid rgba(30, 42, 58, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1E2A3A !important;
    font-weight: 500;
    font-size: 0.9rem;
    min-width: 44px;
    min-height: 40px;
    padding: 0.45rem 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: background 0.12s ease, color 0.12s ease;
    box-shadow: none !important;
    line-height: 1;
}
.dashboard-pager .page-item:last-child .page-link {
    border-right: 0 !important;
}
.dashboard-pager .page-link:hover {
    background: rgba(45, 57, 245, 0.06) !important;
    color: #2D39F5 !important;
    z-index: 1;
}
.dashboard-pager .page-link:focus-visible {
    background: rgba(45, 57, 245, 0.10) !important;
    color: #2D39F5 !important;
    outline: 2px solid #2D39F5;
    outline-offset: -2px;
    z-index: 2;
}
.dashboard-pager .page-item.active .page-link {
    background: #2D39F5 !important;
    color: #fff !important;
    font-weight: 700;
    z-index: 1;
    cursor: default;
}
.dashboard-pager .page-item.active .page-link:hover {
    background: #2D39F5 !important;
    color: #fff !important;
}
.dashboard-pager .page-item.disabled .page-link {
    color: rgba(30, 42, 58, 0.32) !important;
    background: transparent !important;
    cursor: not-allowed;
}
.dashboard-pager .page-item.disabled .page-link:hover {
    background: transparent !important;
    color: rgba(30, 42, 58, 0.32) !important;
}
.dashboard-pager .pager-ellipsis .page-link {
    color: rgba(30, 42, 58, 0.45) !important;
    cursor: default;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.dashboard-pager .pager-prev .page-link,
.dashboard-pager .pager-next .page-link {
    padding-left: 1rem;
    padding-right: 1rem;
}
.dashboard-pager .pager-prev .page-link i,
.dashboard-pager .pager-next .page-link i {
    font-size: 0.78rem;
    opacity: 0.85;
}
@media (max-width: 767.98px) {
    .dashboard-pagination {
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        text-align: center;
    }
    .dashboard-pager .pager-label {
        display: none;
    }
    .dashboard-pager .pager-prev .page-link,
    .dashboard-pager .pager-next .page-link {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    .dashboard-pager .page-link {
        min-width: 44px;
        min-height: 44px;
    }
}
@media (max-width: 359.98px) {
    .dashboard-pager .page-link {
        min-width: 42px;
        font-size: 0.85rem;
        padding: 0.4rem 0.55rem;
    }
}
@media (min-width: 1200px) {
    .dashboard-pager .page-link {
        min-height: 42px;
        padding: 0.5rem 1rem;
    }
}
/* END PHASE 46 BLOCK */

/* ============================================================
   PHASE 47 — Public mobile vertical-density polish.

   Target metrics (per Codex measurement at 390px viewport):
   - Homepage hero: 1060px → 650-750px
   - Shop first-card visibility: 1436px → 850-950px
   - Shop card height (phone): 443-473px → 330-370px
   - Shop card height (tablet): ~700px → 460-520px
   - Apply / NCLEX / PMHNP / licensure: cap visible product/course
     cards so stress-data can't blow pages to 60-72k px

   Plus touch-target floors on the newsletter consent row + small
   "Request Assistance" / contact links that behave like actions.

   No layout rearrange. No template-based pagination on the
   product loops (that's done at the template via |slice in
   Phase 47.3/47.4). This block is CSS-only mobile compaction.
   ============================================================ */

/* ----- 47.1 — Homepage hero compaction at <=575 ----- */
@media (max-width: 575.98px) {
    body.page-home .hero-qcp {
        min-height: 0;
        padding-top: 1.5rem;
        padding-bottom: 0;
    }
    body.page-home .hero-qcp-container {
        padding: 1.25rem 1rem 1rem;
    }
    body.page-home .hero-qcp-eyebrow {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(1.85rem, 11vw, 2.6rem);
        line-height: 1.1;
        margin-bottom: 0.85rem;
    }
    body.page-home .hero-qcp-sub {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 1rem;
    }
    body.page-home .hero-qcp-actions {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    body.page-home .hero-qcp-btn {
        padding: 0.7rem 1.1rem;
        font-size: 0.92rem;
        min-height: 44px;
    }
    /* Proofbar — was floating + ~280px tall on phones; tighten + dock to bottom */
    body.page-home .hero-qcp-proofbar {
        position: relative;
        margin-top: 1rem;
        margin-bottom: 0;
        padding: 0 0.75rem;
    }
    body.page-home .hero-qcp-proofbar-inner {
        gap: 0.55rem;
        padding: 0.65rem 0.75rem;
        border-radius: 12px;
        grid-template-columns: 1fr 1fr;
    }
    body.page-home .proof-item {
        gap: 0.45rem;
        padding: 0;
    }
    body.page-home .proof-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    body.page-home .proof-label {
        font-size: 0.62rem;
        line-height: 1.15;
    }
    body.page-home .proof-value {
        font-size: 0.95rem;
        line-height: 1.2;
    }
    body.page-home .proof-note {
        display: none;        /* tightest mode — values + labels are enough */
    }
}
@media (max-width: 359.98px) {
    body.page-home .hero-qcp-headline {
        font-size: 1.7rem;
    }
    body.page-home .hero-qcp-proofbar-inner {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }
    body.page-home .proof-icon {
        width: 24px;
        height: 24px;
    }
}

/* ----- 47.2 — Shop hero/filter compaction + card heights ----- */
@media (max-width: 575.98px) {
    /* Shop hero — was ~580px tall; tighten to ~340px. */
    body.page-shop .courses-hero.shop-hero {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-headline {
        font-size: clamp(1.7rem, 9vw, 2.3rem);
        line-height: 1.15;
        margin-bottom: 0.7rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-lede {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 0.75rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-trust-strip {
        gap: 0.5rem;
        margin-top: 0.85rem;
        flex-wrap: wrap;
    }
    body.page-shop .courses-hero.shop-hero .courses-trust-strip li {
        font-size: 0.78rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-hero-actions {
        gap: 0.5rem;
        margin-top: 0.85rem;
        flex-wrap: wrap;
    }
    body.page-shop .courses-hero.shop-hero .courses-btn {
        padding: 0.7rem 1.1rem;
        font-size: 0.92rem;
        min-height: 44px;
    }
    /* Filter / search section — pull padding tighter */
    body.page-shop .shop-grid-section {
        padding-top: 1.5rem;
    }
    body.page-shop .shop-grid-section .text-center.mb-4 {
        margin-bottom: 0.75rem !important;
    }
    body.page-shop .shop-grid-section .courses-section-title {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }
    body.page-shop .shop-grid-section .courses-section-lede {
        font-size: 0.88rem;
        margin-bottom: 0.85rem;
    }
    body.page-shop .branch-toggle {
        margin-bottom: 0.5rem;
    }
    /* Shop card on phone — was 443-473px; aim for 330-370px. */
    body.page-shop .shop-product-card {
        padding: 0.75rem;
        border-radius: 12px;
    }
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 5 / 3;        /* was 4/3 → drops ~30px height */
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    body.page-shop .shop-product-card .shop-cover-placeholder {
        font-size: 1.5rem;
    }
    body.page-shop .shop-product-card .shop-cover-placeholder-label {
        font-size: 0.65rem;
        margin-top: 0.2rem;
    }
    body.page-shop .shop-product-card .courses-lineup-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.25rem;
        letter-spacing: 0.04em;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 0.95rem;
        line-height: 1.2;
        margin: 0 0 0.35rem;
        /* Clamp title to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.page-shop .shop-product-card h3 a {
        font-size: inherit;
    }
    body.page-shop .shop-product-card .courses-lineup-desc {
        font-size: 0.78rem;
        line-height: 1.35;
        margin-bottom: 0.45rem;
        /* Clamp description to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.page-shop .shop-product-card .courses-lineup-price-row {
        margin-bottom: 0.45rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price {
        font-size: 1.05rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price-label {
        font-size: 0.7rem;
    }
    body.page-shop .shop-product-card .courses-lineup-cta {
        padding: 0.5rem 0.75rem;
        font-size: 0.82rem;
        min-height: 38px;
    }
    body.page-shop .shop-product-card .courses-lineup-avail {
        font-size: 0.7rem;
        padding: 0.3rem 0.55rem;
    }
    body.page-shop .shop-product-card .courses-lineup-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.55rem;
    }
}
/* Tablet (576-991): card height was ~700px → aim for 460-520. */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.page-shop .shop-product-card {
        padding: 1rem;
    }
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 4 / 3;
        margin-bottom: 0.7rem;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 1.05rem;
        line-height: 1.25;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.page-shop .shop-product-card .courses-lineup-desc {
        font-size: 0.86rem;
        line-height: 1.4;
        margin-bottom: 0.65rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ----- 47.3 — Apply page program-card compact rows -----
   The full <div class="apply-program-card"> grid stays for the first
   `recommended_count` items (sliced in template). The remainder
   render as `.apply-program-row` — single-line tappable rows. */
body.page-apply .apply-program-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #ECE6D8;
    margin-bottom: 0.55rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    min-height: 64px;
}
body.page-apply .apply-program-row:hover,
body.page-apply .apply-program-row:focus-visible {
    border-color: #C4457A;
    box-shadow: 0 4px 12px rgba(196, 69, 122, 0.12);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
    outline: none;
}
body.page-apply .apply-program-row-body {
    min-width: 0;
}
body.page-apply .apply-program-row-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #B13269;
    font-weight: 700;
    margin-bottom: 0.15rem;
}
body.page-apply .apply-program-row-title {
    font-weight: 700;
    color: #1E2A3A;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-apply .apply-program-row-price {
    font-weight: 700;
    color: #355CFF;
    font-size: 0.95rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.page-apply .apply-program-row-arrow {
    color: #B13269;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
body.page-apply .apply-program-row-section-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5F6B7A;
    font-weight: 700;
    margin: 1.5rem 0 0.65rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ECE6D8;
}
@media (max-width: 575.98px) {
    body.page-apply .apply-program-row {
        padding: 0.75rem 0.85rem;
        gap: 0.55rem;
        grid-template-columns: 1fr auto;
    }
    body.page-apply .apply-program-row-arrow {
        display: none;
    }
    body.page-apply .apply-program-row-title {
        font-size: 0.9rem;
    }
    body.page-apply .apply-program-row-price {
        font-size: 0.88rem;
    }
}

/* ----- 47.4 — Marketing pages course-card mobile compaction -----
   nclex / pmhnp / licensure use .courses-lineup-card. Compact at
   mobile so the first card is visible above the fold. */
@media (max-width: 575.98px) {
    body.page-courses .courses-lineup-card {
        padding: 0.85rem 0.95rem;
        border-radius: 14px;
    }
    body.page-courses .courses-lineup-card .courses-lineup-image {
        aspect-ratio: 5 / 3;
        margin-bottom: 0.6rem;
    }
    body.page-courses .courses-lineup-card h3 {
        font-size: 1.05rem;
        line-height: 1.2;
        margin-bottom: 0.4rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.page-courses .courses-lineup-card .courses-lineup-desc {
        font-size: 0.85rem;
        line-height: 1.45;
        margin-bottom: 0.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.page-courses .courses-lineup-card .courses-lineup-eyebrow {
        font-size: 0.62rem;
    }
    body.page-courses .courses-lineup-card .courses-lineup-price {
        font-size: 1.1rem;
    }
    body.page-courses .courses-lineup-card .courses-lineup-price-row {
        margin-bottom: 0.5rem;
    }
}

/* ----- 47.4b — "View all programs" CTA after the limited section ----- */
.courses-lineup-overflow-cta {
    text-align: center;
    margin-top: 1.5rem;
}
.courses-lineup-overflow-cta .btn,
.courses-lineup-overflow-cta a.btn {
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
}

/* ----- 47.5b — Newsletter consent row tap area + small action links ----- */
.newsletter-form .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
}
.newsletter-form .form-check {
    padding-left: 2rem;
    margin-top: 0.4rem;
    min-height: 32px;
}
.newsletter-form .form-check-label {
    cursor: pointer;
    padding: 0.35rem 0;
    line-height: 1.45;
    display: inline-block;
}
.newsletter-form .form-check-input {
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .newsletter-form .form-check {
        padding: 0.4rem 0 0.4rem 2.1rem;
    }
}

/* ----- 47.5c — Convert small inline "Request Assistance" / "contact us"
   action links to proper tap targets when they sit in CTA contexts. */
.public-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(196, 69, 122, 0.32);
    color: #B13269;
    background: rgba(196, 69, 122, 0.04);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.86rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.public-action-link:hover,
.public-action-link:focus-visible {
    background: rgba(196, 69, 122, 0.10);
    border-color: #C4457A;
    color: #B13269;
    outline: none;
}
/* END PHASE 47 BLOCK */

/* ============================================================
   PHASE 48 — Migrate inline <style> blocks from public templates.

   Phase 47 polished mobile density. This block migrates the
   inline <style> blocks (templates were carrying ~106 lines of
   region-banner + ~60 lines of shop/index CSS) into the brand
   layer for single-source-of-truth.

   Bigger inline blocks remain (apply 458 lines, shop/detail 409,
   courses/detail 304, contact 256) — those will move in a
   follow-up so we don't bloat this commit. They're scoped by
   body class anyway and don't conflict with anything here.
   ============================================================ */

/* ----- 48.1 — region_banner.html migrated ----- */
.region-hint {
    background: #FBF7EE;
    border-bottom: 1px solid #ECE6D8;
    position: relative;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
    max-height: 200px;
}
.region-hint.is-dismissing {
    max-height: 0 !important;
    opacity: 0;
    border-bottom-color: transparent;
}
.region-hint-strip {
    height: 3px;
    background: linear-gradient(90deg, #355CFF 0%, #A9D84E 38%, #E8B6D8 70%, #E9D15B 100%);
}
.region-hint-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .92rem;
    color: #1E2A3A;
    line-height: 1.4;
}
.region-hint-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #ECE6D8;
    color: #355CFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.region-hint-copy {
    flex: 1 1 auto;
    min-width: 0;
    color: #2F3B4C;
}
.region-hint-copy strong {
    color: #1E2A3A;
    font-weight: 700;
}
.region-hint-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: .9rem;
    /* Phase 47.5 — ≥44px height for proper touch target */
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(196, 69, 122, .25);
    transition: transform .12s ease, box-shadow .15s ease;
}
.region-hint-action:hover,
.region-hint-action:focus-visible {
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(196, 69, 122, .32);
}
.region-hint-close {
    flex-shrink: 0;
    /* Phase 47.5 — 44×44 tap target */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: #5F6B7A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background .15s ease, color .15s ease;
}
.region-hint-close:hover,
.region-hint-close:focus-visible {
    background: rgba(196, 69, 122, .08);
    color: #B13269;
    outline: none;
}
@media (max-width: 575px) {
    .region-hint-inner { flex-wrap: wrap; gap: 10px; }
    .region-hint-copy { flex: 1 1 100%; order: 2; font-size: .88rem; }
    .region-hint-icon { order: 1; }
    .region-hint-action { order: 3; }
    .region-hint-close { order: 4; }
}

/* ----- 48.2 — shop/index.html migrated ----- */
body.page-shop .courses-hero .branch-toggle-btn.active,
body.page-shop .courses-hero .branch-toggle-btn[aria-selected="true"] {
    background: linear-gradient(180deg, #f0267a 0%, #C4457A 52%, #B13269 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 12px rgba(196, 69, 122, .25) !important;
    font-weight: 700 !important;
}
body.page-shop .courses-hero .branch-toggle-btn.active i,
body.page-shop .courses-hero .branch-toggle-btn[aria-selected="true"] i {
    color: #FFFFFF !important;
}
body.page-shop .courses-hero .branch-toggle-btn:hover:not(.active) {
    background: rgba(196, 69, 122, .08) !important;
    color: #B13269 !important;
}
body.page-shop .shop-grid-empty {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #ECE6D8;
    border-radius: 16px;
    padding: 44px 32px;
    box-shadow: 0 1px 3px rgba(30, 42, 58, .04),
                0 12px 36px rgba(30, 42, 58, .04);
}
body.page-shop .shop-grid-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #FBE8F0;
    color: #C4457A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 14px;
}
body.page-shop .shop-grid-empty h3 {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: #1E2A3A;
    margin: 0 0 8px;
}
body.page-shop .shop-grid-empty p {
    color: #5F6B7A;
    font-size: .95rem;
    line-height: 1.55;
    margin-bottom: 18px;
}
/* END PHASE 48 BLOCK */

/* ============================================================
   PHASE 49 — Final public-site density + tap-target polish.

   Phase 47 cut homepage hero (1060→766) and apply (72k→23k) but
   five gaps remain per measured audit at 390px:

   - Shop first card at 1545px (target 900-1100)
   - Shop cards still 425-443 phone / 630 tablet
   - Apply page still ~23k px (~200 visible card-row units)
   - NCLEX hero 1150 / PMHNP 1211 / Licensure 1338 (target 650-800)
   - Schedule toggles + remaining native checkbox tap targets

   Pure CSS + one `<details>` template change in apply.html for
   progressive disclosure on long program lists.
   ============================================================ */

/* ----- 49.1 — Shop hero/filter further compaction ----- */
@media (max-width: 575.98px) {
    /* Hero shrunk more — drop padding-bottom, hide trust strip
       (already shown in proofbar elsewhere on site). */
    body.page-shop .courses-hero.shop-hero {
        padding-top: 1.25rem;
        padding-bottom: 0.5rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-trust-strip {
        display: none;
    }
    body.page-shop .courses-hero.shop-hero .courses-headline {
        font-size: clamp(1.55rem, 8.5vw, 2rem);
        margin-bottom: 0.5rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-lede {
        font-size: 0.88rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-eyebrow {
        font-size: 0.65rem;
        margin-bottom: 0.35rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-hero-actions {
        margin-top: 0.5rem;
    }
    /* Catalog header band — trim title + lede, drop bottom margin. */
    body.page-shop .shop-grid-section {
        padding-top: 1rem;
    }
    body.page-shop .shop-grid-section .text-center.mb-4 {
        margin-bottom: 0.5rem !important;
    }
    body.page-shop .shop-grid-section .courses-section-eyebrow {
        font-size: 0.65rem;
        margin-bottom: 0.25rem;
    }
    body.page-shop .shop-grid-section .courses-section-title {
        font-size: 1.25rem;
        line-height: 1.2;
        margin-bottom: 0.35rem;
    }
    body.page-shop .shop-grid-section .courses-section-lede {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }
    body.page-shop .branch-toggle {
        margin-bottom: 0.4rem;
        padding: 0.2rem;
    }
    body.page-shop .branch-toggle-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
        min-height: 40px;
    }
    /* Search bar / filter chips card */
    body.page-shop .shop-filters-row,
    body.page-shop .shop-search-row {
        margin-bottom: 0.5rem;
    }
}

/* ----- 49.2 — Shop card tighter phone + tablet ----- */
@media (max-width: 575.98px) {
    body.page-shop .shop-product-card {
        padding: 0.65rem 0.7rem;
    }
    /* Tighter image — 16:9 saves more vertical than 5:3 did. */
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 16 / 10;
        margin-bottom: 0.4rem;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 0.9rem;
        line-height: 1.2;
        margin-bottom: 0.25rem;
        -webkit-line-clamp: 2;
    }
    /* Hide description entirely on phone — title + price + CTA tells the story. */
    body.page-shop .shop-product-card .courses-lineup-desc {
        display: none;
    }
    /* Tighter eyebrow / availability chip */
    body.page-shop .shop-product-card .courses-lineup-eyebrow {
        font-size: 0.6rem;
        margin-bottom: 0.2rem;
        padding: 0;
        background: transparent;
        border: 0;
    }
    body.page-shop .shop-product-card .courses-lineup-avail {
        display: none;        /* same — branch shown in chip filter above */
    }
    body.page-shop .shop-product-card .courses-lineup-price-row {
        margin-bottom: 0.35rem;
        gap: 0.35rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price-label {
        font-size: 0.65rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price {
        font-size: 1rem;
    }
    body.page-shop .shop-product-card .courses-lineup-cta {
        padding: 0.45rem 0.65rem;
        font-size: 0.78rem;
        min-height: 36px;
    }
    body.page-shop .shop-product-card .courses-lineup-badge {
        font-size: 0.55rem;
        padding: 0.18rem 0.45rem;
    }
}
/* Tablet: cards 460-520 target (was ~630). Drop desc to 2 lines, tighter image. */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.page-shop .shop-product-card {
        padding: 0.85rem 0.95rem;
    }
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 16 / 10;
        margin-bottom: 0.55rem;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
        -webkit-line-clamp: 2;
    }
    body.page-shop .shop-product-card .courses-lineup-desc {
        -webkit-line-clamp: 2;
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 0.5rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price {
        font-size: 1.05rem;
    }
    body.page-shop .shop-product-card .courses-lineup-cta {
        min-height: 38px;
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
    }
}

/* ----- 49.3 — Apply page <details>/<summary> for overflow ----- */
.apply-program-rows-extra {
    margin: 0;
}
.apply-program-rows-extra[open] .apply-program-rows-toggle::after {
    transform: rotate(180deg);
}
.apply-program-rows-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.85rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: rgba(45, 57, 245, 0.06);
    border: 1px solid rgba(45, 57, 245, 0.24);
    color: #2D39F5;
    font-weight: 700;
    font-size: 0.92rem;
    min-height: 44px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.apply-program-rows-toggle::-webkit-details-marker { display: none; }
.apply-program-rows-toggle:hover,
.apply-program-rows-toggle:focus-visible {
    background: rgba(45, 57, 245, 0.10);
    border-color: #2D39F5;
    outline: none;
}
.apply-program-rows-toggle::after {
    content: "\F282";        /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}

/* ----- 49.4 — Program page hero compaction (NCLEX/PMHNP/licensure)
   Targets at 390: 650-800px. NCLEX/PMHNP use body.page-courses;
   licensure has body.page-licensure. ----- */
@media (max-width: 575.98px) {
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero),
    body.page-licensure .licensure-hero,
    body.page-licensure .courses-hero {
        padding-top: 1.5rem;
        padding-bottom: 1.25rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-headline,
    body.page-licensure .licensure-hero .licensure-headline,
    body.page-licensure .courses-hero .courses-headline {
        font-size: clamp(1.7rem, 9vw, 2.3rem);
        line-height: 1.15;
        margin-bottom: 0.7rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-lede,
    body.page-licensure .licensure-hero p,
    body.page-licensure .courses-hero .courses-lede {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 0.85rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-trust-strip,
    body.page-licensure .licensure-hero .licensure-trust-strip,
    body.page-licensure .courses-hero .courses-trust-strip {
        gap: 0.45rem;
        margin-top: 0.7rem;
        font-size: 0.78rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-hero-actions,
    body.page-licensure .licensure-hero .licensure-hero-actions {
        gap: 0.5rem;
        margin-top: 0.85rem;
        flex-wrap: wrap;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-btn,
    body.page-licensure .licensure-btn,
    body.page-licensure .courses-btn {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
        min-height: 44px;
    }
    /* Hero preview cards (NCLEX has 3 phase preview cards in the hero) */
    body.page-courses .courses-hero-card-stack,
    body.page-courses .courses-hero-mini-card {
        font-size: 0.78rem;
    }
}

/* ----- 49.5 — Remaining tap targets ----- */
/* Schedule List/Calendar view toggle — buttons too small (was ~32px). */
.schedule-view-toggle {
    gap: 0.5rem;
}
.schedule-view-toggle .schedule-view-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.55rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
}

/* Native checkbox tap area — bigger glyph + 32+ px padding row.
   Applies wherever .form-check appears in non-admin contexts. */
body.public-ui .form-check {
    min-height: 32px;
    padding-top: 0.15rem;
}
body.public-ui .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.2rem;
    cursor: pointer;
}
body.public-ui .form-check-label {
    cursor: pointer;
    padding: 0.25rem 0;
    line-height: 1.45;
}

/* Licensure "Request Assistance" CTA — bump from ~30 to 44 */
body.page-licensure .licensure-service-cta {
    min-height: 44px;
    padding: 0.65rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 700;
}

/* Inline informational links inside hero / section ledes ("Contact us
   for current cohort schedule") — these were `.courses-inline-link`
   before. Apply same pill treatment as `.public-action-link` when
   they're standalone CTAs (not in flowing copy). */
.courses-inline-link {
    color: #B13269;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 600;
    padding: 0.2rem 0;
    display: inline-block;
    min-height: 32px;
}
.courses-inline-link:hover,
.courses-inline-link:focus-visible {
    color: #C4457A;
    text-decoration-color: #C4457A;
}
/* END PHASE 49 BLOCK */

/* ============================================================
   PHASE 50 — Final public-site density + tap-target polish to 10/10.

   Phase 49 cut public-site score from 8.0 → 8.8. Five gaps remain
   per measured browser audit:

   - /shop/ first card at 1338 (target 950-1100)
   - Shop tablet cards: 569 @ 768, 695 @ 1024 (target 460-520 / 500-580)
   - Program heroes: NCLEX 930, PMHNP 994, licensure 1137 (target 700-880)
   - Course detail hero 1098, product detail 1180 (target 750-900)
   - Tap targets: footer social 30x30, schedule chips 39, consent 19x19

   No backend, no admin, no student portal. Pure visual density.
   ============================================================ */

/* ----- 50.1 — Shop hero/filter aggressive compaction ----- */
@media (max-width: 575.98px) {
    body.page-shop .courses-hero.shop-hero {
        padding-top: 0.85rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    body.page-shop .courses-hero.shop-hero .courses-hero-inner {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    body.page-shop .courses-hero.shop-hero .row.align-items-center {
        --bs-gutter-y: 0 !important;
    }
    body.page-shop .courses-hero.shop-hero .col-lg-9 {
        padding-top: 0.25rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.25rem;
    }
    body.page-shop .courses-hero.shop-hero .courses-headline {
        font-size: clamp(1.4rem, 7.5vw, 1.85rem);
        margin-bottom: 0.4rem;
        line-height: 1.12;
    }
    body.page-shop .courses-hero.shop-hero .courses-lede {
        font-size: 0.82rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        max-width: none;
    }
    /* Drop the redundant hero actions on phone — chip filter below
       does the same browsing job. Saves ~88px. */
    body.page-shop .courses-hero.shop-hero .courses-hero-actions {
        display: none;
    }
    /* Catalog header band — tight as possible without losing structure. */
    body.page-shop .shop-grid-section {
        padding-top: 0.5rem !important;
    }
    body.page-shop .shop-grid-section > .container > .text-center.mb-4 {
        margin-bottom: 0.4rem !important;
        text-align: left !important;
    }
    body.page-shop .shop-grid-section .courses-section-eyebrow {
        font-size: 0.6rem;
        margin-bottom: 0.15rem;
        display: inline-block;
    }
    body.page-shop .shop-grid-section .courses-section-title {
        font-size: 1.15rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }
    body.page-shop .shop-grid-section .courses-section-lede {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 0.5rem;
        max-width: none !important;
    }
    body.page-shop .shop-grid-section .branch-toggle {
        margin-bottom: 0.4rem;
    }
    body.page-shop .shop-grid-section .branch-toggle-btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.78rem;
        min-height: 38px;
    }
    /* Search bar + filter chips wrapper — pull margin in tight. */
    body.page-shop .shop-grid-section .input-group,
    body.page-shop .shop-grid-section form[role="search"] {
        margin-bottom: 0.5rem !important;
    }
    body.page-shop .shop-grid-section .form-control {
        min-height: 44px;
    }
    /* Category chips row — buttons more compact but still 40px tall. */
    body.page-shop .shop-grid-section .nav-pills,
    body.page-shop .shop-grid-section .shop-category-chips {
        gap: 0.35rem;
        margin-bottom: 0.5rem !important;
    }
    body.page-shop .shop-grid-section .nav-pills .nav-link,
    body.page-shop .shop-grid-section .shop-category-chip {
        padding: 0.45rem 0.85rem;
        font-size: 0.8rem;
        min-height: 40px;
    }
    /* Catalog grid itself — tighter outer padding-top */
    body.page-shop .shop-grid-section .row.g-4,
    body.page-shop .shop-grid-section .row.g-3 {
        --bs-gutter-y: 0.6rem;
    }
}

/* ----- 50.2 — Shop tablet card heights ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.page-shop .shop-product-card {
        padding: 0.75rem 0.85rem;
    }
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 16 / 9;     /* was 16:10; saves ~30px */
        margin-bottom: 0.45rem;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 0.98rem;
        line-height: 1.2;
        margin-bottom: 0.35rem;
        -webkit-line-clamp: 2;
    }
    body.page-shop .shop-product-card .courses-lineup-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.25rem;
    }
    body.page-shop .shop-product-card .courses-lineup-desc {
        -webkit-line-clamp: 2;
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }
    body.page-shop .shop-product-card .courses-lineup-avail {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        margin-bottom: 0.4rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price {
        font-size: 1rem;
    }
    body.page-shop .shop-product-card .courses-lineup-price-row {
        margin-bottom: 0.4rem;
        gap: 0.35rem;
    }
    body.page-shop .shop-product-card .courses-lineup-cta {
        min-height: 38px;
        padding: 0.45rem 0.75rem;
        font-size: 0.82rem;
    }
}
/* lg-only 1024 — tablet landscape, was 695px → target 500-580. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.page-shop .shop-product-card {
        padding: 0.85rem 0.95rem;
    }
    body.page-shop .shop-product-card .courses-lineup-image {
        aspect-ratio: 16 / 10;
        margin-bottom: 0.55rem;
    }
    body.page-shop .shop-product-card h3 {
        font-size: 1.05rem;
        line-height: 1.25;
        -webkit-line-clamp: 2;
    }
    body.page-shop .shop-product-card .courses-lineup-desc {
        -webkit-line-clamp: 2;
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 0.55rem;
    }
}

/* ----- 50.3 — Program hero compaction (NCLEX/PMHNP/licensure)
   Phase 49.4 trimmed but the licensure checklist + side-stack ate
   ~300px. Compact those at <=767 and stack tighter. ----- */
@media (max-width: 575.98px) {
    /* Generic .courses-hero (used by nclex/pmhnp) */
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .row.g-5 {
        --bs-gutter-y: 0.85rem !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-headline {
        font-size: clamp(1.6rem, 8.5vw, 2.1rem);
        margin-bottom: 0.5rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-lede {
        font-size: 0.88rem;
        margin-bottom: 0.65rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-trust-strip {
        gap: 0.35rem;
        margin: 0.5rem 0;
        font-size: 0.74rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-trust-strip li {
        padding: 0.2rem 0;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-hero-actions {
        gap: 0.45rem;
        margin-top: 0.65rem;
    }
    /* NCLEX-specific: 3 phase preview cards in the hero — compact. */
    body.page-courses .courses-hero-card-stack {
        gap: 0.45rem;
        margin-top: 0.85rem;
    }
    body.page-courses .courses-hero-mini-card {
        padding: 0.55rem 0.7rem;
        font-size: 0.78rem;
        gap: 0.45rem;
    }
    body.page-courses .courses-hero-mini-card-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    body.page-courses .courses-hero-mini-card-title {
        font-size: 0.82rem;
    }
    body.page-courses .courses-hero-mini-card-body {
        font-size: 0.72rem;
        line-height: 1.3;
    }

    /* Licensure hero — compact checklist (was the worst at 1137) */
    body.page-licensure .licensure-hero {
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }
    body.page-licensure .licensure-hero-inner .row.g-5 {
        --bs-gutter-y: 0.85rem !important;
    }
    body.page-licensure .licensure-headline {
        font-size: clamp(1.55rem, 8.2vw, 2.05rem);
        line-height: 1.12;
        margin-bottom: 0.55rem;
    }
    body.page-licensure .licensure-lede {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-bottom: 0.65rem;
    }
    body.page-licensure .licensure-trust-strip {
        gap: 0.35rem;
        margin: 0.5rem 0 0.65rem;
        font-size: 0.74rem;
    }
    body.page-licensure .licensure-trust-strip li {
        padding: 0.2rem 0;
    }
    body.page-licensure .licensure-hero-actions {
        gap: 0.45rem;
        margin-top: 0.5rem;
    }
    /* Checklist card — was rendering ~7 items × ~38px = 270px just in
       list, plus header + padding = ~360px. Compact to ~210px. */
    body.page-licensure .licensure-hero-checklist {
        padding: 0.85rem 1rem;
        border-radius: 14px;
    }
    body.page-licensure .licensure-hero-checklist-header {
        margin-bottom: 0.4rem;
        padding-bottom: 0.4rem;
    }
    body.page-licensure .licensure-hero-checklist-eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.15rem;
    }
    body.page-licensure .licensure-hero-checklist-header h3 {
        font-size: 0.98rem;
        margin: 0;
        line-height: 1.2;
    }
    body.page-licensure .licensure-hero-checklist ul {
        margin: 0;
        padding: 0;
    }
    body.page-licensure .licensure-hero-checklist ul li {
        font-size: 0.82rem;
        line-height: 1.3;
        padding: 0.25rem 0;
        gap: 0.4rem;
    }
    body.page-licensure .licensure-hero-checklist ul li i {
        font-size: 0.95rem;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
    body.page-licensure .licensure-hero {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* ----- 50.4 — Course detail + Shop product detail hero compaction ----- */
@media (max-width: 575.98px) {
    /* Course detail (body.page-course-detail) */
    body.page-course-detail .course-detail-hero {
        padding: 0.85rem 0 1.25rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-headline {
        font-size: clamp(1.4rem, 7.8vw, 1.95rem);
        margin: 0.5rem 0 0.55rem !important;
        line-height: 1.15;
    }
    body.page-course-detail .course-detail-hero-media {
        margin-bottom: 0.75rem;
    }
    body.page-course-detail .course-detail-hero-image {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-course-detail .course-detail-rainbow-strip {
        margin-bottom: 10px;
    }
    body.page-course-detail .course-detail-crumbs {
        font-size: 0.75rem;
    }
    /* Buy/Pay sticky panel — tighter padding + bring CTA up. */
    body.page-course-detail .course-detail-buy-panel,
    body.page-course-detail .course-detail-cta-panel,
    body.page-course-detail .course-detail-price-panel {
        padding: 0.85rem 1rem !important;
    }

    /* Shop product detail (body.page-shop-detail) */
    body.page-shop-detail .shop-detail-hero,
    body.page-shop-detail .product-detail-hero,
    body.page-shop-detail .courses-hero {
        padding-top: 0.85rem !important;
        padding-bottom: 1rem !important;
    }
    body.page-shop-detail .shop-detail-hero .courses-headline,
    body.page-shop-detail .product-detail-hero .courses-headline,
    body.page-shop-detail .courses-headline {
        font-size: clamp(1.4rem, 7.8vw, 1.95rem);
        margin-bottom: 0.55rem;
        line-height: 1.15;
    }
    body.page-shop-detail .shop-detail-hero-media,
    body.page-shop-detail .product-detail-hero-media {
        margin-bottom: 0.75rem;
    }
    body.page-shop-detail .shop-detail-hero-image,
    body.page-shop-detail .product-detail-hero-image {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-shop-detail .shop-detail-buy-panel,
    body.page-shop-detail .product-buy-panel,
    body.page-shop-detail .shop-detail-cta-panel {
        padding: 0.85rem 1rem !important;
    }
    body.page-shop-detail .shop-detail-crumbs,
    body.page-shop-detail .product-detail-crumbs {
        font-size: 0.75rem;
    }
    body.page-shop-detail .courses-eyebrow {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
    }
}

/* ----- 50.5 — Tap target polish ----- */

/* Footer social icons — keep visual size (~1.1rem icon) but expand
   tap area to 40-44px. */
body.public-ui .footer-social-row a {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.12s ease;
}
body.public-ui .footer-social-row a:hover,
body.public-ui .footer-social-row a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

/* Premium topbar social icons (top of page) — same tap target floor */
body.public-ui .premium-topbar .social-icons a {
    min-width: 40px;
    min-height: 40px;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Schedule chips — was 39px, bump to 44 + tighter font for fit. */
.schedule-chip-filter,
body.public-ui .schedule-chip-filter {
    min-height: 44px;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
}
@media (max-width: 575.98px) {
    body.public-ui .schedule-filter-chips {
        gap: 0.35rem;
    }
    body.public-ui .schedule-chip-filter {
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
    }
}

/* Consent checkbox — expand label tap area + bigger glyph. Applied
   via body.public-ui scoping plus standalone .newsletter-form
   already in Phase 47.5b. This block extends to other forms
   (apply, contact) that use the same `.form-check` pattern. */
body.public-ui .form-check {
    min-height: 44px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 2.1rem;        /* room for the 1.2rem glyph */
}
body.public-ui .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    margin-left: -2.1rem;
    cursor: pointer;
}
body.public-ui .form-check-label {
    cursor: pointer;
    padding: 0.25rem 0;
    line-height: 1.45;
    min-height: 36px;
    display: inline-block;
    width: 100%;
}

/* Small "View all" / "Contact us" inline links inside section ledes —
   wrap them in a slightly-larger tap area without changing visual size.
   Existing `.courses-inline-link` already has min-height 32 from
   Phase 49.5; this strengthens at mobile widths where touch matters. */
@media (max-width: 991.98px) {
    .courses-inline-link {
        min-height: 36px;
        padding: 0.3rem 0;
        display: inline-block;
    }
    /* "Contact us for current cohort schedule" / "View all N programs" -
       the public-action-link pill already 36px; bump to 40 on mobile. */
    .public-action-link {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }
}
/* END PHASE 50 BLOCK */

/* ============================================================
   PHASE 51 — Final public hero/detail compaction.

   Phase 50 missed because:
   - NCLEX/PMHNP hero side stack uses `.courses-hero-stage` +
     `.courses-hero-card` (not the `.courses-hero-card-stack` +
     `.courses-hero-mini-card` Phase 50 targeted). Side stack
     contributed ~280-340px and was never trimmed.
   - shop/detail.html inline style sets `.shop-detail-hero-empty`
     to aspect-ratio 4/3 for the no-image placeholder. Phase 50
     overrode `.shop-detail-hero-image` but not `.shop-detail-hero-empty`.
   - Pay cards carry a 4-item trust list + meta + help on mobile
     where the same info already appears in page body sections.

   Targets at 390:
     NCLEX/PMHNP hero ≤ 820, Licensure ≤ 880
     Course detail ≤ 900, Product detail ≤ 900
   ============================================================ */

/* ----- 51.1 — NCLEX + PMHNP hero side stack (real selectors) ----- */
@media (max-width: 575.98px) {
    body.page-courses .courses-hero-stage {
        gap: 0.35rem;
        margin-top: 0.85rem;
    }
    body.page-courses .courses-hero-card {
        padding: 0.55rem 0.7rem;
        border-radius: 10px;
    }
    body.page-courses .courses-hero-card-eyebrow {
        font-size: 0.6rem;
        margin-bottom: 0.15rem;
        letter-spacing: 0.05em;
    }
    /* Drop the meter on phone — visual decoration only */
    body.page-courses .courses-hero-card-meter {
        display: none;
    }
    /* Tighter title inside each stage card */
    body.page-courses .courses-hero-card h3,
    body.page-courses .courses-hero-card h4,
    body.page-courses .courses-hero-card .courses-hero-card-title {
        font-size: 0.88rem;
        line-height: 1.2;
        margin: 0;
    }
    /* Strip extra spacing in stage card body / icons */
    body.page-courses .courses-hero-card p,
    body.page-courses .courses-hero-card .courses-hero-card-body {
        font-size: 0.78rem;
        line-height: 1.3;
        margin: 0.15rem 0 0;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    body.page-courses .courses-hero-stage {
        gap: 0.5rem;
    }
    body.page-courses .courses-hero-card {
        padding: 0.7rem 0.85rem;
    }
}

/* ----- 51.2 — Licensure hero further compaction ----- */
@media (max-width: 575.98px) {
    body.page-licensure .licensure-hero {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }
    body.page-licensure .licensure-hero-inner > .row.g-5,
    body.page-licensure .licensure-hero-inner .row {
        --bs-gutter-y: 0.6rem !important;
    }
    body.page-licensure .licensure-hero-checklist {
        padding: 0.7rem 0.85rem;
    }
    body.page-licensure .licensure-hero-checklist-header {
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
    }
    body.page-licensure .licensure-hero-checklist-header h3 {
        font-size: 0.92rem;
    }
    body.page-licensure .licensure-hero-checklist ul li {
        font-size: 0.78rem;
        line-height: 1.25;
        padding: 0.2rem 0;
        gap: 0.35rem;
    }
    body.page-licensure .licensure-hero-checklist ul li i {
        font-size: 0.85rem;
    }
    body.page-licensure .licensure-hero-actions {
        margin-top: 0.4rem;
    }
    body.page-licensure .licensure-headline {
        margin-bottom: 0.45rem;
    }
    body.page-licensure .licensure-lede {
        margin-bottom: 0.55rem;
    }
    body.page-licensure .licensure-trust-strip {
        margin: 0.4rem 0 0.55rem;
    }
}

/* ----- 51.3 — Course detail + Product detail hero compaction ----- */
@media (max-width: 575.98px) {
    /* Empty image placeholder — aspect ratio override (Phase 50 missed it). */
    body.page-course-detail .course-detail-hero-empty,
    body.page-shop-detail .shop-detail-hero-empty {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-course-detail .course-detail-hero-empty i,
    body.page-shop-detail .shop-detail-hero-empty i {
        font-size: 2rem !important;
    }
    body.page-shop-detail .shop-detail-hero-empty {
        gap: 10px !important;
        padding: 16px !important;
    }
    body.page-shop-detail .shop-detail-hero-empty span {
        font-size: 0.68rem !important;
    }

    /* Pay card — drop sticky, tighter padding, smaller price,
       hide trust list + meta (info duplicated below). */
    body.page-course-detail .course-detail-pay,
    body.page-shop-detail .shop-detail-pay {
        padding: 0.85rem 1rem !important;
        position: relative !important;
        top: 0 !important;
        margin-top: 0.5rem;
    }
    body.page-course-detail .course-detail-pay-price,
    body.page-shop-detail .shop-detail-pay-price {
        font-size: 1.55rem !important;
        margin-bottom: 0.3rem !important;
    }
    body.page-course-detail .course-detail-pay-eyebrow,
    body.page-shop-detail .shop-detail-pay-eyebrow {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }
    body.page-course-detail .course-detail-pay-alt,
    body.page-shop-detail .shop-detail-pay-alt {
        margin: 0 0 0.6rem !important;
        font-size: 0.82rem !important;
    }
    /* Hide trust list (~96px) and meta (~40px) on phone. */
    body.page-course-detail .course-detail-pay-trust,
    body.page-shop-detail .shop-detail-pay-trust {
        display: none !important;
    }
    body.page-course-detail .course-detail-pay-meta,
    body.page-shop-detail .shop-detail-pay-meta {
        display: none !important;
    }
    /* Help text tighter */
    body.page-course-detail .course-detail-pay-help,
    body.page-shop-detail .shop-detail-pay-help {
        margin: 0.55rem 0 0 !important;
        font-size: 0.78rem !important;
    }
    /* Progress section tighter (course detail only) */
    body.page-course-detail .course-detail-pay-progress {
        margin-top: 0.6rem !important;
        padding-top: 0.6rem !important;
    }
    body.page-course-detail .course-detail-pay-progress-meta {
        font-size: 0.75rem !important;
        margin-top: 0.3rem !important;
    }
    /* Product-specific extras */
    body.page-shop-detail .shop-detail-pay-qty {
        margin-bottom: 0.55rem !important;
        gap: 0.5rem !important;
    }
    body.page-shop-detail .shop-detail-pay-qty input {
        width: 64px !important;
        padding: 6px 8px !important;
    }
    body.page-shop-detail .shop-detail-pay-lock {
        padding: 0.55rem 0.65rem !important;
        margin-bottom: 0.55rem !important;
        font-size: 0.78rem !important;
        gap: 8px !important;
    }
    /* Tighter hero padding on both detail pages */
    body.page-course-detail .course-detail-hero,
    body.page-shop-detail .shop-detail-hero {
        padding: 0.85rem 0 0.85rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-headline,
    body.page-shop-detail .shop-detail-hero .courses-headline {
        margin: 0.45rem 0 0.5rem !important;
        font-size: clamp(1.35rem, 7.5vw, 1.85rem) !important;
        line-height: 1.15 !important;
    }
    body.page-course-detail .course-detail-hero .courses-lede,
    body.page-shop-detail .shop-detail-hero .courses-lede {
        margin-bottom: 0.65rem !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    body.page-course-detail .course-detail-hero-media,
    body.page-shop-detail .shop-detail-hero-media {
        margin-bottom: 0.6rem !important;
    }
    body.page-course-detail .course-detail-hero-image,
    body.page-shop-detail .shop-detail-hero-image {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-course-detail .course-detail-info,
    body.page-shop-detail .shop-detail-info {
        padding: 0.3rem 0 0.85rem !important;
    }
}

/* ----- 51.4 — Apply page overflow CTA styling ----- */
body.page-apply .apply-program-row-overflow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1.2rem;
    border-radius: 12px;
    background: rgba(45, 57, 245, 0.06);
    border: 1px solid rgba(45, 57, 245, 0.24);
    color: #2D39F5;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    min-height: 44px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.page-apply .apply-program-row-overflow:hover,
body.page-apply .apply-program-row-overflow:focus-visible {
    background: rgba(45, 57, 245, 0.10);
    border-color: #2D39F5;
    color: #2D39F5;
    outline: none;
}
body.page-apply .apply-program-row-overflow::after {
    content: "\F285";        /* bi-arrow-right */
    font-family: 'bootstrap-icons';
    margin-left: 0.25rem;
    font-size: 0.85rem;
}
/* END PHASE 51 BLOCK */

/* ============================================================
   PHASE 52 — Final hero structure + tablet polish.

   Phase 51 nailed detail-page heroes (1062→760, 1183→822) and apply
   page DOM (200→19). Three residual gaps:

   - NCLEX 868, PMHNP 909, Licensure 914 still above target because
     the side stack/checklist stacks BELOW the intro at <lg and
     consumes ~180-260px of vertical column space.
   - Detail-page tablet heroes (576-991) at 1326-1468 — Phase 51's
     mobile rules don't fire above 575.
   - Some tap targets remain 38-39px.

   Strategy per user feedback ("collapse them into a compact proof
   strip"): switch the stage/checklist from column-stack to a
   horizontal grid at <lg so the same content reads as a compact
   proof row instead of a vertical column.

   No template changes — pure CSS via grid + display rules on
   the existing markup.
   ============================================================ */

/* ----- 52.1 — NCLEX + PMHNP stage as 3-up grid at <lg ----- */
@media (max-width: 991.98px) {
    /* Switch the vertical stack to a horizontal 3-up grid. Same
       content, much less vertical real estate. */
    body.page-courses .courses-hero-stage {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.4rem;
        margin-top: 0.85rem;
    }
    body.page-courses .courses-hero-card {
        padding: 0.55rem 0.55rem !important;
        text-align: center;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.15rem;
    }
    /* Hide body copy on compact mode — eyebrow + title carry the message */
    body.page-courses .courses-hero-card p,
    body.page-courses .courses-hero-card .courses-hero-card-body,
    body.page-courses .courses-hero-card .courses-hero-card-meter {
        display: none !important;
    }
    body.page-courses .courses-hero-card-eyebrow {
        font-size: 0.55rem !important;
        line-height: 1.15;
        margin: 0 !important;
        letter-spacing: 0.06em;
    }
    body.page-courses .courses-hero-card h3,
    body.page-courses .courses-hero-card h4,
    body.page-courses .courses-hero-card .courses-hero-card-title {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
}
@media (max-width: 359.98px) {
    /* At 320 the 3-up grid is tight — drop to 1fr 1fr (2-up). */
    body.page-courses .courses-hero-stage {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }
    /* Hide the 3rd card at 320 so we don't get an orphan 3rd-row card. */
    body.page-courses .courses-hero-card--bot {
        display: none !important;
    }
}

/* ----- 52.2 — Licensure checklist as compact 2-col grid at <lg ----- */
@media (max-width: 991.98px) {
    body.page-licensure .licensure-hero-checklist ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.15rem 0.6rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body.page-licensure .licensure-hero-checklist ul li {
        font-size: 0.72rem !important;
        padding: 0.15rem 0 !important;
        line-height: 1.25 !important;
        gap: 0.3rem !important;
        display: flex;
        align-items: flex-start;
    }
    body.page-licensure .licensure-hero-checklist ul li i {
        font-size: 0.8rem !important;
        flex-shrink: 0;
        margin-top: 0.05rem;
    }
    body.page-licensure .licensure-hero-checklist {
        padding: 0.7rem 0.85rem !important;
    }
    body.page-licensure .licensure-hero-checklist-header {
        margin-bottom: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    body.page-licensure .licensure-hero-checklist-eyebrow {
        font-size: 0.6rem !important;
    }
    body.page-licensure .licensure-hero-checklist-header h3 {
        font-size: 0.92rem !important;
        margin: 0 !important;
    }
}
@media (max-width: 359.98px) {
    /* At 320, keep 2-col grid but tighter and shorter labels */
    body.page-licensure .licensure-hero-checklist ul {
        gap: 0.1rem 0.4rem;
    }
    body.page-licensure .licensure-hero-checklist ul li {
        font-size: 0.68rem !important;
    }
}

/* ----- 52.3 — Detail-page tablet (576-991) hero compaction -----
   Phase 51 mobile rules only fired at <=575. At 576-991 (tablet),
   detail heroes remained 1326-1468. Extend the recipe. ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Hero padding + media aspect tighter than desktop default */
    body.page-course-detail .course-detail-hero,
    body.page-shop-detail .shop-detail-hero {
        padding: 1.25rem 0 1.5rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-headline,
    body.page-shop-detail .shop-detail-hero .courses-headline {
        font-size: clamp(1.85rem, 4.5vw, 2.4rem) !important;
        line-height: 1.15 !important;
        margin: 0.6rem 0 0.65rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-lede,
    body.page-shop-detail .shop-detail-hero .courses-lede {
        margin-bottom: 0.85rem !important;
        line-height: 1.5 !important;
    }
    body.page-course-detail .course-detail-hero-image,
    body.page-shop-detail .shop-detail-hero-image {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-course-detail .course-detail-hero-empty,
    body.page-shop-detail .shop-detail-hero-empty {
        aspect-ratio: 16 / 10 !important;
    }
    body.page-course-detail .course-detail-hero-media,
    body.page-shop-detail .shop-detail-hero-media {
        margin-bottom: 1rem;
    }
    /* Pay card — drop sticky on tablet too, tighter padding,
       hide trust-list + meta (info appears below). */
    body.page-course-detail .course-detail-pay,
    body.page-shop-detail .shop-detail-pay {
        padding: 1rem 1.15rem !important;
        position: relative !important;
        top: 0 !important;
    }
    body.page-course-detail .course-detail-pay-price,
    body.page-shop-detail .shop-detail-pay-price {
        font-size: 1.85rem !important;
        margin-bottom: 0.4rem !important;
    }
    body.page-course-detail .course-detail-pay-trust,
    body.page-shop-detail .shop-detail-pay-trust {
        display: none !important;
    }
    body.page-course-detail .course-detail-pay-meta,
    body.page-shop-detail .shop-detail-pay-meta {
        display: none !important;
    }
    body.page-course-detail .course-detail-pay-help,
    body.page-shop-detail .shop-detail-pay-help {
        margin: 0.75rem 0 0 !important;
    }
    body.page-shop-detail .shop-detail-pay-qty {
        margin-bottom: 0.75rem !important;
    }
    body.page-shop-detail .shop-detail-pay-lock {
        padding: 0.6rem 0.75rem !important;
        margin-bottom: 0.6rem !important;
        font-size: 0.82rem;
    }
    body.page-course-detail .course-detail-info,
    body.page-shop-detail .shop-detail-info {
        padding: 0.4rem 0 1rem !important;
    }
    /* Program heroes tablet — also benefit from a tighter recipe */
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero),
    body.page-licensure .licensure-hero {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-headline,
    body.page-licensure .licensure-headline {
        font-size: clamp(1.85rem, 4.5vw, 2.4rem);
        line-height: 1.15;
        margin-bottom: 0.7rem;
    }
}

/* ----- 52.4 — Tap-target floor on remaining 38-39px controls -----
   Per audit, some action-like links/chips render at 38-39px. Bump
   them to 40-44 at touch viewports. */
@media (max-width: 991.98px) {
    /* Any anchor styled as a button/action in public-ui body */
    body.public-ui .btn,
    body.public-ui a.courses-btn,
    body.public-ui a.licensure-btn,
    body.public-ui a.hero-qcp-btn {
        min-height: 44px;
    }
    body.public-ui .btn.btn-sm,
    body.public-ui a.btn-sm {
        min-height: 40px;
    }
    /* Public action pills (Phase 47.5c) */
    body.public-ui .public-action-link {
        min-height: 44px;
        padding: 0.6rem 1.15rem;
    }
    /* Branch toggle buttons on /shop/ — were 38px */
    body.public-ui .branch-toggle-btn {
        min-height: 44px;
    }
    /* Schedule list quick actions */
    body.public-ui .schedule-quick-action,
    body.public-ui .schedule-event-cta {
        min-height: 44px;
    }
    /* Apply program row already 64px; rows-toggle 44px from Phase 49 */
    /* Newsletter submit (.btn-accent) was OK at 38; bump to 44 explicit */
    body.public-ui .newsletter-form .btn,
    body.public-ui .newsletter-form button[type=submit] {
        min-height: 44px;
    }
    /* Anchor links inside hero actions */
    body.public-ui .courses-hero-actions a,
    body.public-ui .licensure-hero-actions a,
    body.public-ui .hero-qcp-actions a {
        min-height: 44px;
    }
}
/* END PHASE 52 BLOCK */

/* ============================================================
   PHASE 53 — Final public hero cleanup + tablet pay tighten.

   Phase 52's "3-up compact strip" worked at tablet (NCLEX 1062→896,
   PMHNP 1092→926, Licensure 1150→765 ✓) but failed at phone —
   the 3 grid columns at 390px viewport are ~118px wide each, and
   the card content (eyebrow + title + brand padding) still wraps
   to ~120px tall per card. Three cards = ~360px stage = ~870-900
   total hero.

   At phone the right call per user feedback is to drop the stage
   entirely — the "4-Phase Method" section directly below the hero
   shows the same phase preview info in detail. The stage on phone
   is decorative duplication, not information.

   Plus tablet detail pay panel still 1083-1139px on product/course
   detail at 768. Tighten further + try 2-col grid for qty+CTA.
   ============================================================ */

/* ----- 53.1 — NCLEX/PMHNP stage HIDDEN on phone -----
   At 576-991 the 3-up grid from Phase 52.1 still works (cards
   have ~210px width each, body content readable). At ≤575 we hide
   the whole stage. The 4-Phase Method section below covers the
   same info in detail. ----- */
@media (max-width: 575.98px) {
    body.page-courses .courses-hero .col-lg-5 {
        display: none !important;
    }
    /* Also hide the stage directly in case the col-lg-5 selector
       changes in future. */
    body.page-courses .courses-hero-stage {
        display: none !important;
    }
    /* With the right column gone, ensure the intro doesn't try to
       stay at col-7 width — it should claim full width. */
    body.page-courses .courses-hero .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ----- 53.2 — Product/course detail tablet pay tighter + 2-col CTA row ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Pay card itself — already trimmed in Phase 52.3. Push further. */
    body.page-course-detail .course-detail-pay,
    body.page-shop-detail .shop-detail-pay {
        padding: 0.85rem 1rem !important;
    }
    body.page-course-detail .course-detail-pay-price,
    body.page-shop-detail .shop-detail-pay-price {
        font-size: 1.6rem !important;
        margin-bottom: 0.3rem !important;
    }
    body.page-course-detail .course-detail-pay-alt,
    body.page-shop-detail .shop-detail-pay-alt {
        margin: 0 0 0.55rem !important;
        font-size: 0.78rem !important;
    }
    body.page-shop-detail .shop-detail-pay-lock {
        padding: 0.5rem 0.6rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.78rem !important;
    }
    /* 2-col grid for the action row — qty input + buy CTA side by side. */
    body.page-shop-detail .shop-detail-pay-action-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.65rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    /* When qty input + add-to-cart form sit as direct flex children
       inside the pay card (which is the most common pattern), nudge
       them into a tighter inline row. */
    body.page-shop-detail .shop-detail-pay form[action*="cart/add"],
    body.page-shop-detail .shop-detail-pay form.course-cart-cta {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.55rem !important;
        margin: 0 0 0.4rem;
    }
    body.page-shop-detail .shop-detail-pay-qty {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    body.page-shop-detail .shop-detail-pay-qty input {
        width: 60px !important;
        padding: 6px 8px !important;
    }
    body.page-shop-detail .shop-detail-pay form button[type=submit],
    body.page-shop-detail .shop-detail-pay form .courses-btn,
    body.page-shop-detail .shop-detail-pay form .btn-primary {
        flex: 1 1 auto;
        min-height: 44px;
    }
    /* Course-detail enroll button stays full-width — no qty input there */
    body.page-course-detail .course-detail-pay .course-enroll-cta,
    body.page-course-detail .course-detail-pay .courses-btn {
        min-height: 44px;
        margin-top: 0.5rem;
    }
    body.page-course-detail .course-detail-pay-help,
    body.page-shop-detail .shop-detail-pay-help {
        margin: 0.5rem 0 0 !important;
        font-size: 0.78rem !important;
    }
    /* Hero image media — already 16:10 from Phase 52.3; ensure smaller margin */
    body.page-course-detail .course-detail-hero-media,
    body.page-shop-detail .shop-detail-hero-media {
        margin-bottom: 0.85rem !important;
    }
    /* Hero info column — drop bottom padding so pay card sits closer */
    body.page-course-detail .course-detail-info,
    body.page-shop-detail .shop-detail-info {
        padding: 0.3rem 0 0.75rem !important;
    }
}

/* ----- 53.3 — Final tap-target hardening ----- */
/* Consent checkbox row — extra padding so the WHOLE label is a
   target, not just the small glyph. Phase 50.5 already set
   min-height 44; reinforce + ensure the label fills the row. */
body.public-ui .form-check {
    min-height: 44px;
    padding: 0.5rem 0 0.5rem 2.2rem;
    margin-bottom: 0.35rem;
}
body.public-ui .form-check-input {
    width: 1.3rem !important;
    height: 1.3rem !important;
    margin-top: 0.3rem;
    margin-left: -2.2rem;
    cursor: pointer;
    flex-shrink: 0;
}
body.public-ui .form-check-label {
    cursor: pointer;
    padding: 0.2rem 0;
    line-height: 1.5;
    min-height: 32px;
    display: inline-block;
    width: 100%;
}
body.public-ui .form-check-label a {
    color: #B13269;
    font-weight: 600;
    padding: 0.15rem 0.05rem;
    text-underline-offset: 2px;
}

/* Action-sized text links that look like buttons but aren't —
   make them feel tappable at touch viewports. Picks up "View all",
   "Contact us", "See details", "Learn more" type inline anchors
   inside .courses-section-lede, .licensure-body, etc. */
@media (max-width: 991.98px) {
    body.public-ui .courses-section-lede a,
    body.public-ui .licensure-body a,
    body.public-ui .courses-inline-link {
        min-height: 36px;
        padding: 0.25rem 0;
        display: inline-block;
    }
    /* "Get in touch" type inline CTAs in marketing paragraphs */
    body.public-ui p a.courses-btn-link,
    body.public-ui p a.licensure-inline-cta {
        min-height: 44px;
        padding: 0.6rem 1rem;
        display: inline-flex;
        align-items: center;
    }
}

/* ----- 53.4 — Sticky CTA on long pages so the buy button is always
   reachable on tablet (was sticky on desktop but Phase 51 dropped
   sticky on mobile to avoid blocking page scroll). Re-enable at
   tablet (576-991) since there's more room. ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.page-course-detail .course-detail-pay,
    body.page-shop-detail .shop-detail-pay {
        position: sticky;
        top: 84px;
    }
}
/* END PHASE 53 BLOCK */

/* ============================================================
   PHASE 54 — Final surgical tablet + tap polish (9.4 → 9.7+).

   Phase 53 hit the phone heroes (NCLEX 868→481, PMHNP 909→522).
   Three narrow gaps remain:

   1. Tablet program heroes @ 768: NCLEX 896, PMHNP 926
      (target ~850; over by 46/76)
   2. Tablet detail heroes @ 768:
      course detail 980, product course 1019, product book 1102
      (target ≤950; over by 30-152)
   3. Tap-target scanner flags: footer/legal links, consent input
      itself, breadcrumb links, small inline action links

   No template changes. CSS-only surgical compression.
   ============================================================ */

/* ----- 54.1 — Program hero tablet tightening (576-991) ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* NCLEX/PMHNP — the stage stacks below intro at <lg. Phase 52.1
       made it a 3-up grid but cards still ~110-120px. Push tighter. */
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) {
        padding-top: 1.25rem !important;
        padding-bottom: 0.85rem !important;
    }
    body.page-courses .courses-hero-inner .row.g-5 {
        --bs-gutter-y: 0.85rem !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-headline {
        font-size: clamp(1.7rem, 4vw, 2.15rem) !important;
        line-height: 1.15 !important;
        margin: 0.5rem 0 0.6rem !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-lede {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-trust-strip {
        gap: 0.35rem !important;
        margin: 0.5rem 0 !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-trust-strip li {
        font-size: 0.78rem !important;
        padding: 0.15rem 0 !important;
    }
    body.page-courses .courses-hero:not(.shop-hero):not(.cart-hero) .courses-hero-actions {
        margin-top: 0.75rem !important;
        gap: 0.55rem !important;
    }
    /* Stage cards — Phase 52.1's grid stays; push padding/font tighter. */
    body.page-courses .courses-hero-stage {
        gap: 0.4rem !important;
        margin-top: 0.65rem !important;
    }
    body.page-courses .courses-hero-card {
        padding: 0.5rem 0.6rem !important;
    }
    body.page-courses .courses-hero-card h3,
    body.page-courses .courses-hero-card h4,
    body.page-courses .courses-hero-card .courses-hero-card-title {
        font-size: 0.82rem !important;
    }
    body.page-courses .courses-hero-card-eyebrow {
        font-size: 0.58rem !important;
    }

    /* Licensure hero — also tighter at 576-991 */
    body.page-licensure .licensure-hero {
        padding-top: 1.25rem !important;
        padding-bottom: 0.85rem !important;
    }
    body.page-licensure .licensure-hero-inner .row.g-5 {
        --bs-gutter-y: 0.85rem !important;
    }
    body.page-licensure .licensure-headline {
        font-size: clamp(1.7rem, 4vw, 2.15rem) !important;
        margin-bottom: 0.55rem !important;
    }
    body.page-licensure .licensure-lede {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }
    body.page-licensure .licensure-trust-strip {
        margin: 0.5rem 0 0.6rem !important;
    }
    body.page-licensure .licensure-trust-strip li {
        font-size: 0.78rem !important;
        padding: 0.15rem 0 !important;
    }
}

/* ----- 54.2 — Detail page tablet heroes (576-991): ≤950 target -----
   Phase 53.2 trimmed but product book detail still 1102. Take more
   from media + pay-card secondary content. ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Hero padding tighter still */
    body.page-course-detail .course-detail-hero,
    body.page-shop-detail .shop-detail-hero {
        padding: 1rem 0 1.15rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-headline,
    body.page-shop-detail .shop-detail-hero .courses-headline {
        font-size: clamp(1.7rem, 4vw, 2.15rem) !important;
        margin: 0.55rem 0 0.6rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-lede,
    body.page-shop-detail .shop-detail-hero .courses-lede {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0.7rem !important;
    }
    body.page-course-detail .course-detail-hero .courses-eyebrow,
    body.page-shop-detail .shop-detail-hero .courses-eyebrow {
        font-size: 0.7rem !important;
        margin-bottom: 0.35rem !important;
    }
    /* Media — shrink aspect to 16:11 for tablet (was 16:10 in Phase 53) */
    body.page-course-detail .course-detail-hero-image,
    body.page-shop-detail .shop-detail-hero-image,
    body.page-course-detail .course-detail-hero-empty,
    body.page-shop-detail .shop-detail-hero-empty {
        aspect-ratio: 16 / 11 !important;
    }
    body.page-course-detail .course-detail-hero-media,
    body.page-shop-detail .shop-detail-hero-media {
        margin-bottom: 0.7rem !important;
    }
    /* Pay card — more aggressive trim. Hide alt text + save badge
       at tablet too (the save % already shown via strikethrough). */
    body.page-course-detail .course-detail-pay,
    body.page-shop-detail .shop-detail-pay {
        padding: 0.7rem 0.85rem !important;
    }
    body.page-course-detail .course-detail-pay-eyebrow,
    body.page-shop-detail .shop-detail-pay-eyebrow {
        font-size: 0.6rem !important;
        margin-bottom: 0.2rem !important;
    }
    body.page-course-detail .course-detail-pay-price,
    body.page-shop-detail .shop-detail-pay-price {
        font-size: 1.45rem !important;
        margin-bottom: 0.25rem !important;
    }
    body.page-course-detail .course-detail-pay-alt,
    body.page-shop-detail .shop-detail-pay-alt {
        font-size: 0.76rem !important;
        margin: 0 0 0.5rem !important;
    }
    body.page-shop-detail .shop-detail-pay-strike {
        font-size: 0.82rem !important;
    }
    body.page-shop-detail .shop-detail-pay-save {
        font-size: 0.62rem !important;
        padding: 1px 6px !important;
    }
    body.page-shop-detail .shop-detail-pay-lock {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.74rem !important;
        margin-bottom: 0.45rem !important;
    }
    body.page-shop-detail .shop-detail-pay-qty input {
        width: 56px !important;
        padding: 4px 6px !important;
        font-size: 0.88rem !important;
    }
    body.page-shop-detail .shop-detail-pay-qty label {
        font-size: 0.78rem !important;
    }
    body.page-shop-detail .shop-detail-pay form button[type=submit],
    body.page-shop-detail .shop-detail-pay form .courses-btn,
    body.page-course-detail .course-detail-pay .course-enroll-cta,
    body.page-course-detail .course-detail-pay .courses-btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
    body.page-course-detail .course-detail-pay-help,
    body.page-shop-detail .shop-detail-pay-help {
        font-size: 0.72rem !important;
        margin: 0.45rem 0 0 !important;
    }
    body.page-course-detail .course-detail-pay-progress {
        margin-top: 0.55rem !important;
        padding-top: 0.55rem !important;
    }
    body.page-course-detail .course-detail-pay-progress-label {
        font-size: 0.62rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* ----- 54.3 — Final tap-target polish on text links + checkbox glyph ----- */

/* Footer/legal links — keep text style but ensure a 32px+ tap area. */
@media (max-width: 991.98px) {
    body.public-ui .footer-bottom-bar a,
    body.public-ui .footer-links a {
        display: inline-block;
        min-height: 36px;
        padding: 0.3rem 0.15rem;
        line-height: 1.5;
    }
    /* Breadcrumb text links — were ~22px tall */
    body.public-ui .apply-crumbs a,
    body.public-ui .contact-crumbs a,
    body.public-ui .course-detail-crumbs a,
    body.public-ui .shop-detail-crumbs a,
    body.public-ui nav[aria-label="Breadcrumb"] a,
    body.public-ui .breadcrumb a {
        display: inline-block;
        min-height: 36px;
        padding: 0.3rem 0.15rem;
    }
}

/* Consent checkbox glyph itself — Phase 53 set the row to 44px
   but the INPUT element was still 1.25rem (~20px). Make the
   actual glyph easier to tap on iOS/Android.

   We can't make a <input type=checkbox> truly larger without
   transform scaling; bump to 1.4rem and add accent-color so the
   browser-rendered glyph looks crisp at the larger size. */
body.public-ui .form-check-input[type=checkbox] {
    width: 1.4rem !important;
    height: 1.4rem !important;
    margin-top: 0.25rem;
    margin-left: -2.3rem;
    accent-color: #2D39F5;
    cursor: pointer;
}
body.public-ui .form-check {
    padding-left: 2.3rem !important;
}

/* Inline action links inside marketing paragraphs — "Talk to
   admissions", "View modules", etc. — bump tap area at mobile. */
@media (max-width: 991.98px) {
    body.public-ui .courses-body a:not(.btn):not(.courses-btn),
    body.public-ui .licensure-body a:not(.btn):not(.licensure-btn),
    body.public-ui .apply-body a:not(.btn):not(.courses-btn),
    body.public-ui .course-detail-prose a:not(.btn) {
        display: inline-block;
        min-height: 32px;
        padding: 0.2rem 0.1rem;
        font-weight: 600;
        text-underline-offset: 3px;
    }
}
/* END PHASE 54 BLOCK */

/* ============================================================
   PHASE 52 — Per-program public theming via CSS custom properties.

   Programs that set bg_color / accent_color emit inline
   `style="--prog-bg: #...; --prog-accent: #...;"`. Selectors below
   are guarded by [style*="--prog-bg"] / [style*="--prog-accent"]
   so programs WITHOUT colors set keep the current default look —
   zero regression for unset programs (NCLEX-historical default
   styling still wins via cascade specificity).
   ============================================================ */
body.page-courses .courses-program-card[style*="--prog-bg"] {
    background: var(--prog-bg);
    border-color: color-mix(in srgb, var(--prog-accent, #1E2A3A) 25%, transparent);
}
body.page-courses .courses-program-card[style*="--prog-accent"] h3,
body.page-courses .courses-program-card[style*="--prog-accent"] .courses-lineup-eyebrow {
    color: var(--prog-accent);
}
body.page-courses .courses-program-card[style*="--prog-accent"] .courses-lineup-cta {
    background: var(--prog-accent);
    border-color: var(--prog-accent);
    color: #ffffff;
}
body.page-courses .courses-program-card[style*="--prog-accent"]:hover {
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--prog-accent) 35%, transparent);
}

/* Program-detail hero tint when --prog-bg / --prog-accent set on .courses-hero. */
body.page-courses .courses-hero[style*="--prog-bg"] {
    background: linear-gradient(180deg,
        var(--prog-bg),
        color-mix(in srgb, var(--prog-bg) 60%, #ffffff));
}
body.page-courses .courses-hero[style*="--prog-bg"] .courses-hero-bg {
    /* The default decorative background gradient would fight the
       per-program tint — hide it when a program color is active. */
    opacity: 0;
}
body.page-courses .courses-hero[style*="--prog-accent"] .courses-headline,
body.page-courses .courses-hero[style*="--prog-accent"] .courses-eyebrow {
    color: var(--prog-accent);
}
body.page-courses .courses-hero[style*="--prog-accent"] .courses-btn--primary {
    background: var(--prog-accent);
    border-color: var(--prog-accent);
}
/* END PHASE 52 BLOCK */

/* ============================================================
   PHASE 53 — Theme propagation into descendant course-product cards.

   Phase 52 placed the inline --prog-bg / --prog-accent custom
   properties on:
     1. each .courses-program-card on /review-courses/
     2. .courses-hero on /review-courses/<slug>/
   Phase 53 also emits them on:
     3. .courses-lineup-section on /review-courses/<slug>/ (so the
        track-card grid inherits via CSS variable cascade)
     4. each .courses-lineup-card on /shop/ whose product belongs
        to a themed program (per-card inline style; books and
        services have no .program FK, so they have no inline style)

   Every selector is guarded by [style*="--prog-bg"] /
   [style*="--prog-accent"] on either the card itself OR a parent,
   so an unstyled card keeps its current default look — zero
   regression for programs that don't set colors.
   ============================================================ */

/* Card background: soft tint (color-mix with 45% white so the
   card still reads as a card, not a solid color block). */
body.page-courses .courses-lineup-section[style*="--prog-bg"] .courses-lineup-card,
body.public-ui .courses-lineup-card[style*="--prog-bg"] {
    background: color-mix(in srgb, var(--prog-bg) 55%, #ffffff 45%);
    border-color: color-mix(in srgb, var(--prog-accent, #1E2A3A) 22%, transparent);
}

/* Eyebrow chip: lightly tinted accent background + accent text. */
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card .courses-lineup-eyebrow,
body.public-ui .courses-lineup-card[style*="--prog-accent"] .courses-lineup-eyebrow {
    background: color-mix(in srgb, var(--prog-accent) 14%, #ffffff 86%);
    color: var(--prog-accent);
    border-color: color-mix(in srgb, var(--prog-accent) 25%, transparent);
}

/* Title + headline price use the accent color. */
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card h3,
body.public-ui .courses-lineup-card[style*="--prog-accent"] h3,
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card h3 a,
body.public-ui .courses-lineup-card[style*="--prog-accent"] h3 a,
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card .courses-lineup-price,
body.public-ui .courses-lineup-card[style*="--prog-accent"] .courses-lineup-price {
    color: var(--prog-accent);
}

/* Primary CTA: solid accent fill. */
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card .courses-btn--primary,
body.public-ui .courses-lineup-card[style*="--prog-accent"] .courses-btn--primary {
    background: var(--prog-accent);
    border-color: var(--prog-accent);
    color: #ffffff;
}

/* Outline CTA: accent border + text, fills on hover. */
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card .courses-btn--outline,
body.public-ui .courses-lineup-card[style*="--prog-accent"] .courses-btn--outline {
    color: var(--prog-accent);
    border-color: var(--prog-accent);
    background: transparent;
}
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card .courses-btn--outline:hover,
body.public-ui .courses-lineup-card[style*="--prog-accent"] .courses-btn--outline:hover {
    background: var(--prog-accent);
    color: #ffffff;
}

/* Card lift on hover — tinted shadow. */
body.page-courses .courses-lineup-section[style*="--prog-accent"] .courses-lineup-card:hover,
body.public-ui .courses-lineup-card[style*="--prog-accent"]:hover {
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--prog-accent) 30%, transparent);
}
/* END PHASE 53 BLOCK (second instance) */

/* =====================================================================
   HOME — COOL BACKGROUND (blue / white alternating bands + cooled hero)
   Scoped to body.page-home only; appended last so it wins the cascade.
   Cool palette: white #F8FAFD, pale blue #E9F1FC. Reversible: delete block.
   ===================================================================== */
body.page-home { background-color: #F8FBFF !important; }
body.page-home .premium-topbar { background: #FFFFFF !important; }

/* Hero — skyline photo stays crisp; a left→right light wash carries the
   headline so it reads on soft haze instead of a hard card. */
body.page-home .hero-qcp { background: #F8FBFF !important; }
body.page-home .hero-qcp-bg-image { display: block !important; filter: saturate(0.96) brightness(1.05) !important; }
/* Left readability wash — strong under the headline (left), fading to clear
   over the books/mug on the right. This REPLACES the old frosted lede card. */
body.page-home .hero-qcp-veil {
    display: block !important;
    background: linear-gradient(100deg,
        rgba(245, 250, 255, 0.98) 0%,
        rgba(245, 250, 255, 0.96) 30%,
        rgba(245, 250, 255, 0.80) 43%,
        rgba(245, 250, 255, 0.38) 49%,
        rgba(245, 250, 255, 0.00) 55%) !important;
}
/* Very light cool cast from the top — keeps the scene calm, not tinted. */
body.page-home .hero-qcp-tint {
    display: block !important;
    background:
        linear-gradient(180deg,
            rgba(162, 210, 255, 0.16) 0%,
            rgba(231, 237, 251, 0.04) 55%,
            rgba(231, 237, 251, 0.00) 100%) !important;
}
body.page-home .hero-qcp-vignette { display: block !important; opacity: 0.5 !important; }

/* Left lede — NO hard box (belt + suspenders over every earlier rule). */
body.page-home .hero-qcp .hero-qcp-lede,
body.page-home .hero-qcp-container .hero-qcp-lede {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Inset the text from the left edge (was flush) to match the reference. */
    padding: 0 0 0 clamp(2rem, 6vw, 7rem) !important;
}
/* Headline "PASS." — green color emphasis only; drop the highlighter bar. */
body.page-home .hero-qcp-headline em::before { display: none !important; }

/* Alternating bands: blue -> white -> blue -> white -> blue -> white */
body.page-home .how-it-works-section,
body.page-home .trust-strip,
body.page-home #reviews.bg-light-custom,
body.page-home section#reviews { background: #EAF3FF !important; }   /* SOFT ICY */

body.page-home .branch-section-premium,
body.page-home .next-path-section { background: #FFFFFF !important; }      /* WHITE (alternates: white → icy → white → icy) */

/* Calm sky-blue accent tokens — home only. Two deeper blues derived from
   the sky/icy family so text + buttons stay readable on white. */
body.page-home {
    --qcp-blue:      #3F7BC4 !important;
    --qcp-blue-deep: #2C5C96 !important;
    --qcp-blue-soft: #A2D2FF !important;
    --qcp-blue-tint: rgba(63, 123, 196, 0.10) !important;
}

/* Hero accents (the hero exists only on the home page) — calm sky blue,
   button deepened so white text stays readable. */
body.page-home .hero-qcp-eyebrow { color: #2C5C96 !important; }
/* Hero buttons — match the reference: rounded-rect (not pill), flat solid
   blue primary, clean white "demo" button. */
body.page-home .hero-qcp-btn { border-radius: 14px !important; padding: 1rem 1.85rem !important; }
body.page-home .hero-qcp-btn--primary {
    background: #2550D8 !important;
    border-color: transparent !important;
    box-shadow: 0 14px 28px -12px rgba(37, 80, 216, 0.45) !important;
}
body.page-home .hero-qcp-btn--primary::before { display: none !important; }
body.page-home .hero-qcp-btn--ghost {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(30, 42, 58, 0.10),
        0 12px 26px -14px rgba(30, 42, 58, 0.28) !important;
}

/* =====================================================================
   TOPBAR FIX — the social icons used a clashing blue/pink/green/navy
   rotation and the base hairline was a blue/pink/green gradient, which
   read as "broken" on the cool theme. Unify to one periwinkle + a single
   soft-blue hairline. Applies on every page (the topbar is shared).
   ===================================================================== */
body.public-ui .premium-topbar .social-icons a:nth-child(1),
body.page-home .premium-topbar .social-icons a:nth-child(1),
body.public-ui .premium-topbar .social-icons a:nth-child(2),
body.page-home .premium-topbar .social-icons a:nth-child(2),
body.public-ui .premium-topbar .social-icons a:nth-child(3),
body.page-home .premium-topbar .social-icons a:nth-child(3),
body.public-ui .premium-topbar .social-icons a:nth-child(4),
body.page-home .premium-topbar .social-icons a:nth-child(4) {
    background: #3F7BC4 !important;
    border: 1px solid #3F7BC4 !important;
    box-shadow: 0 4px 10px -4px rgba(44, 92, 150, 0.40) !important;
}
body.public-ui .premium-topbar .social-icons a:nth-child(1):hover,
body.page-home .premium-topbar .social-icons a:nth-child(1):hover,
body.public-ui .premium-topbar .social-icons a:nth-child(2):hover,
body.page-home .premium-topbar .social-icons a:nth-child(2):hover,
body.public-ui .premium-topbar .social-icons a:nth-child(3):hover,
body.page-home .premium-topbar .social-icons a:nth-child(3):hover,
body.public-ui .premium-topbar .social-icons a:nth-child(4):hover,
body.page-home .premium-topbar .social-icons a:nth-child(4):hover {
    background: #2C5C96 !important;
    border-color: #2C5C96 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(44, 92, 150, 0.55) !important;
}
/* Base hairline — single soft-blue line (was blue/pink/green) */
body.public-ui .premium-topbar::before,
body.page-home .premium-topbar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(63, 123, 196, 0.32) 50%,
        transparent 100%) !important;
}

/* =====================================================================
   NEWSLETTER — home only: cool white + blue accents (was warm cream +
   pink/orange). Keyed on #newsletter so it beats the shared
   body.public-ui !important rules in includes/newsletter.html.
   ===================================================================== */
body.page-home #newsletter { background: #F8FBFF !important; }
body.page-home #newsletter::before { background: #3F7BC4 !important; }
body.page-home #newsletter::after  { background: #A2D2FF !important; }
body.page-home #newsletter .nl-panel {
    border-color: rgba(63, 123, 196, 0.18) !important;
    box-shadow: 0 1px 2px rgba(30,42,58,0.04),
                0 34px 70px -34px rgba(44,92,150,0.28) !important;
}
body.page-home #newsletter .nl-panel::before {
    background: linear-gradient(90deg, #3F7BC4 0%, #2C5C96 100%) !important;
}
body.page-home #newsletter .nl-eyebrow,
body.page-home #newsletter .nl-eyebrow i { color: #2C5C96 !important; }
body.page-home #newsletter .newsletter-form .form-control:focus {
    border-color: #3F7BC4 !important;
    box-shadow: 0 0 0 4px rgba(63,123,196,0.16) !important;
}
body.page-home #newsletter .nl-submit {
    background: linear-gradient(135deg, #3F7BC4 0%, #2C5C96 100%) !important;
    box-shadow: 0 14px 30px -12px rgba(44,92,150,0.55) !important;
}
body.page-home #newsletter .nl-submit:hover,
body.page-home #newsletter .nl-submit:focus-visible {
    box-shadow: 0 18px 38px -12px rgba(44,92,150,0.65) !important;
}
/* Consent + trust row — calm sky blue */
body.page-home #newsletter .nl-consent a { color: #2C5C96 !important; }
body.page-home #newsletter .nl-consent .req { color: #3F7BC4 !important; }
body.page-home #newsletter .nl-consent input[type="checkbox"] { border-color: rgba(63,123,196,0.45) !important; }
body.page-home #newsletter .nl-consent input[type="checkbox"]:checked {
    background: #3F7BC4 !important; border-color: #3F7BC4 !important;
}
body.page-home #newsletter .nl-consent input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 4px rgba(63,123,196,0.16) !important;
}
body.page-home #newsletter .nl-trust i { color: #3F7BC4 !important; }

/* =====================================================================
   HERO + BRANCH + PROOF-BAR accents — green/gold/pink/yellow → blue.
   (These live in quiet-clinical.css, not home.html; hero + branch are
   home-only elements, so home-scoped overrides are safe.)
   ===================================================================== */
body.page-home .hero-qcp-eyebrow-mark {
    background: linear-gradient(90deg, #4F93D0, #2C5C96) !important;
}
body.page-home .hero-qcp-pass { color: #0E7C3A !important; }
body.page-home .hero-qcp-btn--primary .hero-qcp-btn-arrow { color: #FFFFFF !important; }
body.page-home .hero-qcp-btn--ghost .hero-qcp-btn-arrow { color: #3F7BC4 !important; }
/* Proof bar — colorful but minimal: one soft hue per stat. */
body.page-home .hero-qcp-proofbar .proof-icon--blue   { background: rgba(63, 123, 196, 0.14) !important; color: #3F7BC4 !important; }
body.page-home .hero-qcp-proofbar .proof-icon--blue i { color: #3F7BC4 !important; }
body.page-home .hero-qcp-proofbar .proof-icon--green  { background: rgba(46, 158, 107, 0.14) !important; color: #2E9E6B !important; }
body.page-home .hero-qcp-proofbar .proof-icon--green i { color: #2E9E6B !important; }
body.page-home .hero-qcp-proofbar .proof-icon--pink   { background: rgba(194, 98, 143, 0.14) !important; color: #C2628F !important; }
body.page-home .hero-qcp-proofbar .proof-icon--pink i { color: #C2628F !important; }
body.page-home .hero-qcp-proofbar .proof-icon--yellow { background: rgba(201, 138, 46, 0.14) !important; color: #C98A2E !important; }
body.page-home .hero-qcp-proofbar .proof-icon--yellow i { color: #C98A2E !important; }
body.page-home .hero-qcp-proofbar .proof-label { color: #4E6BC8 !important; }
/* Branch cards — drop the green/pink decorative washes (flag img stays) */
body.page-home .branch-section-premium .branch-card-top { background-image: none !important; }
body.page-home .branch-section-premium .branch-cta-row { background-image: none !important; }

/* =====================================================================
   PUBLIC INNER PAGES - COOL SYSTEM ALIGNMENT
   ---------------------------------------------------------------------
   The homepage now establishes the public visual language: clean white
   and pale-blue surfaces, navy editorial typography, blue actions, and
   green success states. Keep the marketing, catalog, legal, schedule,
   cart, and checkout pages in that same family without changing their
   markup, routes, or page-specific content.
   ===================================================================== */

/* Shared inner-page palette. Auth, portal preview, dashboard, and the
   homepage keep their own intentional visual systems. */
body.public-ui:not(.page-home):not(.page-auth) {
    --usnr-cool-canvas: #F8FBFF;
    --usnr-cool-band: #EAF3FF;
    --usnr-cool-surface: #FFFFFF;
    --usnr-cool-border: #DCE9F7;
    --usnr-cool-blue: #2550D8;
    --usnr-cool-blue-mid: #3F7BC4;
    --usnr-cool-blue-deep: #2C5C96;
    --usnr-cool-green: #0E7C3A;
    --usnr-cool-navy: #1E2A3A;
    --usnr-cool-muted: #66758A;
    background: var(--usnr-cool-canvas) !important;
    color: var(--usnr-cool-navy);
}

body.public-ui:not(.page-home):not(.page-auth) .section-tint,
body.public-ui:not(.page-home):not(.page-auth) .bg-light-custom {
    background: var(--usnr-cool-band) !important;
}

/* COURSES HERO ONLY: clean editorial blue background built around the nurse
   portrait image. The WebP carries the nurse + soft blue arc decorations; a
   left-anchored white gradient keeps the headline area legible. `right top`
   keeps the nurse's face visible (the image bottom is the part allowed to crop).
   IMPORTANT: scoped to .courses-hero ONLY. The licensure hero must NOT get this
   photo — it has its own 3D paperwork illustration and its own gradient (below). */
body.page-courses .courses-hero:not([style*="--prog-bg"]) {
    background:
        linear-gradient(90deg,
            rgba(244, 249, 255, 0.92) 0%,
            rgba(244, 249, 255, 0.55) 26%,
            rgba(244, 249, 255, 0.12) 48%,
            rgba(244, 249, 255, 0.00) 66%),
        url("../images/header/courses-hero-bg2.e9df71ffd833.webp") center center / cover no-repeat,
        linear-gradient(135deg, #eef4ff 0%, #f6faff 50%, #e9f1ff 100%);
}
body.page-courses .courses-hero:not([style*="--prog-bg"]) .courses-hero-bg {
    /* The hero image already carries the blue mesh atmosphere; keep the
       overlay layer transparent so it doesn't fight the photograph. */
    background: transparent;
}
/* LICENSURE HERO: its original clean blue gradient — NO nurse photo. (This page
   has its own foreground 3D paperwork illustration; the nurse photo was applied
   here by mistake via a shared selector and is now removed.) */
body.page-licensure .licensure-hero {
    background:
        radial-gradient(ellipse 820px 520px at 90% 8%,
            rgba(162, 210, 255, 0.30) 0%,
            rgba(162, 210, 255, 0.00) 68%),
        radial-gradient(ellipse 660px 440px at 8% 92%,
            rgba(63, 123, 196, 0.11) 0%,
            rgba(63, 123, 196, 0.00) 72%),
        linear-gradient(180deg, #F8FBFF 0%, #EAF3FF 100%);
}
body.page-licensure .licensure-hero-bg {
    background:
        radial-gradient(ellipse at 18% 20%, rgba(63, 123, 196, 0.09) 0%, transparent 56%),
        radial-gradient(ellipse at 84% 78%, rgba(162, 210, 255, 0.20) 0%, transparent 62%);
}
body.page-courses .courses-hero::before,
body.page-licensure .licensure-hero::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(63, 123, 196, 0.36) 18%,
        rgba(44, 92, 150, 0.72) 50%,
        rgba(63, 123, 196, 0.36) 82%,
        transparent 100%);
    opacity: 1;
}
body.page-courses .courses-hero::after,
body.page-licensure .licensure-hero::after {
    background: linear-gradient(180deg,
        rgba(63, 123, 196, 0.62) 0%,
        rgba(63, 123, 196, 0.00) 100%);
}
body.page-courses .courses-hero-inner::before,
body.page-licensure .licensure-hero-inner::before {
    background-image: radial-gradient(rgba(63, 123, 196, 0.08) 1px, transparent 1.5px);
}

/* Editorial type treatment. Keep the script font in the logo only; hero
   emphasis now reads like the homepage headline instead of a separate
   decorative typography system. */
body.page-courses .courses-headline,
body.page-licensure .licensure-headline,
body.public-ui:not(.page-home):not(.page-auth) h1,
body.public-ui:not(.page-home):not(.page-auth) h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--usnr-cool-navy);
}
body.page-courses .courses-headline em,
body.page-licensure .licensure-headline em {
    font-family: inherit;
    font-size: 1em;
    font-style: italic;
    font-weight: inherit;
    color: var(--usnr-cool-blue);
    padding: 0;
}

/* Labels, proof markers, and public actions. */
body.page-courses .courses-eyebrow,
body.page-courses .courses-section-eyebrow,
body.page-licensure .licensure-eyebrow,
body.page-licensure .licensure-section-eyebrow {
    color: var(--usnr-cool-blue-deep);
    background: rgba(63, 123, 196, 0.10);
    border-color: rgba(63, 123, 196, 0.24);
}
body.page-courses .courses-trust-strip i,
body.page-licensure .licensure-trust-strip i {
    color: var(--usnr-cool-green);
}
body.page-courses .courses-btn--primary,
body.page-licensure .licensure-btn--primary {
    background: var(--usnr-cool-blue);
    border-color: transparent;
    box-shadow: 0 14px 28px -14px rgba(37, 80, 216, 0.58);
}
body.page-courses .courses-btn--primary:hover,
body.page-courses .courses-btn--primary:focus-visible,
body.page-licensure .licensure-btn--primary:hover,
body.page-licensure .licensure-btn--primary:focus-visible {
    background: #1E43BC;
    box-shadow: 0 18px 34px -14px rgba(37, 80, 216, 0.68);
}
body.page-courses .courses-btn--ghost,
body.page-courses .courses-btn--outline,
body.page-licensure .licensure-btn--ghost {
    color: var(--usnr-cool-blue-deep);
    border-color: rgba(63, 123, 196, 0.34);
}
body.page-courses .courses-btn--ghost:hover,
body.page-courses .courses-btn--ghost:focus-visible,
body.page-courses .courses-btn--outline:hover,
body.page-courses .courses-btn--outline:focus-visible,
body.page-licensure .licensure-btn--ghost:hover,
body.page-licensure .licensure-btn--ghost:focus-visible {
    background: rgba(63, 123, 196, 0.08);
    border-color: var(--usnr-cool-blue-mid);
    color: var(--usnr-cool-blue-deep);
}

/* Shared card surfaces. Per-program custom colors remain intact because
   their more specific --prog-accent rules still own themed catalog cards. */
body.public-ui:not(.page-home):not(.page-auth) .premium-panel,
body.page-courses .courses-lineup-card,
body.page-courses .courses-method-card,
body.page-licensure .licensure-service-card,
body.page-licensure .licensure-why-stat,
body.page-schedule .schedule-spotlight,
body.page-schedule .schedule-week-card,
body.page-schedule .schedule-event-card {
    border-color: var(--usnr-cool-border);
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 46px -34px rgba(44, 92, 150, 0.30);
}
body.page-courses .courses-lineup-card:hover,
body.page-courses .courses-method-card:hover,
body.page-licensure .licensure-service-card:hover,
body.page-schedule .schedule-week-card:hover,
body.page-schedule .schedule-event-card:hover {
    border-color: rgba(63, 123, 196, 0.38);
    box-shadow:
        0 2px 4px rgba(30, 42, 58, 0.04),
        0 24px 48px -26px rgba(44, 92, 150, 0.34);
}

/* Apply + contact: keep the existing layout and form contract, but align
   the visible surfaces and actions with the refreshed public palette. */
body.page-apply .apply-rainbow-strip,
body.page-contact .contact-rainbow-strip,
body.page-shop-detail .shop-detail-rainbow-strip,
body.page-course-detail .course-detail-rainbow-strip,
body.page-apply .apply-form-card::before,
body.page-contact .contact-form-card::before,
body.page-shop-detail .shop-detail-hero-media::before,
body.page-course-detail .course-detail-hero-media::before,
body.page-apply .apply-cta-band::before,
body.page-contact .contact-social-band::before {
    background: linear-gradient(90deg, #A2D2FF 0%, #3F7BC4 48%, #2550D8 100%) !important;
}
body.page-apply .apply-section--alt,
body.page-contact .contact-social-band,
body.page-apply .apply-cta-band {
    background: #EAF3FF !important;
    border-color: var(--usnr-cool-border) !important;
}
body.page-apply .apply-trust-pill,
body.page-apply .apply-sla-pill,
body.page-contact .contact-sla-pill,
body.page-contact .contact-faq-list li a {
    background: #F3F8FF !important;
    border-color: var(--usnr-cool-border) !important;
}
body.page-apply .apply-program-card,
body.page-apply .apply-form-card,
body.page-apply .apply-step-card,
body.page-contact .contact-form-card,
body.page-contact .contact-side-card,
body.page-shop-detail .shop-detail-hero-media,
body.page-shop-detail .shop-detail-pay,
body.page-course-detail .course-detail-hero-media,
body.page-course-detail .course-detail-pay {
    border-color: var(--usnr-cool-border) !important;
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 46px -34px rgba(44, 92, 150, 0.30) !important;
}
body.page-apply .apply-submit-btn,
body.page-contact .contact-send-btn {
    background: var(--usnr-cool-blue) !important;
    box-shadow: 0 14px 28px -14px rgba(37, 80, 216, 0.58) !important;
}
body.page-apply .apply-submit-btn:hover,
body.page-contact .contact-send-btn:hover {
    background: #1E43BC !important;
    box-shadow: 0 18px 34px -14px rgba(37, 80, 216, 0.68) !important;
}

/* Product and course details: remove remaining warm utility boxes while
   preserving price, access, and enrollment behavior. */
body.page-shop-detail .shop-detail-hero-empty,
body.page-course-detail .course-detail-hero-empty,
body.page-shop-detail .shop-detail-pay-lock,
body.page-shop-detail .shop-detail-decision-panel {
    background: #F3F8FF !important;
    border-color: var(--usnr-cool-border) !important;
}
body.page-course-detail .course-detail-body {
    border-color: var(--usnr-cool-border) !important;
}

/* Checkout follows the same catalog palette without touching payment
   behavior. */
body.page-checkout {
    background: var(--usnr-cool-canvas, #F8FBFF) !important;
}
body.page-checkout .checkout-rainbow-strip {
    background: linear-gradient(90deg, #A2D2FF 0%, #3F7BC4 48%, #2550D8 100%) !important;
}
body.page-checkout .checkout-card,
body.page-checkout .checkout-pay {
    border-color: #DCE9F7 !important;
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 46px -34px rgba(44, 92, 150, 0.30) !important;
}
body.page-checkout .checkout-totals {
    background: #F3F8FF !important;
    border-color: #DCE9F7 !important;
}
body.page-checkout .checkout-pay-btn {
    background: #2550D8 !important;
    box-shadow: 0 14px 28px -14px rgba(37, 80, 216, 0.58) !important;
}

/* Legal, blog, and schedule-detail pages previously exposed plain
   Bootstrap surfaces. Give them a restrained editorial reading frame. */
body.page-legal main > section,
body.page-blog-index main > section,
body.page-blog-detail main > section,
body.page-schedule-detail main > section {
    background: var(--usnr-cool-canvas, #F8FBFF) !important;
}
body.page-legal main > section .col-lg-8,
body.page-blog-detail main article,
body.page-schedule-detail main .bg-white {
    background: #FFFFFF;
    border: 1px solid #DCE9F7;
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 46px -34px rgba(44, 92, 150, 0.30);
}
body.page-legal main > section .col-lg-8 {
    padding: clamp(1.4rem, 4vw, 3rem);
}
body.page-blog-detail main article {
    padding: clamp(1.4rem, 4vw, 3rem);
}
body.page-blog-index main .card {
    border: 1px solid #DCE9F7 !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 22px 46px -34px rgba(44, 92, 150, 0.30) !important;
}
body.page-blog-index main .text-primary,
body.page-blog-detail main .text-primary {
    color: #2550D8 !important;
}
body.page-schedule-detail main .bg-light {
    background: #F8FBFF !important;
}

/* Newsletter: the same cool treatment now follows visitors through the
   rest of the public site instead of switching back to the old warm one. */
body.public-ui:not(.page-home):not(.page-auth) #newsletter {
    background: #F8FBFF !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter::before {
    background: #3F7BC4 !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter::after {
    background: #A2D2FF !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-panel {
    border-color: rgba(63, 123, 196, 0.18) !important;
    box-shadow:
        0 1px 2px rgba(30, 42, 58, 0.04),
        0 34px 70px -34px rgba(44, 92, 150, 0.28) !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-panel::before {
    background: linear-gradient(90deg, #3F7BC4 0%, #2C5C96 100%) !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-eyebrow,
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-eyebrow i,
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-consent a {
    color: #2C5C96 !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-submit {
    background: linear-gradient(135deg, #3F7BC4 0%, #2C5C96 100%) !important;
    box-shadow: 0 14px 30px -12px rgba(44, 92, 150, 0.55) !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .newsletter-form .form-control:focus {
    border-color: #3F7BC4 !important;
    box-shadow: 0 0 0 4px rgba(63, 123, 196, 0.16) !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-consent input[type="checkbox"] {
    border-color: rgba(63, 123, 196, 0.45) !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-consent input[type="checkbox"]:checked {
    background: #3F7BC4 !important;
    border-color: #3F7BC4 !important;
}
body.public-ui:not(.page-home):not(.page-auth) #newsletter .nl-trust i {
    color: #3F7BC4 !important;
}

@media (max-width: 575.98px) {
    body.page-legal main > section .col-lg-8,
    body.page-blog-detail main article {
        border-radius: 14px;
    }
}

/* Licensure hero artwork: transparent asset layered over the existing canvas. */
@media (min-width: 992px) {
    body.page-licensure .licensure-hero-bg {
        background:
            url("../images/licensure/licensure-hero-paperwork.8beb046d0e06.webp") right center / min(42vw, 960px) auto no-repeat,
            radial-gradient(ellipse at 18% 20%, rgba(63, 123, 196, 0.09) 0%, transparent 56%),
            radial-gradient(ellipse at 84% 78%, rgba(162, 210, 255, 0.20) 0%, transparent 62%);
    }
}