/* ==========================================================================
   CertLab Theme — app.css
   Design system + all component styles
   ========================================================================== */

/* ─── Google Fonts fallback (also loaded in layout) ─── */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    /* Palette — EduMall-inspired */
    --cl-blue:       #0071dc;   /* Primary — CTA, links, active */
    --cl-blue-d:     #005ab0;   /* Hover / darkened primary */
    --cl-blue-l:     #4da3ff;   /* Light / tinted */
    --cl-secondary:  #ffc221;   /* Amber accent — badges, highlight */
    --cl-coral:      #f46c5f;   /* Coral — kept for compatibility */
    --cl-coral-l:    rgba(244, 108, 95, 0.12);
    --cl-mint:       #8fe0d3;
    --cl-mint-l:     rgba(143, 224, 211, 0.18);
    --cl-gold:       #f5be6f;
    --cl-gold-l:     rgba(245, 190, 111, 0.16);

    /* Neutrals */
    --cl-ink:        #252525;
    --cl-muted:      #6c757d;
    --cl-border:     #dee2e6;
    --cl-bg:         #f5f5f5;
    --cl-bg-white:   #ffffff;
    --cl-bg-warm:    #fff7f2;
    --cl-surface:    rgba(255, 255, 255, 0.72);
    --cl-surface-s:  rgba(255, 255, 255, 0.92);
    --cl-white:      #ffffff;

    /* Dark palette — EduMall navy */
    --cl-dark:       #031f42;   /* Primary dark — footer, CTA bg */
    --cl-dark-2:     #0a2b5c;
    --cl-dark-3:     #0e3470;
    --cl-dark-navy:  #031f42;   /* Alias for topbar, footer */

    /* Shadows */
    --cl-shadow-sm:  0 4px 16px rgba(15, 23, 36, 0.08);
    --cl-shadow:     0 20px 60px rgba(15, 23, 36, 0.12);
    --cl-shadow-lg:  0 32px 90px rgba(15, 23, 36, 0.18);

    /* Radii */
    --cl-radius-xs:  8px;
    --cl-radius-sm:  14px;
    --cl-radius-md:  20px;
    --cl-radius-lg:  28px;
    --cl-radius-xl:  36px;
    --cl-radius-full: 9999px;

    /* Typography */
    --cl-font-body:  'Be Vietnam Pro', system-ui, sans-serif;
    --cl-font-head:  "Paytone One", sans-serif;
    /* --cl-font-head:  'Outfit', 'Be Vietnam Pro', system-ui, sans-serif; */
    --cl-font-logo:  "Protest Guerrilla", sans-serif;
    --cl-font-display: "Paytone One", sans-serif;
    /* Spacing scale */
    --cl-section-y:     80px;
    --cl-section-y-sm:  48px;

    /* Transitions */
    --cl-ease:       0.22s ease;

    /* Surface off-white (used in sidebar, inputs) */
    --cl-bg-off:     #eef0f3;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--cl-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cl-ink);
    background: var(--cl-bg);
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.cl-shell {
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
}
.cl-shell--narrow { max-width: min(1360px, calc(100% - 32px))}
.cl-shell--xs     { max-width: 500px; }

/* ==========================================================================
   4. Typography helpers
   ========================================================================== */
.cl-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-coral);
}

.cl-heading {
    font-family: var(--cl-font-head);
    font-size: clamp(1.9rem, 3.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.06;
}

.cl-subhead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
    max-width: 62ch;
    margin-top: 14px;
}

.cl-gradient-text {
    background: linear-gradient(135deg, var(--cl-coral), var(--cl-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--cl-radius-full);
    font-family: var(--cl-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease),
                background var(--cl-ease), border-color var(--cl-ease);
    white-space: nowrap;
}
.cl-btn:hover, .cl-btn:focus-visible { transform: translateY(-2px); }
.cl-btn:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 3px; }

.cl-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue) 70%, var(--cl-blue-l));
    box-shadow: 0 14px 28px rgba(0, 113, 220, 0.26);
}
.cl-btn--primary:hover { box-shadow: 0 20px 40px rgba(0, 113, 220, 0.36); }

.cl-btn--ghost {
    color: var(--cl-ink);
    background: var(--cl-surface);
    border-color: var(--cl-border);
}
.cl-btn--ghost:hover { background: var(--cl-white); }

.cl-btn--white {
    color: var(--cl-blue-d);
    background: #fff;
    border-color: transparent;
    box-shadow: var(--cl-shadow-sm);
}

.cl-btn--soft {
    color: #b6483d;
    background: var(--cl-coral-l);
    border-color: transparent;
}

.cl-btn--sm  { padding: 10px 18px; font-size: 0.88rem; }
.cl-btn--lg  { padding: 16px 28px; font-size: 1rem; }
.cl-btn--xs  { padding: 7px 14px; font-size: 0.82rem; }

/* ==========================================================================
   6. Pills / kickers
   ========================================================================== */
.cl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-coral-l);
    color: #b6483d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cl-kicker--mint  { background: var(--cl-mint-l);  color: #2a7d71; }
.cl-kicker--gold  { background: var(--cl-gold-l);  color: #8a5e0a; }
.cl-kicker--blue  { background: rgba(0,113,220,.1); color: var(--cl-blue-d); }

.cl-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--cl-radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--cl-border);
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-pill:hover    { background: #fff; color: var(--cl-ink); }
.cl-pill--active  { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }

/* ==========================================================================
   7. Brand mark
   ========================================================================== */
.cl-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--cl-ink);
}
.cl-brand--image {
    width: 220px;
    height: 54px;
    overflow: hidden;
    flex-shrink: 0;
}
.cl-brand--exam-image {
    width: 180px;
    height: 32px;
    overflow: visible;
    flex-shrink: 0;
}
.cl-brand--exam-image .cl-brand__logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}
.cl-brand__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.cl-footer__brand-link {
    display: inline-flex;
}
.cl-footer__logo {
    display: block;
    width: 220px;
    height: auto;
    max-width: 100%;
}
@media (max-width: 640px) {
    .cl-brand--image { width: 164px; height: 44px; }
    .cl-brand--exam-image { width: 140px; height: 25px; }
}
.cl-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    font-family: var(--cl-font-head);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 12px 24px rgba(0, 113, 220, 0.26);
    flex-shrink: 0;
}
.cl-brand__title {
    display: block;
    /* font-family: var(--cl-font-head); */
    font-family: var(--cl-font-logo);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cl-brand__sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.cl-brand--sm .cl-brand__mark { width: 36px; height: 36px; font-size: 0.78rem; }
.cl-brand--lg .cl-brand__mark { width: 54px; height: 54px; font-size: 1.05rem; border-radius: 18px; }

/* ==========================================================================
   8. Navigation
   ========================================================================== */
.cl-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* padding: 16px 0 6px; */
    background: rgba(250, 249, 247, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cl-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    /* border-radius: var(--cl-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: 0 12px 36px rgba(0, 113, 220, 0.07); */
}

.cl-nav__links {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.cl-nav__link {
    padding: 8px 14px;
    border-radius: var(--cl-radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-nav__link:hover           { color: var(--cl-ink); background: rgba(255,255,255,.8); }
.cl-nav__link--active         { color: var(--cl-blue); background: rgba(0,113,220,.08); }

.cl-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cl-nav__user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cl-muted);
}

.cl-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--cl-radius-xs);
    background: transparent;
}
.cl-nav__toggle span {
    display: block;
    height: 2px;
    width: 20px;
    background: var(--cl-ink);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ==========================================================================
   9. Exam top bar (exam layout)
   ========================================================================== */
.cl-exambar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--cl-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.cl-exambar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
.cl-exambar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Phones: everything has to fit on one row (brand + timer + Submit + theme toggle) */
@media (max-width: 480px) {
    .cl-exambar__inner { gap: 6px; }
    .cl-exambar .cl-brand--exam-image { width: 104px; height: 19px; }
    .cl-exambar__timer { padding: 6px 10px; font-size: .8rem; gap: 5px; }
    .cl-exambar__actions { gap: 6px; }
    .cl-exambar .er-mobile-finish { padding: 8px 11px; font-size: .78rem; }
    .cl-exambar .cl-theme-toggle { width: 34px; height: 34px; font-size: .95rem; }
}
@media (max-width: 360px) {
    /* icon-only Submit; label lives in aria-label */
    .cl-exambar .er-mobile-finish { font-size: 0; padding: 9px 11px; }
    .cl-exambar .er-mobile-finish i { font-size: .95rem; }
}
/* Desktop: brand left, timer truly centred, actions right */
@media (min-width: 769px) {
    .cl-exambar__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
    .cl-exambar__inner > .cl-brand { grid-column: 1; justify-self: start; }
    .cl-exambar__timer { grid-column: 2; }
    .cl-exambar__actions { grid-column: 3; justify-self: end; }
}
.cl-exambar__timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-coral-l);
    color: #b6483d;
    font-weight: 800;
    font-size: 1rem;
}

/* ==========================================================================
   10. Sections
   ========================================================================== */
.cl-section         { padding: 80px 0; }
.cl-section--sm     { padding: 48px 0; }
.cl-section--lg     { padding: 100px 0; }
.cl-section--tinted {
    background: var(--cl-bg);
}
.cl-section--dark {
    background: var(--cl-dark);
    color: #fff;
}
.cl-section--dark .cl-eyebrow { color: var(--cl-mint); }
.cl-section--dark .cl-heading { color: #fff; }
.cl-section--dark .cl-subhead { color: rgba(255,255,255,.55); }

.cl-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cl-section__head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cl-section__head--center .cl-subhead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   11. Hero section — dark navy, professional cert-exam style
   ========================================================================== */
.cl-hero {
    padding: 72px 0 88px;
    background: linear-gradient(135deg, #031f42 0%, #0a2f60 55%, #031f42 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid overlay */
.cl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Blue glow blob top-right */
.cl-hero::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -120px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,113,220,.22) 0%, transparent 68%);
    pointer-events: none;
}

.cl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.cl-hero__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start;}

/* Kicker on dark bg */
.cl-hero .cl-kicker {
    background: rgba(255,194,33,.14);
    color: rgba(255,215,80,.92);
    border: 1px solid rgba(255,194,33,.28);
}

.cl-hero__headline {
    font-family: var(--cl-font-head);
    font-size: clamp(2.6rem, 5.8vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: #fff;
}



/* Gradient accent word stays amber */
.cl-hero .cl-gradient-text {
    background: linear-gradient(135deg, #ffc221 0%, #ff9a3c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cl-hero__lead {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255,255,255,.68);
    max-width: 56ch;
}

.cl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
}

/* Ghost button on dark bg */
.cl-hero .cl-btn--ghost {
    border-color: rgba(255,255,255,.28);
    color: rgba(255,255,255,.88);
}
.cl-hero .cl-btn--ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

.cl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

/* ── Hero right: exam-question preview card ── */
.cl-hero__visual { position: relative; z-index: 1; }

.cl-hero__card {
    position: relative;
    padding: 24px 26px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    backdrop-filter: blur(20px);
    animation: clFloat 7s ease-in-out infinite;
}

.cl-hero__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cl-hero__card-qnum {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    letter-spacing: 0.04em;
}

.cl-hero__card-title {
    font-family: var(--cl-font-head);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    color: #fff;
}

.cl-hero__card-question {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,.82);
    margin: 0 0 16px;
}

/* Answer options */
.cl-hero__card-options { display: flex; flex-direction: column; gap: 8px; }

.cl-hero__card-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 0.84rem;
    color: rgba(255,255,255,.7);
    transition: background .15s;
}

.cl-hero__card-opt--correct {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.32);
    color: #86efac;
    font-weight: 600;
}

.cl-hero__card-opt-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    color: rgba(255,255,255,.8);
}

.cl-hero__card-opt--correct .cl-hero__card-opt-letter {
    background: rgba(34,197,94,.25);
    color: #86efac;
}

.cl-hero__card-opt--correct .cl-hero__card-opt-check {
    margin-left: auto;
    color: #4ade80;
    font-size: 0.95rem;
}

.cl-hero__card-meta {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    margin-bottom: 0;
}

.cl-hero__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.cl-hero__card-votes {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 5px;
}
.cl-hero__card-votes i { color: var(--cl-secondary); }

.cl-hero__card-bars { display: flex; align-items: center; gap: 12px; }
.cl-hero__card-score {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
}

/* Floating badge */
.cl-hero__floater {
    position: absolute;
    top: -18px;
    right: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--cl-radius-md);
    background: linear-gradient(135deg, #ffc221, #ff9a3c);
    color: #031f42;
    box-shadow: 0 16px 40px rgba(255,194,33,.35);
    font-size: 0.78rem;
    font-weight: 800;
    z-index: 9;
}
.cl-hero__floater i  { font-size: 1.3rem; margin-bottom: 2px; }
.cl-hero__floater strong { font-size: 1.5rem; font-weight: 800; line-height: 1; }

/* ==========================================================================
   12. Stats bar — dark navy, continuation of hero
   ========================================================================== */
.cl-stats-bar {
    background: #021a38;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 0;
}
.cl-stats-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0;
}
.cl-stats-bar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 36px;
}
.cl-stats-bar__item i {
    font-size: 1.5rem;
    color: var(--cl-secondary);
    opacity: .85;
}
.cl-stats-bar__item strong {
    font-family: var(--cl-font-head);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
}
.cl-stats-bar__item span {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cl-stats-bar__divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.08);
}

/* ==========================================================================
   13. Stat pills
   ========================================================================== */
.cl-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--cl-radius-md);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--cl-border);
}
.cl-stat-pill strong {
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cl-ink);
}
.cl-stat-pill span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cl-muted);
    line-height: 1.3;
}

/* ==========================================================================
   14. Features grid
   ========================================================================== */
.cl-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cl-feature-card {
    padding: 28px 26px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: var(--cl-surface);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-feature-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }

.cl-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cl-radius-sm);
    margin-bottom: 18px;
    font-size: 1.3rem;
}

.cl-feature-card--blue  .cl-feature-card__icon { background: rgba(0,113,220,.12); color: var(--cl-blue); }
.cl-feature-card--coral .cl-feature-card__icon { background: var(--cl-coral-l); color: var(--cl-coral); }
.cl-feature-card--mint  .cl-feature-card__icon { background: var(--cl-mint-l); color: #2a7d71; }
.cl-feature-card--gold  .cl-feature-card__icon { background: var(--cl-gold-l); color: #8a5e0a; }

.cl-feature-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.cl-feature-card__desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--cl-muted);
}

/* ==========================================================================
   15. Certification cards grid
   ========================================================================== */
.cl-certs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.cl-certs-grid--full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cl-cert-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
}
.cl-cert-card:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow); }

.cl-cert-card__thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #f0f6f5);
    border-top-left-radius: var(--cl-radius-xl);
    border-top-right-radius: var(--cl-radius-xl);
}
.cl-cert-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}


.cl-cert-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(0, 113, 220, 0.2);
}

.cl-cert-card__badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0, 113, 220, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}
.cl-cert-card:hover .cl-cert-card__badge { opacity: 1; transform: translateY(0); }
.cl-cert-card__badge--resume {
    background: rgba(27, 128, 118, 0.92);
    opacity: 1;
    transform: translateY(0);
}

.cl-cert-card__sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--cl-radius-full);
    background: rgb(154 16 3 / 94%);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(244, 108, 95, 0.24);
    backdrop-filter: blur(6px);
}

/* Color accents on top border */
.cl-cert-card--blue  { border-top: 3px solid var(--cl-blue); }
.cl-cert-card--coral { border-top: 3px solid var(--cl-coral); }
.cl-cert-card--mint  { border-top: 3px solid var(--cl-mint); }
.cl-cert-card--gold  { border-top: 3px solid var(--cl-gold); }

.cl-cert-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #cccccc40;
}

.cl-cert-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.cl-cert-card__desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--cl-muted);
}

.cl-cert-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 26px;
}
.cl-cert-card__price-current {
    color: var(--cl-blue);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}
.cl-cert-card__price-original {
    color: var(--cl-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: line-through;
}
.cl-cert-card__price--free .cl-cert-card__price-current {
    color: #15803d;
    font-size: 0.92rem;
}

.cl-cert-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cl-muted);
    margin-top: auto;
    padding-top: 8px;
}
.cl-cert-card__meta i { color: var(--cl-blue); }

/* ==========================================================================
   15b. Filter bar (practice-exams)
   ========================================================================== */
.cl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.cl-filter-search {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}
.cl-filter-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.cl-filter-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-size: 0.88rem;
    font-family: inherit;
    background: #fff;
    color: var(--cl-ink);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-filter-search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.12);
}
.cl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--cl-radius-full);
    border: 1px solid var(--cl-border);
    background: #fff;
    color: var(--cl-muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--cl-ease), background var(--cl-ease), color var(--cl-ease);
}
.cl-filter-pill:hover {
    border-color: var(--cl-blue);
    color: var(--cl-blue);
}
.cl-filter-pill.is-active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
}
.cl-cert-card--hidden { display: none; }
.cl-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 0;
    color: var(--cl-muted);
}
.cl-filter-empty i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 12px;
}
.cl-filter-empty p { font-size: 0.95rem; margin: 0; }

/* ==========================================================================
   16. How-it-works steps
   ========================================================================== */
.cl-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.cl-step {
    flex: 1;
    min-width: 200px;
    padding: 28px 24px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: var(--cl-surface);
}

.cl-step__num {
    font-family: var(--cl-font-head);
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(0, 113, 220, 0.15);
    margin-bottom: 14px;
    letter-spacing: -0.06em;
}

.cl-step h3 {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.cl-step p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--cl-muted);
}

.cl-step__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: var(--cl-muted);
    font-size: 1.2rem;
    align-self: center;
}

/* ==========================================================================
   17. CTA section
   ========================================================================== */
.cl-cta {
    padding: 80px 0;
    background: var(--cl-dark);
    position: relative;
    overflow: hidden;
}

.cl-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.cl-cta__headline {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1.05;
    max-width: 14ch;
}

.cl-cta__lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,.55);
    max-width: 58ch;
}

.cl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cl-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.25;
}
.cl-cta__glow--left  { left: -100px; bottom: -100px; background: var(--cl-blue); }
.cl-cta__glow--right { right: -100px; top: -100px;  background: var(--cl-coral); }

/* ==========================================================================
   18. Page heroes
   ========================================================================== */
.cl-page-hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 20%, rgba(143,224,211,.2), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 60%, var(--cl-bg) 100%);
}

.cl-page-hero--sm  { padding: 40px 0 32px; }

.cl-page-hero--dark {
    background: var(--cl-dark);
    padding: 60px 0 50px;
}
.cl-page-hero--dark .cl-kicker--gold {
    background: rgba(255,194,33,.14);
    color: #ffd750;
    border: 1px solid rgba(255,194,33,.28);
}

.cl-page-hero--exams {
    background:
        radial-gradient(circle at 10% 90%, rgba(0,113,220,.08), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(244,108,95,.1), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
}

.cl-page-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cl-page-hero__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.0;
    color: var(--cl-ink);
    margin: 8px 0;
}
.cl-page-hero__heading--light { color: #fff; }

.cl-page-hero__lead {
    font-size: 1rem;
    color: var(--cl-muted);
}
.cl-page-hero__lead--muted { color: rgba(255,255,255,.55); }

.cl-page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* ==========================================================================
   19. Marquee
   ========================================================================== */
.cl-marquee {
    overflow: hidden;
    padding: 16px 0;
    background: linear-gradient(135deg, var(--cl-coral), var(--cl-blue));
}
.cl-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: clMarquee 26s linear infinite;
}
.cl-marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.cl-marquee__track span::after {
    content: "·";
    color: var(--cl-coral);
    font-size: 1.2rem;
}

/* ==========================================================================
   20. Featured exam block
   ========================================================================== */
.cl-featured-exam {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 28px 32px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: rgba(255,255,255,.86);
    box-shadow: var(--cl-shadow-sm);
    position: relative;
    flex-wrap: wrap;
}

.cl-featured-exam__badge {
    position: absolute;
    top: -12px;
    left: 28px;
    padding: 5px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cl-featured-exam__body { flex: 1; min-width: 200px; }

.cl-featured-exam__title {
    font-family: var(--cl-font-head);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin: 6px 0 8px;
}

.cl-featured-exam__desc {
    font-size: 0.9rem;
    color: var(--cl-muted);
    line-height: 1.7;
}

.cl-featured-exam__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cl-muted);
}
.cl-featured-exam__meta i { color: var(--cl-blue); }

/* ==========================================================================
   21. Exam format cards
   ========================================================================== */
.cl-formats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cl-format-card {
    position: relative;
    overflow: hidden;
    padding: 28px 24px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease), background var(--cl-ease);
}
.cl-format-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.12);
    box-shadow: 0 28px 60px rgba(0,0,0,.3);
}

.cl-format-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cl-radius-sm);
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.cl-format-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--cl-radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cl-format-card h3 {
    font-family: var(--cl-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.cl-format-card p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
}

/* body-text wrapper — transparent on desktop, used for flex layout on mobile */
.cl-format-card__body-text { display: contents; }

.cl-format-card--blue  .cl-format-card__icon { background: rgba(109,140,255,.2); color: var(--cl-blue-l); }
.cl-format-card--blue  .cl-format-card__tag  { background: rgba(0,113,220,.2); color: var(--cl-blue-l); }

.cl-format-card--coral .cl-format-card__icon { background: rgba(244,108,95,.15); color: var(--cl-coral); }
.cl-format-card--coral .cl-format-card__tag  { background: rgba(244,108,95,.15); color: var(--cl-coral); }

.cl-format-card--mint  .cl-format-card__icon { background: rgba(143,224,211,.15); color: var(--cl-mint); }
.cl-format-card--mint  .cl-format-card__tag  { background: rgba(143,224,211,.15); color: var(--cl-mint); }

/* ==========================================================================
   22. Filter bar
   ========================================================================== */
.cl-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.cl-filter-bar__label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.cl-filter-bar__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   23. Exam setup card
   ========================================================================== */
.cl-exam-setup-card {
    padding: 36px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    box-shadow: var(--cl-shadow-sm);
}

/* ==========================================================================
   24. Auth page
   ========================================================================== */
.cl-auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    padding: 60px 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,113,220,.08), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
}

.cl-auth-page__brand {
    text-align: center;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

.cl-auth-card {
    background: #fff;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    box-shadow: var(--cl-shadow);
    overflow: hidden;
}

.cl-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--cl-border);
}

.cl-auth-tab {
    flex: 1;
    padding: 16px;
    font-family: var(--cl-font-body);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--cl-muted);
    border: none;
    background: none;
    cursor: pointer;
    transition: color var(--cl-ease), border-bottom var(--cl-ease);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.cl-auth-tab:hover { color: var(--cl-ink); }
.cl-auth-tab--active { color: var(--cl-blue); border-bottom-color: var(--cl-blue); }

.cl-auth-panel { padding: 30px; }
.cl-auth-panel--hidden { display: none; }

.cl-auth-heading {
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.cl-auth-sub {
    font-size: 0.9rem;
    color: var(--cl-muted);
    margin-bottom: 24px;
}

.cl-auth-page__back {
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    font-weight: 700;
}
.cl-auth-page__back a {
    color: var(--cl-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--cl-ease);
}
.cl-auth-page__back a:hover { color: var(--cl-blue); }

/* ==========================================================================
   25. Error page (404)
   ========================================================================== */
.cl-error-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
}

.cl-error-page__code {
    font-family: var(--cl-font-head);
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.85;
    color: rgba(0, 113, 220, 0.1);
    margin-bottom: 16px;
}

.cl-error-page__heading {
    font-family: var(--cl-font-head);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
}

.cl-error-page__lead {
    font-size: 1rem;
    color: var(--cl-muted);
    max-width: 50ch;
    margin: 0 auto 30px;
    line-height: 1.8;
}

.cl-error-page__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   26. Footer
   ========================================================================== */
.cl-footer {
    background: #010f22;
    color: rgba(255,255,255,.6);
    position: relative;
    overflow: hidden;
    padding-top: 72px;
}

.cl-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cl-blue) 0%, var(--cl-blue-l) 45%, var(--cl-secondary) 100%);
}

.cl-footer::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,113,220,.18) 0%, rgba(0,113,220,0) 72%);
    pointer-events: none;
}

.cl-footer__top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 28px;
}

.cl-footer__brand .cl-brand {
    margin-bottom: 18px;
    display: inline-flex;
}
.cl-footer__brand .cl-brand__title,
.cl-footer__brand .cl-brand__sub { color: rgba(255,255,255,.7); }

.cl-footer__brand .cl-brand__title {
    font-size: 1.55rem;
    color: #fff;
}

.cl-footer__tagline {
    font-size: 0.88rem;
    line-height: 1.8;
    color: rgba(255,255,255,.4);
    max-width: 38ch;
}

.cl-footer__col { display: flex; flex-direction: column; }

.cl-footer__col h4,
.cl-footer__heading {
    position: relative;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 22px;
    padding-bottom: 14px;
}
.cl-footer__col h4::after,
.cl-footer__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--cl-blue-l), var(--cl-secondary));
    border-radius: var(--cl-radius-full);
}

.cl-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-footer__col ul li a,
.cl-footer__col a {
    font-size: 0.88rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color var(--cl-ease), gap var(--cl-ease);
}
.cl-footer__col ul li a::before,
.cl-footer__col a::before {
    content: '\203a';
    display: inline-block;
    width: 0;
    opacity: 0;
    color: var(--cl-blue-l);
    transform: translateX(-4px);
    transition: width var(--cl-ease), opacity var(--cl-ease), transform var(--cl-ease);
}
.cl-footer__col ul li a:hover,
.cl-footer__col a:hover {
    color: #fff;
}
.cl-footer__col ul li a:hover::before,
.cl-footer__col a:hover::before {
    width: 12px;
    opacity: 1;
    transform: translateX(0);
}

.cl-footer__bottom {
    position: relative;
    font-size: 0.8rem;
    color: rgba(255,255,255,.28);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cl-footer__bottom p { margin: 0; }
.cl-footer__bottom-note {
    color: rgba(255,255,255,.4);
}


/* ==========================================================================
   27. Progress bar
   ========================================================================== */
.cl-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    overflow: hidden;
}
.cl-progress-bar__fill {
    height: 100%;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(90deg, var(--cl-blue-d), var(--cl-blue));
    transition: width 0.4s ease;
}

/* ==========================================================================
   28. Empty state
   ========================================================================== */
.cl-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--cl-muted);
}
.cl-empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.4;
}
.cl-empty-state h3 {
    font-family: var(--cl-font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 8px;
}
.cl-empty-state p { font-size: 0.9rem; }

/* ==========================================================================
   29. Keyframe animations
   ========================================================================== */
@keyframes clFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-12px); }
}

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

@keyframes clMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   30. Body variants
   ========================================================================== */
.cl-body { }

.cl-body--exam #cl-footer { display: none; }

/* ==========================================================================
   31. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-hero__grid    { grid-template-columns: 1fr; }
    .cl-hero__visual  { display: none; }
    .cl-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-formats-grid  { grid-template-columns: 1fr; gap: 14px; }
    .cl-footer__top   { grid-template-columns: 1fr 1fr; gap: 32px; }
    .cl-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .cl-section       { padding: 48px 0; }
    .cl-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-steps         { flex-direction: column; }
    .cl-step__arrow   { transform: rotate(90deg); }
    .cl-stats-bar__inner   { flex-direction: row; flex-wrap: nowrap; padding: 18px 0; }
    .cl-stats-bar__divider  { display: none; }
    .cl-stats-bar__item     { flex: 1; flex-direction: column; align-items: center;
                               text-align: center; padding: 10px 6px; gap: 3px;
                               border-right: 1px solid rgba(255,255,255,.14); }
    .cl-stats-bar__item:last-child { border-right: none; }
    .cl-stats-bar__item strong { font-size: 1.45rem; }
    .cl-stats-bar__item span   { font-size: 0.68rem; letter-spacing: 0.06em; }
    .cl-footer__col ul li a { font-size: 0.85rem; }

    .cl-nav__links    { display: none; }
    .cl-nav__toggle   { display: flex; }
    .cl-nav__actions  { margin-left: auto; }

    /* Mobile nav open state */
    .cl-nav--open .cl-nav__links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        background: #fff;
        border-radius: var(--cl-radius-lg);
        box-shadow: var(--cl-shadow);
        padding: 16px;
        border: 1px solid var(--cl-border);
    }

    /* Filter bar stacks vertically */
    .cl-filter-bar { flex-direction: column; align-items: flex-start; }

    /* Footer bottom row stacks */
    .cl-footer__bottom { flex-direction: column; align-items: center; text-align: center; }

    /* Featured exam — reduce padding for narrow screens */
    .cl-featured-exam { padding: 28px 16px 20px; }
    .cl-featured-exam__title { font-size: 1.35rem; }

    /* Cert card — compact for 2-col layout */
    .cl-cert-card__thumb   { height: 130px; }
    .cl-cert-card__body    { padding: 14px 14px 16px; gap: 6px; }
    .cl-cert-card__title   { font-size: 0.92rem; }
    .cl-cert-card__desc    { font-size: 0.8rem; line-height: 1.5; }
    .cl-cert-card__price-current { font-size: 0.92rem; }
    .cl-cert-card__price-original { font-size: 0.72rem; }
    .cl-cert-card__meta    { font-size: 0.75rem; gap: 8px; padding-top: 4px; }

    /* Feature card — compact for 2-col layout */
    .cl-feature-card        { padding: 20px 16px; }
    .cl-feature-card__icon  { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 12px; }
    .cl-feature-card__title { font-size: 0.95rem; }
    .cl-feature-card__desc  { font-size: 0.82rem; line-height: 1.6; }

    /* Section head — stack heading + action button */
    .cl-section__head:not(.cl-section__head--center) { flex-direction: column; gap: 12px; }

    /* Hero stat pills — compact */
    .cl-stat-pill         { padding: 8px 12px; }
    .cl-stat-pill strong  { font-size: 1.2rem; }
    .cl-stat-pill span    { font-size: 0.74rem; }

    /* Format cards (training mode) — horizontal row layout on mobile */
    .cl-formats-grid { gap: 10px; }
    .cl-format-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 16px 18px;
        gap: 16px;
    }
    .cl-format-card__icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        margin-bottom: 0;
        font-size: 1.1rem;
        border-radius: var(--cl-radius-xs);
        align-self: center;
    }
    .cl-format-card__body-text { display: block; flex: 1; }
    .cl-format-card__tag   { margin-bottom: 5px; font-size: 0.65rem; }
    .cl-format-card h3     { font-size: 1rem; margin-bottom: 4px; }
    .cl-format-card p      { font-size: 0.82rem; line-height: 1.55; }

}

@media (max-width: 480px) {
    .cl-hero__headline { font-size: 3rem; }
    .cl-heading        { font-size: 1.8rem; }
    .cl-page-hero__heading { font-size: 2.2rem; }
    .cl-cta__headline  { font-size: 2rem; }
    .cl-btn--lg        { padding: 14px 22px; font-size: 0.95rem; }
}

/* ==========================================================================
   32. Mobile — iPhone 12/13/14/15/16/17 (390–430 px)
   ========================================================================== */
@media (max-width: 430px) {

    /* ── Shell ─────────────────────────────────────────────────── */
    .cl-shell,
    .cl-shell--narrow { width: calc(100% - 24px); }

    /* ── Nav ───────────────────────────────────────────────────── */
    .cl-nav { padding: 10px 0 4px; }
    .cl-nav__inner { padding: 8px 12px; gap: 10px; }
    .cl-nav__actions { gap: 6px; }
    .cl-nav__actions .cl-btn--sm { padding: 8px 12px; font-size: 0.8rem; }
    .cl-nav__user { font-size: 0.8rem; max-width: 100px; overflow: hidden;
                    white-space: nowrap; text-overflow: ellipsis; }

    /* ── Page hero ─────────────────────────────────────────────── */
    .cl-page-hero        { padding: 28px 0 20px; }
    .cl-page-hero--sm    { padding: 24px 0 16px; }
    .cl-page-hero__heading { font-size: 1.7rem; margin: 4px 0; }
    .cl-page-hero__lead  { font-size: 0.88rem; }

    /* ── Sections ───────────────────────────────────────────────── */
    .cl-section    { padding: 32px 0; }
    .cl-section--sm { padding: 24px 0; }

    /* ── Cert cards ─────────────────────────────────────────────── */
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cl-features-grid { gap: 10px; }
    .cl-cert-card__thumb { height: 100px; }
    .cl-cert-card__desc  { display: none; }
    .cl-cert-card__sale-badge { top: 8px; padding: 5px 8px; font-size: 0.68rem; }
    .cl-cert-card__price { gap: 5px; }
    .cl-cert-card__price-current { font-size: 0.86rem; }

    /* ── Hero lead ──────────────────────────────────────────────── */
    .cl-hero__lead { font-size: 0.9rem; }

    /* ── CTA actions — stack full-width on phone ────────────────── */
    .cl-cta__actions { flex-direction: column; align-items: stretch; }

    /* ── Auth card ──────────────────────────────────────────────── */
    .cl-auth-panel { padding: 20px 16px; }
    .cl-auth-tab   { padding: 13px 8px; font-size: 0.82rem; }

    /* ── Touch targets (iOS minimum 44px) ───────────────────────── */
    .cl-btn { font-size: 0.88rem; padding: 11px 18px; min-height: 44px; }
    .cl-btn--primary { font-size: 0.9rem; }

    /* ── Hero ──────────────────────────────────────────────────── */
    .cl-hero               { padding: 28px 0 36px; }
    .cl-hero__headline     { font-size: 2.6rem; }
    .cl-hero__actions      { flex-direction: column; }
    .cl-hero__actions .cl-btn { width: 100%; }
    .cl-hero__stats        { gap: 8px; }

    /* ── Featured exam ──────────────────────────────────────────── */
    .cl-featured-exam         { padding: 28px 14px 20px; gap: 12px; }
    .cl-featured-exam__title  { font-size: 1.2rem; }
    .cl-featured-exam__meta   { gap: 10px; }

    /* ── Exam setup card ────────────────────────────────────────── */
    .cl-exam-setup-card { padding: 20px 14px; }

    /* ── CTA ────────────────────────────────────────────────────── */
    .cl-cta { padding: 48px 0; }

    /* ── Footer ─────────────────────────────────────────────────── */
    .cl-footer { padding: 44px 0 20px; }
    .cl-footer__top { grid-template-columns: 1fr; gap: 32px; }
    .cl-footer__brand { grid-column: auto; }

    /* ── Stats bar ──────────────────────────────────────────────── */
    .cl-stats-bar__item strong { font-size: 1.25rem; }
    .cl-stats-bar__item span   { font-size: 0.62rem; }

    /* ── Section heads ──────────────────────────────────────────── */
    .cl-section__head { margin-bottom: 24px; }

    /* ── Dark page hero (Leaderboard) ──────────────────────────── */
    .cl-page-hero--dark { padding: 36px 0 28px; }

    /* ── Exam bar ───────────────────────────────────────────────── */
    .cl-exambar__inner  { gap: 8px; padding: 10px 0; }
    .cl-exambar__timer  { padding: 8px 14px; font-size: 0.88rem; }
    .cl-exambar .cl-brand__title { font-size: 1.3rem; }
    .cl-exambar__exit { display: none; }
}

/* ==========================================================================
   33. Exam runner — single-viewport layout (≤ 768 px)
   ========================================================================== */

/* "Nộp bài" button injected into exambar — hidden on desktop */
.er-mobile-finish {
    display: none;
    background: linear-gradient(135deg, #7f0000, #c62828);
    color: #fff;
    box-shadow: 0 4px 14px rgba(198,40,40,.22);
    border: none;
}
.er-mobile-finish:hover { opacity: .88; }

@media (max-width: 768px) {
    /* Body fills exactly the visible screen — no outer scroll */
    .cl-body--exam {
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Exambar no longer needs sticky — it's the first flex child */
    .cl-body--exam .cl-exambar { flex-shrink: 0; position: relative; top: auto; }
    /* Main fills the rest of the screen */
    .cl-body--exam #cl-main {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Show Nộp bài in the exambar */
    .er-mobile-finish { display: inline-flex; }
    /* Hide Exit button on mobile */
    .cl-exambar__exit { display: none; }
}

/* ==========================================================================
   34. Safe-area insets — iPhone notch / Dynamic Island / home indicator
   Requires viewport-fit=cover in the meta viewport tag.
   ========================================================================== */
@supports (padding: env(safe-area-inset-top)) {
    /* Push nav below the status bar / notch */
    #cl-header {
        padding-top: env(safe-area-inset-top);
    }

    /* Exam layout: exambar absorbs the notch */
    .cl-body--exam .cl-exambar {
        padding-top: env(safe-area-inset-top);
    }

    /* Footer: clear the home-indicator bar at the bottom */
    .cl-footer {
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    /* Exam body: prevent question content hiding behind the home indicator */
    .cl-body--exam {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==========================================================================
   35. Breadcrumb
   ========================================================================== */
.cl-breadcrumb-bar {
    border-bottom: 1px solid var(--cl-border);
    background: var(--cl-bg);
    padding: 10px 0;
}
.cl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cl-breadcrumb__item {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--cl-ease);
}
.cl-breadcrumb__item:hover { color: var(--cl-ink); }
.cl-breadcrumb__item--current { color: var(--cl-ink); pointer-events: none; }
.cl-breadcrumb__sep {
    color: rgba(22,32,46,.2);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   36. Blog — listing layout & hero
   ========================================================================== */
.cl-blog-hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 10%, rgba(244,108,95,.12), transparent 30%),
        radial-gradient(circle at 10% 80%, rgba(0,113,220,.08), transparent 30%),
        linear-gradient(180deg, #fff8f4 0%, #f5f8ff 60%, var(--cl-bg) 100%);
}
.cl-blog-hero__inner { display: flex; flex-direction: column; gap: 16px; }
.cl-blog-hero__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.0;
    color: var(--cl-ink);
}
.cl-blog-hero__lead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
    max-width: 62ch;
}
.cl-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
   
}
.cl-blog-layout--full { grid-template-columns: 1fr; }

/* ==========================================================================
   37. Blog — post cards grid
   ========================================================================== */
.cl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.cl-blog-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-blog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
}
.cl-blog-card:hover { transform: translateY(-5px); box-shadow: var(--cl-shadow); }
.cl-blog-card__thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
    flex-shrink: 0;
}
.cl-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cl-blog-card:hover .cl-blog-card__thumb img { transform: scale(1.05); }
.cl-blog-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(0,113,220,.15);
}
.cl-blog-card__category {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none;
}
.cl-blog-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-blog-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
}
.cl-blog-card:hover .cl-blog-card__title { color: var(--cl-blue); }
.cl-blog-card__excerpt {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-muted);
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cl-border);
}
.cl-blog-card__meta i { color: var(--cl-blue); font-size: 0.82rem; }
.cl-blog-card__read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cl-blue);
    font-size: 0.82rem;
    font-weight: 800;
    margin-top: 4px;
    text-decoration: none;
    transition: gap var(--cl-ease);
}
.cl-blog-card__read:hover { gap: 8px; }

/* ==========================================================================
   38. Blog — featured post card
   ========================================================================== */
.cl-featured-post {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    box-shadow: var(--cl-shadow);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    margin-bottom: 40px;
}
.cl-featured-post:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-lg); }
.cl-featured-post__thumb {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
}
.cl-featured-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.cl-featured-post:hover .cl-featured-post__thumb img { transform: scale(1.04); }
.cl-featured-post__thumb-placeholder {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(0,113,220,.1);
}
.cl-featured-post__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cl-featured-post__body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}
.cl-featured-post__category {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    color: var(--cl-blue-d);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    text-decoration: none;
}
.cl-featured-post__title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.25;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
}
.cl-featured-post:hover .cl-featured-post__title { color: var(--cl-blue); }
.cl-featured-post__excerpt {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--cl-muted);
}
.cl-featured-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cl-muted);
    padding-top: 8px;
    border-top: 1px solid var(--cl-border);
}
.cl-featured-post__meta i { color: var(--cl-blue); }

/* ==========================================================================
   39. Blog — sidebar
   ========================================================================== */
.cl-blog-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cl-sidebar-widget {
    padding: 24px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
}
.cl-sidebar-widget__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 16px;
}
.cl-sidebar-search { position: relative; }
.cl-sidebar-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.cl-sidebar-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--cl-bg);
    color: var(--cl-ink);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
    box-sizing: border-box;
}
.cl-sidebar-search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
}
.cl-sidebar-cats { display: flex; flex-direction: column; gap: 6px; }
.cl-sidebar-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--cl-radius-xs);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-sidebar-cat:hover { background: rgba(0,113,220,.06); color: var(--cl-blue); }
.cl-sidebar-cat--active { background: rgba(0,113,220,.1); color: var(--cl-blue-d); font-weight: 700; }
.cl-sidebar-cat__count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-bg);
    color: var(--cl-muted);
}
.cl-sidebar-recent { display: flex; flex-direction: column; gap: 14px; }
.cl-sidebar-recent-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: var(--cl-ink);
    transition: opacity var(--cl-ease);
}
.cl-sidebar-recent-item:hover { opacity: 0.72; }
.cl-sidebar-recent-item__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--cl-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
}
.cl-sidebar-recent-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-sidebar-recent-item__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: rgba(0,113,220,.2);
}
.cl-sidebar-recent-item__title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-sidebar-recent-item__date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cl-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   40. Blog — article hero (detail page)
   ========================================================================== */
.cl-article-hero {
    padding: 52px 0 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(244,108,95,.1), transparent 30%),
        linear-gradient(180deg, #fff 0%, var(--cl-bg) 100%);
}
.cl-article-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}
.cl-article-hero__category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    color: var(--cl-blue-d);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    transition: background var(--cl-ease);
}
.cl-article-hero__category:hover { background: rgba(0,113,220,.18); }
.cl-article-hero__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--cl-ink);
}
.cl-article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cl-border);
}
.cl-article-hero__meta i { color: var(--cl-blue); }
.cl-article-hero__author {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-article-hero__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.cl-article-featured-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 0 0 var(--cl-radius-xl) var(--cl-radius-xl);
    display: block;
}

/* ==========================================================================
   41. Blog — article two-column layout with TOC
   ========================================================================== */
.cl-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: start;
    padding: 48px 0 72px;
}

/* ==========================================================================
   42. Blog — prose content (article body)
   ========================================================================== */
.cl-prose {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--cl-ink);
}
.cl-prose h1, .cl-prose h2, .cl-prose h3,
.cl-prose h4, .cl-prose h5, .cl-prose h6 {
    font-family: var(--cl-font-head);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--cl-ink);
    margin-top: 2em;
    margin-bottom: 0.6em;
    scroll-margin-top: 90px;
}
.cl-prose h1 { font-size: 2rem; }
.cl-prose h2 { font-size: 1.55rem; border-bottom: 1px solid var(--cl-border); padding-bottom: 0.4em; }
.cl-prose h3 { font-size: 1.25rem; }
.cl-prose h4 { font-size: 1.05rem; }
.cl-prose p  { margin-bottom: 1.4em; }
.cl-prose a  {
    color: var(--cl-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--cl-ease);
}
.cl-prose a:hover { color: var(--cl-blue-d); }
.cl-prose strong, .cl-prose b { font-weight: 700; }
.cl-prose em, .cl-prose i { font-style: italic; }
.cl-prose ul, .cl-prose ol { margin: 0 0 1.4em 1.5em; }
.cl-prose ul { list-style: disc; }
.cl-prose ol { list-style: decimal; }
.cl-prose li { margin-bottom: 0.4em; }
.cl-prose li > ul, .cl-prose li > ol { margin-top: 0.4em; margin-bottom: 0; }
.cl-prose blockquote {
    border-left: 4px solid var(--cl-blue);
    background: rgba(0,113,220,.04);
    padding: 16px 20px;
    border-radius: 0 var(--cl-radius-xs) var(--cl-radius-xs) 0;
    margin: 1.6em 0;
    font-style: italic;
    color: var(--cl-muted);
}
.cl-prose blockquote p { margin-bottom: 0; }
.cl-prose code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.88em;
    background: rgba(0,113,220,.07);
    color: var(--cl-blue-d);
    padding: 2px 6px;
    border-radius: 5px;
}
.cl-prose pre {
    background: var(--cl-dark);
    color: #e8eaf0;
    padding: 20px 24px;
    border-radius: var(--cl-radius-md);
    overflow-x: auto;
    margin: 1.6em 0;
    font-size: 0.88rem;
    line-height: 1.65;
}
.cl-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; }
.cl-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.92rem; }
.cl-prose thead tr { background: rgba(0,113,220,.06); }
.cl-prose th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 700;
    border-bottom: 2px solid var(--cl-border);
    color: var(--cl-ink);
}
.cl-prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cl-border);
    color: var(--cl-muted);
}
.cl-prose tr:last-child td { border-bottom: none; }
.cl-prose img {
    border-radius: var(--cl-radius-md);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em auto;
}
.cl-prose hr { border: none; border-top: 1px solid var(--cl-border); margin: 2.4em 0; }
.cl-prose iframe { border-radius: var(--cl-radius-md); max-width: 100%; display: block; margin: 1.6em auto; }

/* Exam request form */
.cl-exam-request { padding: clamp(54px, 7vw, 90px) 0; background: #f6f8fc; }
.cl-exam-request__card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr); gap: clamp(36px, 6vw, 84px); padding: clamp(28px, 5vw, 64px); border: 1px solid var(--cl-border); border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(23, 32, 51, .08); }
.cl-exam-request__copy h2 { margin: 20px 0 14px; color: var(--cl-ink); font-family: var(--cl-font-display); font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; letter-spacing: -.035em; }
.cl-exam-request__copy p { color: var(--cl-muted); line-height: 1.75; }
.cl-exam-request__form { display: grid; gap: 10px; }
.cl-exam-request__form label { margin-top: 7px; color: var(--cl-ink); font-size: .8rem; font-weight: 800; }
.cl-exam-request__form label span { color: var(--cl-muted); font-weight: 500; }
.cl-exam-request__form input,.cl-exam-request__form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--cl-border); border-radius: 10px; color: var(--cl-ink); background: #fff; font: inherit; transition: border-color .15s, box-shadow .15s; }
.cl-exam-request__form input:focus,.cl-exam-request__form textarea:focus { outline: none; border-color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(37, 83, 255, .1); }
.cl-exam-request__form textarea { resize: vertical; }
.cl-exam-request__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-exam-request__row > div { display: grid; gap: 10px; }
.cl-exam-request__member { margin: 5px 0 0; color: #18713b; font-size: .85rem; font-weight: 700; }
.cl-exam-request__success { margin-bottom: 5px; padding: 12px 14px; border-radius: 10px; color: #18713b; background: #ecfdf3; font-size: .86rem; font-weight: 700; }
.cl-exam-request__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cl-exam-request__form .cl-btn { justify-self: start; margin-top: 12px; }
@media (max-width: 800px) { .cl-exam-request__card { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cl-exam-request__row { grid-template-columns: 1fr; } .cl-exam-request__card { padding: 24px 18px; border-radius: 18px; } }
/* Homepage exam request floating action and modal */
.cl-exam-request-fab {
    position: fixed;
    right: 94px;
    bottom: 22px;
    z-index: 9999;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg,#ef8b24,#f4a62a);
    box-shadow: 0 14px 34px rgba(205,112,16,.3);
    font: 800 .76rem/1 var(--cl-font-body);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cl-exam-request-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(205,112,16,.4); }
.cl-exam-request-fab i { font-size: 1.25rem; }
.cl-exam-request-modal[hidden] { display: none !important; }
.cl-exam-request-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}
.cl-exam-request-modal.is-open { opacity: 1; }
.cl-exam-request-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8,20,43,.68); backdrop-filter: blur(5px); cursor: default; }
.cl-exam-request-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(620px,100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 34px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(4,17,42,.3);
    transform: translateY(16px) scale(.98);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.cl-exam-request-modal.is-open .cl-exam-request-modal__dialog { transform: none; }
.cl-exam-request-modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--cl-muted); background: #f1f4f9; cursor: pointer; }
.cl-exam-request-modal__dialog h2 { margin: 18px 45px 8px 0; color: var(--cl-ink); font-family: var(--cl-font-display); font-size: clamp(1.55rem,3vw,2.05rem); line-height: 1.18; }
.cl-exam-request-modal__lead { margin: 0 0 18px; color: var(--cl-muted); line-height: 1.65; }
@media (max-width:560px) {
    .cl-exam-request-fab { right: 80px; bottom: max(14px,env(safe-area-inset-bottom)); width: 54px; min-height: 54px; justify-content: center; padding: 0; border-radius: 17px; }
    .cl-exam-request-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cl-exam-request-modal { align-items: end; padding: 10px; }
    .cl-exam-request-modal__dialog { max-height: calc(100vh - 20px); padding: 28px 18px 22px; border-radius: 22px; }
}
@media (prefers-reduced-motion:reduce) {
    .cl-exam-request-fab,.cl-exam-request-modal,.cl-exam-request-modal__dialog { transition: none; }
}


/* ==========================================================================
   43. Blog — TOC (Table of Contents)
   ========================================================================== */
.cl-toc {
    position: sticky;
    top: 80px;
    padding: 22px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.cl-toc::-webkit-scrollbar { width: 4px; }
.cl-toc::-webkit-scrollbar-track { background: transparent; }
.cl-toc::-webkit-scrollbar-thumb { background: var(--cl-border); border-radius: 2px; }
.cl-toc__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-toc__list { display: flex; flex-direction: column; gap: 2px; }
.cl-toc__item { font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
.cl-toc__link {
    display: block;
    padding: 5px 10px;
    border-radius: var(--cl-radius-xs);
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
    border-left: 2px solid transparent;
}
.cl-toc__link:hover { background: rgba(0,113,220,.06); color: var(--cl-ink); }
.cl-toc__link--active { background: rgba(0,113,220,.08); color: var(--cl-blue); border-left-color: var(--cl-blue); }
.cl-toc__link--h3 { padding-left: 22px; font-size: 0.8rem; }
.cl-toc__link--h4 { padding-left: 34px; font-size: 0.76rem; }

/* ==========================================================================
   44. Blog — social share buttons
   ========================================================================== */
.cl-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
    margin: 32px 0;
}
.cl-share__label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 6px;
}
.cl-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--cl-radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--cl-ease), opacity var(--cl-ease);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.cl-share__btn:hover { transform: translateY(-2px); opacity: 0.88; }
.cl-share__btn--fb       { background: #1877f2; }
.cl-share__btn--x        { background: #000; }
.cl-share__btn--linkedin { background: #0a66c2; }
.cl-share__btn--copy     { background: var(--cl-bg); color: var(--cl-ink); border-color: var(--cl-border); }
.cl-share__btn--copy:hover { background: #fff; opacity: 1; }
.cl-share__btn--copy.is-copied { color: #2a7d71; border-color: var(--cl-mint); background: var(--cl-mint-l); }

/* ==========================================================================
   45. Blog — author box
   ========================================================================== */
.cl-author-box {
    display: flex;
    gap: 20px;
    padding: 28px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    margin: 32px 0;
}
.cl-author-box__avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
}
.cl-author-box__body { flex: 1; }
.cl-author-box__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 4px;
}
.cl-author-box__name {
    font-family: var(--cl-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--cl-ink);
}
.cl-author-box__bio { font-size: 0.9rem; line-height: 1.7; color: var(--cl-muted); }

/* ==========================================================================
   46. Blog — related posts
   ========================================================================== */
.cl-related { padding: 48px 0 60px; border-top: 1px solid var(--cl-border); }
.cl-related__head { margin-bottom: 28px; }
.cl-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ==========================================================================
   47. Blog — pagination
   ========================================================================== */
.cl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0;
    flex-wrap: wrap;
}
.cl-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--cl-radius-xs);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--cl-muted);
    background: #fff;
    border: 1px solid var(--cl-border);
    transition: background var(--cl-ease), color var(--cl-ease), border-color var(--cl-ease);
}
.cl-pagination__btn:hover { background: rgba(0,113,220,.06); color: var(--cl-blue); border-color: rgba(0,113,220,.3); }
.cl-pagination__btn--active { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }
.cl-pagination__btn--disabled { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   48. Blog — empty state
   ========================================================================== */
.cl-blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--cl-muted);
    grid-column: 1 / -1;
}
.cl-blog-empty__icon { font-size: 3rem; display: block; margin-bottom: 16px; opacity: 0.3; }
.cl-blog-empty h3 {
    font-family: var(--cl-font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 8px;
}
.cl-blog-empty p { font-size: 0.9rem; max-width: 40ch; margin: 0 auto; }

/* ==========================================================================
   48B. Blog v2 — Hero banner
   ========================================================================== */
.cl-blog-hero-v2 {
    padding: 64px 0 56px;
    background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-3) 60%, #1a3a6c 100%);
    position: relative;
    overflow: hidden;
}
.cl-blog-hero-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(77,163,255,.18), transparent 40%),
        radial-gradient(circle at 8% 80%, rgba(244,108,95,.12), transparent 35%);
    pointer-events: none;
}
.cl-blog-hero-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cl-secondary), transparent);
}
.cl-blog-hero-v2__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cl-blog-hero-v2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cl-secondary);
    margin-bottom: 12px;
}
.cl-blog-hero-v2__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 16px;
}
.cl-blog-hero-v2__lead {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.62);
    max-width: 52ch;
    margin-bottom: 28px;
}
.cl-blog-hero-v2__stats {
    display: flex;
    gap: 32px;
}
.cl-blog-stat { display: flex; flex-direction: column; }
.cl-blog-stat__num {
    font-family: var(--cl-font-head);
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.cl-blog-stat__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
}
.cl-blog-hero-v2__cats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 220px;
}
.cl-blog-hero-v2__cats-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.cl-blog-hero-v2__cat-chips { display: flex; flex-direction: column; gap: 8px; }
.cl-blog-cat-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--cl-radius-xs);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.78);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--cl-ease), border-color var(--cl-ease), color var(--cl-ease);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cl-blog-cat-chip:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.22);
    color: #fff;
}
.cl-blog-cat-chip span {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
}
.cl-blog-cat-chip--all {
    gap: 8px;
    justify-content: flex-start;
    border-color: rgba(77,163,255,.28);
    color: var(--cl-blue-l);
    margin-top: 4px;
}
.cl-blog-cat-chip--all:hover { background: rgba(0,113,220,.22); color: #fff; }

/* Blog body section */
.cl-blog-body { padding: 48px 0 80px; background: var(--cl-bg); }

/* ==========================================================================
   48C. Blog v2 — Spotlight (featured post)
   ========================================================================== */
.cl-spotlight {
    display: block;
    position: relative;
    border-radius: var(--cl-radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    min-height: 440px;
    margin-bottom: 36px;
    box-shadow: var(--cl-shadow);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    will-change: transform;
}
.cl-spotlight:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-lg); }
.cl-spotlight__bg {
    position: absolute;
    inset: 0;
}
.cl-spotlight__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.cl-spotlight:hover .cl-spotlight__bg img { transform: scale(1.04); }
.cl-spotlight__bg-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--cl-dark-3) 0%, var(--cl-dark) 100%);
}
.cl-spotlight__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(3,31,66,.96) 0%,
        rgba(3,31,66,.62) 48%,
        rgba(3,31,66,.18) 100%
    );
}
.cl-spotlight__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 440px;
    padding: 40px;
}
.cl-spotlight__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.cl-spotlight__badge-featured {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cl-spotlight__badge-cat {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cl-spotlight__title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 12px;
    transition: color var(--cl-ease);
}
.cl-spotlight:hover .cl-spotlight__title { color: var(--cl-secondary); }
.cl-spotlight__excerpt {
    font-size: 0.93rem;
    line-height: 1.72;
    color: rgba(255,255,255,.68);
    max-width: 68ch;
    margin-bottom: 22px;
}
.cl-spotlight__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
    flex-wrap: wrap;
}
.cl-spotlight__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,.58);
}
.cl-spotlight__meta i { color: var(--cl-secondary); }
.cl-spotlight__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-secondary);
    color: var(--cl-dark);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background var(--cl-ease);
    flex-shrink: 0;
}
.cl-spotlight:hover .cl-spotlight__cta { background: #fff; }

/* ==========================================================================
   37B. Blog v2 — Article cards
   ========================================================================== */
.cl-article-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
    height: 100%;
}
.cl-article-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }
.cl-article-card__thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff 0%, #fff8f4 100%);
    flex-shrink: 0;
}
.cl-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cl-article-card:hover .cl-article-card__thumb img { transform: scale(1.06); }
.cl-article-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(0,113,220,.12);
}
.cl-article-card__cat {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-secondary);
    color: var(--cl-dark);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.cl-article-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-article-card__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-article-card:hover .cl-article-card__title { color: var(--cl-blue); }
.cl-article-card__excerpt {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.cl-article-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cl-border);
}
.cl-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cl-muted);
}
.cl-article-card__meta i { color: var(--cl-blue); font-size: 0.8rem; }
.cl-article-card__arrow {
    font-size: 1.2rem;
    color: var(--cl-blue);
    opacity: 0.35;
    transition: opacity var(--cl-ease), transform var(--cl-ease);
}
.cl-article-card:hover .cl-article-card__arrow { opacity: 1; transform: translateX(3px); }

/* ==========================================================================
   49. Static page layout
   ========================================================================== */
.cl-static-page { padding: 56px 0 80px; }
.cl-static-page__hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 20%, rgba(143,224,211,.18), transparent 30%),
        linear-gradient(180deg, #fff 0%, var(--cl-bg) 100%);
}
.cl-static-page__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
    color: var(--cl-ink);
    margin-bottom: 12px;
}
.cl-static-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 56px;
    align-items: start;
    padding: 48px 0 80px;
}
.cl-static-page__layout--full {
    display: block;
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 0 80px;
}
.cl-static-page__toc {
    position: sticky;
    top: 80px;
}

/* ==========================================================================
   50. Responsive — Blog & Pages additions
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-blog-layout      { grid-template-columns: 1fr; }
    .cl-blog-sidebar     { position: static; }
    .cl-article-layout   { grid-template-columns: 1fr; }
    .cl-toc              { position: static; max-height: none; }
    .cl-related__grid    { grid-template-columns: repeat(2, 1fr); }
    .cl-featured-post    { grid-template-columns: 1fr; }
    .cl-featured-post__thumb { min-height: 240px; }
    .cl-static-page__layout { grid-template-columns: 1fr; }
    .cl-static-page__toc { position: static; }
    /* Blog v2 hero */
    .cl-blog-hero-v2__inner { grid-template-columns: 1fr; gap: 32px; }
    .cl-blog-hero-v2__cats  { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .cl-blog-hero-v2__cat-chips { flex-direction: row; flex-wrap: wrap; }
    .cl-blog-cat-chip { flex: 0 0 auto; }
}
@media (max-width: 768px) {
    .cl-blog-grid        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-related__grid    { grid-template-columns: 1fr; }
    .cl-author-box       { flex-direction: column; }
    .cl-blog-grid--2col  { grid-template-columns: 1fr; }
    /* Blog v2 */
    .cl-blog-hero-v2 { padding: 48px 0 40px; }
    .cl-spotlight__content { min-height: 360px; padding: 28px; }
    .cl-spotlight__excerpt { display: none; }
    .cl-spotlight__footer  { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .cl-blog-grid        { grid-template-columns: 1fr; }
    .cl-blog-hero__heading { font-size: 2.2rem; }
    .cl-related__grid    { grid-template-columns: 1fr; }
    /* Blog v2 */
    .cl-blog-hero-v2__heading { font-size: 2.2rem; }
    .cl-blog-hero-v2__stats   { gap: 20px; }
    .cl-spotlight { min-height: 300px; }
    .cl-spotlight__content { min-height: 300px; padding: 24px; }
}
/* ==========================================================================
   49. Blog — Post list (category page)
   ========================================================================== */
.cl-blog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cl-post-row {
    display: grid;
    grid-template-columns: 4px 200px 1fr;
    gap: 0;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
    margin-bottom: 16px;
}
.cl-post-row:last-child { margin-bottom: 0; }
.cl-post-row:hover { transform: translateY(-3px); box-shadow: var(--cl-shadow); }

/* Left accent bar */
.cl-post-row__accent {
    width: 4px;
    background: linear-gradient(180deg, var(--cl-blue) 0%, #f46c5f 100%);
    flex-shrink: 0;
}

.cl-post-row__thumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
    flex-shrink: 0;
    min-height: 160px;
}
.cl-post-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cl-post-row:hover .cl-post-row__thumb img { transform: scale(1.05); }
.cl-post-row__thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(0,113,220,.15);
}
.cl-post-row__content {
    padding: 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid var(--cl-border);
}
.cl-post-row__author {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cl-muted);
    margin: 0;
}
.cl-post-row__author strong { color: var(--cl-ink); font-weight: 700; }
.cl-post-row__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cl-blue, #2553ff);
}
.cl-post-row__cat i { font-size: 0.68rem; }
.cl-post-row__title {
    font-family: var(--cl-font-head);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
    margin: 0;
}
.cl-post-row:hover .cl-post-row__title { color: var(--cl-blue); }
.cl-post-row__excerpt {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.cl-post-row__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cl-border);
    flex-wrap: wrap;
}
.cl-post-row__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cl-post-row__hashtag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-blue);
    letter-spacing: 0.02em;
}
.cl-post-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cl-muted);
    flex-shrink: 0;
}
.cl-post-row__meta i { color: var(--cl-blue); font-size: 0.8rem; margin-right: 3px; }
/* remove old .cl-post-row__read — replaced by hashtag/meta footer */
@media (max-width: 640px) {
    .cl-post-row { grid-template-columns: 0px 1fr; }
    .cl-post-row__accent { width: 0; }
    .cl-post-row__thumb { display: none; }
    .cl-post-row__content { border-left: none; padding: 16px; }
    .cl-post-row__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   50A. Blog/category hero + body shell
   ========================================================================== */
.cl-cat-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 40px;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,113,220,.14), transparent 26%),
        radial-gradient(circle at 88% 22%, rgba(244,108,95,.18), transparent 24%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 48%, #f7f9fc 100%);
}

.cl-cat-hero__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 40px;
    align-items: center;
}

.cl-cat-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.75;
    pointer-events: none;
}

.cl-cat-hero__blob--blue {
    top: -120px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0,113,220,.24) 0%, rgba(0,113,220,0) 70%);
}

.cl-cat-hero__blob--coral {
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(244,108,95,.22) 0%, rgba(244,108,95,0) 70%);
}

.cl-cat-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.cl-cat-hero__heading {
    margin: 0;
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: var(--cl-ink);
}

.cl-cat-hash {
    color: var(--cl-coral);
    margin-right: 4px;
}

.cl-cat-hero__desc {
    margin: 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
}

.cl-cat-hero__stats {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.cl-cat-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 132px;
    padding: 14px 18px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid rgba(0,113,220,.1);
    background: rgba(255,255,255,.82);
    box-shadow: var(--cl-shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cl-cat-stat__num {
    font-family: var(--cl-font-head);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--cl-ink);
}

.cl-cat-stat__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-muted);
}

.cl-cat-stat__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(22,32,46,.12);
}

.cl-cat-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--cl-blue-d);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.cl-cat-hero__deco {
    display: flex;
    justify-content: flex-end;
}

.cl-cat-hero__deco-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    width: min(100%, 360px);
    padding: 32px;
    border-radius: 28px;
    background: linear-gradient(145deg, #06254d 0%, #0a3970 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(3,31,66,.24);
    overflow: hidden;
}

.cl-cat-hero__deco-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
}

.cl-cat-hero__deco-ring--1 {
    width: 220px;
    height: 220px;
}

.cl-cat-hero__deco-ring--2 {
    width: 300px;
    height: 300px;
}

.cl-cat-hero__deco-icon {
    position: relative;
    z-index: 1;
    font-size: 3.4rem;
    color: var(--cl-secondary);
}

.cl-cat-hero__deco-label {
    position: relative;
    z-index: 1;
    font-family: var(--cl-font-head);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
}

.cl-blog-cat-body {
    padding: 28px 0 72px;
    background: linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%);
}

.cl-blog-cat-body .cl-shell {
    position: relative;
}

.cl-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding: 16px 20px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background: rgba(255,255,255,.86);
    box-shadow: var(--cl-shadow-sm);
}

.cl-cat-toolbar__count {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--cl-muted);
}

.cl-cat-toolbar__count i {
    color: var(--cl-blue);
}

.cl-blog-main {
    min-width: 0;
}

.cl-blog-main__section-head {
    align-items: flex-end;
    margin: 0 0 28px;
    padding-top: 4px;
}

.cl-blog-main__section-head .cl-heading {
    margin-bottom: 8px;
}

.cl-blog-main__section-head .cl-subhead {
    max-width: 56ch;
}

.cl-blog-tech-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(37,83,255,.18), transparent 26%),
        radial-gradient(circle at 84% 18%, rgba(245,190,111,.14), transparent 24%),
        linear-gradient(135deg, #031f42 0%, #082c5d 55%, #031a37 100%);
}

.cl-blog-tech-hero__inner {
    max-width: 900px;
}

.cl-blog-tech-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 32px;
    align-items: stretch;
}

.cl-blog-tech-hero__lead {
    max-width: 64ch;
    line-height: 1.85;
}

.cl-blog-tech-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.cl-blog-tech-stat,
.cl-blog-tech-back {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 14px 18px;
    border-radius: var(--cl-radius-md);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,.86);
    text-decoration: none;
}

.cl-blog-tech-stat strong,
.cl-blog-tech-back {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cl-blog-tech-stat span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.cl-blog-tech-back {
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    color: var(--cl-secondary);
}

.cl-blog-tech-back i {
    font-size: 0.95rem;
}

.cl-blog-tech-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 44px rgba(3,31,66,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cl-blog-tech-panel__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

.cl-blog-tech-panel__metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cl-blog-tech-panel__metric:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.cl-blog-tech-panel__metric strong {
    font-family: var(--cl-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.cl-blog-tech-panel__metric span {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
}

.cl-blog-tech-panel__chips,
.cl-blog-tech-strip__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-blog-tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.cl-blog-tech-chip small {
    font-size: 0.7rem;
    color: rgba(255,255,255,.5);
}

.cl-blog-tech-chip--light {
    background: #fff;
    border-color: var(--cl-border);
    color: var(--cl-blue-d);
    box-shadow: var(--cl-shadow-sm);
}

.cl-blog-tech-chip--light small {
    color: var(--cl-muted);
}

.cl-blog-tech-strip {
    padding: 0 0 22px;
    margin-top: -18px;
    position: relative;
    z-index: 2;
}

.cl-blog-tech-strip__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, #f7fbff 100%);
    border: 1px solid rgba(0,113,220,.08);
    box-shadow: 0 20px 40px rgba(3,31,66,.08);
}

.cl-blog-tech-strip__label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cl-muted);
}

.cl-blog-tech-stream {
    background:
        linear-gradient(180deg, #f3f6fb 0%, #eef3fa 100%);
}

.cl-blog-tech-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--cl-radius-full);
    background: #fff;
    border: 1px solid var(--cl-border);
    color: var(--cl-muted);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: var(--cl-shadow-sm);
}

.cl-blog-tech-toolbar i {
    color: var(--cl-blue);
}

.cl-blog-layout--tech {
    align-items: start;
    gap: 36px;
}

.cl-blog-layout--tech .cl-featured-post {
    border-top: 4px solid var(--cl-blue);
    box-shadow: 0 18px 40px rgba(3, 31, 66, .08);
}

.cl-blog-layout--tech .cl-blog-card {
    border-top: 3px solid rgba(37,83,255,.16);
}

.cl-blog-layout--tech .cl-sidebar-widget {
    border-top: 3px solid rgba(245,190,111,.55);
}

.cl-blog-cat-body .cl-blog-card,
.cl-blog-cat-body .cl-sidebar-widget {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

@media (max-width: 1024px) {
    .cl-cat-hero__shell {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cl-cat-hero__deco {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .cl-cat-hero {
        padding: 40px 0 28px;
    }
    .cl-cat-hero__left {
        gap: 14px;
    }
    .cl-cat-hero__stats {
        gap: 10px;
    }
    .cl-cat-stat {
        flex: 1 1 140px;
        min-width: 0;
    }
    .cl-cat-stat__divider {
        display: none;
    }
    .cl-cat-hero__deco-card {
        min-height: 220px;
        width: 100%;
    }
    .cl-blog-cat-body {
        padding: 20px 0 56px;
    }
    .cl-cat-toolbar {
        padding: 14px 16px;
        margin-bottom: 20px;
    }
    .cl-blog-main__section-head {
        margin-bottom: 20px;
        padding-top: 0;
    }
    .cl-blog-tech-hero__stats {
        gap: 10px;
    }
    .cl-blog-tech-stat,
    .cl-blog-tech-back {
        min-width: 0;
        flex: 1 1 180px;
    }
    .cl-blog-tech-hero__grid {
        grid-template-columns: 1fr;
    }
    .cl-blog-tech-strip {
        margin-top: -8px;
        padding-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .cl-cat-hero__heading {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }
    .cl-cat-hero__desc {
        font-size: 0.92rem;
        line-height: 1.7;
    }
    .cl-cat-stat {
        padding: 12px 14px;
    }
    .cl-cat-stat__num {
        font-size: 1.45rem;
    }
    .cl-cat-toolbar__count {
        font-size: 0.86rem;
        line-height: 1.6;
    }
    .cl-blog-tech-toolbar {
        width: 100%;
        justify-content: center;
    }
    .cl-blog-tech-stat,
    .cl-blog-tech-back {
        width: 100%;
    }
    .cl-blog-tech-panel {
        padding: 18px;
    }
    .cl-blog-tech-strip__inner {
        padding: 16px;
    }
}

/* ==========================================================================
   50. Blog — Category page (card hero + gray bg)
   ========================================================================== */

/* Full-page gray wrapper */
.cl-cat-page {
    background: #eef0f5;
    padding: 44px 0 80px;
    min-height: 60vh;
}

/* Hero card */
.cl-cat-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 20px rgba(16,24,40,.06);
    text-align: center;
    padding: 52px 40px 44px;
    margin-bottom: 32px;
}
.cl-cat-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 12px;
}
.cl-cat-card__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--cl-ink);
    margin-bottom: 16px;
}
.cl-cat-card__hash {
    color: #f46c5f;
    margin-right: 4px;
}
.cl-cat-card__desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cl-muted);
    max-width: 56ch;
    margin: 0 auto 20px;
}
.cl-cat-card__count {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    background: rgba(22,32,46,.06);
    padding: 6px 16px;
    border-radius: 999px;
}

/* Override blog-layout padding when inside category page */
.cl-cat-page .cl-blog-layout {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sidebar cards on gray bg */
.cl-cat-page .cl-sidebar-widget {
    background: #fff;
}

@media (max-width: 768px) {
    .cl-cat-page { padding: 28px 0 56px; }
    .cl-cat-card { padding: 36px 24px 32px; border-radius: 14px; margin-bottom: 24px; }
    .cl-cat-card__title { font-size: 2rem; }
}
@media (max-width: 480px) {
    .cl-cat-card { padding: 28px 16px 24px; }
    .cl-cat-card__title { font-size: 1.7rem; }
}

@media (max-width: 430px) {
    .cl-blog-hero        { padding: 28px 0 20px; }
    .cl-blog-layout      { padding: 24px 0; gap: 24px; }
    .cl-article-hero     { padding: 28px 0 0; }
    .cl-article-hero__title { font-size: 1.7rem; }
    .cl-article-layout   { padding: 24px 0 48px; gap: 24px; }
    .cl-related          { padding: 28px 0 40px; }
    .cl-share            { gap: 8px; }
    .cl-share__btn       { padding: 8px 12px; font-size: 0.78rem; }
    .cl-static-page__layout { padding: 24px 0 48px; }
    .cl-static-page__hero { padding: 28px 0 20px; }
    .cl-prose            { font-size: 0.95rem; }
    .cl-prose h2         { font-size: 1.35rem; }
    .cl-prose h3         { font-size: 1.1rem; }
    .cl-blog-card__thumb { height: 160px; }
}

/* ==========================================================================
   36. Mobile fixes — Home page
   ========================================================================== */

/* ── Task 1: Hide "Everything you need to pass" feature grid on mobile ───── */
@media (max-width: 768px) {
    .cl-features-section { display: none; }
}

/* ── Task 2: Full-width search input on mobile (filter bar stacks) ───────── */
@media (max-width: 768px) {
    .cl-filter-search {
        max-width: 100%;
        width: 100%;
    }
}

/* ── Task 3: Hero action buttons stay on one row on mobile ───────────────── */
@media (max-width: 430px) {
    .cl-hero__actions {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .cl-hero__actions .cl-btn {
        flex: 1;
        min-width: 0;
        width: auto;
        justify-content: center;
        padding: 11px 12px;
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   37. Account Dashboard
   ========================================================================== */

/* ── Account hero — dark navy (chien-luoc style) ────────────────────────── */
.cl-account-hero {
    background: var(--cl-dark-2);
    padding: 40px 0 32px;
    position: relative;
    overflow: hidden;
}
.cl-account-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 50%, rgba(0,113,220,.14) 0%, transparent 65%);
    pointer-events: none;
}
.cl-account-hero__inner { position: relative; }
.cl-account-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--cl-radius-full);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 14px;
}
.cl-account-hero__title {
    font-family: var(--cl-font-head);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
}
.cl-account-hero__title i { color: var(--cl-blue-l); }
.cl-account-hero__sub {
    font-size: .88rem;
    color: rgba(255,255,255,.48);
    font-weight: 500;
    margin: 0;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.cl-account__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Sidebar card ────────────────────────────────────────────────────────── */
.cl-account__sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}

/* User header — dark strip */
.cl-account__user {
    background: linear-gradient(135deg, var(--cl-dark-2), var(--cl-dark-3));
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-account__user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.cl-account__user-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.cl-account__user-info { min-width: 0; }
.cl-account__user-name {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-account__user-role {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.48);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 2px;
}

/* Navigation */
.cl-account__nav {
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.cl-account__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--cl-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
    white-space: nowrap;
}
.cl-account__nav-link:hover {
    background: rgba(0,113,220,.06);
    color: var(--cl-blue);
}
.cl-account__nav-link--active {
    background: rgba(0,113,220,.1);
    color: var(--cl-blue);
    font-weight: 700;
}
.cl-account__nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.cl-account__nav-divider {
    height: 1px;
    background: var(--cl-border);
    margin: 6px 2px;
}
.cl-account__nav-link--danger { color: var(--cl-coral); }
.cl-account__nav-link--danger:hover {
    background: rgba(244,108,95,.08);
    color: #c94030;
}

/* Content area */
.cl-account__content { min-width: 0; }

/* ── Profile page ────────────────────────────────────────────────────────── */
.cl-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.cl-profile-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 28px 24px;
    box-shadow: var(--cl-shadow-sm);
}
.cl-profile-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--cl-ink);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--cl-border);
    display: flex;
    align-items: center;
    gap: 9px;
}
.cl-profile-card__title i { color: var(--cl-blue); font-size: 1.1rem; }

/* Avatar picker */
.cl-avatar-picker {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.cl-avatar-preview {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cl-border);
    background: var(--cl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--cl-blue);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}
.cl-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.cl-avatar-pick__actions { display: flex; flex-direction: column; gap: 8px; }
.cl-avatar-pick__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    color: var(--cl-ink);
    cursor: pointer;
    transition: background var(--cl-ease), border-color var(--cl-ease);
}
.cl-avatar-pick__label:hover {
    background: rgba(0,113,220,.06);
    border-color: var(--cl-blue);
    color: var(--cl-blue);
}
.cl-avatar-pick__hint { font-size: .76rem; color: var(--cl-muted); }

/* Form fields */
.cl-profile-field { margin-bottom: 18px; }
.cl-profile-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 6px;
}
.cl-profile-label span { font-weight: 500; color: var(--cl-muted); }
.cl-profile-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--cl-radius-sm);
    border: 1.5px solid var(--cl-border);
    background: var(--cl-white);
    font-family: var(--cl-font-body);
    font-size: .92rem;
    color: var(--cl-ink);
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
    box-sizing: border-box;
}
.cl-profile-input:focus {
    outline: none;
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
}
.cl-profile-input[readonly] {
    background: var(--cl-surface);
    color: var(--cl-muted);
    cursor: default;
}

/* Flash messages */
.cl-profile-flash {
    padding: 12px 16px;
    border-radius: var(--cl-radius-sm);
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: 18px;
}
.cl-profile-flash--ok {
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.25);
    color: #166534;
}
.cl-profile-flash--err {
    background: var(--cl-coral-l);
    border: 1px solid rgba(244,108,95,.3);
    color: #b14037;
}

/* Purchased courses */
.cl-purchased-courses {
    display: grid;
    gap: 14px;
}
.cl-purchased-course {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    background: var(--cl-surface);
}
.cl-purchased-course__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,113,220,.08);
    color: var(--cl-blue);
    font-size: 1rem;
}
.cl-purchased-course__body { min-width: 0; }
.cl-purchased-course__top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}
.cl-purchased-course__title {
    margin: 0;
    color: var(--cl-ink);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.35;
}
.cl-purchased-course__desc {
    margin: 4px 0 0;
    color: var(--cl-muted);
    font-size: .84rem;
    line-height: 1.45;
}
.cl-purchased-course__badge,
.cl-purchased-course__inactive {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: var(--cl-radius-full);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.cl-purchased-course__badge {
    background: rgba(22,163,74,.08);
    color: #166534;
    border: 1px solid rgba(22,163,74,.22);
}
.cl-purchased-course__badge--lifetime {
    background: rgba(0,113,220,.08);
    color: var(--cl-blue);
    border-color: rgba(0,113,220,.22);
}
.cl-purchased-course__badge--paid {
    background: rgba(22,163,74,.08);
    color: #166534;
    border-color: rgba(22,163,74,.22);
}
.cl-purchased-course__badge--expired {
    background: rgba(244,108,95,.1);
    color: #b14037;
    border-color: rgba(244,108,95,.22);
}
.cl-purchased-course__inactive {
    background: rgba(244,108,95,.1);
    color: #b14037;
    border: 1px solid rgba(244,108,95,.22);
}
.cl-purchased-course__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    color: var(--cl-muted);
    font-size: .78rem;
    font-weight: 700;
}
.cl-purchased-course__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cl-purchased-course__meta i { color: var(--cl-blue); }
.cl-purchased-course__action {
    justify-content: center;
    white-space: nowrap;
}
.cl-purchased-empty {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border: 1.5px dashed var(--cl-border);
    border-radius: var(--cl-radius-sm);
    background: var(--cl-surface);
}
.cl-purchased-empty__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,113,220,.08);
    color: var(--cl-blue);
    flex: 0 0 auto;
}
.cl-purchased-empty h3 {
    margin: 0 0 4px;
    color: var(--cl-ink);
    font-size: .98rem;
    font-weight: 800;
}
.cl-purchased-empty p {
    margin: 0 0 12px;
    color: var(--cl-muted);
    font-size: .86rem;
    font-weight: 600;
}

/* ── My Results ──────────────────────────────────────────────────────────── */
.cl-myresults-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.cl-stat-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--cl-shadow-sm);
}
.cl-stat-card__value {
    font-family: var(--cl-font-head);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--cl-blue);
    line-height: 1.1;
}
.cl-stat-card__value--pass  { color: #16a34a; }
.cl-stat-card__value--fail  { color: var(--cl-coral); }
.cl-stat-card__value--rate  { color: var(--cl-gold); filter: brightness(.8); }
.cl-stat-card__value--best  { color: var(--cl-blue-l); }
.cl-stat-card__label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 4px;
}

/* Filter bar */
.mr-filter {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--cl-shadow-sm);
}
.mr-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.mr-filter__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 120px;
}
.mr-filter__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.mr-filter__select {
    height: 38px;
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 0 12px;
    font-size: .88rem;
    color: var(--cl-ink);
    background: var(--cl-white);
    outline: none;
    transition: border-color var(--cl-ease);
    width: 100%;
    font-family: var(--cl-font-body);
}
.mr-filter__select:focus { border-color: var(--cl-blue); }
.mr-filter__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    align-items: flex-end;
}
.mr-filter__btn {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--cl-radius-sm);
    border: none;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background var(--cl-ease), transform var(--cl-ease);
    font-family: var(--cl-font-body);
}
.mr-filter__btn--primary {
    background: var(--cl-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,113,220,.25);
}
.mr-filter__btn--primary:hover { background: var(--cl-blue-d); transform: translateY(-1px); }
.mr-filter__btn--reset {
    background: rgba(22,32,46,.06);
    color: var(--cl-ink);
    border: 1px solid var(--cl-border);
}
.mr-filter__btn--reset:hover { background: rgba(22,32,46,.1); }

/* Results table */
.cl-results-table-wrap {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}
.cl-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.cl-results-table thead th {
    background: var(--cl-dark-2);
    color: rgba(255,255,255,.75);
    padding: 12px 16px;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: none;
    white-space: nowrap;
}
.cl-results-table tbody tr {
    border-bottom: 1px solid var(--cl-border);
    transition: background var(--cl-ease);
}
.cl-results-table tbody tr:last-child { border-bottom: none; }
.cl-results-table tbody tr:hover { background: rgba(0,113,220,.03); }
.cl-results-table td {
    padding: 13px 16px;
    vertical-align: middle;
    color: var(--cl-ink);
}

/* Score and status badges */
.cl-score-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--cl-radius-full);
    font-size: .77rem;
    font-weight: 700;
    border: 1.5px solid;
    white-space: nowrap;
}
.cl-score-pill--excellent { color: #16a34a; background: #f0fdf4; border-color: #16a34a; }
.cl-score-pill--good      { color: #2ecc71; background: #f0fff4; border-color: #2ecc71; }
.cl-score-pill--fair      { color: #d97706; background: #fffbeb; border-color: #d97706; }
.cl-score-pill--poor      { color: #dc2626; background: #fef2f2; border-color: #dc2626; }
.cl-status-pass {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 700; color: #16a34a;
}
.cl-status-fail {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 700; color: var(--cl-coral);
}

/* Pagination */
.cl-myresults-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.cl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--cl-radius-xs);
    font-size: .85rem;
    font-weight: 600;
    color: var(--cl-ink);
    background: var(--cl-white);
    border: 1.5px solid var(--cl-border);
    text-decoration: none;
    transition: all var(--cl-ease);
}
.cl-pager-btn:hover { border-color: var(--cl-blue); color: var(--cl-blue); }
.cl-pager-btn--active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
    pointer-events: none;
}
.cl-pager-btn--disabled { opacity: .4; pointer-events: none; }

/* Empty state */
.cl-myresults-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--cl-muted);
}
.cl-myresults-empty i { font-size: 2.5rem; display: block; margin-bottom: 16px; opacity: .4; }

/* Review button in results table */
.mr-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--cl-radius-full);
    font-family: var(--cl-font-body);
    font-size: .75rem;
    font-weight: 800;
    color: var(--cl-blue);
    background: rgba(0,113,220,.08);
    border: 1.5px solid rgba(0,113,220,.22);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cl-ease), border-color var(--cl-ease), transform var(--cl-ease), box-shadow var(--cl-ease);
}
.mr-review-btn:hover {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,113,220,.28);
}

/* ── Result Detail page ──────────────────────────────────────────────────── */

/* ─── Design tokens ─── */
.rd-theme {
    --rd-primary:   #2563eb;
    --rd-primary-d: #1d4ed8;
    --rd-success:   #10b981;
    --rd-warning:   #f59e0b;
    --rd-accent:    #818cf8;
    --rd-ink:       #0f172a;
    --rd-muted:     #64748b;
}

/* ─── Hero ─── */
.rd-theme .rd-page-hero {
    position: relative;
    padding: 52px 0 52px;
    overflow: hidden;
    background: linear-gradient(140deg, #080f1e 0%, #0d1d3f 35%, #122660 68%, #1a3585 100%);
}

/* Ambient blobs */
.rd-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.rd-blob--1 {
    width: 520px; height: 520px;
    right: -120px; top: -160px;
    background: radial-gradient(circle at center, rgba(37,99,235,.42) 0%, transparent 65%);
    filter: blur(72px);
    animation: rdBlobDrift 10s ease-in-out infinite alternate;
}
.rd-blob--2 {
    width: 340px; height: 340px;
    left: 4%; bottom: -80px;
    background: radial-gradient(circle at center, rgba(16,185,129,.28) 0%, transparent 65%);
    filter: blur(64px);
    animation: rdBlobDrift 13s ease-in-out infinite alternate-reverse;
}
.rd-blob--3 {
    width: 260px; height: 260px;
    left: 42%; top: 20%;
    background: radial-gradient(circle at center, rgba(129,140,248,.22) 0%, transparent 65%);
    filter: blur(56px);
    animation: rdBlobDrift 9s ease-in-out infinite alternate;
    animation-delay: 2s;
}
/* Subtle dot-grid texture */
.rd-blob--grid {
    inset: 0;
    border-radius: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    filter: none;
    animation: none;
}

@keyframes rdBlobDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(18px, -18px) scale(1.07); }
}

/* Content above blobs */
.rd-theme .rd-page-hero > .cl-shell { position: relative; z-index: 2; }

/* Back link — pill style */
.rd-theme .rd-page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.52);
    text-decoration: none;
    margin-bottom: 32px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 7px 16px 7px 12px;
    border-radius: var(--cl-radius-full);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all .22s cubic-bezier(.22,1,.36,1);
}
.rd-theme .rd-page-hero__back:hover {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    transform: translateX(-3px);
}

/* Hero body flex */
.rd-theme .rd-page-hero__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    animation: rdHeroIn .72s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rdHeroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rd-theme .rd-page-hero__info { flex: 1; min-width: 0; }

/* Badge */
.rd-theme .cl-account-hero__badge {
    background: rgba(37,99,235,.22);
    border-color: rgba(99,150,255,.28);
    color: rgba(180,210,255,.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 16px;
}

/* Title */
.rd-theme .cl-account-hero__title {
    font-size: 2.1rem;
    line-height: 1.18;
    margin-bottom: 14px;
    letter-spacing: -.02em;
}

/* Sub — chips row */
.rd-theme .cl-account-hero__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: transparent;
    margin: 0;
}
.rd-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.62);
    font-size: .78rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rd-hero-chip i { font-size: .8rem; opacity: .7; }

/* ─── Score Ring ─── */
.rd-theme .rd-page-hero__ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
    animation: rdHeroIn .72s .14s cubic-bezier(.22,1,.36,1) both;
}

/* Ambient glow behind ring */
.rd-ring-glow {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    opacity: .55;
}
.rd-ring-glow--pass { background: radial-gradient(circle, rgba(16,185,129,.8) 0%, transparent 65%); }
.rd-ring-glow--fail { background: radial-gradient(circle, rgba(245,158,11,.7) 0%, transparent 65%); }

.rd-theme .rd-page-hero__ring-svg {
    position: relative;
    z-index: 1;
    width: 148px !important;
    height: 148px !important;
}
.rd-theme .rd-page-hero__ring-svg svg { width: 148px; height: 148px; }

/* SVG ring elements */
.rd-theme .res-ring__track {
    stroke: rgba(255,255,255,.1);
}
.rd-theme .res-ring__fill {
    stroke-linecap: round;
    transform-origin: 50% 50%;
}
.rd-theme .res-ring__fill--pass {
    stroke: #10b981;
    filter: drop-shadow(0 0 8px rgba(16,185,129,.65));
}
.rd-theme .res-ring__fill--fail {
    stroke: #f59e0b;
    filter: drop-shadow(0 0 8px rgba(245,158,11,.65));
}

/* Ring label (centred overlay) */
.rd-theme .res-ring { position: relative; display: inline-block; }
.rd-theme .res-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.rd-theme .res-ring__pct {
    font-family: var(--cl-font-head);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}
.rd-theme .res-ring__pct--pass { color: #6ee7b7; }
.rd-theme .res-ring__pct--fail { color: #fcd34d; }
.rd-theme .res-ring__sub {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
}

/* Verdict pill */
.rd-theme .rd-page-hero__verdict {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 20px;
    border-radius: var(--cl-radius-full);
    font-family: var(--cl-font-head);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1.5px solid;
    position: relative;
    z-index: 1;
}
.rd-theme .rd-page-hero__verdict--pass {
    background: rgba(16,185,129,.14);
    border-color: rgba(16,185,129,.38);
    color: #6ee7b7;
    box-shadow: 0 0 24px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.rd-theme .rd-page-hero__verdict--fail {
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.35);
    color: #fde68a;
    box-shadow: 0 0 24px rgba(245,158,11,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ─── Content shell ─── */
.rd-theme .rd-page-shell { max-width: 920px; }

/* ─── Stats bar ─── */
.rd-theme .rd-stats-bar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e8edf6;
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 32px rgba(15,23,42,.07),
        0 24px 64px rgba(15,23,42,.05);
    margin-bottom: 24px;
    animation: rdSlideUp .55s .05s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rdSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rd-theme .rd-stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 28px;
    border-right: 1px solid #eef1f8;
    min-width: 92px;
    position: relative;
    transition: background .2s ease;
}
.rd-theme .rd-stats-bar__item:hover { background: #f9fbff; }
.rd-theme .rd-stats-bar__item:last-of-type { border-right: none; }

/* Coloured top-bar accent per stat */
.rd-theme .rd-stats-bar__item--correct::before,
.rd-theme .rd-stats-bar__item--wrong::before,
.rd-theme .rd-stats-bar__item--skip::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 0 0 4px 4px;
}
.rd-theme .rd-stats-bar__item--correct::before { background: #10b981; box-shadow: 0 2px 8px rgba(16,185,129,.35); }
.rd-theme .rd-stats-bar__item--wrong::before   { background: #f59e0b; box-shadow: 0 2px 8px rgba(245,158,11,.35); }
.rd-theme .rd-stats-bar__item--skip::before    { background: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,.35); }

.rd-theme .rd-stats-bar__val {
    font-family: var(--cl-font-head);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -.02em;
    margin-top: 6px;
}
.rd-theme .rd-stats-bar__lbl {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #94a3b8;
    margin-top: 6px;
}
.rd-theme .rd-stats-bar__item--correct .rd-stats-bar__val { color: #059669; }
.rd-theme .rd-stats-bar__item--wrong   .rd-stats-bar__val { color: #d97706; }
.rd-theme .rd-stats-bar__item--skip    .rd-stats-bar__val { color: #2563eb; }

/* Progress fill — remaining space */
.rd-theme .rd-stats-bar__progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px;
    min-width: 160px;
    border-left: 1px solid #eef1f8;
    gap: 10px;
}
.rd-theme .rd-progress {
    height: 8px;
    border-radius: var(--cl-radius-full);
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
}
.rd-theme .rd-progress__fill {
    height: 100%;
    transition: width .9s cubic-bezier(.34,1.56,.64,1) .3s;
}
.rd-theme .rd-progress__fill--correct { background: linear-gradient(90deg, #10b981, #34d399); }
.rd-theme .rd-progress__fill--wrong   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rd-theme .rd-progress__fill--skip    { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* ─── Filter tabs ─── */
.rd-theme .rd-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
    animation: rdSlideUp .55s .12s cubic-bezier(.22,1,.36,1) both;
}

.rd-theme .rd-ftab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--cl-radius-full);
    font-family: var(--cl-font-body);
    font-size: .82rem;
    font-weight: 700;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all .22s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 2px 6px rgba(15,23,42,.05);
}
.rd-theme .rd-ftab:hover {
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,99,235,.14);
}
.rd-theme .rd-ftab--active {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(37,99,235,.28);
    transform: translateY(-1px);
}
.rd-theme .rd-ftab__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--cl-radius-full);
    font-size: .68rem;
    font-weight: 800;
    background: #f1f5f9;
    color: #64748b;
    transition: all .2s ease;
}
.rd-theme .rd-ftab--active .rd-ftab__pill  { background: rgba(255,255,255,.22); color: #fff; }
.rd-theme .rd-ftab__pill--wrong            { background: #fef3c7; color: #92400e; }
.rd-theme .rd-ftab__pill--correct          { background: #d1fae5; color: #065f46; }
.rd-theme .rd-ftab__pill--skip             { background: #dbeafe; color: #1e40af; }
.rd-theme .rd-ftab--active .rd-ftab__pill--wrong,
.rd-theme .rd-ftab--active .rd-ftab__pill--correct,
.rd-theme .rd-ftab--active .rd-ftab__pill--skip { background: rgba(255,255,255,.22); color: #fff; }

/* ─── Question cards ─── */
.rd-theme .rd-cards { display: flex; flex-direction: column; gap: 16px; }

/* Cards start hidden, revealed by JS via scroll-observer */
.rd-theme .res-qcard {
    border-radius: var(--cl-radius-md);
    background: #fff;
    border: 1px solid #e8edf5;
    box-shadow: 0 2px 8px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .42s ease, transform .42s ease, box-shadow .25s ease;
}
.rd-theme .res-qcard.rd-revealed {
    opacity: 1;
    transform: translateY(0);
}
.rd-theme .res-qcard:hover {
    box-shadow: 0 8px 32px rgba(15,23,42,.1), 0 2px 8px rgba(15,23,42,.05);
    transform: translateY(-2px);
}
.rd-theme .res-qcard.rd-revealed:hover { transform: translateY(-2px); }

/* Card header */
.rd-theme .res-qcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid;
}
.rd-theme .res-qcard__head--correct {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #a7f3d0;
}
.rd-theme .res-qcard__head--wrong {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}
.rd-theme .res-qcard__head--skipped {
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
    border-color: #bfdbfe;
}
.rd-theme .res-qcard__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.rd-theme .res-qcard__status--correct { color: #059669; }
.rd-theme .res-qcard__status--wrong   { color: #d97706; }
.rd-theme .res-qcard__status--skipped { color: #2563eb; }
.rd-theme .res-qcard__num {
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Card body */
.rd-theme .res-qcard__body { padding: 22px 24px 16px; }
.rd-theme .res-qcard__text {
    font-size: .95rem;
    line-height: 1.72;
    color: #1e293b;
    font-weight: 500;
    margin: 0 0 18px;
}

/* Answer options */
.rd-theme .res-answers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rd-theme .res-answer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--cl-radius-sm);
    border: 1.5px solid #e8edf5;
    background: #fafbff;
    transition: border-color .18s ease, background .18s ease;
}
.rd-theme .res-answer__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 800;
    background: #eef2ff;
    color: #4338ca;
}
.rd-theme .res-answer__text {
    flex: 1;
    font-size: .88rem;
    line-height: 1.6;
    color: #475569;
}
.rd-theme .res-answer__icon { flex-shrink: 0; font-size: 1rem; margin-top: 2px; }

.rd-theme .res-answer--correct {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
}
.rd-theme .res-answer--correct .res-answer__letter { background: #10b981; color: #fff; }
.rd-theme .res-answer--correct .res-answer__text   { color: #064e3b; }
.rd-theme .res-answer--correct .res-answer__icon   { color: #10b981; }

.rd-theme .res-answer--wrong {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.rd-theme .res-answer--wrong .res-answer__letter { background: #f59e0b; color: #fff; }
.rd-theme .res-answer--wrong .res-answer__text   { color: #78350f; }
.rd-theme .res-answer--wrong .res-answer__icon   { color: #d97706; }

/* Answer note strip */
.rd-theme .rd-answer-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 14px 18px;
    border-radius: var(--cl-radius-sm);
    background: #f8f9ff;
    border: 1px solid #e0e7ff;
}
.rd-theme .rd-answer-note__item {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.5;
    color: #1e293b;
}
.rd-theme .rd-answer-note__item i { flex-shrink: 0; margin-top: 2px; }
.rd-theme .rd-answer-note__item--wrong   { color: #92400e; }
.rd-theme .rd-answer-note__item--wrong i { color: #f59e0b; }
.rd-theme .rd-answer-note__item--correct   { color: #065f46; }
.rd-theme .rd-answer-note__item--correct i { color: #10b981; }

/* Explanation */
.rd-theme .res-explanation {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: var(--cl-radius-sm);
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
    border-left: 4px solid #2563eb;
}
.rd-theme .res-explanation__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1d4ed8;
    margin-bottom: 10px;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .rd-theme .rd-page-hero { padding: 36px 0 40px; }
    .rd-theme .rd-page-hero__body { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
    .rd-theme .rd-page-hero__ring { flex-direction: row; gap: 18px; align-items: center; }
    .rd-theme .rd-page-hero__ring-svg { width: 96px !important; height: 96px !important; }
    .rd-theme .rd-page-hero__ring-svg svg { width: 96px; height: 96px; }
    .rd-theme .cl-account-hero__title { font-size: 1.55rem; }
    .rd-ring-glow { width: 130px; height: 130px; }
}
@media (max-width: 600px) {
    .rd-theme .rd-stats-bar { flex-wrap: wrap; }
    .rd-theme .rd-stats-bar__item {
        flex: 1 1 60px;
        padding: 14px 12px;
        border-right: 1px solid #eef1f8;
        border-bottom: 1px solid #eef1f8;
    }
    .rd-theme .rd-stats-bar__progress {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid #eef1f8;
        padding: 14px 20px;
    }
    .rd-theme .rd-filter-bar { gap: 6px; }
    .rd-theme .rd-ftab { padding: 8px 14px; font-size: .78rem; }
}


/* ── Messages / Inbox ────────────────────────────────────────────────────── */
.mi-wrap { font-family: var(--cl-font-body); }

.mi-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.mi-topbar__left { display: flex; align-items: center; gap: 10px; }
.mi-topbar__title {
    font-size: 1.05rem; font-weight: 800; color: var(--cl-ink);
    display: flex; align-items: center; gap: 8px;
}
.mi-topbar__title i { color: var(--cl-blue); }

.mi-unread-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: var(--cl-blue); color: #fff;
    font-size: .7rem; font-weight: 800; border-radius: var(--cl-radius-full);
}
.mi-mark-all { color: var(--cl-blue) !important; }
.mi-unread-pill:empty { display: none; }

.mi-card {
    display: flex; min-height: 520px;
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    box-shadow: var(--cl-shadow-sm);
    overflow: hidden;
}
.mi-sidebar {
    flex: 0 0 290px; min-width: 0;
    display: flex; flex-direction: column;
    overflow-y: auto; max-height: 620px;
}
.mi-divider { width: 1px; background: var(--cl-border); flex-shrink: 0; }
.mi-detail {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 28px 24px;
    overflow-y: auto; max-height: 620px;
}
.mi-detail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.mi-detail-empty__icon {
    width: 60px; height: 60px; border-radius: var(--cl-radius-md);
    background: rgba(0,113,220,.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--cl-blue); opacity: .4;
}
.mi-detail-empty__text { font-size: .87rem; color: var(--cl-muted); font-weight: 600; }

.mi-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cl-border);
    cursor: pointer; transition: background var(--cl-ease);
    text-align: left; width: 100%; background: transparent;
    font-family: var(--cl-font-body);
}
.mi-item:last-child { border-bottom: none; }
.mi-item:hover { background: rgba(0,113,220,.03); }
.mi-item--unread { background: rgba(0,113,220,.05); }
.mi-item--active { background: rgba(0,113,220,.08); }

.mi-item__icon {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: var(--cl-radius-xs); font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.mi-item__body { flex: 1; min-width: 0; }
.mi-item__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 6px; margin-bottom: 3px;
}
.mi-item__title {
    font-size: .85rem; font-weight: 700; color: var(--cl-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.mi-item--unread .mi-item__title { font-weight: 800; }
.mi-item__dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cl-blue); margin-top: 4px;
}
.mi-item__preview {
    font-size: .76rem; color: var(--cl-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin: 0 0 5px; font-weight: 500;
}
.mi-item__time { font-size: .7rem; color: #94a3b8; font-weight: 600; }

.mi-detail-header { margin-bottom: 22px; }
.mi-type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: var(--cl-radius-full);
    font-size: .7rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; margin-bottom: 12px;
}
.mi-detail-title {
    font-size: 1.1rem; font-weight: 800; color: var(--cl-ink);
    line-height: 1.35; margin: 0 0 8px;
}
.mi-detail-meta { font-size: .76rem; color: #94a3b8; font-weight: 600; }
.mi-detail-body { border-top: 1px solid var(--cl-border); padding-top: 18px; }
.mi-detail-content {
    font-size: .92rem; line-height: 1.75; color: #334155; white-space: pre-wrap;
}

.mi-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--cl-border);
}
.mi-page-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: var(--cl-radius-xs);
    border: 1.5px solid var(--cl-border); background: #fff;
    color: var(--cl-blue); font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: background var(--cl-ease);
    font-family: var(--cl-font-body);
}
.mi-page-btn:hover { background: rgba(0,113,220,.05); border-color: rgba(0,113,220,.3); }
.mi-page-info { font-size: .78rem; color: var(--cl-muted); font-weight: 600; padding: 0 4px; }

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cl-account__layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cl-account__sidebar { position: static; }
    .cl-account__user { display: none; }
    .cl-account__nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cl-account__nav::-webkit-scrollbar { display: none; }
    .cl-account__nav-link {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: .82rem;
        border-radius: var(--cl-radius-full);
    }
    .cl-account__nav-divider { display: none; }
    .cl-profile-grid { grid-template-columns: 1fr; }
    .cl-purchased-course {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .cl-purchased-course__top { flex-direction: column; }
    .cl-purchased-course__action { width: 100%; }
    .cl-purchased-empty { flex-direction: column; }
    .mr-filter__group { flex: 1 1 100%; }
    .mr-filter__actions { width: 100%; }
    .mr-filter__btn { flex: 1; justify-content: center; }
    .cl-results-table thead th:nth-child(4),
    .cl-results-table td:nth-child(4),
    .cl-results-table thead th:nth-child(7),
    .cl-results-table td:nth-child(7) { display: none; }
    .mi-card { flex-direction: column; }
    .mi-sidebar { flex: none; max-height: 280px; border-bottom: 1px solid var(--cl-border); }
    .mi-divider { display: none; }
    .mi-detail { max-height: none; padding: 18px 16px; }
    .cl-account-hero { padding: 28px 0 22px; }
    .cl-account-hero__title { font-size: 1.4rem; }
}

/* ==========================================================================
   Post Detail Page — Card layout (Syron-inspired redesign)
   ========================================================================== */

/* Page wrapper */
.cl-post-page {
    background: #eef0f5;
    padding: 44px 0 88px;
    min-height: 60vh;
}

/* Two-column grid: article | sidebar */
.cl-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

/* ── Article card ── */
.cl-post-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 24px rgba(16,24,40,.07);
    overflow: hidden;
}

/* Cover image */
.cl-post-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cl-border);
}
.cl-post-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cl-post-card:hover .cl-post-card__cover img {
    transform: scale(1.02);
}

/* Card body */
.cl-post-card__body {
    padding: 36px 44px 44px;
}

/* Category tags */
.cl-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.cl-post-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-blue);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color var(--cl-ease);
}
.cl-post-tag:hover { color: var(--cl-blue-d); text-decoration: underline; }

/* Post title */
.cl-post-title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--cl-ink);
    margin-bottom: 22px;
}

/* Meta row */
.cl-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-bottom: 26px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--cl-border);
}
.cl-post-meta__author {
    display: flex;
    align-items: center;
    gap: 9px;
}
.cl-post-meta__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.cl-post-meta__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cl-ink);
}
.cl-post-meta__sep {
    color: rgba(22,32,46,.22);
    font-size: 1.1rem;
    line-height: 1;
}
.cl-post-meta i { color: var(--cl-blue); margin-right: 3px; }
.cl-post-meta__cat-link {
    color: var(--cl-blue);
    text-decoration: none;
}
.cl-post-meta__cat-link:hover { text-decoration: underline; }

/* ── Post sidebar ── */
.cl-post-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.cl-post-sidebar::-webkit-scrollbar { display: none; }

/* TOC inside post sidebar — reset its own sticky (parent handles it) */
.cl-post-sidebar .cl-toc {
    position: static;
    min-height: 280px;
    border-radius: 14px;
    background: #fff;
}

/* Sidebar widgets */
.cl-post-sidebar .cl-sidebar-widget {
    border-radius: 14px;
    background: #fff;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .cl-post-layout {
        grid-template-columns: 1fr;
    }
    .cl-post-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .cl-post-card__body {
        padding: 28px 24px 32px;
    }
}
@media (max-width: 600px) {
    .cl-post-page { padding: 20px 0 56px; }
    .cl-post-layout { gap: 20px; }
    .cl-post-title { font-size: 1.55rem; }
    .cl-post-card__body { padding: 22px 18px 28px; }
}

/* ==========================================================================
   N1. Topbar — Notification ticker
   ========================================================================== */
.cl-topbar {
    background: linear-gradient(90deg, #031f42 0%, #05284f 50%, #031f42 100%);
    color: rgba(255,255,255,.88);
    padding: 0;
    position: relative;
    z-index: 200;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
}
.cl-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
}
.cl-topbar__inner--ticker {
    justify-content: flex-start;
}
.cl-notification-ticker {
    width: 100%;
    overflow: hidden;
}
.cl-notification-ticker__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: clNotificationTicker var(--cl-notification-duration, 32s) linear infinite;
}
.cl-notification-ticker__group {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 18px;
    flex: 0 0 auto;
}
.cl-notification-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.cl-notification-ticker__item:hover {
    color: #fff;
}
.cl-notification-ticker__item--clone {
    pointer-events: none;
}
.cl-notification-ticker__title {
    font-weight: 600;
}
.cl-notification-ticker__sep {
    color: rgba(255,255,255,.35);
    font-size: 1.1em;
    flex-shrink: 0;
}
.cl-notification-ticker__icon {
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0.9;
}
.cl-notification-ticker__group::after {
    content: '';
    display: block;
    width: 40px;
    flex-shrink: 0;
}

@keyframes clNotificationTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-notification-ticker__track {
        animation: none;
        transform: none;
    }
}

@media (max-width: 640px) {
    .cl-topbar {
        font-size: 0.78rem;
    }
    .cl-topbar__inner {
        min-height: 48px;
        padding: 0 14px;
    }
    .cl-notification-ticker__group {
        gap: 14px;
        padding-right: 14px;
    }
    .cl-notification-ticker__item {
        gap: 8px;
    }
}

/* ==========================================================================
   N2. Secondary button (amber)
   ========================================================================== */
.cl-btn--secondary {
    color: #7a4a00;
    background: var(--cl-secondary);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(255, 194, 33, 0.30);
}
.cl-btn--secondary:hover { box-shadow: 0 14px 30px rgba(255, 194, 33, 0.40); }

/* ==========================================================================
   N3. Hero decorative shapes
   ========================================================================== */
.cl-hero__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    z-index: 0;
}
.cl-hero__dot-grid {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(0,113,220,.18) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.7;
}
.cl-hero__ring {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid rgba(0,113,220,.12);
}
.cl-hero__ring--2 {
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-color: rgba(0,113,220,.06);
}
.cl-hero__card { position: relative; z-index: 1; }

/* Hero stat pills row */
.cl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
}
.cl-hero__stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.72);
    border: 1px solid var(--cl-border);
    backdrop-filter: blur(8px);
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--cl-ink);
}
.cl-hero__stat-item i { color: var(--cl-blue); font-size: 0.95rem; }

/* ==========================================================================
   N4. Testimonials section
   ========================================================================== */
.cl-testimonials-section {
    background: var(--cl-bg);
}

.cl-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cl-testi-card {
    padding: 28px;
    border-radius: var(--cl-radius-lg);
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    box-shadow: var(--cl-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-testi-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }

.cl-testi-card__stars {
    display: flex;
    gap: 3px;
    color: var(--cl-secondary);
    font-size: 0.9rem;
}

.cl-testi-card__quote {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--cl-ink);
    flex: 1;
}
.cl-testi-card__quote::before { content: '\201C'; }
.cl-testi-card__quote::after  { content: '\201D'; }

.cl-testi-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-testi-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-l));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.cl-testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cl-testi-card__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cl-ink);
    line-height: 1.2;
}
.cl-testi-card__role {
    font-size: 0.8rem;
    color: var(--cl-muted);
}

/* ==========================================================================
   N5. Counting animation
   ========================================================================== */
@keyframes clCountUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cl-stats-bar__item[data-counted] strong {
    animation: clCountUp 0.5s ease both;
}

@media (max-width: 1024px) {
    .cl-testimonials-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cl-testimonials-grid  { grid-template-columns: 1fr; }
}

/* ==========================================================================
   E1. EduMall-inspired section heading amber underline
   ========================================================================== */
.cl-section__head .cl-heading::after,
.cl-testi-layout__left .cl-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--cl-secondary);
    border-radius: 2px;
    margin-top: 14px;
}
.cl-section__head--center .cl-heading::after {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   E2. Stats bar — dark navy (continuation of dark hero)
   ========================================================================== */
.cl-stats-bar { background: #012149 !important; border-top: 1px solid rgba(255,255,255,.06); }

.cl-stats-bar__item { gap: 18px; }
.cl-stats-bar__item i {
    font-size: 2rem;
    color: rgba(255,255,255,.75);
    flex-shrink: 0;
}
.cl-stats-bar__item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ==========================================================================
   E3. EduMall features strip (4-item blue bar with icons)
   ========================================================================== */
.cl-features-strip {
    background: var(--cl-blue);
    padding: 0;
}
.cl-features-strip__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.cl-features-strip__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255,255,255,.1);
    transition: background var(--cl-ease);
}
.cl-features-strip__item:last-child { border-right: none; }
.cl-features-strip__item:hover { background: rgba(255,255,255,.06); }
.cl-features-strip__item i {
    font-size: 2rem;
    color: rgba(255,255,255,.85);
    flex-shrink: 0;
}
.cl-features-strip__text strong {
    display: block;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}
.cl-features-strip__text span {
    color: rgba(255,255,255,.6);
    font-size: 0.8rem;
}

/* ==========================================================================
   E4. Testimonials — EduMall split layout
   ========================================================================== */
.cl-testimonials-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
}
.cl-testi-layout__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}
.cl-testi-layout__left .cl-heading {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    line-height: 1.25;
}
.cl-testi-layout__left p {
    color: var(--cl-muted);
    font-size: 0.92rem;
    line-height: 1.75;
}
.cl-testi-layout__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

/* ==========================================================================
   E5. Dual CTA banners (EduMall style)
   ========================================================================== */
.cl-dual-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cl-dual-cta__card {
    position: relative;
    overflow: hidden;
    padding: 44px 44px 44px 44px;
    border-radius: var(--cl-radius-lg);
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 200px;
}
.cl-dual-cta__card--primary {
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
}
.cl-dual-cta__card--secondary {
    background: linear-gradient(135deg, var(--cl-secondary) 0%, #e0a800 100%);
}
.cl-dual-cta__bg-circle {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -60px;
    top: -60px;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.cl-dual-cta__bg-circle-2 {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    right: 40px;
    bottom: -50px;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}
.cl-dual-cta__content {
    flex: 1;
    position: relative;
    z-index: 1;
}
.cl-dual-cta__content h3 {
    font-family: var(--cl-font-head);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}
.cl-dual-cta__card--secondary .cl-dual-cta__content h3 { color: #3a2000; }
.cl-dual-cta__content p {
    color: rgba(255,255,255,.82);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 22px;
}
.cl-dual-cta__card--secondary .cl-dual-cta__content p { color: rgba(0,0,0,.55); }
.cl-dual-cta__icon {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-size: 5rem;
    color: rgba(255,255,255,.18);
    line-height: 1;
}
.cl-dual-cta__card--secondary .cl-dual-cta__icon { color: rgba(0,0,0,.1); }

/* Help CTA (single wide banner) */
.cl-help-cta {
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
    border-radius: var(--cl-radius-lg);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.cl-help-cta::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}
.cl-help-cta__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}
.cl-help-cta__text {
    flex: 1;
}
.cl-help-cta__text span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.65);
    margin-bottom: 4px;
}
.cl-help-cta__text strong {
    display: block;
    font-family: var(--cl-font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

/* ==========================================================================
   E6. Responsive overrides
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-testimonials-split { grid-template-columns: 1fr; }
    .cl-testi-layout__left { position: static; }
    .cl-testi-layout__left .cl-heading::after { margin-left: 0; }
    .cl-features-strip__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cl-dual-cta { grid-template-columns: 1fr; }
    .cl-testi-layout__cards { grid-template-columns: 1fr; }
    .cl-features-strip__inner { grid-template-columns: 1fr; }
    .cl-help-cta { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   E7. Testimonial card extras (EduMall style — quote icon + title)
   ========================================================================== */
.cl-testi-card__quote-icon {
    font-size: 1.8rem;
    color: var(--cl-blue);
    opacity: 0.25;
    line-height: 1;
    margin-bottom: -4px;
}
.cl-testi-card__title {
    font-family: var(--cl-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cl-blue);
    margin-bottom: 6px;
}
/* Remove quote marks from quote text (EduMall style shows title separately) */
.cl-testi-layout__cards .cl-testi-card__quote::before,
.cl-testi-layout__cards .cl-testi-card__quote::after { content: ''; }

/* ==========================================================================
   E9. Hero visual position fix (for shapes to work)
   ========================================================================== */
.cl-hero__visual { position: relative; }

/* ==========================================================================
   E10. Eyebrow — use blue instead of coral for cleaner EduMall look
   ========================================================================== */
.cl-eyebrow { color: var(--cl-blue); }

/* Override section dark eyebrow to remain mint */
.cl-section--dark .cl-eyebrow { color: var(--cl-mint); }

/* ==========================================================================
   F1. Top Categories — dark tech-themed provider tiles
   ========================================================================== */
.cl-providers-section {
    background: #060e1e;
    border-top: none;
    position: relative;
    overflow: hidden;
}
/* Dot-grid tech texture */
.cl-providers-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,113,220,.2) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    z-index: 0;
}
/* Gradient glow vignette */
.cl-providers-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,113,220,.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.cl-providers-section .cl-shell { position: relative; z-index: 1; }

/* Section heading overrides for dark context */
.cl-providers-section .cl-eyebrow {
    color: var(--cl-mint);
    border-color: rgba(143,224,211,.2);
}
.cl-providers-section .cl-heading { color: #fff; }
.cl-providers-section .cl-subhead { color: rgba(255,255,255,.4); }

/* Top accent scan-line */
.cl-providers-section .cl-section__head {
    padding-bottom: 8px;
}
.cl-providers-section .cl-section__head::after {
    display: none !important;
}

.cl-top-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cl-top-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px 15px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    border-top: 2px solid var(--cl-blue);
    border-radius: var(--cl-radius-sm);
    text-decoration: none;
    color: #ccd6f6;
    min-width: 174px;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease, border-color 0.22s ease;
}
/* Shimmer sweep on hover */
.cl-top-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.06) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.cl-top-cat:hover::before { transform: translateX(120%); }

.cl-top-cat:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.16);
}

/* Icon */
.cl-top-cat__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,113,220,.14);
    border: 1px solid rgba(0,113,220,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #5bb8ff;
    flex-shrink: 0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cl-top-cat:hover .cl-top-cat__icon {
    transform: scale(1.12);
    box-shadow: 0 0 14px currentColor;
}

.cl-top-cat__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.cl-top-cat__label {
    font-family: 'Outfit', var(--cl-font-head), monospace;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: #e2e8f0;
    text-transform: uppercase;
}
.cl-top-cat__count {
    font-size: 0.7rem;
    color: rgba(255,255,255,.3);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.cl-top-cat__arrow {
    font-size: 0.75rem;
    color: var(--cl-mint);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cl-top-cat:hover .cl-top-cat__arrow { opacity: 1; transform: translateX(4px); }

/* ── Per-vendor brand colours ─────────────────────────────────────── */
/* AWS */
.cl-top-cat[data-tag="aws"]           { border-top-color: #ff9900; }
.cl-top-cat[data-tag="aws"]:hover     { box-shadow: 0 16px 36px rgba(255,153,0,.2), 0 0 0 1px rgba(255,153,0,.15); }
.cl-top-cat[data-tag="aws"]           .cl-top-cat__icon { background: rgba(255,153,0,.1); border-color: rgba(255,153,0,.32); color: #ffad33; }

/* Google */
.cl-top-cat[data-tag="google"]        { border-top-color: #4285f4; }
.cl-top-cat[data-tag="google"]:hover  { box-shadow: 0 16px 36px rgba(66,133,244,.2), 0 0 0 1px rgba(66,133,244,.15); }
.cl-top-cat[data-tag="google"]        .cl-top-cat__icon { background: rgba(66,133,244,.1); border-color: rgba(66,133,244,.32); color: #6ea6f8; }

/* Azure */
.cl-top-cat[data-tag="azure"]         { border-top-color: #0078d4; }
.cl-top-cat[data-tag="azure"]:hover   { box-shadow: 0 16px 36px rgba(0,120,212,.22), 0 0 0 1px rgba(0,120,212,.2); }
.cl-top-cat[data-tag="azure"]         .cl-top-cat__icon { background: rgba(0,120,212,.1); border-color: rgba(0,120,212,.35); color: #29a9ff; }

/* Microsoft */
.cl-top-cat[data-tag="microsoft"]     { border-top-color: #888; }
.cl-top-cat[data-tag="microsoft"]:hover { box-shadow: 0 16px 36px rgba(150,150,150,.15), 0 0 0 1px rgba(150,150,150,.12); }
.cl-top-cat[data-tag="microsoft"]     .cl-top-cat__icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #b0b8c8; }

/* PMI / PMP */
.cl-top-cat[data-tag="pmi"],
.cl-top-cat[data-tag="pmp"]           { border-top-color: #8b5cf6; }
.cl-top-cat[data-tag="pmi"]:hover,
.cl-top-cat[data-tag="pmp"]:hover     { box-shadow: 0 16px 36px rgba(139,92,246,.22), 0 0 0 1px rgba(139,92,246,.18); }
.cl-top-cat[data-tag="pmi"]           .cl-top-cat__icon,
.cl-top-cat[data-tag="pmp"]           .cl-top-cat__icon { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #a78bfa; }

/* CompTIA */
.cl-top-cat[data-tag="comptia"]       { border-top-color: #ef4444; }
.cl-top-cat[data-tag="comptia"]:hover { box-shadow: 0 16px 36px rgba(239,68,68,.2), 0 0 0 1px rgba(239,68,68,.16); }
.cl-top-cat[data-tag="comptia"]       .cl-top-cat__icon { background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.28); color: #f87171; }

/* ISC2 / CISSP */
.cl-top-cat[data-tag="isc2"],
.cl-top-cat[data-tag="cissp"]         { border-top-color: #22c55e; }
.cl-top-cat[data-tag="isc2"]:hover,
.cl-top-cat[data-tag="cissp"]:hover   { box-shadow: 0 16px 36px rgba(34,197,94,.2), 0 0 0 1px rgba(34,197,94,.16); }
.cl-top-cat[data-tag="isc2"]          .cl-top-cat__icon,
.cl-top-cat[data-tag="cissp"]         .cl-top-cat__icon { background: rgba(34,197,94,.09); border-color: rgba(34,197,94,.28); color: #4ade80; }

/* Cisco */
.cl-top-cat[data-tag="cisco"]         { border-top-color: #00adef; }
.cl-top-cat[data-tag="cisco"]:hover   { box-shadow: 0 16px 36px rgba(0,173,239,.2), 0 0 0 1px rgba(0,173,239,.16); }
.cl-top-cat[data-tag="cisco"]         .cl-top-cat__icon { background: rgba(0,173,239,.09); border-color: rgba(0,173,239,.28); color: #38d1f8; }


/* ==========================================================================
   F2. Practice Exams — sidebar layout
   ========================================================================== */
.cl-exams-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}
.cl-exams-sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 24px;
}
.cl-exams-sidebar__title {
    font-family: var(--cl-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cl-muted);
    margin: 0 0 12px;
}
.cl-sidebar-search {
    position: relative;
    margin-bottom: 24px;
}
.cl-sidebar-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    pointer-events: none;
    font-size: 0.9rem;
}
.cl-sidebar-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-xs);
    font-size: 0.875rem;
    color: var(--cl-ink);
    background: var(--cl-bg-off);
    outline: none;
    transition: border-color var(--cl-ease);
}
.cl-sidebar-search input:focus { border-color: var(--cl-blue); }
.cl-sidebar-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-sidebar-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--cl-radius-xs);
    cursor: pointer;
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: var(--cl-ink);
    text-align: left;
    transition: background var(--cl-ease), color var(--cl-ease);
    width: 100%;
}
.cl-sidebar-tag:hover  { background: var(--cl-bg-off); }
.cl-sidebar-tag.is-active {
    background: color-mix(in srgb, var(--cl-blue) 10%, transparent);
    color: var(--cl-blue);
    font-weight: 600;
}
.cl-sidebar-tag__badge {
    background: var(--cl-bg-off);
    border-radius: var(--cl-radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    color: var(--cl-muted);
}
.cl-sidebar-tag.is-active .cl-sidebar-tag__badge {
    background: var(--cl-blue);
    color: #fff;
}

/* ==========================================================================
   F3. Cert card — reduced border-radius (req #6)
   ========================================================================== */
.cl-cert-card {
    border-radius: var(--cl-radius-sm) !important;
}
.cl-cert-card__thumb {
    border-top-left-radius: var(--cl-radius-sm) !important;
    border-top-right-radius: var(--cl-radius-sm) !important;
}

/* ==========================================================================
   F4. PMI Mindset page — responsive (moved from pmp-mindset.htm)
   ========================================================================== */
@media (max-width: 768px) {
    .pm-grid2 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .pm-pad   { padding: 20px !important; }
}
@media (max-width: 430px) {
    .pm-pad   { padding: 16px !important; }
}

/* ==========================================================================
   F5. Chiến Lược page — responsive (moved from chien-luoc.htm)
   ========================================================================== */
@media (max-width: 768px) {
    .cs-grid2 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .cs-pad   { padding: 20px !important; }
}
@media (max-width: 480px) {
    .cs-grid3 { grid-template-columns: 1fr !important; gap: 12px !important; }
}
@media (max-width: 430px) {
    .cs-pad   { padding: 16px !important; }
}

/* ==========================================================================
   F6. Responsive overrides
   ========================================================================== */
@media (max-width: 900px) {
    .cl-exams-layout { grid-template-columns: 1fr; }
    .cl-exams-sidebar { position: static; }
}
@media (max-width: 600px) {
    .cl-top-cats { gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .cl-top-cat { min-width: 150px; }
}

/* ==========================================================================
   G1. Practice Exams — compact dark header
   ========================================================================== */
.cl-exams-head {
    background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-2) 60%, #0a3b80 100%);
    padding: 56px 0 52px;
    position: relative;
    overflow: hidden;
}
.cl-exams-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0,113,220,.18), transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(143,224,211,.12), transparent 30%);
    pointer-events: none;
}
.cl-exams-head .cl-shell { position: relative; }
.cl-exams-head__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}
.cl-exams-head .cl-kicker {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.15);
    width: fit-content;
}
.cl-exams-head__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.08;
}
.cl-exams-head__title .cl-gradient-text {
    background: linear-gradient(135deg, var(--cl-secondary), #ff9a4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cl-exams-head__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 4px;
}
.cl-exams-head__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.cl-exams-head__stat strong {
    color: var(--cl-secondary);
    font-weight: 800;
}

/* ==========================================================================
   G2. Practice Exams — sticky controls bar (search + filter pills)
   ========================================================================== */
.cl-exams-controls {
    background: #fff;
    border-bottom: 1px solid var(--cl-border);
    padding: 12px 0;
    position: sticky;
    top: 64px;
    z-index: 90;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cl-exams-controls__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-exams-controls__search {
    position: relative;
    flex-shrink: 0;
    width: 220px;
}
.cl-exams-controls__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    pointer-events: none;
    font-size: 0.85rem;
}
.cl-exams-controls__search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--cl-ink);
    background: var(--cl-bg);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease), background var(--cl-ease);
}
.cl-exams-controls__search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
    background: #fff;
}
.cl-exams-controls__divider {
    width: 1px;
    height: 28px;
    background: var(--cl-border);
    flex-shrink: 0;
}
.cl-exams-controls__pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cl-exams-controls__pills::-webkit-scrollbar { display: none; }
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    border: 1.5px solid var(--cl-border);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--cl-muted);
    background: #fff;
    white-space: nowrap;
    transition: border-color var(--cl-ease), color var(--cl-ease), background var(--cl-ease), box-shadow var(--cl-ease);
    flex-shrink: 0;
}
.cl-filter-pill:hover {
    border-color: var(--cl-blue);
    color: var(--cl-blue);
    background: rgba(0,113,220,.04);
}
.cl-filter-pill.is-active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,113,220,.25);
}
.cl-filter-pill__count {
    font-size: 0.72rem;
    font-weight: 800;
    opacity: .75;
}
.cl-filter-pill.is-active .cl-filter-pill__count { opacity: .9; }
.cl-exams-controls__count {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 8px;
}

/* ==========================================================================
   G3. Practice Exams — 3-column grid & responsive
   ========================================================================== */
.cl-certs-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 901px) {
    /* Restore normal layout when exams-layout is not used */
    .cl-exams-controls { top: 64px; }
}
@media (max-width: 1024px) {
    .cl-certs-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cl-exams-controls__inner { flex-wrap: wrap; }
    .cl-exams-controls__search { width: 100%; }
    .cl-exams-controls__divider { display: none; }
    .cl-exams-controls__count  { display: none; }
    .cl-exams-head { padding: 36px 0 32px; }
    .cl-exams-head__stats { gap: 14px; }
}
@media (max-width: 580px) {
    .cl-certs-grid--3col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   H1. Practice Exams — search bar inside dark header
   ========================================================================== */
.cl-exams-head__searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: var(--cl-radius-full);
    padding: 7px 7px 7px 20px;
    max-width: 580px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--cl-ease), border-color var(--cl-ease);
}
.cl-exams-head__searchbar:focus-within {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.38);
}
.cl-exams-head__sb-icon {
    color: rgba(255,255,255,.55);
    font-size: 1rem;
    flex-shrink: 0;
}
.cl-exams-head__searchbar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    min-width: 0;
    caret-color: var(--cl-secondary);
}
.cl-exams-head__searchbar input::placeholder {
    color: rgba(255,255,255,.42);
}
.cl-exams-head__sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--cl-secondary);
    color: var(--cl-dark);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.88rem;
    border: none;
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    pointer-events: none; /* decorative — JS handles realtime filter */
}

/* ==========================================================================
   H2. Practice Exams — sticky tag pills bar (search removed from here)
   ========================================================================== */
.cl-exams-tags-bar {
    background: var(--cl-bg-white);
    border-bottom: 1px solid var(--cl-border);
    padding: 10px 0;
    
    top: 64px;
    z-index: 90;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.cl-exams-tags-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-exams-tags-bar__pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cl-exams-tags-bar__pills::-webkit-scrollbar { display: none; }
.cl-exams-tags-bar__count {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-left: 14px;
    border-left: 1px solid var(--cl-border);
    white-space: nowrap;
}

/* ==========================================================================
   H3. Cert grid — 4 columns
   ========================================================================== */
.cl-certs-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cl-exams-tags-bar { top: 56px; }
    .cl-exams-head__searchbar { max-width: 100%; }
    .cl-exams-tags-bar__count { display: none; }
}

@media (max-width: 640px) {
    .cl-section__head {
        gap: 10px;
        margin-bottom: 20px;
    }
    .cl-section__head:not(.cl-section__head--center) > :first-child {
        width: 100%;
    }
    .cl-section__head--center {
        padding-inline: 6px;
    }
    .cl-section__head .cl-heading {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.15;
    }
    .cl-section__head .cl-subhead {
        max-width: 34ch;
        font-size: 0.92rem;
        line-height: 1.7;
    }
    .cl-exams-section .cl-section__head .cl-btn {
        display: none;
    }
}

/* ==========================================================================
   HOME. Hero trust row
   ========================================================================== */
.cl-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding-top: 4px;
}
.cl-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.cl-hero__trust-item i { color: #4ade80; font-size: 0.9rem; }

/* ==========================================================================
   HOME. How it works — 3-step section
   ========================================================================== */
.cl-how-section { background: var(--cl-bg); }

.cl-how-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 48px;
    position: relative;
}

.cl-how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 28px;
    position: relative;
}

.cl-how-step__num {
    font-family: var(--cl-font-head);
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(0,113,220,.08);
    line-height: 1;
    margin-bottom: -6px;
    letter-spacing: -0.04em;
}

.cl-how-step__icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
    color: #fff;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 36px rgba(0,113,220,.28);
    margin-bottom: 22px;
    flex-shrink: 0;
}

.cl-how-step__title {
    font-family: var(--cl-font-head);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--cl-ink);
}

.cl-how-step__desc {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--cl-muted);
    max-width: 24ch;
    margin: 0 auto;
}

/* Arrow connector between steps */
.cl-how-connector {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 42px;   /* align with icon center */
    color: var(--cl-blue-l);
    font-size: 1.4rem;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .cl-how-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 24px;
    }
    .cl-how-connector {
        display: none;
    }
    .cl-how-step {
        display: grid;
        grid-template-columns: 42px 48px minmax(0, 1fr);
        grid-template-areas:
            "num icon title"
            "num icon desc";
        align-items: start;
        column-gap: 12px;
        row-gap: 4px;
        width: min(100%, 420px);
        margin: 0 auto;
        padding: 14px 14px 13px;
        border: 1px solid var(--cl-border);
        border-radius: var(--cl-radius-md);
        background: #fff;
        box-shadow: var(--cl-shadow-sm);
        text-align: left;
    }
    .cl-how-step__num {
        grid-area: num;
        align-self: center;
        font-size: 1.9rem;
        margin-bottom: 0;
        line-height: 0.95;
    }
    .cl-how-step__icon {
        grid-area: icon;
        width: 42px;
        height: 42px;
        margin-bottom: 0;
        font-size: 1rem;
        box-shadow: 0 8px 18px rgba(0,113,220,.18);
    }
    .cl-how-step__title {
        grid-area: title;
        align-self: end;
        font-size: 0.92rem;
        line-height: 1.35;
        margin-bottom: 0;
    }
    .cl-how-step__desc {
        grid-area: desc;
        max-width: none;
        font-size: 0.78rem;
        line-height: 1.5;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .cl-how-step {
        grid-template-columns: 34px 40px minmax(0, 1fr);
        column-gap: 10px;
        padding: 12px;
    }
    .cl-how-step__num {
        font-size: 1.55rem;
    }
    .cl-how-step__icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    .cl-how-step__title {
        font-size: 0.88rem;
    }
    .cl-how-step__desc {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }
}

/* ==========================================================================
   HOME. Features section — improved card
   ========================================================================== */
.cl-features-section {
    background: var(--cl-surface);
}

.cl-feature-card {
    padding: 30px 26px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease), border-color var(--cl-ease);
}
.cl-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: rgba(0,113,220,.2);
}

.cl-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 1.35rem;
}

.cl-feature-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--cl-ink);
}

/* ==========================================================================
   HOME. Responsive tweaks for hero + stats on mobile
   ========================================================================== */
@media (max-width: 900px) {
    .cl-hero__grid    { grid-template-columns: 1fr; gap: 32px; }
    .cl-hero__visual  { display: none; }
    .cl-hero          { padding: 56px 0 64px; }
    .cl-hero__headline { font-size: clamp(2.2rem, 7vw, 3.2rem); }
}
@media (max-width: 640px) {
    .cl-hero          { padding: 40px 0 52px; }
    .cl-hero__actions { flex-direction: column; }
    .cl-hero__actions .cl-btn { width: 100%; justify-content: center; }
    .cl-hero__trust   { gap: 10px; display:none;}
    .cl-stats-bar__inner { flex-direction: row; flex-wrap: nowrap; padding: 12px 0; }
    .cl-stats-bar__item  { flex: 1 1 0; min-width: 0; padding: 10px 8px; gap: 5px; }
    .cl-stats-bar__divider { display: none; }
    .cl-stats-bar__item i { font-size: 1.15rem; }
    .cl-stats-bar__item strong { font-size: 1.18rem; }
    .cl-stats-bar__item span {
        font-size: 0.6rem;
        line-height: 1.35;
        letter-spacing: 0.04em;
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   HOME. Choose Your Exam section
   ========================================================================== */
.cl-exams-section {
    background: var(--cl-bg-off);
    border-top: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
}

.cl-exams-section .cl-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.cl-exams-section .cl-section__head--center {
    align-items: center;
    text-align: left;
}

/* Filter bar */
.cl-filter-bar {
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    box-shadow: var(--cl-shadow-sm);
}

.cl-filter-search {
    position: relative;
    flex: 1 1 220px;
}
.cl-filter-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--cl-muted);
    pointer-events: none;
}
.cl-filter-search input[type="search"] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--cl-border);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--cl-ink);
    background: var(--cl-bg-off);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-filter-search input[type="search"]:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
    background: #fff;
}

/* Filter pills */
.cl-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--cl-border);
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
    color: var(--cl-muted);
    transition: background var(--cl-ease), color var(--cl-ease), border-color var(--cl-ease);
}
.cl-filter-pill:hover {
    background: var(--cl-bg-off);
    color: var(--cl-ink);
    border-color: var(--cl-ink);
}
.cl-filter-pill.is-active {
    background: var(--cl-dark);
    color: #fff;
    border-color: var(--cl-dark);
}

.er-qcard__text ul{ padding-inline-start: 20px; list-style: disc; }

@media (max-width: 640px) {
    .cl-filter-bar { flex-direction: column; align-items: stretch; }
    .cl-filter-search { flex: 1 1 auto; }
}
+

/* ==========================================================================
   Category updating modal
   ========================================================================== */
body.cl-modal-open { overflow: hidden; }

.cl-update-modal[hidden],
.cl-update-modal__date[hidden] { display: none !important; }

.cl-update-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .22s ease;
}

.cl-update-modal.is-open { opacity: 1; }

.cl-update-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 18, 42, .66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cl-update-modal__dialog {
    position: relative;
    width: min(460px, 100%);
    overflow: hidden;
    padding: 38px 34px 32px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 0%, rgba(77, 163, 255, .18), transparent 35%),
        linear-gradient(145deg, #fff 0%, #f5f8ff 100%);
    box-shadow: 0 32px 90px rgba(3, 31, 66, .34);
    text-align: center;
    outline: none;
    transform: translateY(18px) scale(.96);
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.cl-update-modal.is-open .cl-update-modal__dialog { transform: translateY(0) scale(1); }

.cl-update-modal__dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, var(--cl-coral), #8555d9, var(--cl-blue));
}

.cl-update-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--cl-muted);
    background: rgba(22, 32, 46, .06);
    transition: background var(--cl-ease), color var(--cl-ease), transform var(--cl-ease);
}

.cl-update-modal__close:hover {
    color: var(--cl-ink);
    background: rgba(22, 32, 46, .11);
    transform: rotate(6deg);
}

.cl-update-modal__icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 22px;
    color: #fff;
    font-size: 31px;
    background: linear-gradient(135deg, var(--cl-coral), #7657d8 55%, var(--cl-blue));
    box-shadow: 0 14px 30px rgba(67, 80, 200, .25);
}

.cl-update-modal.is-open .cl-update-modal__icon i { animation: cl-update-spin 1.5s ease-in-out 1; }

@keyframes cl-update-spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.cl-update-modal__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--cl-blue);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.cl-update-modal__title {
    margin: 0;
    color: var(--cl-ink);
    font-family: var(--cl-font-body);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
}

.cl-update-modal__category {
    margin-top: 7px;
    color: var(--cl-blue-d);
    font-weight: 700;
}

.cl-update-modal__description {
    max-width: 360px;
    margin: 14px auto 0;
    color: var(--cl-muted);
    font-size: .94rem;
    line-height: 1.65;
}

.cl-update-modal__date {
    margin-top: 20px;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    border: 1px solid rgba(37, 83, 255, .14);
    border-radius: 16px;
    color: var(--cl-muted);
    background: rgba(37, 83, 255, .06);
    font-size: .88rem;
}

.cl-update-modal__date i { color: var(--cl-blue); }
.cl-update-modal__date strong { color: var(--cl-blue-d); font-size: 1rem; }

.cl-update-modal__action {
    width: 100%;
    min-height: 50px;
    margin-top: 22px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(100deg, var(--cl-blue-d), var(--cl-blue));
    box-shadow: 0 12px 25px rgba(37, 83, 255, .22);
    font-weight: 800;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}

.cl-update-modal__action:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(37, 83, 255, .3);
}

@media (max-width: 520px) {
    .cl-update-modal { align-items: end; padding: 12px; }
    .cl-update-modal__dialog { padding: 34px 22px 24px; border-radius: 24px; }
}

/* ─── Member certificate gallery ─────────────────────────── */
.cl-member-certificates { overflow: hidden; }
.cl-certificate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.cl-certificate-card {
    overflow: hidden;
    border: 1px solid var(--cl-border);
    border-radius: 22px;
    background: var(--cl-white);
    box-shadow: var(--cl-shadow-sm);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease), border-color var(--cl-ease);
}
.cl-certificate-card:hover { transform: translateY(-5px); border-color: rgba(37,83,255,.25); box-shadow: var(--cl-shadow-md); }
.cl-certificate-card__image { position: relative; width: 100%; aspect-ratio: 1.42; padding: 0; overflow: hidden; border: 0; background: #eef2f8; cursor: zoom-in; }
.cl-certificate-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.cl-certificate-card:hover .cl-certificate-card__image img { transform: scale(1.035); }
.cl-certificate-card__zoom { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(17,26,51,.75); opacity: 0; transform: translateY(5px); transition: all var(--cl-ease); backdrop-filter: blur(8px); }
.cl-certificate-card:hover .cl-certificate-card__zoom, .cl-certificate-card__image:focus-visible .cl-certificate-card__zoom { opacity: 1; transform: none; }
.cl-certificate-card__body { padding: 20px; }
.cl-certificate-card__badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #177d57; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cl-certificate-card__badge i { font-size: .95rem; }
.cl-certificate-card h3 { margin: 0; color: var(--cl-ink); font-size: 1.08rem; font-weight: 800; line-height: 1.4; }
.cl-certificate-card__member { display: flex; align-items: center; gap: 9px; margin: 14px 0 12px; color: var(--cl-ink); font-size: .9rem; font-weight: 700; }
.cl-certificate-card__member img, .cl-certificate-card__member > span { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.cl-certificate-card__member > span { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-d)); font-size: .75rem; }
.cl-certificate-card__meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--cl-muted); font-size: .82rem; }
.cl-certificate-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cl-certificate-card__meta i { color: var(--cl-blue); }
.cl-certificate-card__verify { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--cl-blue); font-size: .84rem; font-weight: 800; text-decoration: none; }
.cl-certificate-card__verify:hover { color: var(--cl-blue-d); }
.cl-certificate-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}
.cl-certificate-filter__pills {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-certificate-filter__pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--cl-border);
    border-radius: 999px;
    color: var(--cl-muted);
    background: #fff;
    font: inherit;
    font-size: .79rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.cl-certificate-filter__pill:hover { color: var(--cl-blue); border-color: rgba(37,83,255,.35); transform: translateY(-1px); }
.cl-certificate-filter__pill.is-active { color: #fff; border-color: var(--cl-blue); background: var(--cl-blue); }
.cl-certificate-filter__pill span {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    color: inherit;
    background: rgba(127,141,166,.12);
    font-size: .68rem;
    text-align: center;
}
.cl-certificate-filter__pill.is-active span { background: rgba(255,255,255,.2); }
.cl-certificate-filter__result { flex: 0 0 auto; margin: 0; color: var(--cl-muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.cl-certificate-card.is-filtered-out { display: none; }
.cl-certificate-filter-empty { padding: 46px 20px; color: var(--cl-muted); text-align: center; }
.cl-certificate-filter-empty[hidden] { display: none; }
.cl-certificate-filter-empty i { display: block; margin-bottom: 8px; color: var(--cl-blue); font-size: 2rem; }
.cl-certificate-filter-empty p { margin: 0; }
.cl-certificate-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(920px, calc(100vw - 30px));
    max-height: calc(100dvh - 30px);
    margin: 0;
    padding: 0;
    overflow: hidden auto;
    border: 0;
    border-radius: 20px;
    background: var(--cl-white);
    box-shadow: 0 30px 80px rgba(17,26,51,.3);
    opacity: 0;
    transform: translate(-50%,-47%) scale(.955);
    transition: opacity .24s ease, transform .32s cubic-bezier(.2,.82,.25,1);
    will-change: opacity, transform;
}
.cl-certificate-dialog.is-visible {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}
.cl-certificate-dialog.is-closing {
    opacity: 0;
    transform: translate(-50%,-48%) scale(.975);
    pointer-events: none;
}
.cl-certificate-dialog::backdrop {
    background: rgba(11,18,38,.72);
    opacity: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity .26s ease;
}
.cl-certificate-dialog.is-visible::backdrop { opacity: 1; }
.cl-certificate-dialog.is-closing::backdrop { opacity: 0; }
.cl-certificate-dialog > img { width: 100%; max-height: calc(100vh - 130px); display: block; object-fit: contain; background: #edf1f7; }
.cl-certificate-dialog > div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.cl-certificate-dialog > div span { color: var(--cl-muted); }
.cl-certificate-dialog__close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(17,26,51,.78); cursor: pointer; }
.cl-certificate-empty { padding: 70px 20px; border: 1px dashed var(--cl-border); border-radius: 22px; text-align: center; background: var(--cl-white); }
.cl-certificate-empty i { color: var(--cl-blue); font-size: 3rem; }
.cl-certificate-empty h2 { margin: 14px 0 7px; color: var(--cl-ink); }
.cl-certificate-empty p { margin: 0; color: var(--cl-muted); }
.cl-certificate-hero .cl-account-hero__inner { max-width: 760px; }

@media (max-width: 960px) { .cl-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .cl-certificate-grid { grid-template-columns: 1fr; gap: 18px; }
    .cl-certificate-card__body { padding: 18px; }
    .cl-certificate-dialog > div { flex-direction: column; gap: 4px; }
    .cl-certificate-filter { display: block; margin-bottom: 20px; }
    .cl-certificate-filter__pills {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 2px 1px 8px;
    }
    .cl-certificate-filter__pills::-webkit-scrollbar { display: none; }
    .cl-certificate-filter__pill { flex: 0 0 auto; scroll-snap-align: start; }
    .cl-certificate-filter__result { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-certificate-dialog,
    .cl-certificate-dialog::backdrop { transition-duration: .01ms; }
}

/* ─── Achievement showcase: editorial split layout ───────── */
.cl-member-certificates--home {
    padding: clamp(58px,6vw,82px) 0;
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 18% 15%,rgba(51,115,255,.24),transparent 32%),
        radial-gradient(circle at 88% 90%,rgba(255,190,52,.1),transparent 28%),
        linear-gradient(118deg,#031a39 0%,#082956 56%,#041d40 100%);
}
.cl-member-certificates--home::before {
    opacity: .16;
    background-image: radial-gradient(rgba(255,255,255,.55) .7px,transparent .7px);
    mask-image: linear-gradient(90deg,#000,transparent 58%);
}
.cl-member-certificates--home > .cl-shell {
    display: grid;
    grid-template-columns: minmax(270px,330px) minmax(0,1fr);
    align-items: center;
    gap: clamp(36px,5vw,72px);
}
.cl-member-certificates--home .cl-certificate-head {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}
.cl-certificate-head__seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 11px;
    border: 1px solid rgba(255,212,94,.25);
    border-radius: 999px;
    color: #ffd45e;
    background: rgba(255,212,94,.08);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.cl-certificate-head__seal i { font-size: .9rem; }
.cl-member-certificates--home .cl-certificate-head .cl-heading {
    max-width: 320px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem,3.8vw,3.35rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.cl-member-certificates--home .cl-certificate-head .cl-heading::after {
    width: 54px;
    margin-top: 18px;
    background: #ffd45e;
}
.cl-member-certificates--home .cl-certificate-head .cl-subhead {
    margin-top: 18px;
    color: rgba(255,255,255,.68);
    font-size: .92rem;
    line-height: 1.7;
}
.cl-member-certificates--home .cl-certificate-trust { display: grid; gap: 8px; margin-top: 22px; }
.cl-member-certificates--home .cl-certificate-trust span {
    min-height: auto;
    padding: 0;
    border: 0;
    color: rgba(255,255,255,.76);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}
.cl-member-certificates--home .cl-certificate-trust i { color: #74a8ff; }
.cl-member-certificates--home .cl-certificate-head__action {
    min-height: 44px;
    margin-top: 28px;
    border-color: rgba(255,255,255,.2);
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: none;
}
.cl-member-certificates--home .cl-certificate-head__action:hover {
    border-color: rgba(255,255,255,.35);
    color: #fff;
    background: rgba(255,255,255,.14);
}
.cl-member-certificates--home .cl-certificate-marquee {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 14px 0 20px;
    mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.cl-member-certificates--home .cl-certificate-marquee__track,
.cl-member-certificates--home .cl-certificate-marquee__group { gap: 16px; }
.cl-member-certificates--home .cl-certificate-marquee__group .cl-certificate-card {
    width: clamp(262px,23vw,292px);
    border-color: rgba(255,255,255,.13);
    border-radius: 20px;
    box-shadow: 0 22px 50px rgba(0,0,0,.25);
}
.cl-member-certificates--home .cl-certificate-marquee .cl-certificate-card__image { height: 190px; }
.cl-member-certificates--home .cl-certificate-marquee .cl-certificate-card__body {
    min-height: 190px;
    padding: 17px 18px 19px;
}
.cl-member-certificates--home .cl-certificate-card h3 { min-height: 2.65em; font-size: .96rem; }
.cl-member-certificates--home .cl-certificate-card__badge { margin-bottom: 8px; font-size: .64rem; }
.cl-member-certificates--home .cl-certificate-card__member { padding-top: 11px; margin-bottom: 7px; }
.cl-member-certificates--home .cl-certificate-card__meta { font-size: .74rem; }
.cl-member-certificates--home .cl-certificate-card__verify { margin-top: 9px; font-size: .76rem; }
@media (max-width: 900px) {
    .cl-member-certificates--home > .cl-shell { grid-template-columns: minmax(230px,280px) minmax(0,1fr); gap: 30px; }
}
@media (max-width: 720px) {
    .cl-member-certificates--home { padding: 54px 0 44px; }
    .cl-member-certificates--home > .cl-shell { display: block; }
    .cl-member-certificates--home .cl-certificate-head { max-width: 520px; margin-bottom: 28px; }
    .cl-member-certificates--home .cl-certificate-head .cl-heading { max-width: none; }
    .cl-member-certificates--home .cl-certificate-trust { display: flex; }
    .cl-member-certificates--home .cl-certificate-marquee { width: 100vw; margin-left: calc(50% - 50vw); }
}
@media (max-width: 520px) {
    .cl-member-certificates--home .cl-certificate-trust span:nth-child(3) { display: none; }
    .cl-member-certificates--home .cl-certificate-marquee__group .cl-certificate-card { width: min(78vw,286px); }
    .cl-member-certificates--home .cl-certificate-marquee .cl-certificate-card__image { height: 180px; }
}

/* ─── Polished homepage certificate showcase ─────────────── */
.cl-member-certificates--home {
    position: relative; isolation: isolate;
    padding: clamp(76px, 7vw, 112px) 0;
    border-block: 1px solid rgba(37,83,255,.08);
    background: radial-gradient(circle at 8% 4%,rgba(37,83,255,.09),transparent 30%), radial-gradient(circle at 92% 100%,rgba(255,190,52,.12),transparent 28%), linear-gradient(180deg,#fbfcff 0%,#f5f7fc 100%);
}
.cl-member-certificates--home::before {
    content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; pointer-events: none;
    background-image: radial-gradient(rgba(37,83,255,.25) .7px,transparent .7px);
    background-size: 22px 22px; mask-image: linear-gradient(to bottom,#000,transparent 68%);
}
.cl-certificate-head { align-items: flex-end; margin-bottom: clamp(34px,4vw,52px); }
.cl-certificate-head__copy { max-width: 720px; }
.cl-certificate-head .cl-heading { max-width: 680px; font-size: clamp(2rem,4vw,3.2rem); line-height: 1.04; }
.cl-certificate-head .cl-subhead { max-width: 610px; margin-top: 14px; font-size: 1rem; line-height: 1.7; }
.cl-certificate-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cl-certificate-trust span {
    display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 12px;
    border: 1px solid rgba(37,83,255,.11); border-radius: 999px; color: #56617a;
    background: rgba(255,255,255,.72); font-size: .76rem; font-weight: 750;
    box-shadow: 0 5px 18px rgba(24,43,89,.04); backdrop-filter: blur(8px);
}
.cl-certificate-trust i { color: var(--cl-blue); font-size: .9rem; }
.cl-certificate-head__action { flex: 0 0 auto; min-height: 48px; padding-inline: 20px; box-shadow: 0 12px 30px rgba(23,45,98,.08); }
.cl-certificate-head__action i { transition: transform .25s ease; }
.cl-certificate-head__action:hover i { transform: translate(3px,-3px); }
.cl-member-certificates--home .cl-certificate-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,2vw,24px); }
.cl-member-certificates--home .cl-certificate-card {
    position: relative; display: flex; min-width: 0; flex-direction: column;
    border-color: rgba(23,45,98,.1); border-radius: 24px;
    box-shadow: 0 14px 38px rgba(25,42,81,.08); opacity: 0; transform: translateY(24px);
    transition: opacity .55s ease calc(var(--certificate-index) * 80ms), transform .55s cubic-bezier(.2,.75,.25,1) calc(var(--certificate-index) * 80ms), box-shadow .35s ease, border-color .35s ease;
}
.cl-member-certificates--home.is-visible .cl-certificate-card { opacity: 1; transform: translateY(0); }
.cl-member-certificates--home .cl-certificate-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg,transparent 36%,rgba(255,255,255,.26) 49%,transparent 62%);
    transform: translateX(-115%); transition: transform .7s ease;
}
.cl-member-certificates--home .cl-certificate-card:hover {
    transform: translateY(-8px); border-color: rgba(37,83,255,.26);
    box-shadow: 0 24px 54px rgba(25,42,81,.15);
}
.cl-member-certificates--home .cl-certificate-card:hover::after { transform: translateX(115%); }
.cl-member-certificates--home .cl-certificate-card__image { aspect-ratio: 1.38; background: linear-gradient(145deg,#eef2f8,#fff); }
.cl-member-certificates--home .cl-certificate-card__image img { object-fit: contain; }
.cl-member-certificates--home .cl-certificate-card__body { display: flex; flex: 1; flex-direction: column; padding: 19px 20px 21px; }
.cl-member-certificates--home .cl-certificate-card h3 { min-height: 2.8em; font-size: 1rem; }
.cl-member-certificates--home .cl-certificate-card__member { margin-top: auto; padding-top: 16px; }
.cl-member-certificates--home .cl-certificate-card__verify { align-self: flex-start; }
@media (max-width:1100px) { .cl-member-certificates--home .cl-certificate-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
    .cl-member-certificates--home { padding: 64px 0; }
    .cl-certificate-head { align-items: flex-start; }
    .cl-certificate-head__action { width: 100%; justify-content: center; margin-top: 6px; }
    .cl-certificate-trust { gap: 8px; }
}
@media (max-width:560px) {
    .cl-member-certificates--home .cl-certificate-grid { grid-template-columns: 1fr; }
    .cl-member-certificates--home .cl-certificate-card__image { aspect-ratio: 1.5; }
}
@media (prefers-reduced-motion:reduce) {
    .cl-member-certificates--home .cl-certificate-card { opacity: 1; transform: none; transition: box-shadow .2s ease; }
    .cl-member-certificates--home .cl-certificate-card::after { display: none; }
}

/* ─── Infinite certificate marquee + normalized artwork ─── */
.cl-certificate-card__image img {
    box-sizing: border-box;
    object-fit: contain;
    padding: clamp(8px, 1vw, 14px);
}
.cl-certificate-marquee {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    padding: 10px 0 30px;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.cl-certificate-marquee__track {
    display: flex;
    width: max-content;
    gap: 22px;
    will-change: transform;
    animation: cl-certificates-ltr var(--marquee-duration, 48s) linear infinite;
}
.cl-certificate-marquee__group {
    display: flex;
    align-items: stretch;
    flex: none;
    gap: 22px;
}
.cl-certificate-marquee__group .cl-certificate-card {
    width: clamp(286px, 24vw, 330px);
    flex: none;
}
.cl-certificate-marquee .cl-certificate-card__image {
    height: 226px;
    aspect-ratio: auto;
    background: linear-gradient(145deg, #edf1f7, #fff 52%, #f4f6fb);
}
.cl-certificate-marquee .cl-certificate-card__image img { object-position: center; }
.cl-certificate-marquee .cl-certificate-card__body { min-height: 218px; }
.cl-certificate-marquee:hover .cl-certificate-marquee__track,
.cl-certificate-marquee:focus-within .cl-certificate-marquee__track {
    animation-play-state: paused;
}
@keyframes cl-certificates-ltr {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 11px)); }
}
@media (max-width: 620px) {
    .cl-certificate-marquee { mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); }
    .cl-certificate-marquee__track, .cl-certificate-marquee__group { gap: 14px; }
    .cl-certificate-marquee__group .cl-certificate-card { width: min(82vw, 310px); }
    .cl-certificate-marquee .cl-certificate-card__image { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-certificate-marquee { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
    .cl-certificate-marquee__track { animation: none; transform: none; }
    .cl-certificate-marquee__group[aria-hidden="true"] { display: none; }
}

/* ─── Homepage hierarchy, stronger stats and balanced exam cards ─── */
.cl-stats-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg,#031a39 0%,#082957 52%,#031a39 100%);
}
.cl-stats-bar::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 0,rgba(71,143,255,.16),transparent 48%);
}
.cl-stats-bar__inner { position: relative; z-index: 1; padding: 23px 0; }
.cl-stats-bar__item { min-width: 0; padding-inline: clamp(22px,3vw,42px); }
.cl-stats-bar__item i {
    width: 46px; height: 46px; display: grid; flex: 0 0 46px; place-items: center;
    border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    color: #ffd45e; background: rgba(255,255,255,.07); opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cl-stats-bar__item__text { display: grid; gap: 3px; }
.cl-stats-bar__item strong {
    display: block; color: #fff; font-size: clamp(1.55rem,2.3vw,2rem);
    line-height: 1; letter-spacing: -.035em; text-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.cl-stats-bar__item span { color: rgba(255,255,255,.66); font-size: .71rem; letter-spacing: .12em; }
.cl-stats-bar__divider { height: 48px; background: rgba(255,255,255,.12); }

.cl-cert-card { height: 100%; }
.cl-cert-card__body { min-height: 278px; box-sizing: border-box; }
.cl-cert-card__title {
    display: -webkit-box; min-height: 2.9em; overflow: hidden;
    line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.cl-cert-card__desc {
    display: -webkit-box; min-height: 4.8em; overflow: hidden;
    line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.cl-cert-card__price { margin-top: auto; }
.cl-cert-card__meta { margin-top: 0; min-height: 28px; align-items: end; }

@media (max-width: 900px) {
    .cl-stats-bar__inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 0; }
    .cl-stats-bar__divider { display: none; }
    .cl-stats-bar__item { padding: 14px 18px; }
}
@media (max-width: 620px) {
    #cl-home-exams-grid.cl-certs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #cl-home-exams-grid .cl-cert-card__thumb { height: 105px; }
    #cl-home-exams-grid .cl-cert-card__body { min-height: 178px; padding: 12px 11px 13px; }
    #cl-home-exams-grid .cl-cert-card__meta { gap: 5px 8px; font-size: .7rem; }
    .cl-stats-bar__item { gap: 10px; padding: 12px 9px; }
    .cl-stats-bar__item i { width: 40px; height: 40px; flex-basis: 40px; font-size: 1.15rem; }
    .cl-stats-bar__item strong { font-size: 1.35rem; }
    .cl-stats-bar__item span { font-size: .6rem; letter-spacing: .08em; line-height: 1.35; }
}

/* Keep the editorial showcase skin after legacy certificate rules. */
.cl-member-certificates--home {
    padding: clamp(58px,6vw,82px) 0;
    border: 0;
    color: #fff;
    background: radial-gradient(circle at 18% 15%,rgba(51,115,255,.24),transparent 32%), radial-gradient(circle at 88% 90%,rgba(255,190,52,.1),transparent 28%), linear-gradient(118deg,#031a39 0%,#082956 56%,#041d40 100%);
}
.cl-member-certificates--home::before {
    opacity: .16;
    background-image: radial-gradient(rgba(255,255,255,.55) .7px,transparent .7px);
    mask-image: linear-gradient(90deg,#000,transparent 58%);
}
@media (max-width:720px) { .cl-member-certificates--home { padding:54px 0 44px; } }

/* ─── Home palette v2: disciplined 80 / 15 / 5 system ───── */
.cl-home {
    --cl-home-canvas: #f6f8fc;
    --cl-home-surface: #ffffff;
    --cl-home-ink: #10213e;
    --cl-home-navy: #0b1f42;
    --cl-home-blue: #2563eb;
    --cl-home-gold: #f4b740;
    --cl-home-success: #20966b;
    --cl-home-coral: #ec6a5e;
    background: var(--cl-home-canvas);
}
.cl-home .cl-hero {
    background: linear-gradient(128deg,#0b1f42 0%,#12315c 58%,#0d274c 100%);
}
.cl-home .cl-hero::before { opacity: .52; }
.cl-home .cl-hero::after { opacity: .48; }
.cl-home .cl-hero .cl-gradient-text {
    background: linear-gradient(120deg,#f6c756,#f4b740);
    -webkit-background-clip: text; background-clip: text;
}
.cl-home .cl-hero__floater {
    background: #f4b740;
    box-shadow: 0 14px 32px rgba(244,183,64,.24);
}
.cl-home .cl-stats-bar { background: #102b51; }
.cl-home .cl-stats-bar::after { opacity: .45; }
.cl-home .cl-stats-bar__item i { color: #f4c85a; background: rgba(255,255,255,.055); }

.cl-home .cl-member-certificates--home {
    color: var(--cl-home-ink);
    background: var(--cl-home-surface);
    border-bottom: 1px solid #e5eaf3;
}
.cl-home .cl-member-certificates--home::before {
    opacity: .22;
    background-image: radial-gradient(rgba(37,99,235,.24) .7px,transparent .7px);
    mask-image: linear-gradient(90deg,#000,transparent 52%);
}
.cl-home .cl-certificate-head__seal {
    border-color: rgba(37,99,235,.16);
    color: var(--cl-home-blue);
    background: rgba(37,99,235,.07);
}
.cl-home .cl-member-certificates--home .cl-certificate-head .cl-heading { color: var(--cl-home-ink); }
.cl-home .cl-member-certificates--home .cl-certificate-head .cl-heading::after { background: var(--cl-home-gold); }
.cl-home .cl-member-certificates--home .cl-certificate-head .cl-subhead { color: #65718a; }
.cl-home .cl-member-certificates--home .cl-certificate-trust span { color: #536078; }
.cl-home .cl-member-certificates--home .cl-certificate-trust i { color: var(--cl-home-blue); }
.cl-home .cl-member-certificates--home .cl-certificate-head__action {
    border-color: var(--cl-home-blue);
    color: #fff;
    background: var(--cl-home-blue);
    box-shadow: 0 10px 24px rgba(37,99,235,.17);
}
.cl-home .cl-member-certificates--home .cl-certificate-head__action:hover {
    border-color: #1d4ed8; color: #fff; background: #1d4ed8;
}
.cl-home .cl-member-certificates--home .cl-certificate-marquee__group .cl-certificate-card {
    border-color: #e1e7f0;
    box-shadow: 0 12px 30px rgba(30,52,90,.09);
}
.cl-home .cl-member-certificates--home .cl-certificate-card:hover {
    border-color: rgba(37,99,235,.3);
    box-shadow: 0 18px 38px rgba(30,52,90,.14);
}
.cl-home .cl-certificate-card__badge { color: var(--cl-home-success); }

.cl-home .cl-exams-section { background: var(--cl-home-canvas); }
.cl-home .cl-exams-section .cl-filter-bar {
    border-color: #e2e7f0;
    box-shadow: 0 8px 24px rgba(30,52,90,.06);
}
.cl-home .cl-cert-card {
    border-color: #e1e7ef;
    border-top-color: var(--cl-home-blue) !important;
    box-shadow: 0 8px 22px rgba(30,52,90,.065);
}
.cl-home .cl-cert-card:hover {
    box-shadow: 0 16px 34px rgba(30,52,90,.12);
}
.cl-home .cl-cert-card__sale-badge { background: #c31000; }
.cl-home .cl-cert-card__price-current { color: var(--cl-home-blue); }
.cl-home .cl-cert-card__price--free .cl-cert-card__price-current { color: var(--cl-home-success); }
.cl-home .cl-cert-card__meta i { color: var(--cl-home-blue); }
.cl-home .cl-filter-pill.is-active {
    border-color: var(--cl-home-blue);
    color: #fff;
    background: var(--cl-home-blue);
}

.cl-home .cl-features-section { background: var(--cl-home-surface); }
.cl-home .cl-feature-card {
    border-color: #e3e8f0;
    box-shadow: 0 7px 20px rgba(30,52,90,.045);
}
.cl-home .cl-feature-card--blue .cl-feature-card__icon,
.cl-home .cl-feature-card--coral .cl-feature-card__icon,
.cl-home .cl-feature-card--mint .cl-feature-card__icon,
.cl-home .cl-feature-card--gold .cl-feature-card__icon {
    color: var(--cl-home-blue);
    background: rgba(37,99,235,.09);
}
.cl-home .cl-testimonials-section { background: var(--cl-home-canvas); }
.cl-home .cl-testi-card {
    border-color: #e2e7ef;
    box-shadow: 0 8px 24px rgba(30,52,90,.06);
}
.cl-home .cl-testi-card__stars { color: var(--cl-home-gold); }
.cl-home .cl-eyebrow { color: var(--cl-home-blue); }
.cl-home .cl-section__head .cl-heading::after { background: var(--cl-home-gold); }
.cl-home .cl-cta { background: var(--cl-home-navy); }
.cl-home .cl-cta__glow { opacity: .11; }
.cl-home .cl-cta__glow--right { display: none; }

@media (max-width:720px) {
    .cl-home .cl-member-certificates--home { background: #fff; }
    .cl-home .cl-section { padding-block: 58px; }
}

/* Compact certificate card copy area on the homepage stream. */
.cl-home .cl-member-certificates--home .cl-certificate-marquee .cl-certificate-card__body {
    min-height: 152px;
    padding: 14px 16px 16px;
}
.cl-home .cl-member-certificates--home .cl-certificate-card h3 {
    min-height: 2.55em;
    font-size: .94rem;
}
.cl-home .cl-member-certificates--home .cl-certificate-card__badge { margin-bottom: 5px; }
.cl-home .cl-member-certificates--home .cl-certificate-card__member {
    margin-top: auto;
    margin-bottom: 2px;
    padding-top: 8px;
}
.cl-home .cl-member-certificates--home .cl-certificate-card__meta { margin-top: 4px; }

/* Homepage exam cards: full titles, no description reserve. */
.cl-home #cl-home-exams-grid .cl-cert-card__body {
    min-height: 215px;
    gap: 10px;
}
.cl-home #cl-home-exams-grid .cl-cert-card__title {
    display: block;
    min-height: 0;
    overflow: visible;
    color: #13223d;
    font-family: var(--cl-font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.48;
    letter-spacing: -.018em;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}
.cl-home #cl-home-exams-grid .cl-cert-card__price { margin-top: auto; }
@media (max-width:620px) {
    .cl-home #cl-home-exams-grid .cl-cert-card__body { min-height: 178px; gap: 7px; }
    .cl-home #cl-home-exams-grid .cl-cert-card__title { font-size: .86rem; line-height: 1.42; }
    .cl-home #cl-home-filter-bar { min-width: 0; overflow: hidden; }
    .cl-home #cl-home-filter-pills {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        padding: 2px 1px 7px;
    }
    .cl-home #cl-home-filter-pills::-webkit-scrollbar { display: none; }
    .cl-home #cl-home-filter-pills .cl-filter-pill { flex: 0 0 auto; scroll-snap-align: start; }
}

.cl-home-exams-pager {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.cl-home-exams-pager[hidden] { display: none !important; }
.cl-home-exams-pager__button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cl-border);
    border-radius: 50%;
    color: var(--cl-home-blue, var(--cl-blue));
    background: #fff;
    box-shadow: 0 5px 16px rgba(30,52,90,.08);
}
.cl-home-exams-pager__button:disabled { opacity: .35; }
.cl-home-exams-pager__dots { display: flex; align-items: center; gap: 7px; }
.cl-home-exams-pager__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c8d1df;
    transition: width .25s ease, background .25s ease;
}
.cl-home-exams-pager__dot.is-active { width: 22px; background: var(--cl-home-blue, var(--cl-blue)); }
@media (max-width:620px) {
    .cl-home-exams-pager:not([hidden]) { display: flex; }
    .cl-home .cl-exams-section { overflow: hidden; }
    #cl-home-exams-grid { touch-action: pan-y; will-change: transform, opacity; }
}

/* Mobile stats: four compact metrics on a single row. */
@media (max-width:620px) {
    .cl-home .cl-stats-bar__inner {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        align-items: stretch;
        padding: 10px 0 11px;
    }
    .cl-home .cl-stats-bar__item {
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 5px;
        padding: 6px 3px;
        text-align: center;
    }
    .cl-home .cl-stats-bar__item i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-inline: auto;
        border-radius: 10px;
        font-size: 1rem;
    }
    .cl-home .cl-stats-bar__item__text {
        justify-items: center;
        gap: 3px;
        min-width: 0;
    }
    .cl-home .cl-stats-bar__item strong {
        font-size: clamp(.98rem,4.2vw,1.18rem);
        line-height: 1;
        white-space: nowrap;
    }
    .cl-home .cl-stats-bar__item span {
        max-width: 11ch;
        font-size: .5rem;
        line-height: 1.35;
        letter-spacing: .055em;
        text-wrap: balance;
    }
}

/* Shared compact exam card: descriptions removed and titles shown in full. */
.cl-cert-card__body {
    min-height: 215px;
    gap: 10px;
}
.cl-cert-card__title {
    display: block;
    min-height: 0;
    overflow: visible;
    color: #13223d;
    font-family: var(--cl-font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.48;
    letter-spacing: -.018em;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}
.cl-cert-card__price { margin-top: auto; }
@media (max-width:620px) {
    .cl-cert-card__body { min-height: 190px; }
    .cl-cert-card__title { font-size: 1.04rem; line-height: 1.5; }
}
/* Homepage advertisement modal */
.cl-home-ad[hidden] { display: none; }
body.cl-home-ad-open { overflow: hidden; }
.cl-home-ad {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
}
.cl-home-ad__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(3, 18, 38, .72);
    backdrop-filter: blur(5px);
    cursor: pointer;
}
.cl-home-ad__dialog {
    position: relative;
    width: min(920px, 94vw);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
    animation: clHomeAdEnter .22s ease-out both;
}
.cl-home-ad__close {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: rgba(3,18,38,.78);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.cl-home-ad__close:hover { transform: scale(1.06); background: #031f42; }
.cl-home-ad__slide[hidden] { display: none; }
.cl-home-ad__link { display: block; }
.cl-home-ad__image {
    display: block;
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    background: #f4f7fb;
}
.cl-home-ad__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 22px 18px;
    color: var(--cl-ink);
}
.cl-home-ad__caption strong { font-size: 1rem; }
.cl-home-ad__caption span { color: var(--cl-muted); font-size: .88rem; }
.cl-home-ad__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 18px 16px;
    color: var(--cl-muted);
    font-size: .82rem;
    font-weight: 700;
}
.cl-home-ad__controls button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--cl-border);
    border-radius: 50%;
    background: #fff;
    color: var(--cl-ink);
    cursor: pointer;
}
.cl-home-ad__controls button:hover { border-color: var(--cl-blue); color: var(--cl-blue); }
@keyframes clHomeAdEnter {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
    .cl-home-ad { padding: 14px; }
    .cl-home-ad__dialog { width: 100%; border-radius: 16px; }
    .cl-home-ad__image { max-height: 72vh; }
    .cl-home-ad__caption { padding: 13px 16px 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-home-ad__dialog { animation: none; }
}

/* PMI Mindset 2026 */
.pm-page{background:#fff;color:var(--cl-ink)}.pm-page h1,.pm-page h2,.pm-page h3,.pm-page p{margin-top:0}
.pm-hero{position:relative;overflow:hidden;padding:84px 0 72px;background:radial-gradient(circle at 80% 20%,rgba(77,163,255,.2),transparent 28%),radial-gradient(circle at 12% 90%,rgba(143,224,211,.12),transparent 30%),var(--cl-dark)}.pm-hero:after{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,transparent,#000);pointer-events:none}.pm-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);align-items:center;gap:72px}.pm-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:7px 12px;border:1px solid rgba(143,224,211,.25);border-radius:999px;color:var(--cl-mint);background:rgba(143,224,211,.08);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.pm-hero h1{max-width:760px;margin-bottom:22px;color:#fff;font-family:var(--cl-font-head);font-size:clamp(2.7rem,5.6vw,5rem);font-weight:800;line-height:1.02;letter-spacing:-.045em}.pm-hero h1 span{color:var(--cl-gold)}.pm-hero__copy>p{max-width:680px;margin-bottom:30px;color:rgba(255,255,255,.7);font-size:1.05rem;line-height:1.75}.pm-hero__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.pm-text-link{color:#fff;font-size:.92rem;font-weight:700;text-decoration:none}.pm-text-link:hover{color:var(--cl-mint)}
.pm-hero__card{padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.075);box-shadow:0 28px 80px rgba(0,0,0,.25);backdrop-filter:blur(16px)}.pm-hero__card-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:.76rem}.pm-hero__card-head strong{color:#fff}.pm-domain{margin-bottom:17px}.pm-domain__label{display:flex;justify-content:space-between;margin-bottom:7px;color:rgba(255,255,255,.75);font-size:.82rem}.pm-domain__label strong{color:#fff}.pm-domain__bar{height:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.09)}.pm-domain__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cl-blue-l),var(--cl-mint))}.pm-hero__card>p{display:flex;gap:8px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:.76rem;line-height:1.55}
.pm-jump{top:64px;z-index:80;border-bottom:1px solid var(--cl-border);background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(17,28,53,.05);backdrop-filter:blur(12px)}.pm-jump__inner{display:flex;align-items:center;gap:8px;min-height:58px;overflow-x:auto;scrollbar-width:none}.pm-jump__inner::-webkit-scrollbar{display:none}.pm-jump__label{margin-right:12px;color:var(--cl-muted);font-size:.73rem;font-weight:800;text-transform:uppercase;white-space:nowrap}.pm-jump a{padding:7px 12px;border-radius:99px;color:var(--cl-ink);font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}.pm-jump a:hover{color:var(--cl-blue);background:rgba(0,113,220,.07)}
.pm-section{padding:92px 0;scroll-margin-top:120px}.pm-section--soft{background:#f5f7fa}.pm-section--ink{color:#fff;background:var(--cl-dark)}.pm-section__intro{display:grid;grid-template-columns:64px minmax(0,720px);gap:22px;margin-bottom:44px}.pm-section__number{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid rgba(0,113,220,.18);border-radius:16px;color:var(--cl-blue);background:rgba(0,113,220,.06);font-weight:900}.pm-eyebrow{margin-bottom:8px!important;color:var(--cl-blue);font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.pm-section__intro h2,.pm-future h2{margin-bottom:12px;font-family:var(--cl-font-head);font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;letter-spacing:-.035em}.pm-section__intro>div>p:last-child{max-width:680px;margin-bottom:0;color:var(--cl-muted);font-size:.98rem;line-height:1.7}.pm-section__intro--light .pm-section__number{color:var(--cl-mint);border-color:rgba(143,224,211,.2);background:rgba(143,224,211,.08)}.pm-section__intro--light .pm-eyebrow{color:var(--cl-mint)}.pm-section__intro--light>div>p:last-child{color:rgba(255,255,255,.55)}
.pm-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pm-principle{padding:26px;border:1px solid var(--cl-border);border-radius:16px;background:#fff;transition:transform .2s ease,box-shadow .2s ease}.pm-principle:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(17,28,53,.08)}.pm-principle>span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:22px;border-radius:12px;color:var(--cl-blue);background:rgba(0,113,220,.09);font-size:1.1rem}.pm-principle h3{margin-bottom:8px;font-size:1rem}.pm-principle p{margin-bottom:0;color:var(--cl-muted);font-size:.85rem;line-height:1.65}.pm-principle--mint>span{color:#287d70;background:var(--cl-mint-l)}.pm-principle--gold>span{color:#8a5e0a;background:var(--cl-gold-l)}.pm-principle--coral>span{color:var(--cl-coral);background:var(--cl-coral-l)}.pm-principle--violet>span{color:#7257c8;background:#f0edff}.pm-principle--ink>span{color:#fff;background:var(--cl-dark)}.pm-note{display:flex;align-items:flex-start;gap:14px;margin-top:22px;padding:18px 20px;border-radius:12px;font-size:.88rem;line-height:1.65}.pm-note p{margin:0}.pm-note--blue{color:#1657a4;background:#edf6ff;border:1px solid #d4eaff}
.pm-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.pm-steps:before{content:"";position:absolute;top:29px;left:5%;right:5%;height:1px;background:rgba(255,255,255,.12)}.pm-steps article{position:relative;z-index:1;padding:0 12px 22px;text-align:center}.pm-steps article>span{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 20px;border:6px solid var(--cl-dark);border-radius:50%;color:var(--cl-dark);background:var(--cl-mint);font-weight:900}.pm-steps small{color:var(--cl-mint);font-size:.66rem;font-weight:900;letter-spacing:.12em}.pm-steps h3{margin:6px 0 9px;color:#fff;font-size:.98rem}.pm-steps p{margin:0;color:rgba(255,255,255,.48);font-size:.79rem;line-height:1.6}.pm-exception{display:flex;align-items:flex-start;gap:15px;max-width:860px;margin:34px auto 0;padding:20px 22px;border:1px solid rgba(245,190,111,.24);border-radius:14px;color:var(--cl-gold);background:rgba(245,190,111,.08)}.pm-exception p{margin:5px 0 0;color:rgba(255,255,255,.58);font-size:.84rem;line-height:1.65}
.pm-context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pm-context-card{padding:28px;border:1px solid var(--cl-border);border-top:4px solid var(--cl-blue);border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(17,28,53,.045)}.pm-context-card__head{display:flex;align-items:center;gap:14px;margin-bottom:22px}.pm-context-card__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;color:var(--cl-blue);background:rgba(0,113,220,.09);font-size:1.15rem}.pm-context-card small{color:var(--cl-muted);font-size:.7rem}.pm-context-card h3{margin:2px 0 0;font-size:1.15rem}.pm-context-card ul{display:grid;gap:11px;padding:0;margin:0;list-style:none}.pm-context-card li{position:relative;padding-left:20px;color:var(--cl-muted);font-size:.84rem;line-height:1.55}.pm-context-card li:before{content:"✓";position:absolute;left:0;color:var(--cl-blue);font-weight:900}.pm-context-card--mint{border-top-color:#58b9a9}.pm-context-card--mint .pm-context-card__icon{color:#287d70;background:var(--cl-mint-l)}.pm-context-card--mint li:before{color:#287d70}.pm-context-card--gold{border-top-color:var(--cl-gold)}.pm-context-card--gold .pm-context-card__icon{color:#8a5e0a;background:var(--cl-gold-l)}.pm-context-card--gold li:before{color:#8a5e0a}.pm-role-note{display:flex;gap:14px;margin-top:18px;padding:20px 22px;border-radius:14px;color:#5b4b11;background:#fff9e9;border:1px solid #f6e5b4;font-size:.86rem;line-height:1.65}.pm-role-note p{margin:0}.pm-role-note i{color:#9b7412;font-size:1.1rem}
.pm-signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pm-signal-card{padding:30px;border:1px solid var(--cl-border);border-radius:18px;background:#fff}.pm-signal-card header{display:flex;gap:14px;align-items:center;margin-bottom:24px}.pm-signal-card header>span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:1.2rem}.pm-signal-card small{color:var(--cl-muted);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.pm-signal-card h3{margin:2px 0 0;font-size:1.1rem}.pm-signal-card--good header>span{color:#287d70;background:var(--cl-mint-l)}.pm-signal-card--warn header>span{color:var(--cl-coral);background:var(--cl-coral-l)}.pm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.pm-chips span{padding:7px 10px;border-radius:7px;color:#287d70;background:var(--cl-mint-l);font-size:.76rem;font-weight:700}.pm-signal-card--warn .pm-chips span{color:#a9483f;background:var(--cl-coral-l)}.pm-signal-card>p{margin:0;color:var(--cl-muted);font-size:.83rem;line-height:1.65}.pm-first-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.pm-first-grid article{padding:18px;border-radius:12px;background:var(--cl-dark)}.pm-first-grid strong{color:var(--cl-gold);font-size:.78rem;letter-spacing:.08em}.pm-first-grid p{margin:6px 0 0;color:rgba(255,255,255,.6);font-size:.8rem;line-height:1.55}
.pm-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pm-scenario{display:flex;flex-direction:column;min-height:355px;padding:26px;border:1px solid var(--cl-border);border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(17,28,53,.05)}.pm-scenario__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.pm-scenario__meta span{color:var(--cl-blue);font-family:var(--cl-font-head);font-size:1.5rem}.pm-scenario__meta small{padding:5px 8px;border-radius:5px;color:var(--cl-muted);background:var(--cl-bg-off);font-size:.64rem;font-weight:900;letter-spacing:.08em}.pm-scenario h3{margin-bottom:8px;font-size:1.08rem}.pm-scenario__question{color:var(--cl-muted);font-size:.83rem;line-height:1.6}.pm-answer{display:flex;gap:11px;margin-top:auto;padding:16px;border-radius:12px}.pm-answer--right{color:#216c61;background:var(--cl-mint-l)}.pm-answer p{margin:0;font-size:.79rem;line-height:1.55}.pm-answer i{flex:0 0 auto}.pm-section--future{color:#fff;background:linear-gradient(135deg,#093b72,var(--cl-blue-d))}.pm-future{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.pm-future .pm-eyebrow{color:var(--cl-mint)}.pm-future>div>p:last-child{color:rgba(255,255,255,.65);line-height:1.7}.pm-future__topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pm-future__topics span{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.07);font-size:.8rem;font-weight:700}.pm-future__topics i{color:var(--cl-mint)}
@media(max-width:980px){.pm-hero__grid{grid-template-columns:1fr;gap:42px}.pm-hero__card{max-width:620px}.pm-principles,.pm-context-grid,.pm-scenarios{grid-template-columns:repeat(2,1fr)}.pm-steps{grid-template-columns:1fr;gap:0}.pm-steps:before{top:20px;bottom:20px;left:28px;right:auto;width:1px;height:auto}.pm-steps article{display:flex;align-items:flex-start;gap:18px;padding:0 0 22px;text-align:left}.pm-steps article>span{flex:0 0 58px;margin:0}.pm-future{gap:40px}}
@media(max-width:720px){.pm-hero{padding:58px 0 52px}.pm-hero h1{font-size:clamp(2.35rem,12vw,3.4rem)}.pm-hero__grid{gap:34px}.pm-hero__card{padding:22px}.pm-jump{top:56px}.pm-jump__label{display:none}.pm-section{padding:68px 0}.pm-section__intro{grid-template-columns:46px 1fr;gap:14px;margin-bottom:32px}.pm-section__number{width:44px;height:44px;border-radius:12px;font-size:.8rem}.pm-principles,.pm-context-grid,.pm-signal-grid,.pm-first-grid,.pm-scenarios,.pm-future,.pm-future__topics{grid-template-columns:1fr}.pm-principle,.pm-context-card,.pm-signal-card,.pm-scenario{padding:22px}.pm-scenario{min-height:auto}.pm-answer{margin-top:24px}.pm-future{gap:28px}}
@media(max-width:430px){.pm-hero__actions .cl-btn{width:100%}.pm-hero__card-head{flex-direction:column;gap:4px}.pm-section__intro{grid-template-columns:1fr}.pm-section__number{display:none}.pm-steps article>span{width:50px;height:50px;flex-basis:50px}.pm-steps:before{left:24px}.pm-future__topics span{padding:12px}}

.pm-principle small{display:block;margin:-3px 0 10px;color:var(--cl-blue);font-size:.67rem;font-weight:800;letter-spacing:.035em}.pm-principle--mint small{color:#287d70}.pm-principle--gold small{color:#8a5e0a}.pm-principle--coral small{color:var(--cl-coral)}.pm-principle--violet small{color:#7257c8}.pm-principle--ink small{color:var(--cl-muted)}

/* PMP Exam Strategy 2026 */
.strategy-page{background:#fff;color:var(--cl-ink)}.strategy-page h1,.strategy-page h2,.strategy-page h3,.strategy-page p{margin-top:0}.strategy-hero{position:relative;overflow:hidden;padding:84px 0 76px;background:radial-gradient(circle at 12% 80%,rgba(143,224,211,.13),transparent 30%),radial-gradient(circle at 85% 20%,rgba(0,113,220,.3),transparent 34%),var(--cl-dark)}.strategy-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 55%,rgba(255,255,255,.035) 55% 56%,transparent 56%);background-size:70px 70px}.strategy-hero__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:72px}.strategy-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:7px 12px;border:1px solid rgba(245,190,111,.25);border-radius:99px;color:var(--cl-gold);background:rgba(245,190,111,.08);font-size:.74rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.strategy-hero h1{max-width:780px;margin-bottom:20px;color:#fff;font-family:var(--cl-font-head);font-size:clamp(2.8rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.045em}.strategy-hero h1 span{color:var(--cl-mint)}.strategy-hero__grid>div:first-child>p{max-width:650px;margin-bottom:30px;color:rgba(255,255,255,.66);font-size:1.02rem;line-height:1.75}.strategy-hero__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.strategy-hero__actions>a:not(.cl-btn){color:#fff;font-size:.9rem;font-weight:750;text-decoration:none}.strategy-clock{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:26px;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.07);box-shadow:0 28px 70px rgba(0,0,0,.25);backdrop-filter:blur(14px)}.strategy-clock__ring{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:12px solid rgba(255,255,255,.08);border-top-color:var(--cl-mint);border-right-color:var(--cl-blue-l);border-radius:50%}.strategy-clock__ring strong{color:#fff;font-family:var(--cl-font-head);font-size:2.7rem;line-height:1}.strategy-clock__ring span{margin-top:5px;color:var(--cl-mint);font-size:.67rem;font-weight:900;letter-spacing:.14em}.strategy-clock__facts{display:grid;gap:15px}.strategy-clock__facts p{padding-bottom:14px;margin:0;border-bottom:1px solid rgba(255,255,255,.1)}.strategy-clock__facts p:last-child{padding-bottom:0;border:0}.strategy-clock__facts strong,.strategy-clock__facts span{display:block}.strategy-clock__facts strong{color:#fff;font-size:1rem}.strategy-clock__facts span{margin-top:3px;color:rgba(255,255,255,.46);font-size:.7rem}
.strategy-nav{position:sticky;top:64px;z-index:80;border-bottom:1px solid var(--cl-border);background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(17,28,53,.05);backdrop-filter:blur(12px)}.strategy-nav>div{display:flex;gap:8px;align-items:center;min-height:58px;overflow-x:auto;scrollbar-width:none}.strategy-nav>div::-webkit-scrollbar{display:none}.strategy-nav a{padding:7px 12px;border-radius:99px;color:var(--cl-ink);font-size:.79rem;font-weight:750;text-decoration:none;white-space:nowrap}.strategy-nav a:hover{color:var(--cl-blue);background:rgba(0,113,220,.07)}.strategy-section{padding:92px 0;scroll-margin-top:120px}.strategy-section--soft{background:#f5f7fa}.strategy-section--dark{color:#fff;background:var(--cl-dark)}.strategy-heading{display:grid;grid-template-columns:58px minmax(0,760px);gap:20px;margin-bottom:42px}.strategy-heading>span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(0,113,220,.18);border-radius:15px;color:var(--cl-blue);background:rgba(0,113,220,.06);font-weight:900}.strategy-heading p{margin-bottom:7px;color:var(--cl-blue);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.strategy-heading h2{margin-bottom:10px;font-family:var(--cl-font-head);font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;letter-spacing:-.035em}.strategy-heading small{display:block;color:var(--cl-muted);font-size:.87rem;line-height:1.65}.strategy-heading--light>span{color:var(--cl-mint);border-color:rgba(143,224,211,.2);background:rgba(143,224,211,.08)}.strategy-heading--light p{color:var(--cl-mint)}.strategy-heading--light small{color:rgba(255,255,255,.5)}
.strategy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.strategy-stats article{position:relative;padding:26px;border:1px solid var(--cl-border);border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(17,28,53,.045)}.strategy-stats i{position:absolute;right:22px;top:22px;color:var(--cl-blue);font-size:1.2rem}.strategy-stats strong,.strategy-stats span,.strategy-stats small{display:block}.strategy-stats strong{margin-bottom:5px;color:var(--cl-blue);font-family:var(--cl-font-head);font-size:2.6rem}.strategy-stats span{margin-bottom:10px;font-weight:800}.strategy-stats small{color:var(--cl-muted);font-size:.75rem;line-height:1.55}.strategy-break-map{display:grid;grid-template-columns:1.35fr auto 1fr auto 1fr;align-items:stretch;gap:8px;margin-top:22px}.strategy-break-map__segment,.strategy-break{display:flex;flex-direction:column;justify-content:center;min-height:120px;padding:18px;border-radius:13px}.strategy-break-map__segment{color:#fff;background:var(--cl-dark)}.strategy-break-map__segment--case{background:linear-gradient(135deg,var(--cl-blue-d),var(--cl-blue))}.strategy-break-map__segment span{color:var(--cl-mint);font-size:.64rem;font-weight:900;letter-spacing:.1em}.strategy-break-map__segment strong{margin:6px 0;font-size:.92rem}.strategy-break-map__segment small{color:rgba(255,255,255,.5);font-size:.7rem}.strategy-break{align-items:center;min-width:86px;color:#246e64;background:var(--cl-mint-l);text-align:center}.strategy-break i{margin-bottom:5px}.strategy-break strong{font-size:.75rem}.strategy-break span{font-size:.67rem}.strategy-callout{display:flex;align-items:flex-start;gap:13px;margin-top:16px;padding:18px 20px;border:1px solid #f3dfaa;border-radius:12px;color:#75550a;background:#fff9e7;font-size:.82rem;line-height:1.6}.strategy-callout p{margin:0}
.strategy-domain-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}.strategy-domain-chart{display:grid;gap:20px;padding:28px;border:1px solid var(--cl-border);border-radius:17px;background:#fff}.strategy-domain-row header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9rem}.strategy-domain-row>div{height:9px;overflow:hidden;border-radius:99px;background:#e9edf3}.strategy-domain-row>div i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cl-blue),var(--cl-blue-l))}.strategy-domain-row p{margin:8px 0 0;color:var(--cl-muted);font-size:.75rem}.strategy-domain-row--accent header strong{color:var(--cl-coral)}.strategy-domain-row--accent>div i{background:linear-gradient(90deg,var(--cl-coral),var(--cl-gold))}.strategy-approach{display:flex;flex-direction:column;justify-content:center;padding:26px;border-radius:17px;color:#fff;background:var(--cl-dark)}.strategy-approach__split{display:grid;grid-template-columns:40% 60%;overflow:hidden;border-radius:10px}.strategy-approach__split span{display:flex;flex-direction:column;justify-content:center;min-height:130px;padding:16px;background:rgba(77,163,255,.15);font-size:.68rem}.strategy-approach__split span:last-child{background:linear-gradient(135deg,var(--cl-blue-d),var(--cl-blue))}.strategy-approach__split strong{margin-bottom:5px;font-size:1.5rem}.strategy-approach>p{margin:18px 0 0;color:rgba(255,255,255,.52);font-size:.75rem;line-height:1.6}
.strategy-types{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.strategy-types article{position:relative;padding:24px 18px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045)}.strategy-types article>span{position:absolute;right:15px;top:13px;color:rgba(255,255,255,.15);font-family:var(--cl-font-head)}.strategy-types i{display:block;margin-bottom:22px;color:var(--cl-mint);font-size:1.35rem}.strategy-types h3{margin-bottom:8px;color:#fff;font-size:.9rem}.strategy-types p{margin:0;color:rgba(255,255,255,.45);font-size:.75rem;line-height:1.55}.strategy-case-tip{display:flex;align-items:flex-start;gap:14px;max-width:800px;margin:22px auto 0;padding:18px 20px;border:1px solid rgba(143,224,211,.2);border-radius:13px;color:var(--cl-mint);background:rgba(143,224,211,.07)}.strategy-case-tip p{margin:5px 0 0;color:rgba(255,255,255,.52);font-size:.8rem;line-height:1.6}
.strategy-pace-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.strategy-pace-card{padding:24px;border:1px solid var(--cl-border);border-radius:15px;background:#fff}.strategy-pace-card>i{display:block;margin-bottom:22px;color:var(--cl-blue);font-size:1.25rem}.strategy-pace-card>span{display:block;margin-bottom:14px;color:#fff;font-family:var(--cl-font-head);font-size:2.5rem}.strategy-pace-card h3{margin-bottom:8px;font-size:.92rem}.strategy-pace-card p{margin:0;color:var(--cl-muted);font-size:.76rem;line-height:1.6}.strategy-pace-card--primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--cl-blue-d),var(--cl-blue))}.strategy-pace-card--primary p{color:rgba(255,255,255,.62)}.strategy-pacing-plan{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:18px;padding:24px 28px;border-radius:15px;color:#fff;background:var(--cl-dark)}.strategy-pacing-plan p{margin:5px 0 0;color:rgba(255,255,255,.5);font-size:.76rem}.strategy-pacing-plan__formula{display:flex;align-items:center;gap:12px;white-space:nowrap}.strategy-pacing-plan__formula span{font-size:1.2rem}.strategy-pacing-plan__formula i{color:var(--cl-muted);font-style:normal}.strategy-pacing-plan__formula strong{color:var(--cl-mint);font-size:1.4rem}
.strategy-method{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.strategy-method article{display:flex;gap:14px;padding:22px;border:1px solid var(--cl-border);border-radius:15px;background:#fff}.strategy-method article>span{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;color:#fff;background:var(--cl-blue);font-weight:900}.strategy-method small{color:var(--cl-blue);font-size:.62rem;font-weight:900;letter-spacing:.1em}.strategy-method h3{margin:5px 0 7px;font-size:.88rem}.strategy-method p{margin:0;color:var(--cl-muted);font-size:.74rem;line-height:1.55}.strategy-traps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.strategy-traps article{display:flex;gap:13px;padding:17px 19px;border-radius:12px;background:#fff}.strategy-traps i{color:var(--cl-coral)}.strategy-traps strong{font-size:.82rem}.strategy-traps p{margin:4px 0 0;color:var(--cl-muted);font-size:.73rem;line-height:1.5}
.strategy-checklist{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.strategy-checklist article{padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045)}.strategy-checklist article>span{display:inline-block;margin-bottom:18px;padding:5px 8px;border-radius:6px;color:var(--cl-mint);background:rgba(143,224,211,.1);font-size:.64rem;font-weight:900;letter-spacing:.08em}.strategy-checklist h3{margin-bottom:14px;color:#fff;font-size:.92rem}.strategy-checklist ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}.strategy-checklist li{position:relative;padding-left:16px;color:rgba(255,255,255,.5);font-size:.74rem;line-height:1.5}.strategy-checklist li:before{content:"✓";position:absolute;left:0;color:var(--cl-mint)}.strategy-mantra{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;padding:22px;border:1px solid rgba(245,190,111,.2);border-radius:15px;background:rgba(245,190,111,.07);text-align:left}.strategy-mantra>span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--cl-dark);background:var(--cl-gold)}.strategy-mantra small,.strategy-mantra strong{display:block}.strategy-mantra small{margin-bottom:4px;color:rgba(255,255,255,.42);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.strategy-mantra strong{color:var(--cl-gold);font-size:.9rem}
@media(max-width:1000px){.strategy-hero__grid{grid-template-columns:1fr;gap:42px}.strategy-clock{max-width:620px}.strategy-types{grid-template-columns:repeat(3,1fr)}.strategy-pace-grid,.strategy-method,.strategy-checklist{grid-template-columns:repeat(2,1fr)}.strategy-break-map{grid-template-columns:1fr}.strategy-break{min-height:60px}.strategy-break-map__segment{min-height:100px}}
@media(max-width:720px){.strategy-hero{padding:58px 0 54px}.strategy-hero h1{font-size:clamp(2.35rem,12vw,3.4rem)}.strategy-clock{grid-template-columns:1fr;padding:22px}.strategy-clock__ring{width:180px;margin:0 auto}.strategy-clock__facts{grid-template-columns:repeat(3,1fr)}.strategy-clock__facts p{padding:0;border:0;text-align:center}.strategy-clock__facts strong{font-size:.8rem}.strategy-nav{top:56px}.strategy-section{padding:68px 0}.strategy-heading{grid-template-columns:44px 1fr;gap:14px;margin-bottom:32px}.strategy-heading>span{width:44px;height:44px}.strategy-stats,.strategy-domain-layout,.strategy-types,.strategy-pace-grid,.strategy-method,.strategy-traps,.strategy-checklist{grid-template-columns:1fr}.strategy-stats article,.strategy-domain-chart,.strategy-approach{padding:22px}.strategy-pacing-plan{align-items:flex-start;flex-direction:column}.strategy-method article{padding:19px}.strategy-mantra{align-items:flex-start}}
@media(max-width:430px){.strategy-hero__actions .cl-btn{width:100%}.strategy-clock__facts{grid-template-columns:1fr;gap:10px}.strategy-clock__facts p{text-align:left}.strategy-heading{grid-template-columns:1fr}.strategy-heading>span{display:none}.strategy-pacing-plan__formula{gap:8px}.strategy-pacing-plan__formula span{font-size:1rem}.strategy-pacing-plan__formula strong{font-size:1.15rem}}

/* Strategy page — CertLab logo palette */
.strategy-page{--strategy-blue:#174ea6;--strategy-blue-bright:#327ff7;--strategy-blue-light:#7cafff;--strategy-orange:#fe8115;--strategy-orange-soft:#fff1e5}
.strategy-hero{background:radial-gradient(circle at 12% 80%,rgba(254,129,21,.16),transparent 30%),radial-gradient(circle at 85% 20%,rgba(50,127,247,.34),transparent 34%),#071d3d}.strategy-hero h1 span{color:var(--strategy-orange)}.strategy-kicker{color:#ffad64;border-color:rgba(254,129,21,.35);background:rgba(254,129,21,.1)}.strategy-clock__ring{border-top-color:var(--strategy-orange);border-right-color:var(--strategy-blue-light)}.strategy-clock__ring span{color:#ffad64}
.strategy-nav a:hover{color:var(--strategy-blue);background:rgba(23,78,166,.07)}.strategy-heading>span{color:var(--strategy-blue);border-color:rgba(23,78,166,.18);background:rgba(23,78,166,.06)}.strategy-heading p{color:var(--strategy-blue)}.strategy-heading--light>span{color:#ffad64;border-color:rgba(254,129,21,.25);background:rgba(254,129,21,.09)}.strategy-heading--light p{color:#ffad64}
.strategy-stats i,.strategy-stats strong{color:var(--strategy-blue)}.strategy-break-map__segment--case{background:linear-gradient(135deg,var(--strategy-blue),var(--strategy-blue-bright))}.strategy-break-map__segment span{color:#ffad64}.strategy-break{color:#994700;background:var(--strategy-orange-soft)}.strategy-callout{color:#8a4000;border-color:#ffd5b2;background:#fff7ef}
.strategy-domain-row>div i{background:linear-gradient(90deg,var(--strategy-blue),var(--strategy-blue-light))}.strategy-domain-row--accent header strong{color:var(--strategy-orange)}.strategy-domain-row--accent>div i{background:linear-gradient(90deg,var(--strategy-orange),#ffb067)}.strategy-approach__split span{background:rgba(50,127,247,.18)}.strategy-approach__split span:last-child{background:linear-gradient(135deg,var(--strategy-blue),var(--strategy-blue-bright))}
.strategy-types i,.strategy-case-tip{color:#ffad64}.strategy-case-tip{border-color:rgba(254,129,21,.25);background:rgba(254,129,21,.08)}.strategy-pace-card>i{color:var(--strategy-blue)}.strategy-pace-card--primary{background:linear-gradient(135deg,var(--strategy-blue),var(--strategy-blue-bright))}.strategy-pacing-plan__formula strong{color:#ffad64}.strategy-method article>span{background:var(--strategy-blue)}.strategy-method small{color:var(--strategy-blue)}.strategy-checklist article>span{color:#ffad64;background:rgba(254,129,21,.1)}.strategy-checklist li:before{color:#ffad64}.strategy-mantra{border-color:rgba(254,129,21,.26);background:rgba(254,129,21,.08)}.strategy-mantra>span{color:#fff;background:var(--strategy-orange)}.strategy-mantra strong{color:#ffad64}

/* Exam blueprint */
.exam-blueprint{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}.exam-blueprint__total{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:26px;padding:30px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#071d3d,var(--strategy-blue));box-shadow:0 20px 48px rgba(23,78,166,.16)}.exam-blueprint__dial{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:12px solid rgba(255,255,255,.1);border-top-color:var(--strategy-orange);border-right-color:var(--strategy-blue-light);border-radius:50%;background:rgba(255,255,255,.035)}.exam-blueprint__dial strong{font-family:var(--cl-font-head);font-size:3rem;line-height:1}.exam-blueprint__dial span{margin-top:6px;color:#ffbd84;font-size:.65rem;font-weight:900;letter-spacing:.12em}.exam-blueprint__total>div:last-child>p{margin-bottom:5px;color:#ffbd84;font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.exam-blueprint__total h3{margin-bottom:9px;font-family:var(--cl-font-head);font-size:1.25rem;line-height:1.25}.exam-blueprint__total small{display:block;color:rgba(255,255,255,.55);font-size:.76rem;line-height:1.6}.exam-blueprint__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.exam-blueprint__facts article{display:flex;align-items:center;gap:15px;padding:20px;border:1px solid var(--cl-border);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(17,28,53,.04)}.exam-blueprint__icon{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:13px;color:var(--strategy-blue);background:rgba(23,78,166,.08);font-size:1.05rem}.exam-blueprint__icon--orange{color:var(--strategy-orange);background:var(--strategy-orange-soft)}.exam-blueprint__facts strong,.exam-blueprint__facts p,.exam-blueprint__facts small{display:block}.exam-blueprint__facts strong{margin-bottom:2px;color:var(--strategy-blue);font-family:var(--cl-font-head);font-size:1.4rem}.exam-blueprint__facts article:nth-child(even) strong{color:var(--strategy-orange)}.exam-blueprint__facts p{margin:0;font-size:.78rem;font-weight:800}.exam-blueprint__facts small{margin-top:4px;color:var(--cl-muted);font-size:.67rem;line-height:1.45}
.exam-journey{margin-top:22px;padding:28px;border:1px solid var(--cl-border);border-radius:20px;background:#f8fafd}.exam-journey__top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.exam-journey__top p{margin-bottom:4px;color:var(--strategy-blue);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.exam-journey__top h3{margin:0;font-family:var(--cl-font-head);font-size:1.35rem}.exam-journey__top>span{padding:7px 10px;border-radius:7px;color:#8a4000;background:var(--strategy-orange-soft);font-size:.67rem;font-weight:750}.exam-journey__track{position:relative;display:grid;grid-template-columns:1.2fr 82px 1fr 82px 1fr;align-items:stretch;gap:10px}.exam-journey__track:before{content:"";position:absolute;top:50%;left:5%;right:5%;height:2px;background:linear-gradient(90deg,var(--strategy-blue),var(--strategy-orange));transform:translateY(-50%)}.exam-stage,.exam-stop{position:relative;z-index:1}.exam-stage{min-height:180px;padding:22px;border:1px solid #dce4f0;border-radius:15px;background:#fff}.exam-stage--case{color:#fff;border-color:transparent;background:linear-gradient(145deg,var(--strategy-blue),var(--strategy-blue-bright));box-shadow:0 15px 34px rgba(23,78,166,.18)}.exam-stage>span{display:inline-block;margin-bottom:24px;padding:5px 8px;border-radius:5px;color:var(--strategy-blue);background:rgba(23,78,166,.07);font-size:.61rem;font-weight:900;letter-spacing:.09em}.exam-stage--case>span{color:#ffbd84;background:rgba(254,129,21,.13)}.exam-stage>i{display:block;margin-bottom:14px;color:var(--strategy-orange);font-size:1.25rem}.exam-stage h3{margin-bottom:7px;font-size:.92rem}.exam-stage p{margin:0;color:var(--cl-muted);font-size:.7rem;line-height:1.5}.exam-stage--case p{color:rgba(255,255,255,.58)}.exam-stop{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;width:82px;height:116px;border:7px solid #f8fafd;border-radius:16px;color:#fff;background:var(--strategy-orange);box-shadow:0 10px 24px rgba(254,129,21,.22);text-align:center}.exam-stop>span{position:absolute;top:7px;right:8px;color:rgba(255,255,255,.5);font-size:.58rem;font-weight:900}.exam-stop i{margin-bottom:5px;font-size:1.1rem}.exam-stop strong{font-size:.65rem;letter-spacing:.08em}.exam-stop small{margin-top:2px;color:rgba(255,255,255,.72);font-size:.6rem}.exam-journey__note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:15px 17px;border-radius:11px;color:#794000;background:#fff4e9;font-size:.76rem;line-height:1.55}.exam-journey__note p{margin:0}
@media(max-width:900px){.exam-blueprint{grid-template-columns:1fr}.exam-journey__track{grid-template-columns:1fr}.exam-journey__track:before{top:5%;bottom:5%;left:50%;right:auto;width:2px;height:auto;transform:translateX(-50%)}.exam-stage{min-height:150px}.exam-stop{width:116px;height:72px;margin:0 auto;border-color:#f8fafd}.exam-stop>span{top:5px}}
@media(max-width:620px){.exam-blueprint__total{grid-template-columns:1fr;text-align:center}.exam-blueprint__dial{width:170px;margin:0 auto}.exam-blueprint__facts{grid-template-columns:1fr}.exam-journey{padding:20px}.exam-journey__top{align-items:flex-start;flex-direction:column}.exam-stage{padding:20px}.exam-stage>span{margin-bottom:18px}}

/* Encoding-safe checkmark */
.pm-context-card li::before,.strategy-checklist li::before{content:"\2713"}

/* PMI Mindset — refined heading hierarchy */
.pm-page{--pm-heading:#0b2545;--pm-heading-soft:#174ea6;--pm-accent:#fe8115}
.pm-hero h1{max-width:720px;font-size:clamp(2.55rem,5vw,4.45rem);font-weight:800;line-height:1.06;letter-spacing:-.035em}.pm-hero h1 span{color:var(--pm-accent)}.pm-hero__copy>p{max-width:640px;color:rgba(255,255,255,.72);font-size:1rem;line-height:1.72}
.pm-section__intro h2{color:var(--pm-heading);font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:800;line-height:1.14;letter-spacing:-.025em}.pm-section__intro--light h2{color:#fff}.pm-eyebrow{color:var(--pm-heading-soft);font-size:.72rem;letter-spacing:.11em}.pm-section__intro--light .pm-eyebrow{color:#7cafff}
.pm-principle h3,.pm-context-card h3,.pm-signal-card h3,.pm-scenario h3{color:var(--pm-heading);font-family:var(--cl-font-head);font-weight:700;letter-spacing:-.012em}.pm-principle h3{font-size:1.05rem;line-height:1.3}.pm-context-card h3{font-size:1.12rem}.pm-signal-card h3{font-size:1.08rem}.pm-scenario h3{font-size:1.05rem;line-height:1.35}.pm-steps h3{font-family:var(--cl-font-head);font-size:.95rem;font-weight:700;letter-spacing:-.01em}.pm-first-grid strong{font-size:.74rem;letter-spacing:.1em}.pm-future h2{font-size:clamp(1.9rem,3.5vw,2.8rem);line-height:1.13;letter-spacing:-.025em}
@media(max-width:720px){.pm-hero h1{font-size:clamp(2.2rem,10.8vw,3rem);line-height:1.08}.pm-hero__copy>p{font-size:.94rem}.pm-section__intro h2{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.16}.pm-principle h3,.pm-context-card h3,.pm-signal-card h3,.pm-scenario h3{font-size:1rem}}

/* PMBOK principles — official framework cards */
.pm-official-principles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;counter-reset:principle}.pm-official-principles article{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:24px 54px 24px 24px;border:1px solid #dfe5ee;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(17,28,53,.04);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.pm-official-principles article:hover{transform:translateY(-2px);border-color:rgba(23,78,166,.28);box-shadow:0 16px 36px rgba(17,28,53,.08)}.pm-official-principles article>b{position:absolute;right:18px;top:18px;color:#cbd4e1;font-family:var(--cl-font-head);font-size:1rem}.pm-official-principles article>span{display:flex;align-items:center;justify-content:center;grid-row:1/span 3;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#174ea6,#327ff7);font-size:1.1rem}.pm-official-principles article:nth-child(even)>span{background:linear-gradient(135deg,#de6500,#fe8115)}.pm-official-principles small{display:block;margin-bottom:5px;color:#174ea6;font-size:.65rem;font-weight:850;letter-spacing:.065em;text-transform:uppercase}.pm-official-principles article:nth-child(even) small{color:#c55a00}.pm-official-principles h3{margin-bottom:7px;color:#0b2545;font-family:var(--cl-font-head);font-size:1.06rem;line-height:1.28;letter-spacing:-.012em}.pm-official-principles p{margin:0;color:var(--cl-muted);font-size:.79rem;line-height:1.62}
/* Six-question decision checklist */
.pm-decision-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:18px;align-items:stretch}.pm-decision-compass{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:430px;padding:34px;border-radius:18px;color:#fff;background:radial-gradient(circle at 85% 10%,rgba(254,129,21,.3),transparent 30%),linear-gradient(145deg,#071d3d,#174ea6);box-shadow:0 20px 46px rgba(23,78,166,.18)}.pm-decision-compass:after{content:"";position:absolute;right:-60px;bottom:-60px;width:210px;height:210px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018)}.pm-decision-compass>span{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:30px;border-radius:50%;color:#fff;background:#fe8115;font-size:1.3rem;box-shadow:0 10px 26px rgba(254,129,21,.28)}.pm-decision-compass>small{color:#ffbd84;font-size:.65rem;font-weight:900;letter-spacing:.12em}.pm-decision-compass h3{max-width:280px;margin:8px 0 12px;color:#fff;font-family:var(--cl-font-head);font-size:1.55rem;line-height:1.2}.pm-decision-compass>p{max-width:310px;margin-bottom:28px;color:rgba(255,255,255,.62);font-size:.84rem;line-height:1.65}.pm-decision-compass>div{position:relative;z-index:1;display:flex;gap:8px;align-items:center;color:#7cafff;font-size:.62rem;letter-spacing:.07em}.pm-decision-compass>div i{color:rgba(255,255,255,.3);font-style:normal}.pm-decision-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pm-decision-list article{display:grid;grid-template-columns:28px 38px 1fr;align-items:start;gap:11px;padding:18px;border:1px solid #dfe5ee;border-radius:14px;background:#fff;transition:border-color .2s ease,background .2s ease}.pm-decision-list article:hover{border-color:rgba(23,78,166,.28);background:#f8faff}.pm-decision-list article>span{padding-top:3px;color:#aab6c7;font-size:.65rem;font-weight:900;letter-spacing:.04em}.pm-decision-list article>i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;color:#174ea6;background:rgba(23,78,166,.08)}.pm-decision-list article:nth-child(even)>i{color:#cf5e00;background:#fff1e5}.pm-decision-list h3{margin-bottom:5px;color:#0b2545;font-family:var(--cl-font-head);font-size:.92rem;line-height:1.3}.pm-decision-list p{margin:0;color:var(--cl-muted);font-size:.73rem;line-height:1.55}
@media(max-width:900px){.pm-decision-layout{grid-template-columns:1fr}.pm-decision-compass{min-height:300px}.pm-decision-list{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.pm-official-principles{grid-template-columns:1fr}.pm-official-principles article{grid-template-columns:42px 1fr;padding:20px 46px 20px 18px}.pm-official-principles article>span{width:42px;height:42px}.pm-decision-compass{min-height:320px;padding:28px}.pm-decision-list{grid-template-columns:1fr}.pm-decision-list article{grid-template-columns:24px 36px 1fr;padding:16px}.pm-decision-list article>i{width:36px;height:36px}}