/* ============================================================
   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: 'Cormorant Garamond', 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;
}

.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 — #f0267a family.
   Bold hot pink on the left fading into a softer blush on the right,
   echoing the "Dr. MJ Evangelista" byline color and 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%,     /* #f0267a at 58% */
        rgba(248, 140, 185, 0.55) 50%,   /* mid blush */
        rgba(253, 200, 220, 0.62) 100%); /* soft blush tail */
    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;
    width: calc(100% - clamp(1.5rem, 4vw, 2.5rem));
    max-width: 1200px;
    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 0 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;
}
/* 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;
}

/* 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(53,92,255,0.00) 0%,
        rgba(53,92,255,0.55) 25%,
        rgba(169,216,78,0.55) 55%,
        rgba(232,182,216,0.55) 80%,
        rgba(53,92,255,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: #1F47E0 !important;
}

/* 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;
}

/* Brand color rotation across the four socials */
/* 1 — Facebook: Blue (primary) */
body.public-ui .footer-social-row a:nth-child(1) {
    background: rgba(53, 92, 255, 0.10) !important;
    color: #1F47E0 !important;
    border-color: rgba(53, 92, 255, 0.22) !important;
}
body.public-ui .footer-social-row a:nth-child(1):hover {
    background: #355CFF !important;
    color: #FFFFFF !important;
    border-color: #355CFF !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 12px 24px -10px rgba(53,92,255,0.55) !important;
}

/* 2 — YouTube: Pink (accent) */
body.public-ui .footer-social-row a:nth-child(2) {
    background: rgba(232, 182, 216, 0.28) !important;
    color: #B44A8A !important;
    border-color: rgba(194, 127, 174, 0.34) !important;
}
body.public-ui .footer-social-row a:nth-child(2):hover {
    background: #C46AA0 !important;
    color: #FFFFFF !important;
    border-color: #C46AA0 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 12px 24px -10px rgba(180, 74, 138, 0.48) !important;
}

/* 3 — Instagram: Green (accent) */
body.public-ui .footer-social-row a:nth-child(3) {
    background: rgba(169, 216, 78, 0.22) !important;
    color: #4E7A1F !important;
    border-color: rgba(126, 168, 47, 0.34) !important;
}
body.public-ui .footer-social-row a:nth-child(3):hover {
    background: #6E9B2A !important;
    color: #FFFFFF !important;
    border-color: #6E9B2A !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 12px 24px -10px rgba(78, 122, 31, 0.50) !important;
}

/* 4 — TikTok: Deep blue (primary anchor) */
body.public-ui .footer-social-row a:nth-child(4) {
    background: rgba(31, 71, 224, 0.09) !important;
    color: #1E2A3A !important;
    border-color: rgba(30, 42, 58, 0.22) !important;
}
body.public-ui .footer-social-row a:nth-child(4):hover {
    background: #1E2A3A !important;
    color: #FFFFFF !important;
    border-color: #1E2A3A !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 12px 24px -10px rgba(30, 42, 58, 0.48) !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) Readable paper plate behind the lede (now the sole
   readability mechanism) --- */
body.page-home .hero-qcp-lede {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(250, 248, 243, 0.82) 100%);
    backdrop-filter: blur(10px) saturate(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    border: 1px solid rgba(53, 92, 255, 0.12);
    border-radius: 18px;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.80) inset,
        0 28px 54px -22px rgba(30, 42, 58, 0.22),
        0 4px 10px rgba(30, 42, 58, 0.08);
}

/* 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: 'Cormorant Garamond', 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: 'Cormorant Garamond', 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: 'Cormorant Garamond', 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(53, 92, 255, 0.0)  0%,
        rgba(53, 92, 255, 0.55) 10%,
        rgba(196, 106, 160, 0.60) 32%,
        rgba(111, 168, 214, 0.55) 50%,
        rgba(169, 216, 78, 0.55) 72%,
        rgba(212, 178, 77, 0.50) 90%,
        rgba(212, 178, 77, 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(232, 182, 216, 0.95) 0%,
        rgba(196, 106, 160, 0.95) 26%,
        rgba(140, 190, 220, 0.95) 52%,
        rgba(169, 216, 78, 0.95) 78%,
        rgba(233, 209, 91, 0.95) 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: 'Cormorant Garamond', 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. NCLEX Review · Established 2006 — */
body.public-ui .hero-qcp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--qcp-sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(245, 239, 227, 0.85);
    padding: 0 0 0.2rem 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);
    /* 2-notch size bump — baseline 2.75→3.4rem, cap 5.25→6.6rem */
    font-size: clamp(3.4rem, 7.5vw, 6.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: #FAF6EC;
    margin: 0;
    text-wrap: balance;
    max-width: 18ch;
}

/* "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.woff2') format('woff2'),
        url('../fonts/Dicot-Bold.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;
}
.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: column;       /* byline drops BELOW the title */
    align-items: flex-start;       /* left-aligned inside the navbar */
    justify-content: center;
    gap: 2px;
}
body.public-ui .navbar .usn-title-wrap {
    align-items: 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; }
}

/* ---------- 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, 'Cormorant Garamond', 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 — Elegant Page-Load Reveal (public UI)
   ============================================================
   A two-layer choreographed reveal that plays on every refresh:

   1. CREAM VEIL — a warm porcelain overlay holds for ~600ms, then
      lifts upward and fades over ~800ms with a premium ease curve.
      Thin amber hairline along the lifting edge adds a moment of
      brand color as the veil clears.

   2. STAGGERED HERO — while the veil is lifting, hero elements fade
      up into place in sequence: eyebrow → headline → subtitle → CTAs.
      Each starts just as the veil begins clearing, creating a "content
      emerging through mist" feel.

   CSS-only. Respects prefers-reduced-motion. Graceful degradation if
   CSS fails to load (content stays visible, no animation required). */

/* ---------- Keyframes ---------- */

@keyframes qcp-veil-lift {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-101%);
    }
}

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

@keyframes qcp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- The cream veil ----------
   Fixed overlay that auto-lifts on load. Placed via body::before so
   no HTML changes are needed. */
body.public-ui::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(180deg, #FDF9EF 0%, #F7F2E8 100%);
    /* Thin amber hairline at the bottom edge — flashes briefly as the
       veil lifts, echoing the brand's amber accent. */
    box-shadow: inset 0 -1px 0 rgba(226, 142, 30, 0.35);
    animation: qcp-veil-lift 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0s forwards;
}

/* ---------- Navbar — soft fade alongside the veil lift ---------- */
body.public-ui .navbar {
    animation: qcp-fade-in 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.6s backwards;
}

/* ---------- Hero content — staggered fade-up ----------
   Delays are tuned so each element begins emerging right as the veil
   starts lifting (45% of 1.4s = ~0.63s). Stagger of ~150ms between
   elements creates a gentle cascading feel. */

body.public-ui .hero-qcp-eyebrow {
    animation: qcp-fade-up 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) 0.65s backwards;
}

body.public-ui .hero-qcp-headline {
    animation: qcp-fade-up 0.95s cubic-bezier(0.2, 0.6, 0.2, 1) 0.80s backwards;
}

body.public-ui .hero-qcp-sub {
    animation: qcp-fade-up 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) 1.05s backwards;
}

body.public-ui .hero-qcp-actions {
    animation: qcp-fade-up 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) 1.25s backwards;
}

/* Proof card / proof bar if present — arrives last as the "trust anchor" */
body.public-ui .hero-qcp-proof,
body.public-ui .hero-qcp-proof-bar,
body.public-ui .hero-qcp-proof-card {
    animation: qcp-fade-up 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 1.45s backwards;
}

/* ---------- Reduced-motion — no veil, no stagger ----------
   Users who've opted out get the page instantly, no animation. */
@media (prefers-reduced-motion: reduce) {
    body.public-ui::before {
        display: none;
    }
    body.public-ui .navbar,
    body.public-ui .hero-qcp-eyebrow,
    body.public-ui .hero-qcp-headline,
    body.public-ui .hero-qcp-sub,
    body.public-ui .hero-qcp-actions,
    body.public-ui .hero-qcp-proof,
    body.public-ui .hero-qcp-proof-bar,
    body.public-ui .hero-qcp-proof-card {
        animation: none;
    }
}

/* ============================================================
   END SECTION 50 — Elegant Page-Load 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: 'Playfair Display', '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: 'Playfair Display', '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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', '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: 'Playfair Display', '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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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 {
    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%);
}

/* Replace the green-orb background layer with a softer pink/gold mesh */
body.page-courses .courses-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%);
}

/* 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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 {
    /* Match the hero-study-chicago.webp aspect (1768x889 ≈ 1.988:1)
       so object-fit:cover shows the WHOLE image — skyline, books,
       scrubs, and the "Dream. Prepare. Achieve." mug — with no
       cropping. Height scales with viewport width. */
    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 {
    /* Base was clamp(3rem,6vh,5.5rem) top / clamp(2.5rem,5vh,4rem) bottom.
       Collapsed to a thin air-cushion since .hero-qcp padding now handles
       the breathing room. */
    padding-top: clamp(0.5rem, 1vh, 1rem);
    padding-bottom: clamp(0.5rem, 1vh, 1rem);
    /* Align the lede's left edge to the Bootstrap .container that wraps
       the trust strip below. Bootstrap 5.3 .container uses max-widths
       540/720/960/1140/1320 with a 0.75rem gutter — matching those makes
       the headline's left edge land exactly under the leftmost trust
       signal ("ANA Accredited"). Default hero container was 1240px wide
       with ~2rem gutter, which sat ~60px inset from the trust row. */
    max-width: 1320px;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    /* body.public-ui .hero-qcp-container sets flex-direction:column; the
       inherited align-items:center from the base then horizontally CENTERS
       the lede plate inside the content area. Pin it to the left edge
       instead so the headline aligns with the trust signals. */
    align-items: flex-start;
}
@media (max-width: 1399.98px) {
    body.page-home .hero-qcp-container { max-width: 1140px; }
}
@media (max-width: 1199.98px) {
    body.page-home .hero-qcp-container { max-width: 960px; }
}
/* Smaller lede plate on home — less internal padding, less box. */
body.page-home .hero-qcp-lede {
    max-width: min(36rem, 56vw);
    padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) !important;
    gap: clamp(0.5rem, 1vh, 0.85rem) !important;
    border-radius: 14px !important;
}
/* Headline — cut from clamp(3.4rem, 7.5vw, 6.6rem) down to a size that
   fits "Prepare Practice and PASS" in roughly 2 lines on desktop, and
   keeps the tail sub-clause readable but compact. */
body.page-home .hero-qcp-headline {
    font-size: clamp(2rem, 4.2vw, 3.6rem) !important;
    line-height: 1.05 !important;
    max-width: 18ch;
}
body.page-home .hero-qcp-sub {
    font-size: clamp(0.92rem, 1.05vw, 1.05rem) !important;
    line-height: 1.5 !important;
}
body.page-home .hero-qcp-eyebrow {
    font-size: 0.68rem !important;
    letter-spacing: 0.22em !important;
    padding-bottom: 0 !important;
}
body.page-home .hero-qcp-actions {
    gap: 0.625rem !important;
    margin-top: 0.25rem !important;
}

/* Short-laptop viewports (common 1366x768, 1440x900): aspect-ratio
   still controls; shrink type + padding so content fits in the
   smaller resulting hero (1366 → 687px tall, 1440 → 724px tall). */
@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(1.85rem, 3.4vw, 2.8rem) !important;
    }
    body.page-home .hero-qcp-lede {
        padding: 0.875rem 1rem !important;
        gap: 0.5rem !important;
    }
    body.page-home .hero-qcp-sub {
        font-size: 0.92rem !important;
    }
}

/* Tablet (≤991): aspect-ratio would give hero ~386-498px which isn't
   tall enough for the lede + 2x2 stacked proof-bar. Switch to
   min-height driven by content, letting the image crop slightly. */
@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;
        /* Match Bootstrap .container at ≥768: 720px max. */
        max-width: 720px;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(1.85rem, 5vw, 2.8rem) !important;
    }
    /* Prefer the bottom of the image on cropped tablet views so the
       branded books + mug stay visible. */
    body.page-home .hero-qcp-bg-image {
        object-position: center 70%;
    }
}
/* Small tablet (≤767): match Bootstrap .container at ≥576: 540px max. */
@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 {
        /* Bootstrap .container at <576 is 100% with 0.75rem gutter. */
        max-width: 100%;
        padding: 1rem 0.75rem 1.25rem !important;
    }
    body.page-home .hero-qcp-lede {
        max-width: 100%;
    }
    body.page-home .hero-qcp-headline {
        font-size: clamp(1.65rem, 8vw, 2.4rem) !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 */
    /* Widen and left-align with the headline above. Base was
       max-width: 1200px (left edge ~x=360 at 1920 viewport) while the
       headline sits at x=312 — a ~48px inset on the left. Matching the
       Bootstrap .container content width (1320 - 2*0.75rem gutter = 1296)
       pulls the bar's left edge to x=312 exactly, and its right edge to
       the matching mirror position on the right. */
    max-width: 1296px !important;
}
@media (max-width: 1399.98px) {
    /* Bootstrap .container drops to 1140 below 1400 → content width 1116. */
    body.page-home .hero-qcp-proofbar { max-width: 1116px !important; }
}
@media (max-width: 1199.98px) {
    /* Bootstrap .container drops to 960 below 1200 → content width 936. */
    body.page-home .hero-qcp-proofbar { max-width: 936px !important; }
}
@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;
        /* Bootstrap .container drops to 720 below 992 → content width 696. */
        max-width: 696px !important;
    }
}
@media (max-width: 767.98px) {
    /* Bootstrap .container drops to 540 below 768 → content width 516. */
    body.page-home .hero-qcp-proofbar { max-width: 516px !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: 'Playfair Display', 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;
}