/*!
 * Communityline Portal - Learning Management System
 * Copyright (c) 2025-2026 Jeremiah Phillippe Sison. All rights reserved.
 * 
 * This source file is proprietary and confidential. Unauthorized copying,
 * distribution, or modification of this file, in whole or in part, via any
 * medium, is strictly prohibited without prior written permission.
 * See LICENSE.md for the full terms.
 * 
 * @package   Communityline Portal
 * @copyright 2025-2026 Jeremiah Phillippe Sison
 * @license   Proprietary - All Rights Reserved
 */
/*
 * Community Line Portal modern frontend layer.
 * Loaded after the original template CSS to polish the existing Blade views.
 */
:root {
    /* =====================================================================
       Communityline design tokens — the single source of truth for colour,
       typography, radius, spacing and elevation. Brand colours (--clp-primary
       / -dark / -accent / --clp-font) are also emitted by the branding partial
       so the admin's Appearance settings re-skin the whole product live.
       ===================================================================== */
    /* Brand */
    --clp-primary: #16307a;
    --clp-primary-dark: #0f2257;
    --clp-accent: #f4ce0a;
    --clp-success: #1ba84c;
    --clp-success-dark: #128a3d;
    /* Status */
    --clp-danger: #e0554e;
    --clp-warning: #e8a90a;
    --clp-info: #2f74d0;
    /* Text & surfaces */
    --clp-ink: #101828;
    --clp-muted: #667085;
    --clp-border: #eaecf0;
    --clp-soft: #f8f9fb;
    --clp-surface: #ffffff;
    /* Typography (overridden by the branding partial's --clp-font) */
    --clp-font: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --clp-fs-sm: 14px;
    --clp-fs-md: 16px;
    --clp-fs-lg: 20px;
    --clp-fs-xl: 28px;
    /* Radius */
    --clp-radius-sm: 8px;
    --clp-radius: 12px;
    --clp-radius-lg: 18px;
    --clp-radius-pill: 999px;
    /* Spacing scale */
    --clp-space-1: 4px;
    --clp-space-2: 8px;
    --clp-space-3: 12px;
    --clp-space-4: 16px;
    --clp-space-5: 24px;
    --clp-space-6: 32px;
    --clp-space-7: 48px;
    /* Elevation — layered (tight ambient + soft cast) for a refined, premium feel */
    --clp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 40px rgba(16, 24, 40, .09);
    --clp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06);
    --clp-shadow-lg: 0 2px 6px rgba(15, 34, 87, .08), 0 30px 70px rgba(15, 34, 87, .20);
}

body {
    background: #fff;
    color: var(--clp-ink);
    font-family: var(--clp-font, Inter, Arial, sans-serif);
}

a,
.text-color {
    color: var(--clp-primary);
}

a:hover {
    color: var(--clp-primary-dark);
}

/* Legacy-template neutralisation: the old theme's accent (red #ec5252) still
   lives in style.css. clp-modern.css + the branding partial already re-skin the
   interactive surfaces; the only remaining leak on rendered pages is the
   cart/wishlist count badge — route it through a brand token too. */
.product-count {
    background: var(--clp-primary);
    color: #fff;
}

.theme-btn,
.btn.theme-btn {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    border-radius: 10px;
    box-shadow: none;
    font-weight: 800;
    letter-spacing: -.01em;
}

.theme-btn:hover,
.btn.theme-btn:hover {
    background: var(--clp-primary-dark);
    border-color: var(--clp-primary-dark);
}

.theme-btn-white,
.btn.theme-btn-white {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid var(--clp-border);
}

.theme-btn-transparent,
.btn.theme-btn-transparent {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid rgba(22, 48, 122, .25);
}

.section--padding {
    padding: 84px 0;
}

.section-heading .section__title,
.section__title {
    color: var(--clp-ink);
    font-weight: 850;
    letter-spacing: -.04em;
}

.section-divider {
    background: var(--clp-primary);
}

.bg-gray {
    background: var(--clp-soft) !important;
}

.ribbon,
.ribbon-lg {
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .01em;
}

.header-menu-area {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .08);
}

.header-top {
    background: #f9fafb;
}

.header-menu-content {
    min-height: 74px;
}

.header-menu-content .form-control,
.clp-search-input {
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f9fafb;
    height: 46px;
}

.main-menu ul li a,
.menu-category ul li a {
    color: var(--clp-ink);
    font-weight: 750;
}

.main-menu ul li a:hover,
.menu-category ul li a:hover {
    color: var(--clp-primary);
}

.card,
.card-item,
.clp-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.card-item {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-item:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 48, 122, .22);
    box-shadow: var(--clp-shadow);
}

.clp-shell {
    background:
        radial-gradient(circle at 6% 6%, rgba(244, 206, 10, .14), transparent 34%),
        radial-gradient(circle at 94% 2%, rgba(27, 168, 76, .20), transparent 42%),
        linear-gradient(140deg, #0a1836 0%, #122560 50%, #16307a 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.clp-shell:before,
.clp-shell:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.clp-shell:before {
    width: 340px;
    height: 340px;
    right: -130px;
    top: 40px;
}

.clp-shell:after {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -110px;
}

.clp-shell > .container {
    position: relative;
    z-index: 1;
}

.clp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-weight: 850;
    font-size: 14px;
}

.clp-hero-title {
    color: #fff;
    font-size: clamp(40px, 5.5vw, 66px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.clp-hero-copy {
    color: rgba(255, 255, 255, .84);
    font-size: 19px;
    line-height: 1.75;
}

.clp-hero-search {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .22);
    padding: 10px;
}

.clp-hero-search .form-control {
    border: 0;
    height: 58px;
    font-size: 16px;
    box-shadow: none;
}

.clp-hero-panel {
    background: rgba(255, 255, 255, .96);
    color: var(--clp-ink);
    border-radius: 26px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .26);
    padding: 28px;
}

.clp-floating-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.clp-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    font-size: 28px;
}

.clp-metric {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--clp-border);
    padding: 22px;
    height: 100%;
}

.clp-metric strong {
    display: block;
    color: var(--clp-ink);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.clp-metric span,
.clp-muted {
    color: var(--clp-muted);
}

.clp-category-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.clp-category-chip:hover {
    border-color: rgba(22, 48, 122, .28);
    box-shadow: var(--clp-shadow-sm);
}

.clp-course-card {
    height: 100%;
}

.clp-course-thumb {
    height: 190px;
    object-fit: cover;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(22, 48, 122, .12), rgba(27, 168, 76, .16)),
        #f2f4f7;
}

.clp-course-meta {
    color: var(--clp-muted);
    font-size: 14px;
}

.clp-price {
    color: var(--clp-ink);
    font-weight: 900;
    font-size: 21px;
}

.clp-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    font-weight: 850;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.clp-university-band {
    background:
        radial-gradient(circle at 90% 6%, rgba(27, 168, 76, .18), transparent 42%),
        linear-gradient(140deg, #0a1836 0%, #122560 55%, #16307a 100%);
    color: #fff;
    border-radius: 28px;
    padding: 46px;
    overflow: hidden;
    position: relative;
}

.clp-university-band:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    right: -90px;
    top: -90px;
    background: rgba(244, 206, 10, .10);
}

.clp-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.clp-step-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clp-primary);
    color: #fff;
    font-weight: 900;
}

/* Enrollment → completion flow cards (homepage university band).
   Vertical layout so descriptions flow full-width instead of wrapping
   one word per line beside the number. */
.clp-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.clp-flow-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 44px rgba(2, 6, 23, .30);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.clp-flow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 62px rgba(2, 6, 23, .42);
}
.clp-flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.clp-flow-num {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--clp-primary, #16307a), #0f2257);
    box-shadow: 0 10px 20px rgba(22, 48, 122, .32);
}
.clp-flow-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--clp-accent, #1ba84c);
    background: rgba(27, 168, 76, .12);
}
.clp-flow-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f1b3d;
    margin: 0 0 6px;
}
.clp-flow-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: #5b6472;
    margin: 0;
}
/* Connector chevron between cards (desktop only). */
.clp-flow-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-top: 3px solid rgba(255, 255, 255, .55);
    border-right: 3px solid rgba(255, 255, 255, .55);
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
}
@media (max-width: 767px) {
    .clp-flow-grid { grid-template-columns: 1fr; gap: 14px; }
    .clp-flow-card:not(:last-child)::after { display: none; }
}

.clp-cta {
    background:
        radial-gradient(circle at 12% 8%, rgba(244, 206, 10, .16), transparent 32%),
        radial-gradient(circle at 92% 96%, rgba(27, 168, 76, .20), transparent 40%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%);
    color: #fff;
    border-radius: 28px;
    padding: 48px;
}

.footer-area {
    background: #f9fafb;
}

/* Contact details live in these lists — email addresses, registration
   numbers, URLs — and each is a single unbreakable token. In a narrow
   column (footer col-lg-3 at 1024px, the About card at 360px) they ran
   well past their container and made the whole page scroll sideways.
   `anywhere` rather than `break-word` because it also lets the break
   count toward intrinsic min-content width, which is what stops a grid
   or flex track being sized by the unbroken string. */
.generic-list-item li,
.generic-list-item li a {
    overflow-wrap: anywhere;
}

.footer-area .footer-item h3,
.footer-area .font-weight-bold {
    color: var(--clp-ink);
}

.pagination .page-link {
    color: var(--clp-primary);
    border-color: var(--clp-border);
}

.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
}

@media (max-width: 1199px) {
    .header-top,
    .menu-category {
        display: none;
    }

    .header-menu-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

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

    .clp-hero-panel,
    .clp-cta,
    .clp-university-band {
        padding: 28px;
        border-radius: 22px;
    }

    .clp-hero-search {
        border-radius: 14px;
    }
}

/* =========================================================
   Redesigned header / primary navigation
   ========================================================= */
.clp-header-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.clp-header-top {
    background: #f9fafb;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

.clp-header-top a {
    color: var(--clp-muted);
}

.clp-header-top a:hover {
    color: var(--clp-primary);
}

.clp-header-main {
    min-height: 76px;
    display: flex;
    align-items: center;
}

.clp-nav-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.clp-nav-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.clp-nav-center {
    flex: 1 1 auto;
    min-width: 0;
}

.clp-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Category dropdown trigger */
.clp-category-menu {
    position: relative;
}

.clp-category-menu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Override the base "Edule" theme which forces padding-bottom:35px on
   .menu-category > ul > li a (higher specificity) and pushes the label
   to the top of the pill — making "Categories" look like it spills out. */
.clp-category-menu .clp-cat-trigger {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 16px !important;
    line-height: 1 !important;
    border-radius: 12px;
    background: rgba(22, 48, 122, .08);
    color: var(--clp-primary) !important;
    font-weight: 800;
    white-space: nowrap;
    text-transform: none !important;
}

.clp-category-menu .clp-cat-trigger:hover {
    background: rgba(22, 48, 122, .14);
    color: var(--clp-primary) !important;
}

.clp-category-menu .clp-cat-trigger .la-angle-down {
    margin-left: 8px;
}

/* Keep the dropdown panel anchored under the pill and never let it (or its
   fly-out sub-menus) spill outside the viewport. */
.clp-category-menu > ul > li {
    position: relative;
}

.clp-category-menu .cat-dropdown-menu {
    left: 0;
    top: calc(100% + 10px);
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--clp-shadow);
    border: 1px solid var(--clp-border);
    z-index: 1002;
}

.clp-category-menu .cat-dropdown-menu > li .sub-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* Search field */
.clp-nav-search {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.clp-nav-search .form-group {
    position: relative;
}

.clp-nav-search .form--control {
    width: 100%;
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f7f8fa;
    height: 46px;
    padding-left: 44px !important;
}

.clp-nav-search .form--control:focus {
    background: #fff;
    border-color: rgba(22, 48, 122, .4);
    box-shadow: 0 0 0 3px rgba(22, 48, 122, .12);
}

.clp-nav-search .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clp-muted);
}

/* Primary menu */
.clp-main-menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp-main-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 11px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 750;
    white-space: nowrap;
}

/* The full 6-item menu + icons leave no room for a usable centre search bar at
   any width — it was collapsing to a ~50px circle overlapping "Courses". So we
   drop the centre bar and surface search as an icon (opens the search panel),
   which is cleaner and matches the compact-search pattern of premium LMS UIs. */
.clp-nav-center { display: none !important; }
/* Slide-down search panel: guarantee it shows when toggled (the base .active
   rule was being out-cascaded, and `visibility` was caught in a 0.4s
   transition). Keep opacity/transform animated, flip visibility instantly. */
.mobile-search-form { transition: none !important; box-shadow: 0 10px 30px rgba(16,24,40,.14); }
.mobile-search-form.active { opacity: 1 !important; visibility: visible !important; }
.body-overlay { transition: opacity .28s ease !important; }
.body-overlay.active { opacity: 1 !important; visibility: visible !important; }
@media (min-width: 1200px) {
    .clp-nav-right .clp-mobile-toggles { display: flex !important; align-items: center; margin-left: 6px; }
    .clp-nav-right .clp-mobile-toggles .search-menu-toggle { display: inline-flex !important; }
    .clp-nav-right .clp-mobile-toggles .cat-menu-toggle,
    .clp-nav-right .clp-mobile-toggles .main-menu-toggle { display: none !important; }
}
/* Tighten the nav between the mobile breakpoint and mid-desktop so the full
   menu + icons + search toggle never exceed the viewport (was ~19px over at 1280). */
@media (min-width: 1200px) and (max-width: 1440px) {
    .clp-nav-bar { gap: 12px; }
    .clp-main-menu > ul > li > a { padding: 0 8px; }
    .clp-nav-icons { gap: 2px; }
    .clp-nav-right .clp-mobile-toggles { margin-left: 3px; }
}

.clp-main-menu > ul > li > a:hover {
    background: rgba(22, 48, 122, .07);
    color: var(--clp-primary) !important;
}

/* "More" dropdown */
.clp-has-dropdown {
    position: relative;
}

.clp-dropdown-toggle {
    cursor: pointer;
}

.clp-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    box-shadow: var(--clp-shadow);
    padding: 8px;
    margin-top: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1001;
    display: block;
}

.clp-has-dropdown:hover .clp-dropdown-menu,
.clp-has-dropdown.is-open .clp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.clp-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 650;
}

.clp-dropdown-menu li a:hover {
    background: rgba(22, 48, 122, .08);
    color: var(--clp-primary) !important;
}

/* Wishlist + cart icons */
.clp-nav-icons {
    gap: 4px;
    margin-left: 6px;
}

.clp-icon-link .shop-cart-btn,
.clp-icon-link .product-count {
    color: var(--clp-ink);
}

.clp-logo {
    min-width: 44px;
    min-height: 44px;
}

.clp-icon-link {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clp-icon-link .shop-cart-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.clp-mobile-toggles {
    display: none;
}

/* Responsive: collapse to mobile toggles */
@media (max-width: 1199px) {
    .clp-header-top,
    .clp-category-menu,
    .clp-main-menu,
    .clp-nav-icons {
        display: none;
    }

    .clp-nav-bar {
        justify-content: space-between;
        gap: 12px;
    }

    .clp-nav-center {
        display: none;
    }

    .clp-mobile-toggles {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .clp-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Let the two ends shrink so the bar never exceeds the viewport. The logo
       side must absorb the shrink (flex:1 + min-width:0) so its title ellipsizes
       instead of shoving the toggle cluster off the right edge. */
    .clp-nav-bar { gap: 10px; min-width: 0; flex-wrap: nowrap; }
    .clp-nav-left { flex: 1 1 auto; min-width: 0; gap: 10px; overflow: hidden; }
    .clp-nav-right { flex: 0 0 auto; min-width: 0; }
    /* Below 1200px, never character-truncate the brand ("Communit…"). Let the
       logo keep its intrinsic width so the "Communityline" wordmark stays whole
       (the nav menu is the flexible part and collapses to a drawer here). */
    .clp-logo { min-width: 0; flex: none; }
    .clp-logo-text { min-width: 0; overflow: visible; }
    .clp-logo-title { white-space: nowrap; overflow: visible; text-overflow: clip; }
}

/* Phone widths: shrink the logo and drop the subtitle so the header
   (logo + 3 toggles) always fits without horizontal scroll. */
@media (max-width: 575px) {
    .clp-logo-img { width: 36px !important; height: 36px !important; }
    .clp-logo-title { font-size: 16px !important; }
    .clp-logo-sub { display: none !important; }
    .clp-mobile-toggles .icon-element { width: 44px; height: 44px; }
    .clp-mobile-toggles .icon-element.mr-2 { margin-right: 6px !important; }
    /* The category toggle is redundant on phones — Categories is already in the
       main drawer — so drop it to keep the header comfortably within the viewport. */
    .clp-mobile-toggles .cat-menu-toggle { display: none !important; }

    .off-canvas-menu-list li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

#scroll-top {
    min-width: 44px;
    min-height: 44px;
}

/* =========================================================
   Dark mode (night) readability for the modern layer.
   The base theme toggles `.dark-theme` on <body>; the clp-*
   components below set their own light colors, so they need
   explicit dark overrides or text becomes invisible.
   ========================================================= */
.dark-theme {
    --clp-ink: #f3f4f6;
    --clp-muted: #a8b0bd;
    --clp-border: rgba(255, 255, 255, .10);
    --clp-soft: #1f1f24;
}

.dark-theme body,
.dark-theme {
    background-color: #161618;
}

/* Headings & body copy on dark sections */
.dark-theme .section__title,
.dark-theme .section-heading .section__title,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme .card-title,
.dark-theme .card-title a,
.dark-theme .clp-price,
.dark-theme .clp-metric strong {
    color: #f3f4f6 !important;
}

.dark-theme p,
.dark-theme .lh-30,
.dark-theme .clp-muted,
.dark-theme .clp-metric span,
.dark-theme .clp-course-meta,
.dark-theme .text-muted {
    color: #a8b0bd !important;
}

/* Card / panel surfaces */
.dark-theme .card,
.dark-theme .card-item,
.dark-theme .clp-card,
.dark-theme .clp-floating-card,
.dark-theme .clp-metric,
.dark-theme .clp-category-chip {
    background: #1f1f24 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

.dark-theme .clp-category-chip,
.dark-theme .clp-category-chip span {
    color: #e9eaee !important;
}

.dark-theme .clp-course-thumb {
    background:
        linear-gradient(135deg, rgba(22, 48, 122, .25), rgba(27, 168, 76, .18)),
        #2a2a31;
}

.dark-theme .clp-badge,
.dark-theme .ribbon,
.dark-theme .ribbon-lg {
    background: rgba(27, 168, 76, .22);
    color: #9ee2b4;
}

/* The hero/CTA/university bands are dark-on-purpose; keep their
   white text but ensure inner cards adapt. */
.dark-theme .clp-hero-panel {
    background: #1f1f24;
    color: #f3f4f6;
}

.dark-theme .clp-hero-panel .clp-muted {
    color: #a8b0bd !important;
}

/* Feature/“dashboards for everyone” sections sit on .bg-white */
.dark-theme .bg-white,
.dark-theme .clp-header-main {
    background-color: #161618 !important;
}

.dark-theme .clp-header,
.dark-theme .header-menu-area {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.dark-theme .clp-header-top {
    background: #131315;
}

.dark-theme .clp-header-top a {
    color: #9aa1ac;
}

/* Header logo + nav text (logo uses inline colors → need !important) */
.dark-theme .logo .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .clp-main-menu > ul > li > a {
    color: #e5e7eb !important;
}

.dark-theme .clp-main-menu > ul > li > a:hover,
.dark-theme .clp-dropdown-menu li a:hover {
    background: rgba(27, 168, 76, .16);
    color: #9ee2b4 !important;
}

.dark-theme .clp-dropdown-menu {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .08);
}

.dark-theme .clp-dropdown-menu li a {
    color: #e5e7eb !important;
}

.dark-theme .clp-nav-search .form--control {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .10);
    color: #f3f4f6;
}

.dark-theme .clp-cat-trigger {
    background: rgba(27, 168, 76, .18);
    color: #9ee2b4 !important;
}

.dark-theme .clp-icon-link .shop-cart-btn,
.dark-theme .clp-icon-link .product-count {
    color: #e5e7eb;
}

/* Footer */
.dark-theme .footer-area {
    background: #131315;
}

.dark-theme .footer-area .footer-item h3,
.dark-theme .footer-area .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .footer-area p,
.dark-theme .footer-area .generic-list-item li a {
    color: #a8b0bd;
}

.dark-theme .footer-area .generic-list-item li a:hover {
    color: #9ee2b4;
}

/* =========================================================
   Modern lesson player (LearnWorlds-style)
   ========================================================= */
.clp-player-body {
    margin: 0;
    background: #0a1836;
}

.clp-player {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: var(--clp-font, Inter, Arial, sans-serif);
}

/* ----- Sidebar ----- */
.clp-player-sidebar {
    width: 350px;
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 90% -6%, rgba(27, 168, 76, .16), transparent 46%),
        linear-gradient(168deg, #16307a 0%, #102456 52%, #0a1836 100%);
    color: #fff;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
    transition: margin-left .25s ease;
}

.clp-player.sidebar-collapsed .clp-player-sidebar {
    margin-left: -350px;
}

.clp-player-sidebar-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.clp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.clp-back-link:hover {
    color: #fff !important;
}

.clp-player-course-title {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 14px 0 18px;
}

/* Circular progress ring */
.clp-progress-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.clp-progress-ring { flex: 0 0 64px; }
.clp-ring-bg { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 6; }
.clp-ring-fg {
    fill: none;
    stroke: var(--clp-accent, #1ba84c);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}
.clp-ring-text { fill: #fff; font-size: 15px; font-weight: 800; }
.clp-progress-ring-meta strong { display: block; color: #fff; font-size: 14px; }
.clp-progress-ring-meta span { color: rgba(255, 255, 255, .8); font-size: 13px; }

/* ----- Curriculum list ----- */
.clp-curriculum {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 40px;
}

.clp-curriculum-section {
    padding: 6px 0;
}

.clp-curriculum-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 8px;
}

.clp-section-num {
    font-size: 13px;
    font-weight: 900;
    color: #f4ce0a;
    letter-spacing: .04em;
}

/* Scoped to .clp-player so it wins over the homepage "Who it's for"
   .clp-section-title rule (same class name, dark ink) that is defined
   later in this file — without the scope, the module titles rendered
   as dark navy text on the dark navy sidebar (unreadable). */
.clp-player .clp-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .92);
}

.clp-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp-lesson-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px 11px 24px;
    color: rgba(255, 255, 255, .82) !important;
    border-left: 3px solid transparent;
    transition: background .15s ease;
    cursor: pointer;
}

a.clp-lesson-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

.clp-lesson-item.is-active {
    background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    border-left-color: var(--clp-accent, #f4ce0a);
}

.clp-lesson-item.is-active .clp-lesson-name { font-weight: 750; }

.clp-lesson-item.is-locked {
    color: rgba(255, 255, 255, .45) !important;
    cursor: not-allowed;
}

.clp-lesson-status {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    font-size: 14px;
}

.clp-lesson-item.is-done .clp-lesson-status {
    background: var(--clp-success, #1ba84c);
    color: #fff;
}

.clp-lesson-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clp-lesson-name {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.clp-lesson-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

/* ----- Main area ----- */
.clp-player-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
}

.clp-player-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--clp-border);
    flex-shrink: 0;
}

.clp-sidebar-toggle {
    border: 1px solid var(--clp-border);
    background: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--clp-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.clp-sidebar-toggle:hover {
    background: var(--clp-soft);
}

.clp-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.clp-topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.clp-topbar-lesson {
    font-weight: 700;
    color: var(--clp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clp-topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.clp-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink) !important;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.clp-nav-btn:hover {
    border-color: rgba(22, 48, 122, .35);
    color: var(--clp-primary) !important;
}

.clp-nav-btn.is-primary {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    color: #fff !important;
}

.clp-nav-btn.is-primary:hover {
    background: var(--clp-primary-dark);
    color: #fff !important;
}

.clp-nav-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ----- Scrollable content ----- */
.clp-player-scroll {
    flex: 1;
    overflow-y: auto;
    /* 24px of side gutter left the lesson body almost touching both edges of the
       pane on a 1280-1600 laptop, because the 900px cap below never engaged at
       those widths. Wider gutters here guarantee breathing room at every size. */
    padding: 40px 44px 96px;
}

.clp-player-content {
    max-width: 920px;
    margin: 0 auto;
}

.clp-content-title {
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -.03em;
    color: var(--clp-ink);
    margin-bottom: 22px;
}

.clp-media-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--clp-shadow);
    margin-bottom: 26px;
}

.clp-pdf-frame {
    width: 100%;
    height: 78vh;
    border: 0;
    display: block;
}

.clp-html5-frame {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    background: #fff;
}

.clp-embed-frame {
    background: #000;
}

.clp-embed-frame iframe,
.clp-embed-frame video {
    width: 100%;
    display: block;
}

.clp-audio {
    width: 100%;
    margin-top: 14px;
}

.clp-media-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-size: 30px;
}

.clp-callout {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(225, 29, 72, .12);
    color: #e11d48;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.clp-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--clp-soft);
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-weight: 600;
}

.clp-article {
    color: var(--clp-ink);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 26px;
}

/* Prose here is authored content and legal copy: it carries email
   addresses and URLs, which are single unbreakable tokens and ran past
   the column on a narrow phone. break-word for the body (it only breaks
   a word that would otherwise overflow, so ordinary prose is untouched)
   and anywhere for links, where the long tokens actually live. */
.clp-article { overflow-wrap: break-word; }
.clp-article a { overflow-wrap: anywhere; }

.clp-article > *:first-child { margin-top: 0; }

/* Reading measure. Prose is capped at roughly 80 characters a line, which is the
   comfortable band; tables are deliberately left out of this list so they keep
   the full 920px column and stay legible. */
.clp-article > p,
.clp-article > ul,
.clp-article > ol,
.clp-article > h2,
.clp-article > h3,
.clp-article > h4,
.clp-article > h5,
.clp-article > blockquote {
    max-width: 63ch;
}

/* Media is authored wrapped in a paragraph (<p><iframe>, <p><img>), so exempt
   those paragraphs or every video and diagram would inherit the prose cap.
   Browsers without :has() simply show them at reading width — not broken. */
.clp-article > p:has(> iframe),
.clp-article > p:has(img) {
    max-width: none;
}

.clp-article p {
    margin: 0 0 1.15em;
}

.clp-article h1,
.clp-article h2,
.clp-article h3,
.clp-article h4,
.clp-article h5 {
    font-weight: 800;
    line-height: 1.3;
    margin: 1.8em 0 .65em;
    color: var(--clp-ink);
}

.clp-article h2 { font-size: 28px; letter-spacing: -.02em; }
.clp-article h3 { font-size: 24px; }
.clp-article h4 { font-size: 19px; }
.clp-article h5 { font-size: 17px; }

.clp-article img { max-width: 100%; height: auto; border-radius: 12px; }
.clp-article figure { margin: 0 0 1.4em; }

/* ---- Lesson imagery ----
   SafeHtml deletes <figure> and <figcaption> outright and strips every class, so
   an illustration is authored as <p><img><em>caption</em></p> — all three tags
   survive sanitising — and the styling below is hung off tag structure and the
   src attribute instead of classes. Diagrams add one more level, <p><a><img></a>,
   so they can be opened full size; the selectors below use :has(img) rather than
   :has(> img) to cover both shapes. */
.clp-article > p:has(img) {
    margin: 28px 0 32px;
}
.clp-article > p:has(img) img {
    display: block;
    width: 100%;
    /* The tags carry width/height so the browser reserves the right space before
       the file loads. Without height:auto those attributes act as a fixed height
       and squash the picture, because width:100% above overrides only the width. */
    height: auto;
    margin: 0 auto;
}
.clp-article > p:has(img) > a {
    display: block;
    position: relative;
    text-decoration: none;
}
.clp-article > p:has(img) > em {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.5;
    color: var(--clp-muted);
    text-align: center;
}
/* Photographs open a lesson. Crop to a banner so a tall frame cannot push the
   first paragraph off the screen. */
.clp-article img[src*="-header.jpg"] {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--clp-shadow-sm);
}
/* Diagrams are authored as light figure cards and an <img> cannot inherit the
   page theme, so take the glare off them in dark mode. Photographs are left
   alone — dimming those just makes them look muddy. */
.dark-theme .clp-article img[src$=".svg"] {
    filter: brightness(.93) saturate(.96);
}

.clp-article ul,
.clp-article ol {
    margin: 0 0 1.3em;
    padding-left: 1.5em;
}

/* clp-base.css resets every ul on the site to list-style-type:none for the
   theme's nav and card lists. Authored prose needs its markers back, or a
   list reads as a run of loose lines with no relationship to each other —
   which is exactly how the course description and every lesson list rendered. */
.clp-article ul { list-style: disc outside; }
.clp-article ol { list-style: decimal outside; }
.clp-article ul ul { list-style: circle outside; }
.clp-article ol ol { list-style: lower-alpha outside; }
.clp-article li { list-style: inherit; }

.clp-article li {
    margin-bottom: .55em;
}

.clp-article li:last-child { margin-bottom: 0; }

/* ---- Lesson tables ----
   Lesson content is table-heavy and SafeHtml strips every class, so the whole
   treatment hangs off tag structure. Without this the tables rendered with no
   borders, no header band and no row separation — data floating in whitespace,
   which is what made long lessons read like a Word export. */
.clp-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.6em;
    font-size: 15.5px;
    border: 1px solid var(--clp-border);
}

.clp-article table th,
.clp-article table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--clp-border);
}

.clp-article table thead th {
    background: var(--clp-soft);
    color: var(--clp-ink);
    font-weight: 700;
    border-bottom: 2px solid var(--clp-border);
}

/* Zebra striping: the tables run to a dozen rows and the eye loses the row it
   was reading without it. Tinted with the brand navy rather than flat grey so
   it belongs to the page. */
.clp-article table tbody tr:nth-child(even) > td,
.clp-article table tbody tr:nth-child(even) > th {
    background: rgba(22, 48, 122, .028);
}

.clp-article table tbody tr:last-child > td,
.clp-article table tbody tr:last-child > th {
    border-bottom: 0;
}

/* Row-header cells (scope="row") stay readable without becoming a second head. */
.clp-article table tbody th {
    font-weight: 700;
    color: var(--clp-ink);
}

/* ---- Callouts ----
   "Watch out", "In practice" and the session stop markers are authored as
   <blockquote>, because it is the only block element SafeHtml admits that can
   carry a distinct meaning. It shipped with nothing but a margin, so every
   callout in the course rendered as an ordinary paragraph. */
.clp-article blockquote {
    margin: 24px 0;
    padding: 15px 20px;
    background: var(--clp-soft);
    border: 1px solid var(--clp-border);
    border-left: 4px solid var(--clp-primary);
    border-radius: 0 10px 10px 0;
}

.clp-article blockquote > *:first-child { margin-top: 0; }
.clp-article blockquote > *:last-child { margin-bottom: 0; }
.clp-article blockquote strong:first-child { color: var(--clp-primary); }

/* ---- Click-to-reveal ----
   <details>/<summary> is the only interactive pair SafeHtml admits (it strips
   every class and script). Lessons use it for knowledge-check answers and
   "what you should have seen" panels, so the learner has to commit to an
   answer before the page shows one. Styled off tag structure like everything
   else in the article. */
.clp-article details {
    margin: 14px 0 22px;
    border: 1px solid var(--clp-border);
    border-radius: 12px;
    background: transparent;
}
.clp-article details > summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 12px 18px 12px 48px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--clp-primary);
    user-select: none;
}
.clp-article details > summary::-webkit-details-marker { display: none; }
.clp-article details > summary::before {
    content: "+";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--clp-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.clp-article details[open] > summary::before { content: "\2212"; }
.clp-article details > summary:hover,
.clp-article details[open] > summary { background: var(--clp-soft); }
.clp-article details[open] > summary {
    border-bottom: 1px solid var(--clp-border);
    border-radius: 12px 12px 0 0;
}
.clp-article details > summary:focus-visible {
    outline: 2px solid var(--clp-primary);
    outline-offset: 2px;
}
.clp-article details > :not(summary) {
    margin-left: 18px;
    margin-right: 18px;
}
.clp-article details > summary + * { margin-top: 14px; }
.clp-article details > :last-child:not(summary) { margin-bottom: 16px; }
.clp-article details table { width: calc(100% - 36px); }
.clp-article li > details { margin-top: 10px; }
.dark-theme .clp-article details > summary::before { color: #fff; }

.clp-article iframe {
    max-width: 100%;
    width: 100%;
    /* SafeHtml only admits YouTube and Vimeo iframes, so every embed here is a
       16:9 video player. Without this the width shrinks on narrow screens while
       the height attribute stays put, squashing the picture. */
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
}

.clp-article hr {
    border: 0;
    border-top: 1px solid var(--clp-border);
    margin: 1.8em 0;
}

.clp-activity-card {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 26px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-question {
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

/* Questions render as <fieldset>/<legend> (WCAG 1.3.1 group semantics).
   Reset the UA fieldset/legend quirks so visuals match the old divs. */
fieldset.clp-question { min-inline-size: auto; margin-inline: 0; padding-inline: 18px; }
.clp-question-legend {
    float: left;             /* pulls the legend into normal flow */
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin: 0;
    font-size: inherit;
}
.clp-question-legend + * { clear: both; }

.clp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--clp-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.clp-option:hover {
    border-color: rgba(22, 48, 122, .35);
    background: rgba(22, 48, 122, .03);
}

.clp-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}

.clp-chip-warn { background: rgba(245, 158, 11, .15); color: #b45309; }
.clp-chip-dark { background: rgba(16, 24, 40, .85); color: #fff; }

.clp-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--clp-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.clp-alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-weight: 600;
}

.clp-alert-info { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.clp-alert-success { background: rgba(31, 191, 117, .14); color: #047857; }
.clp-alert-danger { background: rgba(225, 29, 72, .12); color: #be123c; }

.clp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    background: var(--clp-soft);
    color: var(--clp-ink);
}

.clp-btn-sm { padding: 7px 14px; font-size: 13px; }
.clp-btn-primary { background: var(--clp-primary); color: #fff !important; }
.clp-btn-primary:hover { background: var(--clp-primary-dark); color: #fff !important; }
.clp-btn-success { background: var(--clp-success, #1ba84c); color: #fff !important; }
.clp-btn-success:hover { background: var(--clp-success-dark, #128a3d); }
.clp-btn-done { background: #e6f7ef; color: #047857 !important; }
.clp-btn-ghost { background: #fff; border-color: var(--clp-border); color: var(--clp-ink) !important; }
.clp-btn-ghost:hover { border-color: rgba(22, 48, 122, .35); color: var(--clp-primary) !important; }

.clp-complete-row { margin: 26px 0; }

.clp-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--clp-border);
    padding-top: 24px;
    margin-top: 10px;
}

/* Mobile drawer backdrop (only visible when the drawer is open on small screens) */
.clp-player-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1090;
    display: none;
}
.clp-player-backdrop.show { display: block; }

@media (max-width: 991px) {
    .clp-player-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1100;
        height: 100%;
        width: 320px;
        max-width: 86vw;
        flex-basis: 320px;
        box-shadow: 0 0 60px rgba(0, 0, 0, .4);
    }
    .clp-player.sidebar-collapsed .clp-player-sidebar { margin-left: -360px; }
    .clp-content-title { font-size: 24px; }
    .clp-player-scroll { padding: 28px 26px 76px; }
    .clp-player-topbar { padding: 12px 20px; gap: 10px; }
    .clp-topbar-nav .clp-nav-btn { padding: 9px 12px; }
    .clp-article h2 { font-size: 25px; }
}

/* Phones: keep only the essentials in the lesson top bar */
@media (max-width: 640px) {
    .clp-player-topbar { flex-wrap: wrap; }
    .clp-topbar-lesson { display: none; }            /* lesson title shown in the body heading already */
    .clp-topbar-badge { font-size: 11px; padding: 5px 9px; }
    /* 44px is the comfortable touch target; these were coming out at 33px. */
    .clp-nav-btn { font-size: 13px; padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; }
    .clp-nav-btn span.clp-nav-btn-label { display: none; }  /* icon-only prev/next if labelled */
    .clp-content-title { font-size: 21px; }
    .clp-player-scroll { padding: 22px 18px 64px; }
    /* 32px headings inside a ~340px column read as shouting, and the tighter
       body size buys back a couple of words a line on a phone. */
    .clp-article { font-size: 16.5px; }
    .clp-article h2 { font-size: 22px; }
    .clp-article h3 { font-size: 19px; }
    .clp-article h4 { font-size: 17px; }
    /* A 21:9 banner is a letterbox slit on a phone; give it more height. */
    .clp-article img[src*="-header.jpg"] { aspect-ratio: 16 / 9; }

    /* Diagrams are drawn on a 900px canvas, so at phone width their labels come
       out around 5px and are simply unreadable. Each one is wrapped in a link to
       the file itself; this badge is what tells the reader that is worth tapping. */
    .clp-article > p:has(img) > a[href$=".svg"]::after {
        content: "Tap to enlarge";
        position: absolute;
        right: 8px;
        bottom: 8px;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(22, 48, 122, .92);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .01em;
        pointer-events: none;
    }
}

/* Lesson player dark mode (main area; sidebar is already dark) */
.dark-theme .clp-player-main { background: #161618; }
.dark-theme .clp-player-topbar { background: #1f1f24; border-color: rgba(255,255,255,.08); }
.dark-theme .clp-sidebar-toggle { background: #1f1f24; color: #e5e7eb; border-color: rgba(255,255,255,.1); }
.dark-theme .clp-callout,
.dark-theme .clp-activity-card,
.dark-theme .clp-question,
.dark-theme .clp-nav-btn,
.dark-theme .clp-btn-ghost { background: #1f1f24; border-color: rgba(255,255,255,.08); color: #e5e7eb !important; }
.dark-theme .clp-content-title,
.dark-theme .clp-article { color: #f3f4f6; }
.dark-theme .clp-attachment-row { background: #1f1f24; border-color: rgba(255,255,255,.08); }

/* Lesson tables and callouts in dark mode. The light-mode rules use --clp-border
   (#eaecf0), which is close to white and would draw a bright grid on a dark page,
   so every border is restated here rather than themed through a variable. */
.dark-theme .clp-article table { border-color: rgba(255,255,255,.11); }
.dark-theme .clp-article table th,
.dark-theme .clp-article table td { border-bottom-color: rgba(255,255,255,.08); }
.dark-theme .clp-article table thead th {
    background: #23252c;
    color: #f3f4f6;
    border-bottom-color: rgba(255,255,255,.16);
}
.dark-theme .clp-article table tbody th { color: #f3f4f6; }
.dark-theme .clp-article table tbody tr:nth-child(even) > td,
.dark-theme .clp-article table tbody tr:nth-child(even) > th { background: rgba(255,255,255,.025); }

.dark-theme .clp-article blockquote {
    background: #22242b;
    border-color: rgba(255,255,255,.08);
    border-left-color: #7ea0f0;
}
.dark-theme .clp-article blockquote strong:first-child { color: #9ec5ff; }

/* =========================================================
   Page Builder — public rendering of admin-built pages.
   ========================================================= */
.pb-page .pb-block { padding-top: 26px; padding-bottom: 26px; }
.pb-page--full .pb-block:first-child { padding-top: 0; }
.pb-block .pb-inner { width: 100%; }
.pb-block--spacer, .pb-block--divider { padding-top: 0; padding-bottom: 0; }
.pb-block--hero { padding-top: 8px; padding-bottom: 8px; }
.pb-hero-layout { display: grid; gap: 32px; align-items: center; }
.pb-hero-layout--media { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); }
.pb-hero-media img, .pb-hero-media video { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 14px; }
.pb-responsive-video { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; border-radius: 14px; background: #000; }
.pb-responsive-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pb-heading { line-height: 1.25; }
.pb-text { font-size: 16.5px; line-height: 1.85; }
.pb-cards .card-item, .pb-testimonials .card-item { transition: transform .2s ease, box-shadow .2s ease; }
.pb-cards .card-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.pb-partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.pb-partner-item { min-height: 138px; padding: 20px; border: 1px solid #e5eaf2; border-radius: 12px; background: #fff; display: grid; align-content: center; text-align: center; }
.pb-partner-link { display: grid; align-content: center; gap: 12px; color: inherit; text-decoration: none; }
.pb-partner-link:hover, .pb-partner-link:focus-visible { color: #245fc5; text-decoration: none; }
.pb-partner-item img { display: block; width: 100%; height: 76px; object-fit: contain; }
.pb-partner-name { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; }
.pb-faq .card-header h5 { display: flex; justify-content: space-between; align-items: center; }
.pb-faq .card-header::after { content: '\f107'; }
@media (max-width: 767px) {
    .pb-hide-mobile { display: none !important; }
    .pb-page .pb-block { padding-top: 18px; padding-bottom: 18px; }
    .pb-hero-layout--media { grid-template-columns: 1fr; }
    .pb-hero-media { order: -1; }
    .pb-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pb-partner-item { min-height: 120px; padding: 14px; }
}

/* Dark-mode parity for builder blocks */
.dark-theme .pb-cards .card-item,
.dark-theme .pb-testimonials .card-item,
.dark-theme .pb-partner-item,
.dark-theme .pb-faq .card,
.dark-theme .pb-faq .card-header { background: #23232a !important; border-color: rgba(255,255,255,.08) !important; color: #e9eaee; }
.dark-theme .pb-quote { background: rgba(255,255,255,.04) !important; }

/* =========================================================
   Global mobile / tablet polish (activated by the viewport
   meta tag now present on every layout).
   ========================================================= */

/* Tablet */
@media (max-width: 991px) {
    .section--padding { padding: 56px 0; }
    .clp-shell { padding-top: 40px; padding-bottom: 40px; }
    .clp-university-band { padding: 32px; border-radius: 20px; }
    .clp-hero-panel { margin-top: 24px; }
    /* keep wide tables usable */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Phones */
@media (max-width: 767px) {
    .section--padding { padding: 40px 0; }
    .clp-hero-copy { font-size: 16px; }
    .clp-metric { padding: 18px; }
    .clp-metric strong { font-size: 28px; }
    .clp-university-band { padding: 24px; border-radius: 16px; }
    .clp-eyebrow { font-size: 12px; }
    .breadcrumb-area .section__title { font-size: 26px; }
    /* primary actions go full-width so they're easy to tap */
    .clp-hero-search .theme-btn,
    .course-details-wrapper .theme-btn { width: 100%; }
    /* Any raw table inside content scrolls instead of overflowing. The
       Digital Literacy lessons are table-heavy, and on a 375px phone a 930px
       table gave no sign it could be panned — the shadow gradients below only
       show while there is more table off-screen, which is that missing cue.
       (background-attachment: local pins the white fades to the content and
       scroll pins the shadows to the viewport, so they cancel at the ends.)

       white-space was nowrap here, which forced every cell onto one line: the
       widest lesson table came out 2,615px inside a 339px column, i.e. nearly
       eight screens of sideways panning. Cells now wrap, and a per-cell
       min-width does the job nowrap was really there for — it stops a column
       collapsing to one word per line. The width a table needs is then
       proportional to how many columns it has: a two-column table fits the
       screen outright, and only the genuinely wide ones pan, by about a
       screen instead of eight. */
    .clp-article table, .pb-inner table, .course-overview-card table {
        display: block;
        overflow-x: auto;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
        background-image:
            linear-gradient(to right, #fff 32%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), #fff 68%),
            radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0));
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .dark-theme .clp-article table,
    .dark-theme .pb-inner table,
    .dark-theme .course-overview-card table {
        background-image:
            linear-gradient(to right, #161618 32%, rgba(22, 22, 24, 0)),
            linear-gradient(to right, rgba(22, 22, 24, 0), #161618 68%),
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    }

    /* Keeps columns legible now that cells wrap, and buys back a little density
       on a narrow screen. A long unbreakable token in a cell (a path, a model
       number) breaks rather than widening the whole table. */
    .clp-article table th,
    .clp-article table td {
        min-width: 108px;
        padding: 9px 11px;
        overflow-wrap: anywhere;
    }
    .clp-article table { font-size: 14.5px; }
    /* comfortable tap targets */
    .main-menu ul li a, .generic-list-item li a { min-height: 40px; }
    h1, .clp-hero-title { line-height: 1.05; }
    .clp-university-band h2, .section__title { font-size: 24px; }
}

/* Small phones */
@media (max-width: 480px) {
    .section--padding { padding: 32px 0; }
    .clp-price { font-size: 18px; }
    .clp-course-thumb { height: 170px; }
    .btn, .theme-btn { font-size: 14px; }
}

/* "Up next" guided next-lesson button in the player footer */
.clp-next-btn { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.clp-next-btn .clp-next-label { display: flex; flex-direction: column; line-height: 1.15; }
.clp-next-btn .clp-next-label small { font-size: 11px; opacity: .8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.clp-next-btn .clp-next-label span { font-weight: 800; }
@media (max-width: 640px) {
    .clp-next-btn .clp-next-label span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Quiz answer review (show/hide correct answers) */
.clp-quiz-review { margin: 6px 0 14px; border: 1px solid var(--clp-border); border-radius: 12px; padding: 6px 14px; background: #fff; }
.clp-quiz-review summary { cursor: pointer; font-weight: 700; color: var(--clp-primary); padding: 6px 0; }
.clp-review-q { padding: 10px 0; border-top: 1px solid var(--clp-border); }
.clp-review-q:first-of-type { border-top: 0; }
.clp-review-qtext { font-weight: 700; }
.clp-review-q.is-correct .clp-review-qtext i { color: #1ba84c; }
.clp-review-q.is-wrong .clp-review-qtext i { color: #d14343; }
.clp-review-a { font-size: 14px; margin-top: 4px; }
.clp-review-correct { color: #1ba84c; font-weight: 600; }
.dark-theme .clp-quiz-review { background: #1f1f24; border-color: rgba(255,255,255,.08); }

/* ============================================================
   E5 — Quiz palette, flag-for-review, pre-submit review screen
   ============================================================ */
.clp-quiz-layout { display: flex; align-items: flex-start; gap: 22px; }
.clp-quiz-form-wrap { flex: 1; min-width: 0; }

/* --- Question navigator (palette) --- */
.clp-quiz-nav {
    position: sticky; top: 90px; flex: 0 0 210px; width: 210px;
    border: 1px solid var(--clp-border); border-radius: 14px; padding: 14px; background: #fff;
}
.clp-quiz-nav-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.clp-quiz-nav-head strong { font-size: 14px; }
.clp-quiz-nav-count { font-size: 12.5px; font-weight: 800; color: var(--clp-primary); font-variant-numeric: tabular-nums; }
.clp-quiz-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 7px; margin-bottom: 14px; }
.clp-pal-btn {
    -webkit-appearance: none; appearance: none;
    aspect-ratio: 1 / 1; min-height: 38px; border-radius: 9px; border: 1.5px solid var(--clp-border);
    background: #fff; color: #566173; font-weight: 800; font-size: 13.5px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.clp-pal-btn:hover { transform: translateY(-1px); border-color: var(--clp-primary); }
.clp-pal-btn.is-answered { background: #e9f7ee; border-color: #a9dcbc; color: #157a3a; }
.clp-pal-btn.is-flagged { background: #fef4e2; border-color: #f0c674; color: #7a5b00; position: relative; }
.clp-pal-btn.is-flagged::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #e08a00; }
/* is-unanswered keeps the base .clp-pal-btn background (light #fff / dark #26262e) */
.clp-pal-btn:focus-visible { outline: none; box-shadow: var(--sh-focus, 0 0 0 3px rgba(22,48,122,.28)); }
.clp-quiz-legend-key { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.clp-quiz-legend-key li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #566173; }
.clp-quiz-legend-key .clp-key { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--clp-border); flex-shrink: 0; }
.clp-quiz-legend-key .clp-key.answered { background: #e9f7ee; border-color: #a9dcbc; }
.clp-quiz-legend-key .clp-key.flagged { background: #fef4e2; border-color: #f0c674; }
.clp-quiz-legend-key .clp-key.unanswered { background: #fff; }
.clp-quiz-review-open { width: 100%; justify-content: center; }

/* --- Legend: number badge + text + flag button --- */
.clp-question-legend { align-items: flex-start; gap: 10px; }
.clp-q-num {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: rgba(22,48,122,.1);
    color: var(--clp-primary); font-weight: 800; font-size: 13px; display: inline-flex;
    align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.clp-q-text { flex: 1; min-width: 0; }
.clp-flag-btn {
    -webkit-appearance: none; appearance: none;
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
    border: 1.5px solid var(--clp-border); background: #fff; color: #566173; font-weight: 700; font-size: 12.5px; cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.clp-flag-btn:hover { border-color: #f0c674; color: #7a5b00; }
.clp-flag-btn.is-on { background: #fef4e2; border-color: #f0c674; color: #7a5b00; }
.clp-flag-btn:focus-visible { outline: none; box-shadow: var(--sh-focus, 0 0 0 3px rgba(22,48,122,.28)); }
.clp-question.is-flagged { border-color: #f0c674; box-shadow: inset 3px 0 0 #e08a00; }
.clp-question.is-target { border-color: var(--clp-primary); box-shadow: 0 0 0 3px rgba(22,48,122,.18); }
.clp-quiz-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.clp-quiz-submit-hint { font-size: 12.5px; color: #6b7280; }

/* --- Pre-submit review dialog --- */
.clp-quiz-review-dialog {
    border: none; border-radius: 18px; padding: 22px; width: min(480px, 92vw); max-width: 92vw;
    box-shadow: 0 24px 60px rgba(16,24,40,.28); color: inherit;
}
.clp-quiz-review-dialog::backdrop { background: rgba(16,24,40,.5); backdrop-filter: blur(2px); }
.clp-qrd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.clp-qrd-close { border: none; background: transparent; font-size: 26px; line-height: 1; color: #98a2b3; cursor: pointer; padding: 0 4px; }
.clp-qrd-close:hover { color: #475467; }
.clp-qrd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.clp-qrd-stat { text-align: center; border: 1px solid var(--clp-border); border-radius: 12px; padding: 12px 6px; }
.clp-qrd-stat strong { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #157a3a; }
.clp-qrd-stat span { font-size: 12px; color: #6b7280; }
.clp-qrd-stat.is-unanswered strong { color: #b42318; }
.clp-qrd-stat.is-flagged strong { color: #7a5b00; }
.clp-qrd-section { margin-bottom: 16px; }
.clp-qrd-section-label { font-weight: 700; font-size: 13.5px; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.clp-qrd-section[data-review-unanswered-section] .clp-qrd-section-label { color: #b42318; }
.clp-qrd-section[data-review-flagged-section] .clp-qrd-section-label { color: #7a5b00; }
.clp-qrd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.clp-qrd-chip { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--clp-border); background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.clp-qrd-chip:hover { transform: translateY(-1px); }
.clp-qrd-chip.is-unanswered { background: #fdecec; border-color: #f3b4b0; color: #b42318; }
.clp-qrd-chip.is-flagged { background: #fef4e2; border-color: #f0c674; color: #7a5b00; }
.clp-qrd-allclear { display: flex; align-items: center; gap: 8px; color: #157a3a; font-weight: 700; font-size: 14px; margin: 0 0 16px; }
.clp-qrd-allclear i { font-size: 20px; }
.clp-qrd-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Dark theme --- */
.dark-theme .clp-quiz-nav { background: #1f1f24; border-color: rgba(255,255,255,.08); }
.dark-theme .clp-pal-btn { background: #26262e; border-color: rgba(255,255,255,.12); color: #cbd2dc; }
.dark-theme .clp-pal-btn.is-answered { background: #16301f; border-color: rgba(27,168,76,.4); color: #7ee2a3; }
.dark-theme .clp-pal-btn.is-flagged { background: #3a2f16; border-color: rgba(240,198,116,.4); color: #f4ce8a; }
.dark-theme .clp-quiz-legend-key li { color: #9aa4b2; }
.dark-theme .clp-quiz-legend-key .clp-key.unanswered { background: #26262e; border-color: rgba(255,255,255,.12); }
.dark-theme .clp-q-num { background: rgba(120,150,220,.2); color: #a9c0f0; }
.dark-theme .clp-quiz-submit-hint { color: #9aa4b2; }
.dark-theme .clp-flag-btn { background: #26262e; border-color: rgba(255,255,255,.12); color: #cbd2dc; }
.dark-theme .clp-flag-btn.is-on { background: #3a2f16; border-color: rgba(240,198,116,.4); color: #f4ce8a; }
.dark-theme .clp-quiz-review-dialog { background: #1f1f24; }
.dark-theme .clp-qrd-stat { border-color: rgba(255,255,255,.1); }
.dark-theme .clp-qrd-chip { background: #26262e; border-color: rgba(255,255,255,.12); color: #cbd2dc; }

/* --- Responsive: palette moves above the questions on narrow viewports --- */
@media (max-width: 767px) {
    .clp-quiz-layout { flex-direction: column; }
    .clp-quiz-nav { position: static; width: 100%; flex-basis: auto; order: -1; }
    .clp-quiz-palette { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .clp-pal-btn, .clp-qrd-chip, .clp-flag-btn { transition: none; }
}

/* ============================================================
   MOTION & FX — animated hero, scroll reveals, hover polish
   (added in the UI-upgrade pass; respects reduced-motion)
   ============================================================ */
.clp-hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* Calm, static enterprise backdrop: deep navy with one restrained brand-tinted
     corner glow — replaces the animated orbs/grid. */
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(27,168,76,.16), transparent 55%),
    radial-gradient(90% 120% at 0% 0%, rgba(47,87,192,.30), transparent 60%),
    linear-gradient(120deg, #10245a 0%, #0c1c46 46%, #0a1836 100%)}
.clp-hero-fx::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg, rgba(8,20,48,.35), rgba(8,20,48,.08) 55%, transparent 78%)}
/* Real background video (renders only when public/frontend/videos/hero.* exists) */
.clp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;animation:clpVideoFade 1.2s ease forwards}
@keyframes clpVideoFade{to{opacity:1}}
/* When a video is present: keep orbs as subtle accents, drop the grid,
   and strengthen the overlay so hero text stays readable over footage. */
.clp-hero-fx.has-video .clp-orb{opacity:.24;filter:blur(64px)}
.clp-hero-fx.has-video .clp-hero-grid{display:none}
.clp-hero-fx.has-video::after{
  background:linear-gradient(90deg, rgba(8,20,48,.82), rgba(8,20,48,.55) 55%, rgba(8,20,48,.32) 100%)}
.clp-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.42;will-change:transform}
.clp-orb-1{width:440px;height:440px;left:-90px;top:-70px;
  background:radial-gradient(circle at 30% 30%, rgba(27,168,76,.9), transparent 70%);animation:clpFloat1 17s ease-in-out infinite}
.clp-orb-2{width:380px;height:380px;right:4%;top:14%;
  background:radial-gradient(circle at 60% 40%, rgba(244,206,10,.75), transparent 70%);animation:clpFloat2 21s ease-in-out infinite}
.clp-orb-3{width:320px;height:320px;left:40%;bottom:-110px;
  background:radial-gradient(circle at 50% 50%, rgba(56,120,255,.7), transparent 70%);animation:clpFloat3 19s ease-in-out infinite}
.clp-hero-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 65% 45%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 65% 45%,#000 10%,transparent 72%);
  animation:clpGridDrift 26s linear infinite}
@keyframes clpFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(42px,32px)}}
@keyframes clpFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,28px) scale(1.08)}}
@keyframes clpFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-32px)}}
@keyframes clpGridDrift{from{background-position:0 0}to{background-position:46px 46px}}

/* Scroll reveal — JS adds .clp-reveal (hidden), then .is-visible on enter. */
.clp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.clp-reveal.is-visible{opacity:1;transform:none}

/* Hover micro-interactions. */
.card-item,.clp-course-card{transition:transform .28s ease, box-shadow .28s ease}
.card-item:hover,.clp-course-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(16,48,122,.16)}
.theme-btn,.btn.theme-btn{transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.theme-btn:hover,.btn.theme-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(22,48,122,.28)}
.clp-hero-panel{transition:transform .4s ease, box-shadow .4s ease}
.clp-hero-panel:hover{transform:translateY(-4px)}

/* Softer header count badges (hidden when zero via JS). */
.product-count.is-zero{display:none}

@media (prefers-reduced-motion: reduce){
  .clp-orb,.clp-hero-grid{animation:none}
  .clp-reveal{transition:none;opacity:1;transform:none}
  .card-item:hover,.clp-course-card:hover,.theme-btn:hover,.clp-hero-panel:hover{transform:none}
  .clp-hero-video{animation:none;opacity:1}
}

/* ============================================================
   COURSE DETAIL + CATALOG polish
   ============================================================ */
/* Sticky enroll/price sidebar on desktop so it follows while the
   long left column scrolls (modern LMS pattern). */
@media (min-width: 992px){
  .course-details-area .sidebar{ position: sticky; top: 90px; align-self: flex-start; }
}
/* Give the enroll card a lift + hover so it reads as the primary CTA. */
.course-details-area .sidebar .card-item{ box-shadow: 0 18px 44px rgba(16,48,122,.12); }
.preview-course-video img{ transition: transform .5s ease; }
.preview-course-video:hover img{ transform: scale(1.04); }

/* Wishlist heart on course cards */
.clp-course-card { position: relative; }
.clp-card-heart { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; padding:0; border:0;
    border-radius: 50%; background: rgba(255,255,255,.94); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; color: #e8607a; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.14);
    transition: transform .18s ease, background .18s ease; }
.clp-card-heart:hover { transform: scale(1.1); background: #fff; }
.clp-card-heart .la-heart { color: #e8607a; }
.dark-theme .clp-card-heart { background: rgba(35,35,42,.92); }
.wishlist-icon.icon-element-sm { width:44px; height:44px; line-height:44px; }

/* Catalog: results summary + active-filter chips. */
.clp-catalog-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:22px; color:#596579; font-size:15px; }
.clp-catalog-summary strong{ color:var(--clp-ink,#101828); }
.clp-filter-chip{ display:inline-flex; align-items:center; gap:8px; min-height:44px;
  background:#eef2fb; color:var(--clp-primary,#16307a); border-radius:999px;
  padding:0 14px; font-size:13px; font-weight:600; }
.clp-filter-chip a{ color:inherit; opacity:.7; text-decoration:none; line-height:1; min-width:44px; min-height:44px;
  margin-right:-14px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; }
.clp-filter-chip a:hover{ opacity:1; }
.dark-theme .clp-catalog-summary{ color:#a9b0bd; }
.dark-theme .clp-catalog-summary strong{ color:#eee; }
.dark-theme .clp-filter-chip{ background:#23232a; color:#dfe6f5; }

/* ============================================================
   LEARNING TOOLS (Phase 2): resources, notes & bookmarks
   ============================================================ */
.clp-tools-card{ background:#fff; border:1px solid var(--clp-border,#e6eaf2); border-radius:16px; padding:20px 22px; margin-top:22px; }
.clp-tools-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.clp-tools-title{ font-size:18px; font-weight:800; color:var(--clp-ink,#101828); margin:0 0 14px; }
.clp-tools-head .clp-tools-title{ margin:0; }
.clp-tools-title i{ color:var(--clp-primary,#16307a); margin-right:6px; }

/* Resource list */
.clp-resource-list{ list-style:none; margin:0; padding:0; }
.clp-resource-item{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-resource-item:last-child{ border-bottom:0; }
.clp-resource-icon{ width:42px; height:42px; flex-shrink:0; border-radius:11px; background:#eef2fb; color:var(--clp-primary,#16307a); display:inline-flex; align-items:center; justify-content:center; font-size:22px; }
.clp-resource-main{ flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.clp-resource-title{ font-weight:700; color:var(--clp-ink,#101828); }
.clp-resource-label{ align-self:flex-start; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; }
.clp-label-required{ background:#fdeaea; color:#c0392b; }
.clp-label-optional{ background:#eef2f7; color:#5b6679; }
.clp-label-practice{ background:#e4f2fb; color:#1170a8; }
.clp-resource-locked{ color:#9aa3b2; font-size:18px; }

/* Notes & bookmarks (in-lesson) */
.clp-note-form{ margin-bottom:14px; }
.clp-note-form textarea{ border-radius:10px; }
.clp-note-form-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.clp-ts-input{ max-width:220px; }
.clp-note-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--clp-border,#eef2f7); }
.clp-note-ts{ flex-shrink:0; font-size:12px; font-weight:800; color:var(--clp-primary,#16307a); background:#eef2fb; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.clp-note-body{ flex-grow:1; color:#33415c; font-size:14.5px; line-height:1.55; word-break:break-word; }
.clp-note-del, .clp-note-del-form button{ background:none; border:0; color:#c0392b; cursor:pointer; padding:2px 6px; font-size:16px; opacity:.6; }
.clp-note-del:hover{ opacity:1; }

/* Warn button variant (bookmarked state) */
.clp-btn-warn{ background:#fff7e6; color:#a9760f; border:1px solid #f4ce0a; }
.clp-btn-warn:hover{ background:#fdefcf; }

/* My Notes & Bookmarks dashboard page */
.clp-note-chip{ display:inline-flex; align-items:center; gap:6px; background:#eef2fb; border-radius:999px; padding:5px 10px 5px 12px; font-size:13px; font-weight:600; }
.clp-note-chip a{ color:var(--clp-primary,#16307a); text-decoration:none; }
.clp-note-chip button{ background:none; border:0; color:#8a94a6; cursor:pointer; line-height:1; padding:0; }
.clp-note-chip button:hover{ color:#c0392b; }
.clp-mynote{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-mynote:last-child{ border-bottom:0; }
.clp-mynote-lesson{ display:inline-block; font-weight:700; font-size:13px; color:var(--clp-primary,#16307a); margin-bottom:2px; }

/* Dark mode */
.dark-theme .clp-tools-card{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-resource-title, .dark-theme .clp-note-body{ color:#e5e7eb; }
.dark-theme .clp-resource-icon, .dark-theme .clp-note-ts, .dark-theme .clp-note-chip{ background:#2a2a33; }
.dark-theme .clp-resource-item, .dark-theme .clp-note-item, .dark-theme .clp-mynote{ border-color:rgba(255,255,255,.08); }

/* ============================================================
   NOTIFICATIONS BELL (Phase 3)
   ============================================================ */
.clp-bell{ position:relative; margin-right:4px; }
.clp-bell-btn{ position:relative; background:none; border:0; cursor:pointer; min-width:44px; min-height:44px; padding:8px; color:var(--clp-ink,#101828); font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.clp-bell-btn:hover{ color:var(--clp-primary,#16307a); }
.clp-bell-badge{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#e8607a; color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.clp-bell-menu{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:90vw; background:#fff; border:1px solid var(--clp-border,#e6eaf2); border-radius:14px; box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.14)); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:1003; overflow:hidden; }
.clp-bell.is-open .clp-bell-menu, .clp-bell:hover .clp-bell-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.clp-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-bell-head strong{ font-size:15px; }
.clp-bell-readall{ background:none; border:0; color:var(--clp-primary,#16307a); font-size:12px; font-weight:700; cursor:pointer; }
.clp-bell-list{ max-height:360px; overflow-y:auto; }
.clp-bell-item{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--clp-border,#f2f4f8); text-decoration:none; }
.clp-bell-item:hover{ background:#f7f9fc; }
.clp-bell-item.is-unread{ background:#f3f8ff; }
.clp-bell-dot{ width:8px; height:8px; border-radius:50%; background:transparent; flex-shrink:0; margin-top:6px; }
.clp-bell-item.is-unread .clp-bell-dot{ background:#1ba84c; }
.clp-bell-item-body{ display:flex; flex-direction:column; min-width:0; }
.clp-bell-title{ font-weight:700; color:var(--clp-ink,#101828); font-size:14px; }
.clp-bell-msg{ color:var(--clp-muted,#667085); font-size:13px; line-height:1.4; }
.clp-bell-time{ color:#9aa3b2; font-size:12px; margin-top:2px; }
.clp-bell-empty{ padding:26px 16px; text-align:center; color:var(--clp-muted,#667085); font-size:14px; }
.clp-bell-empty i{ color:#1ba84c; margin-right:4px; }
.clp-bell-all{ display:block; text-align:center; padding:12px; font-weight:700; font-size:13px; color:var(--clp-primary,#16307a); border-top:1px solid var(--clp-border,#eef2f7); text-decoration:none; }
.clp-bell-all:hover{ background:#f7f9fc; }
.dark-theme .clp-bell-btn{ color:#e5e7eb; }
.dark-theme .clp-bell-menu{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-bell-item{ border-color:rgba(255,255,255,.06); }
.dark-theme .clp-bell-item:hover{ background:#26262e; }
.dark-theme .clp-bell-item.is-unread{ background:#1a2740; }
.dark-theme .clp-bell-title{ color:#e5e7eb; }

/* Account security page (Phase 3) */
.clp-pw-meter{ height:6px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.clp-pw-meter span{ display:block; height:100%; width:0; border-radius:999px; transition:width .2s ease, background .2s ease; }
.clp-session-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-session-row:last-child{ border-bottom:0; }
.clp-session-row > i{ font-size:22px; color:var(--clp-primary,#16307a); flex-shrink:0; }
.dark-theme .clp-pw-meter{ background:#2a2a33; }
.dark-theme .clp-session-row{ border-color:rgba(255,255,255,.08); }
.clp-recovery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.clp-recovery-code{ display:block; text-align:center; padding:8px 6px; border-radius:8px; background:rgba(0,0,0,.05); font-size:15px; font-weight:700; letter-spacing:.06em; color:#101828; }
.dark-theme .clp-recovery-code{ background:rgba(255,255,255,.08); color:#f3f4f6; }

/* ---- Two-factor method chooser + authenticator (TOTP) setup ---- */
.clp-2fa-methods{ display:flex; flex-direction:column; gap:12px; }
.clp-2fa-method{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid rgba(15,34,87,.12); border-radius:12px; background:#fff; flex-wrap:wrap; }
/* The row holds an icon, a description and a password form. Without wrapping,
   the form was pushed clean outside the card on a 320px screen — body's
   overflow-x:hidden then cut it off, so the control could not be used at all. */
.clp-2fa-method > .flex-grow-1{ min-width:0; }
.clp-2fa-method form{ flex:1 1 100%; }
@media (min-width:480px){ .clp-2fa-method form{ flex:0 0 auto; } }
.clp-2fa-method.is-active{ border-color:rgba(27,168,76,.5); background:rgba(27,168,76,.06); }
.clp-2fa-method-icon{ flex:0 0 42px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(15,34,87,.08); color:#16307a; font-size:20px; }
.clp-2fa-method.is-active .clp-2fa-method-icon{ background:rgba(27,168,76,.15); color:#1ba84c; }
.dark-theme .clp-2fa-method{ background:#23232a; border-color:rgba(255,255,255,.1); }
.dark-theme .clp-2fa-method.is-active{ background:rgba(27,168,76,.12); border-color:rgba(27,168,76,.45); }
.dark-theme .clp-2fa-method-icon{ background:rgba(255,255,255,.08); color:#c7d2fe; }

.clp-totp-setup{ border:1px dashed rgba(15,34,87,.25); border-radius:12px; padding:18px; background:rgba(15,34,87,.03); }
.dark-theme .clp-totp-setup{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.clp-totp-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.clp-totp-qr{ flex:0 0 auto; width:200px; height:200px; background:#fff; border-radius:10px; padding:8px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.clp-totp-qr svg{ display:block; width:100%; height:100%; }
.clp-totp-manual{ flex:1 1 180px; min-width:180px; }
.clp-totp-key{ display:inline-block; padding:8px 12px; border-radius:8px; background:rgba(0,0,0,.06); font-size:15px; font-weight:700; letter-spacing:.12em; color:#101828; word-break:break-all; }
.dark-theme .clp-totp-key{ background:rgba(255,255,255,.09); color:#f3f4f6; }

/* =========================================================
   PHASE 6 — Site-wide UX: search autocomplete, compare,
   learning paths, help center, certificate verify.
   ========================================================= */

/* ---- Global search autocomplete ---- */
.clp-nav-search{ position:relative; }
.clp-search-suggest{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:1200;
    background:#fff; border:1px solid var(--clp-border,#eaecf0); border-radius:14px;
    box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.14)); padding:6px;
    max-height:70vh; overflow-y:auto;
}
.clp-suggest-group{
    font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
    color:var(--clp-muted,#667085); padding:8px 10px 4px;
}
.clp-suggest-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
    color:var(--clp-ink,#101828); text-decoration:none;
}
.clp-suggest-item:hover{ background:var(--clp-soft,#f5f7fb); color:var(--clp-primary,#16307a); }
.clp-suggest-item img{ width:44px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.clp-suggest-item > i{ width:44px; text-align:center; font-size:20px; color:var(--clp-primary,#16307a); }
.clp-suggest-slim{ padding-top:6px; padding-bottom:6px; }
.clp-suggest-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.clp-suggest-text strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clp-suggest-text small{ color:var(--clp-muted,#667085); font-size:12px; }
.clp-suggest-empty{ padding:14px 12px; color:var(--clp-muted,#667085); font-size:13px; }
.dark-theme .clp-search-suggest{ background:#1f1f24; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-suggest-item{ color:#e9eaee; }
.dark-theme .clp-suggest-item:hover{ background:#2a2a31; color:#fff; }

/* ---- Compare button on cards ---- */
.clp-compare-add-link{
    display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
    color:var(--clp-muted,#667085); font-size:13px; font-weight:600; cursor:pointer; padding:2px 0;
}
.clp-compare-add-link:hover{ color:var(--clp-primary,#16307a); }
.clp-compare-add.is-added{ color:var(--clp-primary,#16307a); }
.clp-compare-add.is-added .la-exchange::before{ content:"\f00c"; }
.dark-theme .clp-compare-add-link{ color:#a8b0bd; }
.dark-theme .clp-compare-add-link:hover, .dark-theme .clp-compare-add.is-added{ color:#9ee2b4; }

/* ---- Compare tray (fixed bottom bar) ---- */
.clp-compare-tray{
    position:fixed; left:0; right:0; bottom:0; z-index:1300;
    background:var(--clp-primary-dark,#0f2257); color:#fff;
    box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
.clp-compare-tray-inner{
    max-width:1200px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.clp-compare-tray-items{ display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.clp-compare-chip{
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
    border-radius:999px; padding:6px 8px 6px 14px; font-size:13px; max-width:230px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.clp-compare-chip button{
    background:rgba(255,255,255,.2); border:0; color:#fff; width:20px; height:20px;
    border-radius:50%; line-height:1; cursor:pointer; flex-shrink:0;
}
.clp-compare-tray-actions{ display:flex; align-items:center; gap:10px; }
.clp-compare-tray-clear{ background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; }
.clp-compare-tray-clear:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ---- Compare table page ---- */
.clp-compare-wrap{ overflow-x:auto; border:1px solid var(--clp-border,#eaecf0); border-radius:16px; }
.clp-compare-table{ width:100%; min-width:640px; border-collapse:collapse; background:#fff; }
.clp-compare-table th, .clp-compare-table td{
    padding:16px; text-align:center; border-bottom:1px solid var(--clp-border,#eaecf0);
    vertical-align:middle; font-size:14px;
}
.clp-compare-table thead th{ background:var(--clp-soft,#f8f9fb); position:relative; min-width:180px; }
.clp-compare-rowlabel{ text-align:left !important; font-weight:700; color:var(--clp-ink,#101828); background:var(--clp-soft,#f8f9fb); white-space:nowrap; }
.clp-compare-thumb{ display:block; margin-bottom:8px; }
.clp-compare-thumb img{ width:100%; max-width:180px; height:96px; object-fit:cover; border-radius:10px; }
.clp-compare-name{ display:block; font-weight:700; color:var(--clp-ink,#101828); text-decoration:none; }
.clp-compare-name:hover{ color:var(--clp-primary,#16307a); }
.clp-compare-remove{
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
    background:#fff; border:1px solid var(--clp-border,#eaecf0); color:#98a2b3; cursor:pointer;
}
.clp-compare-remove:hover{ color:#e5484d; border-color:#e5484d; }
.clp-compare-price-row .clp-price{ font-size:20px; }
.dark-theme .clp-compare-wrap{ border-color:rgba(255,255,255,.10); }
.dark-theme .clp-compare-table{ background:#1f1f24; }
.dark-theme .clp-compare-table th, .dark-theme .clp-compare-table td{ border-color:rgba(255,255,255,.08); }
.dark-theme .clp-compare-table thead th,
.dark-theme .clp-compare-rowlabel{ background:#26262d; color:#f3f4f6; }
.dark-theme .clp-compare-remove{ background:#2a2a31; border-color:rgba(255,255,255,.12); }

/* ---- Learning paths ---- */
.clp-path-card{
    background:#fff; border:1px solid var(--clp-border,#eaecf0); border-radius:18px;
    box-shadow:var(--clp-shadow-sm,0 10px 30px rgba(16,24,40,.08)); padding:24px;
}
.clp-path-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.clp-path-index{
    width:44px; height:44px; border-radius:12px; flex-shrink:0; margin-right:14px;
    display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
    background:linear-gradient(135deg,var(--clp-primary,#16307a),#0f2257); color:#fff;
}
.clp-path-title{ font-size:22px; font-weight:800; color:var(--clp-ink,#101828); }
.clp-path-progress{ margin:12px 0 4px; }
.clp-path-track{ height:8px; border-radius:999px; background:var(--clp-soft,#eef2f7); overflow:hidden; }
.clp-path-track span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#1ba84c,#16307a); }
.clp-path-steps{ list-style:none; margin:18px 0 0; padding:0; position:relative; }
.clp-path-steps::before{ content:""; position:absolute; left:19px; top:20px; bottom:20px; width:2px; background:var(--clp-border,#eaecf0); }
.clp-path-step{ display:flex; align-items:center; gap:14px; padding:12px 0; position:relative; }
.clp-step-node{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; z-index:1;
    display:inline-flex; align-items:center; justify-content:center; font-weight:700;
    background:#fff; border:2px solid var(--clp-border,#eaecf0); color:var(--clp-muted,#667085);
}
.clp-path-step.is-enrolled .clp-step-node{ background:var(--clp-primary,#16307a); border-color:var(--clp-primary,#16307a); color:#fff; }
.clp-step-thumb{ flex-shrink:0; }
.clp-step-thumb img{ width:96px; height:60px; border-radius:10px; object-fit:cover; }
.clp-step-body{ flex:1; min-width:0; }
.clp-step-body h3{ font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.clp-step-body h3 a{ color:var(--clp-ink,#101828); text-decoration:none; }
.clp-step-body h3 a:hover{ color:var(--clp-primary,#16307a); }
.clp-step-action{ flex-shrink:0; text-align:right; }
.clp-step-mini-track{ height:5px; width:160px; max-width:100%; border-radius:999px; background:var(--clp-soft,#eef2f7); overflow:hidden; }
.clp-step-mini-track span{ display:block; height:100%; background:#1ba84c; }
.clp-badge-soft{ background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a); }
@media (max-width:575px){
    .clp-path-card{ padding:18px; }
    .clp-path-step{
        display:grid;
        grid-template-columns:40px minmax(0,1fr);
        align-items:start;
        column-gap:14px;
        row-gap:10px;
    }
    .clp-step-node{ grid-column:1; grid-row:1; }
    .clp-step-thumb{ grid-column:2; grid-row:1; width:100%; }
    .clp-step-thumb img{ width:100%; height:auto; aspect-ratio:16/9; max-height:140px; }
    .clp-step-body{ grid-column:2; grid-row:2; }
    .clp-step-action{ grid-column:2; grid-row:3; width:auto; text-align:left; padding-left:0; }
    .clp-path-steps::before{ display:none; }
}
.dark-theme .clp-path-card{ background:#1f1f24; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-path-track, .dark-theme .clp-step-mini-track{ background:#2a2a33; }
.dark-theme .clp-step-node{ background:#26262d; border-color:rgba(255,255,255,.14); color:#a8b0bd; }
.dark-theme .clp-path-steps::before{ background:rgba(255,255,255,.10); }
.dark-theme .clp-step-body h3 a{ color:#f3f4f6; }
.dark-theme .clp-badge-soft{ background:rgba(27, 168, 76,.20); color:#9ee2b4; }

/* ---- Help center ---- */
.clp-help-search{ position:relative; max-width:520px; }
.clp-help-search .form-control{ height:54px; border-radius:999px; padding-left:48px; border:1px solid var(--clp-border,#eaecf0); }
.clp-help-search > i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--clp-muted,#667085); }
.clp-help-icon{
    width:48px; height:48px; border-radius:12px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; font-size:24px;
    background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a);
}
.clp-faq-item{ border-top:1px solid var(--clp-border,#eaecf0); }
.clp-faq-item:first-child{ border-top:0; }
.clp-faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:transparent; border:0; padding:14px 0; text-align:left; cursor:pointer;
    font-weight:600; color:var(--clp-ink,#101828); font-size:15px;
}
.clp-faq-q > i{ transition:transform .2s ease; color:var(--clp-muted,#667085); flex-shrink:0; }
.clp-faq-item.is-open .clp-faq-q > i{ transform:rotate(180deg); }
.clp-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.clp-faq-item.is-open .clp-faq-a{ max-height:400px; }
.clp-faq-a p{ padding:0 0 14px; color:var(--clp-muted,#667085); line-height:1.6; }
.clp-help-contact{ background:linear-gradient(135deg,rgba(22,48,122,.05),rgba(27,168,76,.05)); }
.dark-theme .clp-help-icon{ background:rgba(27, 168, 76,.18); color:#9ee2b4; }
.dark-theme .clp-faq-item{ border-color:rgba(255,255,255,.08); }
.dark-theme .clp-faq-q{ color:#f3f4f6; }
.dark-theme .clp-help-contact{ background:#26262d; }

/* ---- Star ratings ---- */
.clp-stars{ display:inline-flex; align-items:center; gap:1px; color:#f4a723; font-size:15px; }
.clp-stars-sm{ font-size:13px; }
.clp-stars .la-star-o{ color:#d0d5dd; }
.clp-stars-meta{ margin-left:6px; color:var(--clp-muted,#667085); font-size:12px; font-weight:600; }
.dark-theme .clp-stars .la-star-o{ color:#4a4a55; }
.dark-theme .clp-stars-meta{ color:#a8b0bd; }

/* ---- Checkout copy-to-clipboard button ---- */
.clp-copy-btn{ background:var(--clp-soft,#f1f5fb); border:1px solid var(--clp-border,#e6eaf2); color:var(--clp-primary,#16307a); width:30px; height:30px; border-radius:8px; cursor:pointer; line-height:1; flex-shrink:0; }
.clp-copy-btn:hover{ background:#e4ecfb; }
.dark-theme .clp-copy-btn{ background:#26262d; border-color:rgba(255,255,255,.12); color:#9ee2b4; }

/* ---- Certificate verify form ---- */
.clp-verify-form{ display:flex; gap:10px; flex-wrap:wrap; }
.clp-verify-form .form-control{ flex:1; min-width:200px; height:50px; border-radius:10px; text-align:center; letter-spacing:.04em; font-weight:600; }
.clp-verify-form .btn{ height:50px; }
.clp-recovery-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
.clp-recovery-actions .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.clp-offcanvas-search .form-control{ height:46px; border-radius:10px; }

@media (max-width:575px){
    .clp-verify-form .form-control,
    .clp-verify-form .btn,
    .clp-recovery-actions .btn{ width:100%; }
}


/* =========================================================
   APPEARANCE POLISH (2026-07): course-card chips, hero CTA
   hierarchy + trust line, calmer hero orbs.
   ========================================================= */
.clp-course-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.clp-chip{
    display:inline-flex; align-items:center; font-size:11.5px; font-weight:650;
    padding:4px 9px; border-radius:999px; white-space:nowrap;
    background:var(--clp-soft,#f1f5fb); color:var(--clp-primary,#16307a);
    border:1px solid var(--clp-border,#eaecf0);
}
.clp-chip-accent{ background:rgba(27,168,76,.10); color:#127a37; border-color:rgba(27,168,76,.25); }
/* Standardized difficulty badges */
.clp-chip.lvl-beginner{ background:rgba(27,168,76,.10); color:#127a37; border-color:rgba(27,168,76,.28); }
.clp-chip.lvl-intermediate{ background:rgba(244,206,10,.16); color:#8a6d00; border-color:rgba(244,206,10,.4); }
.clp-chip.lvl-advanced{ background:rgba(214,69,69,.10); color:#b23b3b; border-color:rgba(214,69,69,.28); }
.dark-theme .clp-chip.lvl-intermediate{ color:#f4ce0a; }
.dark-theme .clp-chip.lvl-advanced{ color:#ff9b9b; }
.dark-theme .clp-chip{ background:#26262d; color:#cdd6ea; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-chip-accent{ background:rgba(27,168,76,.18); color:#9ee2b4; border-color:rgba(27,168,76,.30); }

/* Hero: dominant primary CTA, quieter secondary, trust line. */
.btn.theme-btn-lg{
    padding:14px 34px; font-size:16px; font-weight:700; border-radius:12px;
    box-shadow:0 12px 26px rgba(22,48,122,.28);
}
.btn.theme-btn-lg:hover{ box-shadow:0 16px 32px rgba(22,48,122,.34); }
.btn.theme-btn-quiet{ box-shadow:none !important; font-weight:600; }
/* Sits directly on the navy hero: theme-invariant light text (the muted/primary
   tokens computed 2.9:1 and 1.2:1 here — the shield icon was invisible). */
.clp-hero-trust{ font-size:14px; font-weight:600; color:rgba(255,255,255,.9); }
.clp-hero-trust .la{ color:var(--clp-accent-gold,#f4ce0a); }
.dark-theme .clp-hero-trust{ color:rgba(255,255,255,.9); }

/* Calm the hero decoration so it never competes with the headline. */
.clp-shell .clp-hero-fx .clp-orb{ opacity:.24; }
.clp-shell .clp-hero-fx .clp-hero-grid{ opacity:.5; }

/* =========================================================
   Hero product mockup — an app-window preview of the learner
   experience (course player + progress + certificate).
   ========================================================= */
.clp-hero-mock{
    position:relative;
    background:#ffffff;
    /* Reset the hero shell's white text — this card is white, so unstyled
       descendants (e.g. the "Course progress" label) must default to ink,
       not inherit #fff and vanish (WCAG 1.4.3, found in the P10 audit). */
    color:var(--clp-ink, #101828);
    border:1px solid rgba(15,34,87,.10);
    border-radius:18px;
    box-shadow:0 30px 70px rgba(15,34,87,.28);
    overflow:visible;
    transition:transform .4s ease, box-shadow .4s ease;
}
.clp-hero-mock:hover{ transform:translateY(-4px); box-shadow:0 38px 82px rgba(15,34,87,.34); }
.clp-mock-bar{
    display:flex; align-items:center; gap:7px;
    padding:12px 16px; border-bottom:1px solid rgba(15,34,87,.08);
    background:linear-gradient(180deg,#f7f9fc,#eef2f8); border-radius:18px 18px 0 0;
}
.clp-mock-dot{ width:11px; height:11px; border-radius:50%; background:#d5dbe6; }
.clp-mock-dot:nth-child(1){ background:#f4655a; }
.clp-mock-dot:nth-child(2){ background:#f5bd4f; }
.clp-mock-dot:nth-child(3){ background:#5bc46b; }
.clp-mock-url{ margin-left:10px; font-size:12px; color:#7a869a; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clp-mock-url .la{ font-size:12px; margin-right:2px; }
.clp-mock-body{ padding:18px; }

.clp-mock-now{
    display:flex; align-items:center; gap:12px;
    padding:12px; border-radius:12px; margin-bottom:14px; color:#fff;
    background:linear-gradient(135deg,var(--clp-primary,#16307a),var(--clp-primary-dark,#0f2257));
}
.clp-mock-play{ flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:18px; }
.clp-mock-now strong{ font-size:15px; line-height:1.2; }
.clp-mock-sub{ font-size:12px; color:rgba(255,255,255,.78); }
.clp-mock-live{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 7px; border-radius:6px; background:var(--clp-accent,#f4ce0a); color:#0f2257; }

.clp-mock-lessons{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.clp-mock-lesson{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#5a6577; padding:8px 10px; border-radius:9px; background:#f6f8fb; }
.clp-mock-lesson .la{ font-size:17px; }
.clp-mock-lesson.done{ color:var(--clp-success-text,#157a3a); /* AA on the card's soft bg (was 3.2:1) */ }
.clp-mock-lesson.done .la{ color:var(--clp-success-text,#157a3a); }
.clp-mock-lesson.active{ color:#16307a; background:rgba(22,48,122,.09); }
.clp-mock-lesson.active .la{ color:var(--clp-primary,#16307a); }

.clp-mock-progress{ margin-bottom:16px; }
.clp-mock-metrics{ margin:0; }

.clp-mock-cert{
    position:absolute; right:-14px; bottom:-18px;
    display:flex; align-items:center; gap:10px;
    padding:12px 16px 12px 12px; border-radius:14px;
    background:#fff; box-shadow:0 18px 38px rgba(15,34,87,.22); border:1px solid rgba(15,34,87,.08);
}
.clp-mock-cert-ribbon{ flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--clp-success,#1ba84c),#128a3d); }
.clp-mock-cert strong{ font-size:13px; color:#101828; }
.clp-mock-cert span{ font-size:12px; color:#667085; }

/* Dark mode */
.dark-theme .clp-hero-mock{ background:#1c1c22; border-color:rgba(255,255,255,.08); box-shadow:0 30px 70px rgba(0,0,0,.5); }
/* The active-lesson row keeps brand navy in light mode; on the dusk card that
   navy is 1.4:1 — use the dark-theme accent blue instead. */
.dark-theme .clp-mock-lesson.active{ color:#8ab4ec; background:rgba(122,150,232,.14); }
.dark-theme .clp-mock-lesson.active .la{ color:#8ab4ec; }
.dark-theme .clp-mock-bar{ background:linear-gradient(180deg,#24242c,#1c1c22); border-bottom-color:rgba(255,255,255,.06); }
.dark-theme .clp-mock-lesson{ background:rgba(255,255,255,.05); color:#aeb6c4; }
.dark-theme .clp-mock-lesson.active{ background:rgba(120,150,255,.14); color:#dbe3ff; }
.dark-theme .clp-mock-cert{ background:#23232a; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-mock-cert strong{ color:#f3f4f6; }
.dark-theme .clp-mock-cert span{ color:#a8b0bd; }

@media (max-width:575px){
    .clp-mock-cert{ position:static; margin:16px auto 0; right:auto; bottom:auto; width:max-content; }
    .clp-hero-mock{ overflow:hidden; }
}

/* =========================================================
   Homepage "Who it's for" audience cards
   ========================================================= */
.clp-section-title{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; color:var(--clp-ink,#101828); }
.dark-theme .clp-section-title{ color:#f3f4f6; }
.clp-audience-card{
    display:flex; flex-direction:column; align-items:flex-start;
    padding:28px; border:1px solid var(--clp-border,#eaecf0); border-radius:var(--clp-radius-lg,18px);
    background:var(--clp-surface,#fff); box-shadow:var(--clp-shadow-sm,0 10px 30px rgba(16,24,40,.08));
    transition:transform .25s ease, box-shadow .25s ease;
}
.clp-audience-card:hover{ transform:translateY(-4px); box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.10)); }
.clp-audience-icon{
    width:56px; height:56px; display:flex; align-items:center; justify-content:center;
    border-radius:14px; font-size:28px; margin-bottom:18px;
    background:rgba(22,48,122,.09); color:var(--clp-primary,#16307a);
}
.clp-audience-title{ font-size:20px; font-weight:700; margin-bottom:10px; color:var(--clp-ink,#101828); }
.clp-audience-text{ color:var(--clp-muted,#667085); font-size:15px; line-height:1.6; margin-bottom:16px; }
.clp-audience-link{ margin-top:auto; font-weight:700; color:var(--clp-primary,#16307a); }
.clp-audience-link .la{ transition:transform .2s ease; }
.clp-audience-link:hover .la{ transform:translateX(4px); }
.dark-theme .clp-audience-card{ background:#1c1c22; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-audience-title{ color:#f3f4f6; }
.dark-theme .clp-audience-text{ color:#a8b0bd; }
.dark-theme .clp-audience-icon{ background:rgba(120,150,255,.14); color:#c7d2fe; }

/* =========================================================
   Branded auth pages (login / register) — replaces the old
   stock breadcrumb banner with a compact CLP navy hero.
   ========================================================= */
.clp-auth-hero{
    background:linear-gradient(135deg, var(--clp-primary-dark,#0f2257), var(--clp-primary,#16307a));
    color:#fff; text-align:center; padding:38px 0 34px; position:relative;
}
.clp-auth-eyebrow{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
    letter-spacing:.04em; color:rgba(255,255,255,.9); background:rgba(255,255,255,.12);
    padding:6px 14px; border-radius:var(--clp-radius-pill,999px); margin-bottom:14px;
}
.clp-auth-eyebrow .la{ color:var(--clp-accent,#f4ce0a); }
.clp-auth-hero-title{ color:#fff; font-weight:800; letter-spacing:-.03em; font-size:clamp(28px,4vw,44px); margin:0 0 8px; }
.clp-auth-hero-sub{ color:rgba(255,255,255,.82); font-size:15px; margin:0; }
.clp-auth-body{ padding:30px 0 52px; margin-top:-22px; background:var(--clp-soft,#f8f9fb); }
.clp-auth-body .card-item{ max-width:480px; margin-left:auto; margin-right:auto; }

/* ===================== AUDIT POLISH (2026-07) ===================== */
/* Header "More" dropdown divider */
.clp-dropdown-menu .clp-dropdown-divider{ height:1px; margin:6px 14px; padding:0; background:rgba(15,23,42,.10); list-style:none; }
.dark-theme .clp-dropdown-menu .clp-dropdown-divider{ background:rgba(255,255,255,.14); }

/* Tighten the oversized white gaps between homepage sections (was 120px). */
.section-padding{ padding-top:84px; padding-bottom:84px; }
.section--padding{ padding-top:84px; padding-bottom:64px; }
@media (max-width:767px){
    .section-padding{ padding-top:52px; padding-bottom:52px; }
    .section--padding{ padding-top:52px; padding-bottom:44px; }
    /* Mobile hero: reclaim vertical space (page was ~10.9k px tall). */
    .clp-shell{ padding-top:30px !important; padding-bottom:30px !important; }
    .clp-hero-panel{ margin-top:20px; }
}

/* Stronger, consistent card hover. */
.card-item:hover,.clp-course-card:hover{ box-shadow:0 24px 52px rgba(16,48,122,.18); }

/* Homepage personalization strips (Continue learning + Recently viewed) */
.clp-personal-strip{ padding:44px 0 8px; }
.clp-strip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.clp-strip-title{ font-size:22px; font-weight:800; color:var(--clp-ink,#1f2a37); margin:0; display:flex; align-items:center; }
.clp-strip-title .la{ color:var(--clp-primary,#16307a); }
.clp-strip-link{ font-size:14px; font-weight:700; color:var(--clp-primary,#16307a); text-decoration:none; white-space:nowrap; }
.clp-strip-link:hover{ text-decoration:underline; }

.clp-continue-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.clp-continue-card{ display:flex; gap:14px; background:#fff; border:1px solid var(--clp-border,#e6e8ee); border-radius:14px; padding:12px; text-decoration:none; transition:.16s; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.clp-continue-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,48,122,.12); border-color:var(--clp-primary,#16307a); }
.clp-continue-thumb{ width:96px; height:64px; border-radius:9px; overflow:hidden; flex:0 0 auto; background:#eef1f8; }
.clp-continue-thumb img{ width:100%; height:100%; object-fit:cover; }
.clp-continue-body{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.clp-continue-name{ font-size:14.5px; font-weight:700; color:var(--clp-ink,#1f2a37); margin:0 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clp-continue-bar{ height:6px; border-radius:99px; background:#eaeef5; overflow:hidden; margin-bottom:6px; }
.clp-continue-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--clp-primary,#16307a),var(--clp-accent-2,#1ba84c)); }
.clp-continue-meta{ font-size:12.5px; color:var(--clp-muted,#6b7280); font-weight:600; }
.clp-continue-meta .la{ font-size:12px; }

.clp-recent-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.clp-recent-card{ display:block; background:#fff; border:1px solid var(--clp-border,#e6e8ee); border-radius:12px; overflow:hidden; text-decoration:none; transition:.16s; }
.clp-recent-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,48,122,.12); }
.clp-recent-thumb{ aspect-ratio:16/9; background:#eef1f8; overflow:hidden; }
.clp-recent-thumb img{ width:100%; height:100%; object-fit:cover; }
.clp-recent-body{ padding:10px 12px; }
.clp-recent-name{ font-size:13.5px; font-weight:700; color:var(--clp-ink,#1f2a37); margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clp-recent-cat{ font-size:11.5px; color:var(--clp-muted,#6b7280); }

.dark-theme .clp-continue-card,.dark-theme .clp-recent-card{ background:#182235; border-color:#26324a; }
.dark-theme .clp-strip-title,.dark-theme .clp-continue-name,.dark-theme .clp-recent-name{ color:#eef2f9; }
/* ================================================================= */
.clp-auth-body .card-item{ position:relative; z-index:2; box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.10)); }
.dark-theme .clp-auth-body{ background:#15151a; }
@media (max-width:575px){
    .clp-auth-hero{ padding:32px 0 30px; }
    .clp-auth-hero-title{ font-size:25px; }
    .clp-auth-hero-sub{ font-size:13.5px; }
    .clp-auth-body{ padding:24px 0 40px; margin-top:-20px; }
}

/* =========================================================
   VISUAL QA POLISH (2026-07): card title clamp, hero dot,
   mobile hero/logo sizing, hero text contrast.
   ========================================================= */

/* Course cards: clamp long titles/descriptions so all cards align cleanly. */
.clp-course-card .card-title{ margin-bottom:8px; }
.clp-course-card .card-title a{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.3; min-height:2.6em;
}
.clp-course-card .card-body > p.text-muted{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:12px;
}

/* Compact course cards — were ~700px tall (too bulky, too few per screen). */
.clp-course-thumb{ height:158px; }
.clp-course-card .card-body{ padding:14px 16px 16px; }
.clp-course-card .card-title{ margin-bottom:6px; }
.clp-course-card .card-title a{ line-height:1.25; min-height:2.5em; font-size:16px; }
.clp-course-card .clp-course-meta{ font-size:13px; margin-bottom:6px !important; }
.clp-course-card .clp-course-chips{ margin-bottom:10px !important; }
.clp-course-card .card-body > p.text-muted{ font-size:13.5px; margin-bottom:10px; line-height:1.45; }
/* the instructor/rating row */
.clp-course-card .card-body > .d-flex.align-items-center:first-child{ margin-bottom:8px !important; }

/* Reposition the decorative hero circle out of the centre (it read as a stray
   dot on the shorter catalog hero) — now a soft corner glow. */
.clp-shell:after{ left:-90px; right:auto; bottom:-90px; top:auto; width:220px; height:220px; }

/* Guarantee hero text contrast over the gradient on every screen size. */
.clp-hero-title{ text-shadow:0 2px 14px rgba(3,10,30,.28); }
.clp-shell .clp-hero-copy{ text-shadow:0 1px 8px rgba(3,10,30,.22); }

/* ---- Mobile (≤575px) ---- */
@media (max-width:575px){
    .clp-shell{ padding-top:30px !important; padding-bottom:30px !important; }
    .clp-hero-title{ font-size:34px !important; letter-spacing:-.04em; }
    .clp-hero-copy{ font-size:16px !important; }
    /* Stronger contrast on the catalog hero: damp the light radial spots. */
    .clp-shell{ background:
        radial-gradient(circle at 4% 8%, rgba(244,206,10,.14), transparent 26%),
        radial-gradient(circle at 92% 4%, rgba(27,168,76,.20), transparent 30%),
        linear-gradient(160deg, #0a1838 0%, #12266a 55%, #16307a 100%) !important; }
    /* Logo: fit "Communityline" without truncation. */
    .clp-logo-title{ font-size:15px !important; text-overflow:clip !important; }
    .clp-logo-img{ width:34px !important; height:34px !important; }
    .clp-hero-mock{ transform:none; }
}
@media (max-width:380px){
    .clp-header-container{ padding-left:10px; padding-right:10px; }
    .clp-logo-title{ font-size:13.5px !important; }
    .clp-hero-title{ font-size:30px !important; }
    .clp-nav-icons .clp-bell,
    .clp-nav-icons .clp-icon-link,
    .clp-nav-icons > *{ margin-left:0 !important; margin-right:0 !important; }
}

/* Mobile header: give the brand name room (was squeezing to ~31px). */
@media (max-width:575px){
    .clp-nav-left{ flex:1 1 auto !important; min-width:0 !important; }
    .clp-logo-title{ display:block; max-width:clamp(120px,40vw,220px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis !important; }
    .clp-nav-right{ flex:1 1 auto; justify-content:flex-end; }
    .clp-nav-icons{ gap:2px; }
    .clp-nav-icons .shop-cart-btn,
    .clp-nav-icons .clp-icon-link,
    .clp-nav-icons > *{ margin-left:2px !important; margin-right:2px !important; }
    .clp-nav-icons .fs-22{ font-size:19px !important; }
}
@media (max-width:414px){
    /* Phones (iPhone/Android widths 390–414): the icon row (worst case when
       signed in: bell + heart + cart + search + burger) no longer fits beside
       the wordmark and was painting over it — drop to the house icon only and
       tighten the icon row. */
    .clp-logo-text{ display:none !important; }
    .clp-logo{ width:44px; flex-basis:44px !important; }
    .clp-nav-icons .fs-22{ font-size:18px !important; }
    .clp-mobile-toggles .icon-element{ width:44px; height:44px; }
}

/* =====================================================================
   APP-WIDE PREMIUM PASS (2026-07)
   Shared primitives that lift every frontend + student-dashboard page:
   refined form controls, buttons, section rhythm, links, footer, cards.
   Scoped to the frontend/student stack (clp-modern is not loaded on the
   NobleUI admin, which has its own premium pass in clp-admin.css).
   ===================================================================== */

/* Text selection uses the brand, not the browser default blue. */
::selection { background: rgba(22, 48, 122, .16); color: var(--clp-ink); }

/* ---- Form controls: consistent height, radius, and a brand focus ring ---- */
.form-control,
.form--control,
select.form-control,
textarea.form-control {
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    background: #fff;
    color: var(--clp-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control::placeholder,
.form--control::placeholder { color: #9aa3b2; }

.form-control:focus,
.form--control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: rgba(22, 48, 122, .5);
    box-shadow: 0 0 0 4px rgba(22, 48, 122, .12);
    background: #fff;
    outline: 0;
}

/* Labels read as quiet, confident metadata. */
.label-text,
.input-box .label-text,
.form-label {
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .005em;
    color: var(--clp-ink);
}

/* Checkboxes / radios adopt the brand accent (native control tinting). */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--clp-primary); }

/* ---- Buttons: smooth press + keyboard focus ring, consistent radius ---- */
.theme-btn,
.btn.theme-btn,
.clp-btn {
    transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.theme-btn:active,
.btn.theme-btn:active,
.clp-btn:active { transform: translateY(1px); }

.theme-btn:focus-visible,
.btn.theme-btn:focus-visible,
.clp-btn:focus-visible,
a.theme-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(22, 48, 122, .22);
}

/* Newsletter controls remain comfortably tappable without enlarging dense UI. */
.footer-area .clp-newsletter .form-control,
.footer-area .clp-newsletter .theme-btn {
    min-height: 44px;
}

@media (max-width: 575px) {
    /* This later, scoped rule wins over the legacy 40px generic-link rule. */
    .off-canvas-menu .off-canvas-menu-list li a,
    .breadcrumb-area.pattern-bg .bread-btn-box .btn,
    .course-details-area .btn,
    .view-all-course-btn-box .btn,
    .cta-area .cta-btn-box .btn,
    .clp-sticky-enroll .btn {
        min-height: 44px;
    }
}

/* ---- Links: smooth colour transition everywhere ---- */
a { transition: color .16s ease; }

/* ---- Section rhythm & headings ---- */
.section__title { line-height: 1.12; }
.section-heading .section__title { font-size: clamp(28px, 3.2vw, 40px); }

/* A quiet, premium eyebrow above section titles (opt-in class). */
.clp-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clp-primary);
    margin-bottom: 12px;
}

/* Supporting copy under a section title. */
.section-heading p,
.section__desc {
    color: var(--clp-muted);
    font-size: 16.5px;
    line-height: 1.7;
}

/* ---- Cards: unify the interactive lift across every card variant ---- */
.clp-course-card,
.clp-floating-card,
.clp-metric {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.clp-course-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 48, 122, .2);
    box-shadow: var(--clp-shadow);
}

/* ---- Breadcrumb / page hero: refined navy so inner pages match home.
   Scoped to the .img-bg-2 marketing variant only — the course-details
   breadcrumb is intentionally .bg-white with dark text, leave it alone. ---- */
.breadcrumb-area.img-bg-2 {
    background:
        radial-gradient(circle at 92% 4%, rgba(27, 168, 76, .18), transparent 44%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%) !important;
    color: #fff;
}
.breadcrumb-area.img-bg-2::before { display: none; }
.breadcrumb-area.img-bg-2 .section__title,
.breadcrumb-area.img-bg-2 .breadcrumb-title,
.breadcrumb-area.img-bg-2 h1,
.breadcrumb-area.img-bg-2 h2 { color: #fff; }
.breadcrumb-area.img-bg-2 .breadcrumb-item,
.breadcrumb-area.img-bg-2 .breadcrumb-item a,
.breadcrumb-area.img-bg-2 .breadcrumb-list li,
.breadcrumb-area.img-bg-2 .breadcrumb-list li a { color: rgba(255, 255, 255, .82); }

/* ---- Footer: crisp top divider + refined link hovers ---- */
.footer-area {
    border-top: 1px solid var(--clp-border);
}
.footer-area .generic-list-item li a,
.footer-area .footer-item ul li a {
    color: var(--clp-muted);
    transition: color .16s ease, padding-left .16s ease;
}
.footer-area .generic-list-item li a:hover,
.footer-area .footer-item ul li a:hover {
    color: var(--clp-primary);
    padding-left: 3px;
}

/* ---- Pagination: pill-style, brand-tinted ---- */
.pagination { gap: 6px; }
.pagination .page-link {
    border-radius: 10px;
    border-color: var(--clp-border);
    font-weight: 700;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pagination .page-link:hover {
    background: var(--clp-soft);
    border-color: rgba(22, 48, 122, .3);
}

/* ---- Dark-mode adaptions for the premium form/footer surfaces ---- */
.dark-theme .form-control,
.dark-theme .form--control,
.dark-theme textarea.form-control {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .1);
    color: #f3f4f6;
}
.dark-theme .form-control:focus,
.dark-theme .form--control:focus {
    border-color: rgba(158, 226, 180, .5);
    box-shadow: 0 0 0 4px rgba(27, 168, 76, .16);
}
.dark-theme .label-text,
.dark-theme .form-label { color: #e5e7eb; }
.dark-theme .footer-area { border-top-color: rgba(255, 255, 255, .08); }
.dark-theme .pagination .page-link:hover { background: #26262d; }

/* =====================================================================
   COURSE PREVIEW PAGE (course-details) PREMIUM (2026-07)
   Turns the flat white header into a navy hero with the price/enroll
   card floating over it (Udemy/Coursera-style), and refines every
   content block. Scoped to .breadcrumb-area.pattern-bg (unique to this
   page) + .course-details-area so nothing else is affected.
   ===================================================================== */

/* ---- Header → navy hero (gives the floating card a rich backdrop) ---- */
.breadcrumb-area.pattern-bg {
    background:
        radial-gradient(circle at 88% -10%, rgba(27, 168, 76, .20), transparent 44%),
        radial-gradient(circle at 4% 10%, rgba(244, 206, 10, .10), transparent 34%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%) !important;
    padding-top: 58px !important;
    padding-bottom: 132px !important;   /* room for the -100px floating card */
    position: relative;
    z-index: 2;
}
.breadcrumb-area.pattern-bg .section__title { color: #fff; }
.breadcrumb-area.pattern-bg .section__desc,
.breadcrumb-area.pattern-bg p { color: rgba(255, 255, 255, .82) !important; }
.breadcrumb-area.pattern-bg a,
.breadcrumb-area.pattern-bg .text-color,
.breadcrumb-area.pattern-bg .generic-list-item li a { color: #fff !important; }
.breadcrumb-area.pattern-bg .generic-list-item li { color: rgba(255, 255, 255, .7); }
.breadcrumb-area.pattern-bg .hover-underline:hover { text-decoration: underline; }
.breadcrumb-area.pattern-bg .rating-number { color: #f4ce0a; font-weight: 800; }
.breadcrumb-area.pattern-bg .rating-total,
.breadcrumb-area.pattern-bg .student-total { color: rgba(255, 255, 255, .8); }
.breadcrumb-area.pattern-bg .review-stars .la { color: #f4ce0a; }
.breadcrumb-area.pattern-bg .svg-icon-color-gray { fill: rgba(255, 255, 255, .68); }
.breadcrumb-area.pattern-bg .ribbon,
.breadcrumb-area.pattern-bg .ribbon-lg {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}
/* Wishlist / Share / Report → ghost buttons on the dark hero */
.breadcrumb-area.pattern-bg .theme-btn-transparent,
.breadcrumb-area.pattern-bg .btn.theme-btn-transparent {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .34) !important;
    color: #fff !important;
}
.breadcrumb-area.pattern-bg .theme-btn-transparent:hover,
.breadcrumb-area.pattern-bg .btn.theme-btn-transparent:hover {
    background: rgba(255, 255, 255, .18) !important;
    border-color: #fff !important;
}

/* ---- Floating price / enrolment card ---- */
.course-details-area .sidebar .card-item {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    box-shadow: 0 26px 60px -22px rgba(10, 24, 54, .38), 0 2px 6px rgba(16, 24, 40, .06) !important;
    overflow: hidden;
}
.course-details-area .preview-course-video img { border-radius: 12px; }
.course-details-area .preview-course-video-content p { position: relative; z-index: 2; }
.course-details-area .preview-course-feature-content .fs-35 {
    font-size: 40px !important;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--clp-ink) !important;
}
.course-details-area .preview-course-feature-content .theme-btn {
    height: 52px;
    font-size: 16px;
    border-radius: 12px;
}
.course-details-area .preview-course-feature-content .generic-list-item li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--clp-border);
    color: var(--clp-ink);
    margin: 0;
}
.course-details-area .preview-course-feature-content .generic-list-item li:last-child { border-bottom: 0; }
.course-details-area .preview-course-feature-content .generic-list-item li .text-color { color: var(--clp-primary) !important; }

/* ---- Content section cards ---- */
.course-overview-card {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--clp-shadow-sm);
}
.course-overview-card.bg-gray { background: var(--clp-soft) !important; }
.course-overview-card h3 { color: var(--clp-ink); letter-spacing: -.02em; }

/* "What you'll learn" → two-column checklist with brand-green ticks */
.overview-list-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
}
.overview-list-item li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--clp-ink);
    margin: 0;
    line-height: 1.5;
}
.overview-list-item li i {
    color: var(--clp-success) !important;
    margin-top: 2px;
    flex-shrink: 0;
}
@media (max-width: 767px) { .overview-list-item { grid-template-columns: 1fr; } }

/* Course-content accordion */
.generic-accordion .card {
    border: 1px solid var(--clp-border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
    box-shadow: none;
    overflow: hidden;
}
.generic-accordion .card-header {
    background: var(--clp-soft);
    border-bottom: 0;
    padding: 0;
}
.generic-accordion .card-header .btn-link {
    width: 100%;
    padding: 15px 18px;
    font-weight: 700;
    color: var(--clp-ink);
    text-decoration: none;
}
.generic-accordion .card-header .btn-link:hover { color: var(--clp-primary); }
.generic-accordion .card-body { padding: 6px 18px 14px; }
.curriculum-duration { color: var(--clp-muted); }
.curriculum-duration strong { color: var(--clp-ink); }

/* ---- Dark mode ---- */
.dark-theme .course-overview-card { background: #1f1f24; border-color: rgba(255, 255, 255, .08); }
.dark-theme .course-overview-card.bg-gray { background: #26262d !important; }
.dark-theme .course-overview-card h3,
.dark-theme .overview-list-item li { color: #f3f4f6; }
.dark-theme .generic-accordion .card { background: #1f1f24; border-color: rgba(255, 255, 255, .08) !important; }
.dark-theme .generic-accordion .card-header { background: #26262d; }
.dark-theme .generic-accordion .card-header .btn-link { color: #f3f4f6; }
.dark-theme .course-details-area .preview-course-feature-content .fs-35 { color: #f3f4f6 !important; }

/* The left column carried a flat 90px top padding, which on top of the hero's
   own 132px bottom padding opened ~220px of empty space before the first card.
   The price card floats up into the hero on its own negative margin and does not
   need the left column to reserve room for it. */
.course-details-content-wrap.pt-90px { padding-top: 48px !important; }

/* Below 992px the price card no longer floats up (sidebar-negative margin
   resets to 0), so drop the extra hero bottom padding to avoid a navy gap. */
@media (max-width: 991px) {
    .breadcrumb-area.pattern-bg { padding-bottom: 44px !important; }
    /* Same reason: the 90px top padding on the left column exists only to clear
       the price card where it overlaps the hero. Once the card stops being
       pulled up, that padding is a large empty band under the hero. */
    .course-details-content-wrap.pt-90px { padding-top: 34px !important; }
}

/* Phones: 28px of card padding on a 375px screen leaves the text in a narrow
   channel. Trim the gutters and let the content have the width. */
@media (max-width: 575px) {
    .course-overview-card { padding: 20px 18px; border-radius: 14px; margin-bottom: 16px; }
    .course-overview-card.pt-4 { padding-top: 20px !important; }
    .generic-accordion .card-header .btn-link { padding: 13px 14px; }
    .generic-accordion .card-body { padding: 6px 14px 12px; }
}

/* =====================================================================
   PREMIUM LESSON PLAYER v2 — tabs, resume, interactive video, Q&A,
   transcript, checkpoints, shortcuts, celebration (2026-07)
   ===================================================================== */
.clp-content-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.clp-content-head-main{ flex:1 1 300px; min-width:0; }
.clp-content-meta{ margin:6px 0 0; font-size:13.5px; color:var(--clp-muted); display:flex; align-items:center; gap:7px; }

/* Course-details "Course Features" rows are label/value pairs on a
   justify-content:space-between line. A long value (e.g. a resources phrase
   rather than a count) ran straight into its own label with nothing between
   them. Guarantee a gutter and let the value wrap instead of colliding. */
.generic-list-item-flash li{ gap:14px; }
.generic-list-item-flash li > span:first-child{ flex:0 0 auto; }

/* .clp-article reused inside a card (the course description) rather than as a
   full lesson page: the card already supplies the outer padding, so drop the
   article's own trailing margin and the first heading's big top gap. */
.clp-article-embedded{ margin-bottom:0; }
.clp-article-embedded > *:last-child{ margin-bottom:0; }
.clp-article-embedded > h2:first-child,
.clp-article-embedded > h3:first-child{ margin-top:0; }
.clp-content-meta i{ color:var(--clp-primary); font-size:15px; }

/* ---- On this page ----
   Contents nav for a lesson body, built in the view because SafeHtml strips the
   ids an author would need to write one. It matters most on the Digital Literacy
   parts, which are four-hour blocks read across several sittings. */
.clp-article-toc{ background:var(--clp-soft); border:1px solid var(--clp-border); border-radius:12px; padding:16px 20px; margin:0 0 26px; }
.clp-article-toc-title{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--clp-muted); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.clp-article-toc-title i{ color:var(--clp-primary); font-size:15px; }
.clp-article-toc-list{ margin:0; padding-left:20px; columns:2; column-gap:30px; }
.clp-article-toc-list li{ margin-bottom:6px; break-inside:avoid; font-size:14.5px; }
.clp-article-toc-list a{ color:var(--clp-ink); text-decoration:none; border-bottom:1px solid transparent; }
.clp-article-toc-list a:hover, .clp-article-toc-list a:focus-visible{ color:var(--clp-primary); border-bottom-color:currentColor; }
@media (max-width: 700px){ .clp-article-toc-list{ columns:1; } }
.dark-theme .clp-article-toc{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-article-toc-list a{ color:#e5e7eb; }
.dark-theme .clp-article-toc-list a:hover, .dark-theme .clp-article-toc-list a:focus-visible{ color:#9ec5ff; }

/* Anchored headings land under the sticky top bar without this. */
.clp-article h2[id]{ scroll-margin-top:78px; }

/* ---- Footer completion ---- */
.clp-footer-complete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px; padding:18px 20px; background:var(--clp-soft); border:1px solid var(--clp-border); border-radius:14px; }
.clp-footer-complete-hint{ font-size:14px; color:var(--clp-muted); }
.dark-theme .clp-footer-complete{ background:#1f1f24; border-color:rgba(255,255,255,.08); }

.clp-cc-form{ flex-shrink:0; }
.clp-cc-btn{ white-space:nowrap; }
.clp-resume-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:linear-gradient(120deg, rgba(22,48,122,.08), rgba(27,168,76,.06)); border:1px solid var(--clp-border); border-radius:14px; padding:12px 18px; margin-bottom:16px; font-weight:600; color:var(--clp-ink); }
.clp-resume-actions{ display:flex; gap:8px; }
.clp-chapters{ margin:18px 0 8px; }
.clp-chapters-title{ font-size:15px; font-weight:800; color:var(--clp-ink); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.clp-chapters-title i{ color:var(--clp-primary); }
.clp-chapters-list{ display:flex; flex-direction:column; gap:6px; }
.clp-chapter{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--clp-border); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.clp-chapter:hover{ border-color:rgba(22,48,122,.35); background:var(--clp-soft); }
.clp-chapter-time{ font-variant-numeric:tabular-nums; font-weight:800; font-size:13px; color:var(--clp-primary); background:rgba(22,48,122,.08); border-radius:6px; padding:3px 8px; flex-shrink:0; }
.clp-chapter-name{ font-weight:600; color:var(--clp-ink); font-size:14.5px; }
.clp-tabs{ display:flex; gap:4px; border-bottom:2px solid var(--clp-border); margin:26px 0 0; overflow-x:auto; }
.clp-tab{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:12px 16px; font-weight:700; font-size:14.5px; color:var(--clp-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
.clp-tab:hover{ color:var(--clp-ink); }
.clp-tab.is-active{ color:var(--clp-primary); border-bottom-color:var(--clp-primary); }
.clp-tab-count{ background:rgba(22,48,122,.1); color:var(--clp-primary); font-size:11px; font-weight:800; border-radius:999px; padding:1px 8px; }
.clp-tab-panels{ padding-top:22px; }
.clp-tab-panel{ display:none; }
.clp-tab-panel.is-active{ display:block; animation:clpFade .2s ease; }
@keyframes clpFade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.clp-qa-ask{ background:#fff; border:1px solid var(--clp-border); border-radius:14px; padding:14px; margin-bottom:20px; }
.clp-qa-ask textarea{ border:0; box-shadow:none; resize:vertical; }
.clp-qa-ask-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.clp-qa-list{ display:flex; flex-direction:column; gap:14px; }
.clp-qa-item{ display:flex; gap:12px; background:#fff; border:1px solid var(--clp-border); border-radius:14px; padding:16px; }
.clp-qa-item.is-resolved{ border-color:rgba(27,168,76,.4); background:rgba(27,168,76,.03); }
.clp-qa-vote{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.clp-vote-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--clp-border); background:#fff; color:var(--clp-muted); cursor:pointer; transition:all .14s ease; }
.clp-vote-btn:hover:not(:disabled){ border-color:var(--clp-primary); color:var(--clp-primary); }
.clp-vote-btn.voted{ background:var(--clp-primary); border-color:var(--clp-primary); color:#fff; }
.clp-vote-btn.sm{ width:28px; height:28px; font-size:12px; }
.clp-vote-count{ font-weight:800; font-size:13px; color:var(--clp-ink); }
.clp-vote-count.sm{ font-size:12px; }
.clp-qa-body{ flex:1; min-width:0; }
.clp-qa-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.clp-qa-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.clp-qa-avatar.sm{ width:28px; height:28px; }
.clp-qa-head strong{ font-size:14px; color:var(--clp-ink); }
.clp-qa-title{ font-weight:700; color:var(--clp-ink); margin:0 0 4px; }
.clp-qa-text{ color:var(--clp-ink); margin:0 0 4px; line-height:1.6; white-space:pre-line; }
.clp-qa-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; }
.clp-qa-tag.instructor{ background:rgba(22,48,122,.1); color:var(--clp-primary); }
.clp-qa-tag.resolved, .clp-qa-tag.accepted{ background:rgba(27,168,76,.12); color:#128a3d; margin-left:auto; }
.clp-qa-answer{ display:flex; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--clp-border); }
.clp-qa-answer.is-accepted{ background:rgba(27,168,76,.05); border-radius:10px; padding:12px; border-top:0; }
.clp-qa-answer-body{ flex:1; min-width:0; }
.clp-qa-reply{ margin-top:12px; }
.clp-qa-reply summary{ cursor:pointer; font-weight:700; font-size:13px; color:var(--clp-primary); list-style:none; }
.clp-qa-reply summary::-webkit-details-marker{ display:none; }
.clp-transcript-search{ position:relative; margin-bottom:14px; }
.clp-transcript-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--clp-muted); }
.clp-transcript-search input{ width:100%; height:44px; border:1px solid var(--clp-border); border-radius:10px; padding:0 14px 0 40px; }
.clp-transcript-cues{ display:flex; flex-direction:column; max-height:520px; overflow-y:auto; }
.clp-cue{ display:flex; gap:12px; text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; }
.clp-cue:hover{ background:var(--clp-soft); }
.clp-cue-time{ font-variant-numeric:tabular-nums; font-weight:700; font-size:12.5px; color:var(--clp-primary); flex-shrink:0; }
.clp-cue-text{ color:var(--clp-ink); line-height:1.55; }
.clp-checkpoint-overlay, .clp-kbd-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(10,24,54,.62); display:flex; align-items:center; justify-content:center; padding:20px; }
.clp-checkpoint-overlay[hidden], .clp-kbd-overlay[hidden]{ display:none; }
.clp-checkpoint-card, .clp-kbd-card{ background:#fff; border-radius:18px; padding:28px; max-width:520px; width:100%; box-shadow:0 30px 70px rgba(3,10,30,.4); }
.clp-checkpoint-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#b45309; background:rgba(245,158,11,.14); padding:5px 12px; border-radius:999px; }
.clp-checkpoint-q{ font-size:20px; font-weight:800; color:var(--clp-ink); margin:14px 0 18px; line-height:1.35; }
.clp-checkpoint-options{ display:flex; flex-direction:column; gap:10px; }
.clp-checkpoint-opt{ text-align:left; border:1px solid var(--clp-border); background:#fff; border-radius:11px; padding:13px 16px; font-weight:600; color:var(--clp-ink); cursor:pointer; transition:all .14s ease; }
.clp-checkpoint-opt:hover:not(:disabled){ border-color:var(--clp-primary); background:rgba(22,48,122,.03); }
.clp-checkpoint-opt.is-correct{ border-color:#1ba84c; background:rgba(27,168,76,.1); color:#128a3d; }
.clp-checkpoint-opt.is-wrong{ border-color:#e11d48; background:rgba(225,29,72,.08); color:#be123c; }
.clp-checkpoint-feedback{ margin-top:14px; padding:12px 14px; border-radius:10px; font-weight:600; }
.clp-checkpoint-feedback.ok{ background:rgba(27,168,76,.12); color:#128a3d; }
.clp-checkpoint-feedback.no{ background:rgba(225,29,72,.08); color:#be123c; }
.clp-checkpoint-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.clp-kbd-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.clp-kbd-head h2{ font-size:1.25rem; font-weight:800; margin:0; }
.clp-kbd-x{ border:0; background:none; font-size:22px; color:var(--clp-muted); cursor:pointer; }
.clp-kbd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.clp-kbd-list li{ display:flex; align-items:center; gap:12px; }
.clp-kbd-list span{ color:var(--clp-muted); }
.clp-kbd-list kbd{ min-width:30px; text-align:center; display:inline-block; background:var(--clp-soft); border:1px solid var(--clp-border); border-bottom-width:2px; border-radius:7px; padding:3px 8px; font-weight:800; font-size:12.5px; color:var(--clp-ink); font-family:inherit; }
.clp-confetti{ position:fixed; inset:0; z-index:1300; pointer-events:none; overflow:hidden; }
.clp-confetti span{ position:absolute; top:-14px; width:10px; height:14px; border-radius:2px; opacity:.95; animation:clpConfetti linear forwards; }
@keyframes clpConfetti{ to{ transform:translateY(105vh) rotate(720deg); opacity:.9; } }
.clp-celebrate-toast{ position:fixed; right:22px; bottom:22px; z-index:1310; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--clp-border); border-radius:16px; padding:16px 20px; box-shadow:0 24px 60px rgba(3,10,30,.28); transform:translateY(120%); opacity:0; transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease; max-width:340px; }
.clp-celebrate-toast.show{ transform:none; opacity:1; }
.clp-celebrate-toast i{ font-size:34px; color:#f4ce0a; }
.clp-celebrate-toast strong{ display:block; color:var(--clp-ink); }
.clp-celebrate-toast span{ font-size:13px; color:var(--clp-muted); }
@media (max-width:640px){
  .clp-content-head{ flex-direction:column; }
  /* flex-basis applies to the MAIN axis. Once the header stacks to a column the
     300px basis above becomes a 300px HEIGHT, which pinned the block open and
     left ~200px of dead space between the lesson meta and "Complete & continue"
     on every lesson in the site. Reset it to content height. */
  .clp-content-head-main{ flex-basis:auto; }
  .clp-cc-form{ width:100%; }
  .clp-cc-btn{ width:100%; justify-content:center; }
  .clp-celebrate-toast{ left:16px; right:16px; max-width:none; }
}
.dark-theme .clp-qa-item, .dark-theme .clp-qa-ask, .dark-theme .clp-chapter, .dark-theme .clp-checkpoint-card, .dark-theme .clp-kbd-card, .dark-theme .clp-celebrate-toast{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-qa-head strong, .dark-theme .clp-qa-text, .dark-theme .clp-qa-title, .dark-theme .clp-cue-text, .dark-theme .clp-chapter-name, .dark-theme .clp-checkpoint-q, .dark-theme .clp-celebrate-toast strong, .dark-theme .clp-vote-count{ color:#f3f4f6; }
.dark-theme .clp-resume-banner{ background:linear-gradient(120deg, rgba(22,48,122,.24), rgba(27,168,76,.14)); color:#f3f4f6; }
.dark-theme .clp-tabs{ border-bottom-color:rgba(255,255,255,.1); }

/* =====================================================================
   COURSE PREVIEW EXTRAS — requirements, FAQ, sticky enroll bar (2026-07)
   ===================================================================== */
.clp-requirements{ list-style:none; margin:0; padding:0; }
.clp-requirements li{ display:flex; gap:10px; align-items:flex-start; color:var(--clp-ink); line-height:1.6; margin-bottom:10px; }
.clp-requirements li i{ color:var(--clp-success); margin-top:4px; flex-shrink:0; }

.clp-faq-item{ border:1px solid var(--clp-border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.clp-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; background:#fff; border:0; padding:16px 18px; font-weight:700; font-size:15.5px; color:var(--clp-ink); cursor:pointer; }
.clp-faq-q i{ transition:transform .2s ease; color:var(--clp-primary); flex-shrink:0; }
.clp-faq-item.is-open .clp-faq-q i{ transform:rotate(45deg); }
.clp-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.clp-faq-item.is-open .clp-faq-a{ max-height:400px; }
.clp-faq-a p{ margin:0; padding:0 18px 16px; color:var(--clp-muted); line-height:1.7; }

.clp-sticky-enroll{ position:fixed; left:0; right:0; bottom:0; z-index:1050; background:#fff; border-top:1px solid var(--clp-border); box-shadow:0 -8px 30px rgba(16,24,40,.1); transform:translateY(110%); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.clp-sticky-enroll.show{ transform:none; }
.clp-sticky-enroll-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 15px; }
.clp-sticky-enroll-info{ min-width:0; display:flex; flex-direction:column; }
.clp-sticky-enroll-info strong{ font-size:15px; color:var(--clp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.clp-sticky-price{ font-size:18px; font-weight:800; color:var(--clp-primary); letter-spacing:-.02em; }
.clp-sticky-enroll .theme-btn{ flex-shrink:0; white-space:nowrap; }

.dark-theme .clp-faq-q, .dark-theme .clp-sticky-enroll{ background:#1f1f24; }
.dark-theme .clp-faq-q, .dark-theme .clp-requirements li, .dark-theme .clp-sticky-enroll-info strong{ color:#f3f4f6; }
.dark-theme .clp-faq-item, .dark-theme .clp-sticky-enroll{ border-color:rgba(255,255,255,.08); }

/* =====================================================================
   LAUNCH POLISH — premium empty states, skeletons, micro-interactions (2026-07)
   ===================================================================== */
.clp-empty{ text-align:center; padding:34px 20px; }
.clp-empty > i:first-child,
.clp-empty .clp-empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a); font-size:32px; margin-bottom:6px; }
.clp-empty h4{ color:var(--clp-ink,#101828); }
.clp-empty p{ max-width:420px; margin-left:auto; margin-right:auto; }
.dark-theme .clp-empty > i:first-child, .dark-theme .clp-empty .clp-empty-ic{ background:rgba(255,255,255,.06); color:#9ec5ff; }

/* Skeleton shimmer (add .clp-skeleton to a block, or .clp-skel-line for text rows) */
.clp-skeleton, .clp-skel-line{ position:relative; overflow:hidden; background:#eef1f6; border-radius:8px; }
.clp-skel-line{ height:12px; margin-bottom:10px; }
.clp-skel-line.w-60{ width:60%; } .clp-skel-line.w-40{ width:40%; } .clp-skel-line.w-80{ width:80%; }
.clp-skeleton::after, .clp-skel-line::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:clpShimmer 1.3s infinite; }
@keyframes clpShimmer{ 100%{ transform:translateX(100%); } }
.dark-theme .clp-skeleton, .dark-theme .clp-skel-line{ background:#26262d; }
.dark-theme .clp-skeleton::after, .dark-theme .clp-skel-line::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* Micro-interactions: gentle rise-in for course cards on first paint */
@media (prefers-reduced-motion: no-preference){
    .clp-course-card{ animation:clpRise .4s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes clpRise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* =====================================================================
   RICH LESSON CONTENT BLOCKS — for AI-generated / authored modules (2026-07)
   Rendered inside .clp-article (lesson Overview tab). DIT-module style.
   ===================================================================== */
.clp-article .clp-concept{ background:var(--clp-soft,#f8f9fb); border:1px solid var(--clp-border,#eaecf0); border-left:4px solid var(--clp-primary,#16307a); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-concept h4{ margin:0 0 6px; font-size:17px; color:var(--clp-primary,#16307a); }
.clp-article .clp-concept p{ margin:0; }
.clp-article .clp-keyterm{ background:rgba(244,206,10,.1); border:1px solid rgba(244,206,10,.35); border-radius:10px; padding:12px 16px; margin:14px 0; font-size:15.5px; }
.clp-article .clp-keyterm strong{ color:var(--clp-ink,#101828); }
.clp-article .clp-activity{ background:rgba(27,168,76,.07); border:1px solid rgba(27,168,76,.3); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-activity strong{ display:block; color:#128a3d; margin-bottom:4px; }
.clp-article .clp-activity p{ margin:0; }
.clp-article .clp-callout{ background:rgba(22,48,122,.05); border:1px solid var(--clp-border,#eaecf0); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-callout strong{ display:block; color:var(--clp-primary,#16307a); margin-bottom:4px; }
.clp-article .clp-callout p{ margin:0; }
.dark-theme .clp-article .clp-concept{ background:#26262d; border-color:rgba(255,255,255,.08); border-left-color:#5b8cff; }
.dark-theme .clp-article .clp-concept h4{ color:#9ec5ff; }
.dark-theme .clp-article .clp-keyterm, .dark-theme .clp-article .clp-callout{ background:#26262d; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-article .clp-activity{ background:rgba(27,168,76,.12); border-color:rgba(27,168,76,.3); }

/* ============================================================
   UI/UX AUDIT ROUND 2 — a11y skip link + hero animation pause
   ============================================================ */
/* Skip-to-content link: visually hidden until keyboard-focused */
.clp-skip-link{
  position:absolute;left:12px;top:-64px;z-index:2000;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:10px 18px;border-radius:0 0 10px 10px;
  background:var(--clp-navy,#16307a);color:#fff !important;
  font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 8px 24px rgba(15,34,87,.28);
  transition:top .18s ease;
}
.clp-skip-link:focus{top:0;outline:3px solid var(--clp-yellow,#f4ce0a);outline-offset:2px;}
#main-content:focus{outline:none;}

/* Pause the ambient hero orbs/grid when the hero scrolls out of view
   (set by IntersectionObserver on the homepage). Reclaims compositor
   time + battery on mobile. */
.clp-hero-fx.clp-fx-paused .clp-orb,
.clp-hero-fx.clp-fx-paused .clp-hero-grid,
.clp-hero-fx.clp-fx-paused .clp-hero-video{
  animation-play-state:paused !important;
}

/* ============================================================
   UI/UX AUDIT — global keyboard-focus visibility (WCAG 2.4.7)
   A single, consistent focus ring for EVERY interactive element,
   shown only for keyboard users (:focus-visible), never on mouse.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.clp-chip:focus-visible,
.wishlist-icon:focus-visible,
.theme-picker-btn:focus-visible,
.search-toggle:focus-visible,
.dropdown-item:focus-visible,
#scroll-top:focus-visible {
  outline: 3px solid var(--clp-info, #3878ff) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* On dark/navy surfaces, use the yellow accent so the ring stays visible. */
.clp-shell a:focus-visible,
.clp-shell button:focus-visible,
.clp-auth-hero a:focus-visible,
.clp-cta a:focus-visible,
.clp-cta button:focus-visible,
.dark-theme a:focus-visible,
.dark-theme button:focus-visible,
.dark-theme input:focus-visible,
.dark-theme select:focus-visible,
.dark-theme textarea:focus-visible {
  outline-color: var(--clp-yellow, #f4ce0a) !important;
}
/* Remove the legacy outline:none that some resets apply on :focus,
   but keep it for mouse focus (only :focus-visible shows the ring). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* E9 — interface language switcher (login + footer) */
.clp-locale-switch{ font-size:13px; color:var(--clp-muted,#667085); }
.clp-locale-switch .la-globe{ margin-right:4px; }
/* These were 16px tall — below the 24px minimum target size (WCAG 2.5.8), and
   they sit in a row of four, so mis-taps were easy on a phone. */
.clp-locale-link{ color:var(--clp-muted,#667085); text-decoration:none; padding:4px 6px; display:inline-block; min-height:24px; line-height:16px; }
.clp-locale-link:hover{ color:var(--clp-primary,#16307a); text-decoration:underline; }
.clp-locale-link.is-active{ color:var(--clp-primary,#16307a); font-weight:700; }
.clp-locale-sep{ color:#c0c6d0; margin:0 2px; }

/* ---- Calm UI: neutralize legacy infinite decorative animations ----
   The section-divider "moving dot" and any ambient loops ran forever, which
   reads as busy (and never lets the page idle). Keep dividers static. */
.section--divider, .section--divider:before, .section--divider:after,
.section-divider, .section-divider:before, .section-divider:after { animation: none !important; -webkit-animation: none !important; }

/* Micro-polish: line up digits (prices, counts, stats) with tabular figures. */
.clp-price, .clp-metric strong, .clp-hero-stats strong, [data-count], .clp-continue-hero .fs-15 { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* =========================================================
   Long-answer word counter (clp-longanswer.js)
   Sits directly under a textarea that has a minimum word count.
   Colour is never the only signal — the text itself says how many
   words remain, so this reads the same without colour vision.
   ========================================================= */
.clp-wordcount {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--clp-muted, #667085);
}

.clp-wordcount.is-short { color: var(--clp-muted, #667085); }
.clp-wordcount.is-met   { color: var(--clp-success-text, #157a3a); }

.clp-wordcount.is-met::before {
    content: "\2713\00a0";
}

.clp-wordcount.is-blocked {
    color: var(--clp-danger-text, #b42318);
}

.dark-theme .clp-wordcount { color: #a8b0bd; }
.dark-theme .clp-wordcount.is-met { color: #5fd68b; }
.dark-theme .clp-wordcount.is-blocked { color: #f1968f; }
/* =====================================================================
   LEARN PAGE FOCUS MODE + CONTENT PROTECTION (2026-08)
   Scoped to the lesson player so dashboards, forms, reports, and
   certificates retain their normal selection and print behavior.
   ===================================================================== */
.clp-player {
    --clp-player-sidebar-width: 320px;
    height: calc(100vh - var(--clp-impersonation-offset, 0px));
    height: calc(100dvh - var(--clp-impersonation-offset, 0px));
}

.clp-player-sidebar {
    width: var(--clp-player-sidebar-width);
    flex-basis: var(--clp-player-sidebar-width);
    background: #0b2a5b;
    transition: margin-left .2s ease, transform .2s ease;
}

.clp-player.sidebar-collapsed .clp-player-sidebar {
    margin-left: calc(var(--clp-player-sidebar-width) * -1);
}

.clp-sidebar-panel-toggle {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.clp-sidebar-panel-toggle:hover { background: rgba(255,255,255,.08); }
.clp-sidebar-panel-toggle:focus-visible,
.clp-sidebar-toggle:focus-visible {
    outline: 3px solid #1ba84c;
    outline-offset: 2px;
}

.clp-player-topbar {
    min-height: 66px;
    padding: 10px 20px;
    gap: 12px;
}

.clp-sidebar-toggle {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.clp-sidebar-toggle-icon { font-size: 18px; }
.clp-topbar-title { gap: 10px; }
.clp-topbar-badge { border-radius: 8px; }

.clp-topbar-progress {
    width: 132px;
    flex: 0 0 132px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--clp-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.clp-topbar-progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf7;
}

.clp-topbar-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--clp-primary);
}

.clp-player-scroll { padding: 28px clamp(18px, 2.5vw, 40px) 72px; }
.clp-player-content { width: 100%; max-width: 1360px; }
.clp-player-content[data-content-mode="reading"] { max-width: 1120px; }
.clp-player-content[data-content-mode="wide"] { max-width: 1440px; }

.clp-content-head { align-items: center; margin-bottom: 20px; }
.clp-content-head > div:first-child { min-width: 0; }
.clp-content-title { margin: 8px 0 0; line-height: 1.18; }

.clp-protection-label,
.clp-preview-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--clp-primary);
    font-size: 13px;
    font-weight: 750;
}

.clp-preview-state {
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid rgba(22,48,122,.2);
    border-radius: 9px;
    background: rgba(22,48,122,.06);
    color: #315a91;
}

.clp-reading-measure { max-width: 820px; }
.clp-player-content[data-content-mode="reading"] .clp-tab-panels,
.clp-player-content[data-content-mode="reading"] .clp-footer-nav { max-width: 920px; }

.clp-media-frame { border-radius: 12px; box-shadow: 0 10px 28px rgba(16,24,40,.1); }
.clp-pdf-frame { height: min(78vh, 900px); }
.clp-html5-frame { height: min(74vh, 860px); }

.clp-tabs {
    scrollbar-width: thin;
    scrollbar-color: #b5c4da transparent;
}
.clp-tab-panel[hidden] { display: none !important; }

.clp-protected-content {
    position: relative;
    isolation: isolate;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.clp-protected-content input,
.clp-protected-content textarea,
.clp-protected-content select,
.clp-protected-content option,
.clp-protected-content [contenteditable="true"],
.clp-protected-content [role="textbox"],
.clp-protected-content [data-clp-copy-allowed] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.clp-protected-content img { -webkit-user-drag: none; user-drag: none; }

.clp-watermark-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    pointer-events: none;
    background-repeat: repeat;
    background-position: 12px 8px;
}

.clp-protection-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1400;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border: 1px solid #cbd8ea;
    border-radius: 9px;
    background: #0b2a5b;
    color: #fff;
    box-shadow: 0 14px 36px rgba(3,10,30,.25);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.clp-protection-notice.show { opacity: 1; transform: translate(-50%, 0); }
.clp-protected-print-notice { display: none; }
.clp-drawer-open { overflow: hidden; }

@media (max-width: 1199px) {
    .clp-topbar-progress { display: none; }
    .clp-player-content[data-content-mode="reading"] { max-width: 980px; }
}

@media (max-width: 991px) {
    .clp-player-sidebar {
        top: var(--clp-impersonation-offset, 0px);
        height: calc(100vh - var(--clp-impersonation-offset, 0px));
        height: calc(100dvh - var(--clp-impersonation-offset, 0px));
        margin-left: 0;
    }
    .clp-player.sidebar-collapsed .clp-player-sidebar { margin-left: -360px; }
    .clp-player-scroll { padding: 22px 18px 64px; }
    .clp-player-content,
    .clp-player-content[data-content-mode="reading"],
    .clp-player-content[data-content-mode="wide"] { max-width: none; }
}

@media (max-width: 640px) {
    .clp-player-topbar {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
    }
    .clp-sidebar-toggle { padding: 0 12px; }
    .clp-topbar-title { overflow: hidden; }
    .clp-topbar-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .clp-topbar-nav { grid-column: 1 / -1; justify-content: flex-end; }
    .clp-topbar-nav .clp-kbd-help-btn { margin-right: auto; }
    .clp-player-scroll { padding: 20px 14px 56px; }
    .clp-content-head { align-items: flex-start; gap: 12px; }
    .clp-content-title { font-size: clamp(24px, 8vw, 32px); }
    .clp-protection-label { font-size: 12px; }
    .clp-preview-state { max-width: none; width: 100%; }
    .clp-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
        gap: 0;
        overflow: visible;
        border: 1px solid var(--clp-border);
        border-radius: 10px 10px 0 0;
    }
    .clp-tab {
        min-width: 0;
        justify-content: center;
        padding: 11px 8px;
        border-right: 1px solid var(--clp-border);
        font-size: 13px;
    }
    .clp-tab:last-child { border-right: 0; }
    .clp-tab-count { padding: 1px 6px; }
    .clp-tab-panels { padding-top: 20px; }
    .clp-article { font-size: 16.5px; line-height: 1.75; }
    .clp-footer-nav { align-items: stretch; }
    .clp-footer-nav .clp-btn { min-height: 48px; }
    .clp-next-btn { flex: 1; min-width: 0; }
    .clp-next-label { min-width: 0; }
    .clp-next-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .clp-player-sidebar,
    .clp-protection-notice { transition: none; }
}

@media print {
    .clp-player-body { background: #fff !important; }
    .clp-player-body .clp-imp-banner,
    .clp-player-body .clp-player,
    .clp-player-body .clp-protection-notice { display: none !important; }
    .clp-player-body .clp-protected-print-notice {
        display: block !important;
        max-width: 680px;
        margin: 80px auto;
        padding: 32px;
        border: 2px solid #16307a;
        color: #101828;
        text-align: center;
        font-family: Arial, sans-serif;
    }
    .clp-protected-print-notice i { color: #16307a; font-size: 36px; }
    .clp-protected-print-notice h1 { margin: 14px 0 8px; font-size: 24px; }
    .clp-protected-print-notice p { margin: 0; font-size: 16px; line-height: 1.6; }
}

.dark-theme .clp-topbar-progress { color: #f3f4f6; }
.dark-theme .clp-topbar-progress-track { background: rgba(255,255,255,.14); }
.dark-theme .clp-protection-label { color: #9ec5ff; }
.dark-theme .clp-preview-state { color: #cfe0ff; border-color: rgba(158,197,255,.28); background: rgba(22,48,122,.2); }

/* =========================================================
   Education Hubs menu (header): each partner hub with its
   mark, full name and a "Member sign in" cue.
   ========================================================= */
.clp-hubs-menu { min-width: 330px; }
.clp-hubs-menu .clp-hub-link { align-items: flex-start; gap: 12px; white-space: normal; }
.clp-hubs-menu .clp-hub-link img,
.clp-hubs-menu .clp-hub-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.clp-hubs-menu .clp-hub-icon { display: grid; place-items: center; background: rgba(22, 48, 122, .08); color: var(--clp-primary, #16307a); font-size: 20px; }
.clp-hubs-menu .clp-hub-link > span { display: grid; gap: 1px; line-height: 1.3; }
.clp-hubs-menu .clp-hub-name { color: var(--clp-muted, #667085); font-size: 12.5px; font-weight: 500; }
.clp-hubs-menu .clp-hub-link small { color: var(--clp-primary, #16307a); font-size: 12px; font-weight: 700; }
.clp-hubs-menu .clp-hub-link[aria-current="page"] { background: rgba(22, 48, 122, .08); }
.dark-theme .clp-hubs-menu .clp-hub-link small { color: #8ab4ec; }
.clp-offcanvas-sub a { padding-left: 1.4rem !important; font-size: 14px; }
.clp-main-menu .clp-hubs-menu { width: 340px; flex-direction: column; align-items: stretch; }
.clp-main-menu .clp-hubs-menu > li { display: block; width: 100%; margin: 0; padding: 0; float: none; }
.clp-main-menu .clp-hubs-menu .clp-hub-link { display: flex; text-transform: none; letter-spacing: 0; }
.clp-main-menu .clp-hubs-menu .clp-hub-link strong { font-size: 14.5px; }
/* clp-base's `.main-menu > ul > li a { padding-bottom: 33px }` (the top-level hover
   gap) also reached these nested links and spread the menu out. */
.clp-main-menu .clp-hubs-menu li a { padding: 10px 12px; }