:root {
    --paid-navy: #103356;
    --paid-navy-light: #1a4a7a;
    --paid-navy-dark: #0a2240;
    --paid-gold: #d4af37;
    --paid-gold-light: #f5e6b3;
    --paid-gold-dark: #a77d19;
    --paid-ink: #132a45;
    --paid-muted: #617083;
    --paid-line: #dce2e8;
    --paid-page: #f8fafc;
}

.paid-course-page {
    min-height: 100vh;
    background: var(--paid-page) !important;
    color: var(--paid-ink) !important;
    font-family: "Outfit", sans-serif;
}

html[dir="rtl"] .paid-course-page {
    font-family: "Tajawal", sans-serif !important;
    font-size: 100%;
    line-height: 1.7;
}

.paid-course-page section {
    scroll-margin-top: 118px;
}

.paid-course-page :is(a, button):focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.7);
    outline-offset: 3px;
}

/* Approved crystalline hero system */
.paid-course-hero {
    box-sizing: border-box;
    isolation: isolate;
    background: transparent !important;
    padding-top: clamp(100px, 14vh, 120px) !important;
    padding-bottom: clamp(16px, 3vh, 28px) !important;
}

@keyframes paidHeroGlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.paid-course-hero-content {
    opacity: 1;
    animation: paidHeroGlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.paid-course-hero::after {
    content: "";
    position: absolute;
    inset: auto 10% 0;
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
    pointer-events: none;
}

.paid-course-hero h1 {
    color: var(--paid-navy) !important;
    letter-spacing: -0.035em;
}

.paid-course-title-accent {
    color: var(--paid-gold-dark) !important;
}

.paid-course-kicker {
    border: 1px solid rgba(167, 125, 25, 0.3);
    background: rgba(255, 250, 240, 0.9);
    color: #886618;
    box-shadow: 0 5px 16px rgba(16, 51, 86, 0.05);
}

.paid-course-chips {
    width: fit-content;
    max-width: 100%;
}

.paid-course-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.5rem 0.82rem;
    border: 1px solid rgba(16, 51, 86, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--paid-navy);
    font-size: 0.77rem;
    font-weight: 650;
    white-space: nowrap;
}

.paid-course-chip i {
    color: var(--paid-gold-dark);
    font-size: 0.72rem;
}

.paid-course-page .btn-accent {
    border: 1px solid #c89d22;
    background: var(--paid-gold) !important;
    color: var(--paid-navy) !important;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(167, 125, 25, 0.2);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.paid-course-page .btn-accent:hover {
    background: #e2bd4e !important;
    color: var(--paid-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(167, 125, 25, 0.28);
}

.paid-course-page .btn-outline-accent {
    border: 1.5px solid rgba(16, 51, 86, 0.42) !important;
    background: rgba(255, 255, 255, 0.72);
    color: var(--paid-navy) !important;
    font-weight: 750;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.paid-course-page .btn-outline-accent:hover {
    border-color: var(--paid-navy) !important;
    background: #fff !important;
    color: var(--paid-navy) !important;
    transform: translateY(-2px);
}

.paid-course-portrait {
    width: clamp(250px, 28vw, 370px);
    padding-top: 24px;
    animation: paidHeroGlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.paid-course-portrait-frame {
    position: relative;
    overflow: hidden;
    padding: 7px;
    border: 1px solid rgba(16, 51, 86, 0.12);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16, 51, 86, 0.14);
    height: clamp(330px, calc(100dvh - 200px), 500px);
    display: flex;
}

.paid-course-portrait-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    object-fit: cover;
    object-position: 50% 25%;
}

.paid-course-top-badge {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
    padding: 0.72rem 1.5rem;
    border: 1px solid rgba(16, 51, 86, 0.08);
    border-radius: 999px;
    background: #fff;
    color: var(--paid-navy);
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 8px 22px rgba(16, 51, 86, 0.1);
}

.paid-course-portrait-caption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: grid;
    gap: 0.12rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    background: rgba(16, 51, 86, 0.84);
    color: #fff;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.paid-course-portrait-caption strong {
    color: #fff;
    font-size: 1rem;
}

.paid-course-portrait-caption span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.035em;
}

/* Page-wide palette discipline */
.paid-course-page section.bg-white {
    background: #fff !important;
}

.paid-course-page [class*="bg-[#0B1120]"] {
    background: var(--paid-navy-dark) !important;
}

.paid-course-page [class*="text-[#0B1120]"] {
    color: var(--paid-navy) !important;
}

.paid-course-page :is([class*="text-orange-"], [class*="hover:text-orange-"]) {
    color: var(--paid-gold-dark) !important;
}

.paid-course-page [class*="bg-orange-"] {
    background: rgba(212, 175, 55, 0.12) !important;
}

.paid-course-page [class*="border-orange-"] {
    border-color: rgba(212, 175, 55, 0.36) !important;
}

.paid-course-page [class*="border-t-orange-"] {
    border-top-color: var(--paid-gold) !important;
}

.paid-course-page :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700) {
    color: var(--paid-gold-dark) !important;
}

.paid-course-page [class*="bg-[#0B1120]"] :is(.text-amber-300\/90, .text-amber-400, .text-amber-500) {
    color: #e5c15d !important;
}

/* Countdown band */
.paid-course-hero + section {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--paid-line);
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(16, 51, 86, 0.055);
}

.paid-course-hero + section .countdown-num,
.paid-course-hero + section [class*="text-[#0B1120]"] {
    color: var(--paid-navy) !important;
}

/* Light editorial cards */
.paid-course-page #overview [class*="rounded-2xl"],
.paid-course-page #instructor + section [class*="rounded-xl"],
.paid-course-page #testimonials + section [class*="rounded-2xl"],
.paid-course-page #course-voices + section [class*="rounded-2xl"] {
    border-color: var(--paid-line) !important;
    box-shadow: 0 9px 24px rgba(16, 51, 86, 0.055);
}

.paid-course-page #overview [class*="rounded-2xl"]:hover {
    border-color: rgba(167, 125, 25, 0.45) !important;
    box-shadow: 0 14px 30px rgba(16, 51, 86, 0.09) !important;
}

/* Instructor — same centered editorial treatment as the approved free course */
.paid-course-page #instructor {
    border-top: 1px solid var(--paid-line);
    border-bottom: 1px solid var(--paid-line);
    background: #f8fafc !important;
}

.paid-course-page #instructor > div > .grid {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(2rem, 5vw, 4.5rem) !important;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--paid-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 51, 86, 0.08);
}

.paid-course-page #instructor > div > .grid::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--paid-navy), var(--paid-gold), var(--paid-navy));
}

.paid-course-page #instructor > div > .grid > div {
    grid-column: auto !important;
}

.paid-course-page #instructor > div > .grid > div:first-child {
    width: min(100%, 360px);
    margin-inline: auto;
}

.paid-course-page #instructor > div > .grid > div:first-child img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.paid-course-page #instructor > div > .grid > div:last-child {
    max-width: 610px;
    margin-inline: auto;
    text-align: center !important;
}

.paid-course-page #instructor ul {
    max-width: 570px;
    margin-right: auto;
    margin-left: auto;
}

.paid-course-page #instructor .flex.flex-wrap.gap-3 {
    justify-content: center !important;
}

/* Audience directly follows instructor on both paid pages */
.paid-course-page #instructor + section {
    background: var(--paid-navy-dark) !important;
}

.paid-course-page #instructor + section .grid > div {
    min-height: 150px;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.035);
}

.paid-course-page #instructor + section .grid > div:hover {
    border-color: rgba(212, 175, 55, 0.55) !important;
    background: rgba(255, 255, 255, 0.06);
}

/* Testimonial and graduate sections */
.paid-course-page :is(#testimonials, #course-voices) {
    background: var(--paid-navy-dark) !important;
}

.paid-course-page :is(#testimonials, #course-voices) .marquee-viewport [class*="rounded-2xl"] {
    border-color: rgba(255, 255, 255, 0.13) !important;
    box-shadow: none !important;
}

/* Pricing and FAQs remain the intentional dark conversion regions */
.paid-course-page :is(#pricing, #faq) {
    background: var(--paid-navy-dark) !important;
}

.paid-course-page #pricing > div > div:last-child,
.paid-course-page #faq-list > div {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.035);
}

.paid-course-page #pricing .btn-outline-accent {
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: transparent;
    color: #fff !important;
}

.paid-course-page #pricing .btn-outline-accent:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* RTL is explicit and physically stable. */
html[dir="rtl"] .paid-course-page .hide-rtl {
    display: none !important;
}

@media (min-width: 1024px) {
    html[dir="ltr"] .paid-course-chips {
        margin-left: 0;
        margin-right: auto;
    }

    html[dir="rtl"] .paid-course-chips {
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-start !important;
    }

    html[dir="rtl"] .paid-course-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1023px) {
    .paid-course-hero {
        padding-top: 8.5rem !important;
    }

    .paid-course-chips,
    html[dir="rtl"] .paid-course-chips {
        margin-right: auto;
        margin-left: auto;
        justify-content: center !important;
    }

    .paid-course-actions {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .paid-course-hero {
        padding-top: 7.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .paid-course-hero h1 {
        line-height: 1.14 !important;
        letter-spacing: -0.025em;
    }

    .paid-course-portrait {
        width: min(100%, 320px);
    }

    .paid-course-actions > a {
        width: 100%;
        min-height: 50px;
    }

    .paid-course-page #instructor > div > .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .paid-course-page #instructor > div > .grid > div:first-child {
        width: min(100%, 320px);
    }
}

@media (max-width: 520px) {
    .paid-course-chip {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@media (max-height: 760px) and (min-width: 1024px) {
    .paid-course-hero {
        padding-top: 104px !important;
        padding-bottom: 16px !important;
    }

    .paid-course-hero h1 {
        font-size: clamp(2.1rem, 3.2vw, 2.75rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 0.35rem !important;
    }

    .paid-course-kicker {
        margin-bottom: 0.6rem !important;
        padding: 0.35rem 0.85rem !important;
        font-size: 0.72rem !important;
    }

    .paid-course-hero-content p {
        margin-bottom: 0.25rem !important;
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }

    .paid-course-chips {
        margin-bottom: 0.75rem !important;
        gap: 0.35rem !important;
    }

    .paid-course-chip {
        min-height: 36px !important;
        padding: 0.35rem 0.65rem !important;
        font-size: 0.73rem !important;
    }

    .paid-course-actions a {
        padding: 0.65rem 1.4rem !important;
        font-size: 0.9rem !important;
    }

    .paid-course-portrait {
        width: clamp(230px, 24vw, 310px) !important;
        padding-top: 18px !important;
    }

    .paid-course-portrait-frame {
        height: clamp(310px, calc(100dvh - 180px), 430px) !important;
    }

    .paid-course-top-badge {
        padding: 0.5rem 1.1rem !important;
        font-size: 0.75rem !important;
    }

    .paid-course-portrait-caption {
        padding: 0.55rem 0.8rem !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
    }
}

/* ── Scoped Video Mode for FDAP Hero (Option A) ─────────────────────────── */
.paid-course-hero.fdap-hero-video-mode {
    background: #061424 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    position: relative;
    isolation: isolate;
}

/* Hide light decorative layers in video mode */
.fdap-hero-video-mode .hero-gradient-base,
.fdap-hero-video-mode .aurora-container,
.fdap-hero-video-mode .hero-glow-orb,
.fdap-hero-video-mode .bg-pattern-engineering,
.fdap-hero-video-mode .paid-course-hero-bg,
.fdap-hero-video-mode::after {
    display: none !important;
}

/* Video Element */
/* The poster is painted on the hero, so the video can fade in over it once it
   can actually play. Without this the first decoded frame pops in abruptly -
   the "delay in rendering" the client reported. */
.fdap-hero-video {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fdap-hero-video.is-ready {
    opacity: 1;
}

.fdap-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* Readability Gradient Overlay */
/* Poster as the hero's own background: visible instantly, and it stays put if
   the video never loads or autoplay is refused. */
.fdap-hero-video-mode {
    background-image: url('https://CvWebs.b-cdn.net/EngMohamadFaiad/Courses/assets/images/fdap-hero-poster.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.fdap-hero-video-mode .fdap-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(6, 20, 36, 0.94) 0%,
        rgba(6, 20, 36, 0.88) 35%,
        rgba(6, 20, 36, 0.72) 58%,
        rgba(6, 20, 36, 0.62) 78%,
        rgba(6, 20, 36, 0.76) 100%);
}

/* RTL mirrored overlay for Arabic */
html[dir="rtl"] .fdap-hero-video-mode .fdap-hero-overlay {
    background: linear-gradient(270deg,
        rgba(6, 20, 36, 0.94) 0%,
        rgba(6, 20, 36, 0.88) 35%,
        rgba(6, 20, 36, 0.72) 58%,
        rgba(6, 20, 36, 0.62) 78%,
        rgba(6, 20, 36, 0.76) 100%);
}

/* Dark Hero Typography & Elements */
.fdap-hero-video-mode h1 {
    color: #ffffff !important;
}

.fdap-hero-video-mode .paid-course-title-accent {
    color: #f5cf58 !important;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.35);
}

.fdap-hero-video-mode .paid-course-kicker {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #f8e19b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.fdap-hero-video-mode .paid-course-hero-content p.text-slate-700,
.fdap-hero-video-mode .paid-course-hero-content p.font-semibold {
    color: #f1f5f9 !important;
}

.fdap-hero-video-mode .paid-course-hero-content p.text-slate-500 {
    color: #cbd5e1 !important;
}

.fdap-hero-video-mode .paid-course-chip {
    background: rgba(16, 51, 86, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.fdap-hero-video-mode .paid-course-chip i {
    color: #f5cf58 !important;
}

.fdap-hero-video-mode .btn-outline-accent {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.fdap-hero-video-mode .btn-outline-accent:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.fdap-hero-video-mode .paid-course-portrait-frame {
    background: #0d2642 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

.fdap-hero-video-mode .paid-course-top-badge {
    background: rgba(10, 34, 64, 0.95) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #f8e19b !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
    .paid-course-page *,
    .paid-course-page *::before,
    .paid-course-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .paid-course-page .reveal,
    .paid-course-hero-content,
    .paid-course-portrait {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Hiding the <video> also hides its poster, which left the hero as a flat
       dark panel for anyone with "reduce motion" enabled at OS level. Paint the
       poster onto the hero itself so those visitors still get the finished
       image, just without the movement. */
    .fdap-hero-video {
        display: none !important;
    }

    .fdap-hero-video-mode {
        background-image: url('https://CvWebs.b-cdn.net/EngMohamadFaiad/Courses/assets/images/fdap-hero-poster.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .fdap-hero-video-mode {
        background-image: url('https://CvWebs.b-cdn.net/EngMohamadFaiad/Courses/assets/images/fdap-hero-poster.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ── CCMP hero background video (LIGHT) ─────────────────────────────────────
   Unlike the FDAP hero this one stays light: the heading remains navy and the
   video is a near-white asset, so the wash on top is WHITE, not navy. Measured:
   navy #103356 on the darkest pixel behind it is 4.30:1 with no wash — just
   under AA. The wash lifts it to ~6:1 while leaving the Gantt visible. */
.ccmp-hero-video-mode {
    background-image: url('https://CvWebs.b-cdn.net/EngMohamadFaiad/Courses/assets/images/ccmp-hero-poster.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Light hero poster background for FDAP (can be updated when custom light FDAP poster is ready) */
.paid-hero-light {
    background-image: url('https://CvWebs.b-cdn.net/EngMohamadFaiad/Courses/assets/images/ccmp-hero-poster.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.ccmp-hero-video,
.paid-hero-light-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ccmp-hero-video.is-ready,
.paid-hero-light-video.is-ready {
    opacity: 1;
}

.ccmp-hero-video-mode .ccmp-hero-overlay,
.paid-hero-light .paid-hero-light-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Heaviest on the left behind the headline, lightest through the middle so
       the schedule animation still reads. */
    background: linear-gradient(90deg,
        rgba(248, 250, 252, 0.62) 0%,
        rgba(248, 250, 252, 0.52) 34%,
        rgba(248, 250, 252, 0.26) 58%,
        rgba(248, 250, 252, 0.30) 78%,
        rgba(248, 250, 252, 0.42) 100%);
}

/* Arabic flips the copy to the right, so the heavy end of the wash follows it. */
html[dir="rtl"] .ccmp-hero-video-mode .ccmp-hero-overlay,
html[dir="rtl"] .paid-hero-light .paid-hero-light-overlay {
    background: linear-gradient(270deg,
        rgba(248, 250, 252, 0.62) 0%,
        rgba(248, 250, 252, 0.52) 34%,
        rgba(248, 250, 252, 0.26) 58%,
        rgba(248, 250, 252, 0.30) 78%,
        rgba(248, 250, 252, 0.42) 100%);
}

/* The light decorative layers would fight the video; the poster and the wash
   already supply the background. Markup is left in place so removing
   .ccmp-hero-video-mode / .paid-hero-light restores the original hero exactly. */
.ccmp-hero-video-mode .hero-gradient-base,
.ccmp-hero-video-mode .aurora-container,
.ccmp-hero-video-mode .hero-glow-orb,
.paid-hero-light .hero-gradient-base,
.paid-hero-light .aurora-container,
.paid-hero-light .hero-glow-orb {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ccmp-hero-video,
    .paid-hero-light-video {
        display: none !important;
    }
}

/* ── Hero copy: breathe on tall screens, stay compact on short ones ─────────
   Measured at 1536x900: the text column was only 398px inside a 900px hero,
   leaving 297px above and 205px below - dead space with the lines bunched up.
   Everything below is gated on MIN-HEIGHT so it can only ever add room. Short
   viewports (FDAP fits exactly at 680px) inherit the original values untouched. */
.paid-course-hero-content > .paid-course-kicker {
    margin-bottom: clamp(20px, 3.6vh, 34px);
}

.paid-course-hero-content > h1 {
    margin-bottom: clamp(16px, 3.2vh, 30px);
    line-height: 1.14;
}

.paid-course-hero-content > h1 + p {
    margin-bottom: clamp(6px, 1.5vh, 15px);
    line-height: 1.45;
}

.paid-course-hero-content > h1 + p + p {
    margin-bottom: clamp(20px, 3.8vh, 38px);
    line-height: 1.55;
}

.paid-course-hero-content > .paid-course-chips {
    margin-bottom: clamp(24px, 4.2vh, 42px);
    gap: clamp(8px, 1.1vh, 14px);
}

/* Type only grows once there is vertical room to spend. Below 800px tall these
   rules never apply, so the tight layouts keep their original sizes. */
/* The h1 size is deliberately NOT raised past 4.15rem here: both headings
   ("Forensic Delay Analysis (FDAP)" / "Construction Claims Management (CCMP)")
   sit at exactly two lines, and a third line adds ~86px and breaks the fit.
   The extra breathing room is spent on the two subtitles and the gaps instead. */
@media (min-width: 1024px) and (min-height: 800px) {
    .paid-course-hero-content > h1        { font-size: 4.15rem; }
    .paid-course-hero-content > h1 + p    { font-size: 1.35rem; }
    .paid-course-hero-content > h1 + p + p{ font-size: 1.1rem; }
}

/* Larger subtitles only from 860px tall. CCMP's copy is ~20px taller than
   FDAP's, and at 1536x800 the bigger type pushed its hero to 805px - a 5px
   overflow. Everything between 800 and 859 keeps the sizes proven to fit. */
@media (min-width: 1024px) and (min-height: 860px) {
    .paid-course-hero-content > h1 + p    { font-size: 1.42rem; line-height: 1.5; }
    .paid-course-hero-content > h1 + p + p{ font-size: 1.16rem; line-height: 1.6; }
}

@media (min-width: 1024px) and (min-height: 950px) {
    .paid-course-hero-content > h1        { font-size: 4.45rem; }
    .paid-course-hero-content > h1 + p    { font-size: 1.52rem; }
    .paid-course-hero-content > h1 + p + p{ font-size: 1.22rem; }
}

/* ── Hero copy: use the vertical room on tall screens ───────────────────────
   Measured on FDAP at 1920x845: the copy block was 537px inside an 845px hero,
   leaving 308px of dead space (216 above, 92 below) with the lines bunched.
   Gated on min-height:800px, exactly like the type scale above, so the short
   viewports that used to overflow (1536x680 was the original bug) never see
   these values. Each minimum equals the previous rule's maximum, so crossing
   the 800px threshold can only ever add room, never remove it.

   Second pass (measured on CCMP at 1920x870): the rhythm was uneven rather
   than merely tight - kicker->h1 54px, h1->subtitle 45px, but subtitle->second
   line only 23px, then 56px and 61px below. That one 23px gap is what read as
   crowded, so it takes most of the increase and the rest move a little to keep
   the sequence even. */
/* 800-859px tall: only the one crowded gap is opened up. Everything else keeps
   the values already proven to fit, because CCMP has no headroom to spare here. */
@media (min-width: 1024px) and (min-height: 800px) {
    .paid-course-hero-content > .paid-course-kicker { margin-bottom: clamp(34px, 6.2vh, 58px); }
    .paid-course-hero-content > h1                  { margin-bottom: clamp(30px, 5.2vh, 50px); }
    .paid-course-hero-content > h1 + p              { margin-bottom: clamp(18px, 3.6vh, 34px); }
    .paid-course-hero-content > h1 + p + p          { margin-bottom: clamp(38px, 6.4vh, 62px); }
    .paid-course-hero-content > .paid-course-chips  { margin-bottom: clamp(42px, 7vh, 68px); }
}

/* 860px+ : genuine headroom, so the whole rhythm opens up. */
@media (min-width: 1024px) and (min-height: 860px) {
    .paid-course-hero-content > .paid-course-kicker { margin-bottom: clamp(34px, 6.6vh, 62px); }
    .paid-course-hero-content > h1                  { margin-bottom: clamp(30px, 5.6vh, 56px); }
    .paid-course-hero-content > h1 + p              { margin-bottom: clamp(18px, 4.2vh, 40px); }
    .paid-course-hero-content > h1 + p + p          { margin-bottom: clamp(38px, 6.8vh, 68px); }
    .paid-course-hero-content > .paid-course-chips  { margin-bottom: clamp(42px, 7.2vh, 72px); }
}

/* ── Detail chips: hover polish ────────────────────────────────────────────
   These are informational <span>s, not links, so deliberately NO cursor:pointer
   and no colour change that would read as a control - just a light lift. */
.paid-course-chip {
    transition: transform 0.18s ease,
                box-shadow 0.18s ease,
                border-color 0.18s ease,
                background-color 0.18s ease;
    will-change: transform;
}

.paid-course-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 125, 25, 0.42);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(16, 51, 86, 0.13);
}

.paid-course-chip:hover i {
    color: var(--paid-gold);
}

@media (prefers-reduced-motion: reduce) {
    .paid-course-chip { transition: none; }
    .paid-course-chip:hover { transform: none; }
}