/* ============================================================
   CICC LMS — Course Landing Page
   Enterprise LMS · Coursera-inspired dark hero + clean sections
   ============================================================ */

/* ── Custom Properties ────────────────────────────────────── */
.cicc-lms-course-landing {
  --cl-primary: #0057a3;
  --cl-accent: #f97316;
  --cl-dark: #0f172a;
  --cl-surface: #f8fafc;
  --cl-border: #e2e8f0;
  --cl-text: #1e293b;
  --cl-muted: #64748b;
  --cl-gold: #fbbf24;

  --cl-primary-light: #3b82f6;
  --cl-primary-dark: #003d73;
  --cl-accent-light: #fb923c;
  --cl-accent-dark: #ea580c;
  --cl-teal: #0f766e;
  --cl-teal-light: #14b8a6;
  --cl-surface-elevated: #ffffff;
  --cl-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --cl-shadow-md: 0 4px 14px rgba(0,0,0,.1);
  --cl-shadow-lg: 0 12px 40px rgba(0,0,0,.18);
  --cl-shadow-glow: 0 0 30px rgba(0,87,163,.25);
  --cl-radius-sm: 6px;
  --cl-radius-md: 10px;
  --cl-radius-lg: 16px;
  --cl-radius-xl: 24px;
  --cl-radius-pill: 999px;
  --cl-transition: .25s cubic-bezier(.4,0,.2,1);
  --cl-section-max: 1120px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--cl-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Compatibility adapter for the first Core landing markup. */
.cicc-lms-course-landing .cl-container{max-width:var(--cl-section-max);margin:0 auto;padding-inline:24px}
.cicc-lms-course-landing .cl-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:center;padding:72px 24px 80px}
.cicc-lms-course-landing .cl-hero__subtitle{color:rgba(255,255,255,.82);max-width:620px;font-size:1.08rem;line-height:1.7}
.cicc-lms-course-landing .cl-hero__badge{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid rgba(255,255,255,.2);border-radius:var(--cl-radius-pill);color:var(--cl-gold);font-size:.75rem;font-weight:700}
.cicc-lms-course-landing .cl-hero__pill{display:inline-flex;gap:5px;padding:.7rem .9rem;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:rgba(255,255,255,.78)}
.cicc-lms-course-landing .cl-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.cicc-lms-course-landing .cl-hero__ctas small{display:block;opacity:.75;font-size:.72rem}
.cicc-lms-course-landing .cl-hero__thumb{min-height:220px;display:grid;place-items:center;background:#0b3b60;color:#fbbf24;border-radius:var(--cl-radius-lg)}
.cicc-lms-course-landing .cl-kicker{display:block;color:var(--cl-primary);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.cicc-lms-course-landing .cl-section__title{color:var(--cl-dark);font-size:clamp(1.7rem,3vw,2.35rem);margin:.4rem 0 1.8rem}
.cicc-lms-course-landing .cl-outcome{padding:80px 0;background:var(--cl-surface)}
.cicc-lms-course-landing .cl-outcome__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cicc-lms-course-landing .cl-outcome__card{padding:28px 22px;border:1px solid var(--cl-border);border-radius:var(--cl-radius-lg);background:#fff}
.cicc-lms-course-landing .cl-outcome__icon{display:block;font-size:1.6rem;margin-bottom:14px}.cicc-lms-course-landing .cl-outcome__num{color:var(--cl-primary);font-size:.72rem;font-weight:800;letter-spacing:.08em}
.cicc-lms-course-landing .cl-outcome__title{margin:.65rem 0 .4rem;color:var(--cl-dark);font-size:1.1rem}.cicc-lms-course-landing .cl-outcome__desc{margin:0;color:var(--cl-muted);line-height:1.65}
.cicc-lms-course-landing .cl-curriculum{padding:80px 0;background:#fff}.cicc-lms-course-landing .cl-curriculum__items{border:1px solid var(--cl-border);border-radius:var(--cl-radius-lg);overflow:hidden}.cicc-lms-course-landing .cl-curriculum__item+.cl-curriculum__item{border-top:1px solid var(--cl-border)}
.cicc-lms-course-landing .cl-curriculum__header{display:grid;grid-template-columns:58px 1fr auto 28px;gap:12px;align-items:center;padding:18px 20px;cursor:pointer;list-style:none}.cicc-lms-course-landing .cl-curriculum__header::-webkit-details-marker{display:none}.cicc-lms-course-landing .cl-curriculum__id{color:var(--cl-primary);font-weight:800}.cicc-lms-course-landing .cl-curriculum__count{color:var(--cl-muted);font-size:.82rem}.cicc-lms-course-landing .cl-curriculum__expand{color:var(--cl-primary);font-size:1.3rem}
.cicc-lms-course-landing .cl-curriculum__body{padding:0 20px 16px 78px;background:var(--cl-surface)}.cicc-lms-course-landing .cl-curriculum__lessons{list-style:none;padding:0;margin:0}.cicc-lms-course-landing .cl-lesson-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--cl-border)}.cicc-lms-course-landing .cl-lesson-row:last-child{border-bottom:0}.cicc-lms-course-landing .cl-lesson-row__title{color:var(--cl-dark);font-weight:600}.cicc-lms-course-landing .cl-lesson-row__badge{padding:3px 9px;border-radius:var(--cl-radius-pill);font-size:.7rem;font-weight:700}.cicc-lms-course-landing .cl-lesson-row__badge--free{color:#047857;background:rgba(16,185,129,.12)}.cicc-lms-course-landing .cl-lesson-row__badge--lock{color:var(--cl-muted);background:rgba(100,116,139,.12)}.cicc-lms-course-landing .cl-lesson-row__link{color:var(--cl-primary);font-size:.8rem;font-weight:700}
@media (max-width:760px){.cicc-lms-course-landing .cl-hero__inner{display:block;padding-block:48px}.cicc-lms-course-landing .cl-hero__preview{margin-top:24px}.cicc-lms-course-landing .cl-outcome__grid{grid-template-columns:1fr}.cicc-lms-course-landing .cl-curriculum__header{grid-template-columns:44px 1fr 24px;padding-inline:12px}.cicc-lms-course-landing .cl-curriculum__count{grid-column:2}.cicc-lms-course-landing .cl-curriculum__body{padding-left:12px}.cicc-lms-course-landing .cl-lesson-row{grid-template-columns:1fr auto}.cicc-lms-course-landing .cl-lesson-row__dots{display:none}}

/* ── Reset within scope ───────────────────────────────────── */
.cicc-lms-course-landing *,
.cicc-lms-course-landing *::before,
.cicc-lms-course-landing *::after {
  box-sizing: border-box;
}

.cicc-lms-course-landing img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cicc-lms-course-landing a {
  color: var(--cl-primary);
  text-decoration: none;
  transition: color var(--cl-transition);
}

.cicc-lms-course-landing a:hover {
  color: var(--cl-accent);
}

/* ── Section Spacing Utility ──────────────────────────────── */
.cl-section {
  padding: 80px 24px;
}

.cl-section--narrow {
  padding: 48px 24px;
}

.cl-container {
  max-width: var(--cl-section-max);
  margin: 0 auto;
}

/* ── Section Heading ──────────────────────────────────────── */
.cl-heading {
  text-align: center;
  margin-bottom: 56px;
}

.cl-heading__label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cl-accent);
  margin-bottom: 12px;
}

.cl-heading__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--cl-dark);
  margin: 0 0 12px;
  line-height: 1.2;
}

.cl-heading__subtitle {
  font-size: 1.1rem;
  color: var(--cl-muted);
  max-width: 620px;
  margin: 0 auto;
}

/* ============================================================
   HERO SECTION — Dark gradient with glow
   ============================================================ */
.cl-hero {
  position: relative;
  background: linear-gradient(135deg, #062b55 0%, #0057a3 50%, #0f766e 100%);
  color: #ffffff;
  padding: 72px 24px 80px;
  overflow: hidden;
}

.cl-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cl-hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cl-hero__container {
  position: relative;
  z-index: 2;
  max-width: var(--cl-section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}

/* ── Hero Left: Content ──────────────────────────────────── */
.cl-hero__content {
  padding-top: 16px;
}

.cl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--cl-radius-pill);
  padding: 6px 16px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cl-gold);
  margin-bottom: 20px;
}

.cl-hero__title {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}

.cl-hero__desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 0 28px;
  max-width: 540px;
}

/* ── Metrics Pills ────────────────────────────────────────── */
.cl-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.cl-hero__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cl-radius-pill);
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

.cl-hero__metric-icon {
  font-size: 1rem;
}

.cl-hero__metric strong {
  color: #ffffff;
}

/* ── CTA Buttons ──────────────────────────────────────────── */
.cl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--cl-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--cl-transition);
  text-decoration: none;
  white-space: nowrap;
}

.cl-btn--primary {
  background: var(--cl-accent);
  color: #ffffff;
  border-color: var(--cl-accent);
  box-shadow: 0 4px 20px rgba(249,115,22,.35);
}

.cl-btn--primary:hover {
  background: var(--cl-accent-dark);
  border-color: var(--cl-accent-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(249,115,22,.45);
}

.cl-btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,.3);
}

.cl-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
  color: #ffffff;
}

.cl-btn--primary-dark {
  background: var(--cl-primary);
  color: #ffffff;
  border-color: var(--cl-primary);
  box-shadow: 0 4px 16px rgba(0,87,163,.3);
}

.cl-btn--primary-dark:hover {
  background: var(--cl-primary-dark);
  border-color: var(--cl-primary-dark);
  color: #ffffff;
  transform: translateY(-2px);
}

.cl-btn--ghost-dark {
  background: transparent;
  color: var(--cl-primary);
  border-color: var(--cl-primary);
}

.cl-btn--ghost-dark:hover {
  background: var(--cl-primary);
  color: #ffffff;
}

.cl-btn--sm {
  padding: 10px 20px;
  font-size: .85rem;
}

.cl-btn--lg {
  padding: 16px 40px;
  font-size: 1.05rem;
}

/* ── Hero Right: Preview Card ─────────────────────────────── */
.cl-hero__preview {
  background: var(--cl-surface-elevated);
  border-radius: var(--cl-radius-lg);
  overflow: hidden;
  box-shadow: var(--cl-shadow-lg), var(--cl-shadow-glow);
  border: 1px solid rgba(255,255,255,.08);
}

.cl-hero__preview-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.cl-hero__preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity var(--cl-transition);
}

.cl-hero__preview-thumb:hover img {
  opacity: 1;
}

.cl-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cl-transition);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.cl-hero__play:hover {
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1.08);
}

.cl-hero__play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--cl-primary);
  margin-left: 3px;
}

.cl-hero__preview-body {
  padding: 20px 24px 24px;
}

.cl-hero__preview-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cl-dark);
  margin: 0 0 8px;
}

.cl-hero__preview-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .85rem;
  color: var(--cl-muted);
}

.cl-hero__preview-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   WAYFINDING — Sticky Navigation
   ============================================================ */
.cl-wayfinding {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cl-border);
  transition: box-shadow var(--cl-transition);
}

.cl-wayfinding.is-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.cl-wayfinding__inner {
  max-width: var(--cl-section-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cl-wayfinding__inner::-webkit-scrollbar {
  display: none;
}

.cl-wayfinding__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--cl-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--cl-transition);
  cursor: pointer;
  text-decoration: none;
}

.cl-wayfinding__link:hover {
  color: var(--cl-primary);
}

.cl-wayfinding__link.is-active {
  color: var(--cl-primary);
  border-bottom-color: var(--cl-primary);
  font-weight: 600;
}

.cl-wayfinding__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-pill);
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--cl-text);
  transition: all var(--cl-transition);
}

.cl-wayfinding__link.is-active .cl-wayfinding__pill {
  background: var(--cl-primary);
  border-color: var(--cl-primary);
  color: #ffffff;
}

/* ============================================================
   OUTCOME SECTION — 4-Card Grid
   ============================================================ */
.cl-outcomes {
  background: var(--cl-surface);
}

.cl-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cl-outcome-card {
  background: var(--cl-surface-elevated);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: all var(--cl-transition);
  position: relative;
  overflow: hidden;
}

.cl-outcome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent));
  opacity: 0;
  transition: opacity var(--cl-transition);
}

.cl-outcome-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cl-shadow-lg);
  border-color: transparent;
}

.cl-outcome-card:hover::before {
  opacity: 1;
}

.cl-outcome-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--cl-radius-md);
  background: linear-gradient(135deg, rgba(0,87,163,.1), rgba(15,118,110,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.5rem;
}

.cl-outcome-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cl-dark);
  margin: 0 0 8px;
}

.cl-outcome-card__desc {
  font-size: .88rem;
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   CURRICULUM SECTION — Accordion
   ============================================================ */
.cl-curriculum {
  background: #ffffff;
}

.cl-curriculum__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Module (details/summary) ─────────────────────────────── */
.cl-module {
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-md);
  overflow: hidden;
  transition: all var(--cl-transition);
}

.cl-module[open] {
  border-color: var(--cl-primary);
  box-shadow: 0 2px 12px rgba(0,87,163,.08);
}

.cl-module__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--cl-surface);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background var(--cl-transition);
}

.cl-module__header::-webkit-details-marker,
.cl-module__header::marker {
  display: none;
  content: '';
}

.cl-module__header:hover {
  background: #eef2f7;
}

.cl-module__number {
  width: 32px;
  height: 32px;
  border-radius: var(--cl-radius-sm);
  background: var(--cl-primary);
  color: #ffffff;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cl-module__info {
  flex: 1;
  min-width: 0;
}

.cl-module__title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--cl-dark);
  margin: 0;
}

.cl-module__meta {
  font-size: .8rem;
  color: var(--cl-muted);
  margin-top: 2px;
}

.cl-module__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--cl-radius-pill);
  font-size: .72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cl-module__badge--free {
  background: rgba(16,185,129,.1);
  color: #059669;
}

.cl-module__badge--locked {
  background: rgba(100,116,139,.1);
  color: var(--cl-muted);
}

.cl-module__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--cl-transition);
  color: var(--cl-muted);
}

.cl-module[open] .cl-module__chevron {
  transform: rotate(180deg);
}

/* ── Module Body (lessons) ────────────────────────────────── */
.cl-module__body {
  padding: 4px 0;
}

/* ── Lesson Row ───────────────────────────────────────────── */
.cl-lesson {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 20px 12px 44px;
  border-top: 1px solid rgba(226,232,240,.6);
  transition: background var(--cl-transition);
}

.cl-lesson:first-child {
  border-top: none;
}

.cl-lesson:hover {
  background: rgba(0,87,163,.02);
}

.cl-lesson__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
}

.cl-lesson__icon--video {
  background: rgba(239,68,68,.1);
  color: #dc2626;
}

.cl-lesson__icon--reading {
  background: rgba(0,87,163,.1);
  color: var(--cl-primary);
}

.cl-lesson__icon--quiz {
  background: rgba(168,85,247,.1);
  color: #7c3aed;
}

.cl-lesson__icon--lab {
  background: rgba(16,185,129,.1);
  color: #059669;
}

.cl-lesson__icon--assignment {
  background: rgba(249,115,22,.1);
  color: var(--cl-accent);
}

.cl-lesson__name {
  font-size: .88rem;
  color: var(--cl-text);
  font-weight: 500;
}

.cl-lesson__duration {
  font-size: .78rem;
  color: var(--cl-muted);
  white-space: nowrap;
}

/* ── Lesson Artifact Icons (5 icons row) ──────────────────── */
.cl-lesson__artifacts {
  display: flex;
  gap: 6px;
}

.cl-lesson__artifact {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  color: var(--cl-muted);
  transition: all var(--cl-transition);
}

.cl-lesson__artifact:hover {
  background: var(--cl-primary);
  border-color: var(--cl-primary);
  color: #ffffff;
}

/* ── Lock/Free Badge on lessons ───────────────────────────── */
.cl-lesson__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--cl-radius-pill);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.cl-lesson__status--free {
  background: rgba(16,185,129,.1);
  color: #059669;
}

.cl-lesson__status--locked {
  background: rgba(100,116,139,.08);
  color: var(--cl-muted);
}

/* ============================================================
   INSTRUCTOR SECTION
   ============================================================ */
.cl-instructor {
  background: var(--cl-surface);
}

.cl-instructor__card {
  background: var(--cl-surface-elevated);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: start;
}

.cl-instructor__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--cl-border);
  box-shadow: var(--cl-shadow-md);
}

.cl-instructor__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cl-instructor__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cl-dark);
  margin: 0 0 4px;
}

.cl-instructor__role {
  font-size: .9rem;
  color: var(--cl-primary);
  font-weight: 600;
  margin: 0 0 16px;
}

.cl-instructor__bio {
  font-size: .92rem;
  color: var(--cl-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}

.cl-instructor__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cl-instructor__credential {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-pill);
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--cl-text);
}

.cl-instructor__credential-icon {
  color: var(--cl-gold);
}

/* ============================================================
   CERTIFICATE SECTION
   ============================================================ */
.cl-certificate {
  background: #ffffff;
}

.cl-certificate__mockup {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  border: 2px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  box-shadow: var(--cl-shadow-md);
  overflow: hidden;
}

.cl-certificate__mockup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cl-primary), var(--cl-gold), var(--cl-accent));
}

.cl-certificate__mockup::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cl-accent), var(--cl-gold), var(--cl-primary));
}

.cl-certificate__logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  opacity: .9;
}

.cl-certificate__issue {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cl-muted);
  margin-bottom: 8px;
}

.cl-certificate__name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cl-dark);
  margin: 0 0 8px;
  font-style: italic;
}

.cl-certificate__course {
  font-size: 1rem;
  color: var(--cl-primary);
  font-weight: 600;
  margin: 0 0 24px;
}

.cl-certificate__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--cl-border);
}

.cl-certificate__signature {
  text-align: left;
}

.cl-certificate__sig-line {
  width: 140px;
  border-bottom: 1px solid var(--cl-dark);
  margin-bottom: 4px;
  height: 24px;
}

.cl-certificate__sig-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cl-dark);
}

.cl-certificate__sig-role {
  font-size: .72rem;
  color: var(--cl-muted);
}

.cl-certificate__qr {
  width: 72px;
  height: 72px;
  background: var(--cl-surface);
  border: 2px solid var(--cl-border);
  border-radius: var(--cl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: var(--cl-muted);
  font-weight: 600;
}

.cl-certificate__date {
  font-size: .78rem;
  color: var(--cl-muted);
  margin-top: 12px;
}

/* ============================================================
   FAQ SECTION — Accordion
   ============================================================ */
.cl-faq {
  background: var(--cl-surface);
}

.cl-faq__list {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-faq__item {
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-md);
  overflow: hidden;
  background: var(--cl-surface-elevated);
  transition: all var(--cl-transition);
}

.cl-faq__item[open] {
  border-color: var(--cl-primary);
  box-shadow: 0 2px 10px rgba(0,87,163,.06);
}

.cl-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--cl-dark);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background var(--cl-transition);
}

.cl-faq__question::-webkit-details-marker,
.cl-faq__question::marker {
  display: none;
  content: '';
}

.cl-faq__question:hover {
  background: rgba(0,87,163,.02);
}

.cl-faq__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--cl-transition);
  color: var(--cl-muted);
}

.cl-faq__item[open] .cl-faq__chevron {
  transform: rotate(180deg);
}

.cl-faq__answer {
  padding: 0 20px 20px;
  font-size: .9rem;
  color: var(--cl-muted);
  line-height: 1.7;
}

.cl-faq__answer p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   STICKY ENROLLMENT BAR — Bottom
   ============================================================ */
.cl-enrollment-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--cl-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  padding: 14px 24px;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.cl-enrollment-bar.is-visible {
  transform: translateY(0);
}

.cl-enrollment-bar__inner {
  max-width: var(--cl-section-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cl-enrollment-bar__info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cl-enrollment-bar__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--cl-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-enrollment-bar__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cl-enrollment-bar__price-current {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cl-accent);
}

.cl-enrollment-bar__price-original {
  font-size: .85rem;
  color: var(--cl-muted);
  text-decoration: line-through;
}

.cl-enrollment-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   REVEAL ANIMATION — .cl-animate
   ============================================================ */
.cl-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}

.cl-animate.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.cl-animate--delay-1 { transition-delay: .1s; }
.cl-animate--delay-2 { transition-delay: .2s; }
.cl-animate--delay-3 { transition-delay: .3s; }
.cl-animate--delay-4 { transition-delay: .4s; }
.cl-animate--delay-5 { transition-delay: .5s; }

.cl-animate--scale {
  transform: scale(.95);
}

.cl-animate--scale.is-revealed {
  transform: scale(1);
}

.cl-animate--slide-left {
  transform: translateX(-40px);
}

.cl-animate--slide-left.is-revealed {
  transform: translateX(0);
}

.cl-animate--slide-right {
  transform: translateX(40px);
}

.cl-animate--slide-right.is-revealed {
  transform: translateX(0);
}

/* ============================================================
   VISIBLE BODY PADDING (when sticky bar shows)
   ============================================================ */
.cl-enrollment-bar-active .cl-hero,
.cl-enrollment-bar-active .cl-wayfinding {
  /* no change needed, fixed bar overlays */
}

body.cl-enrollment-bar-active {
  padding-bottom: 72px;
}

/* ============================================================
   RESPONSIVE — Tablet ≤ 960px
   ============================================================ */
@media (max-width: 960px) {
  .cl-hero__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cl-hero__title {
    font-size: 2.2rem;
  }

  .cl-hero__preview {
    max-width: 480px;
  }

  .cl-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cl-instructor__card {
    grid-template-columns: 120px 1fr;
    gap: 24px;
    padding: 32px;
  }

  .cl-instructor__avatar {
    width: 120px;
    height: 120px;
  }

  .cl-heading__title {
    font-size: 1.85rem;
  }

  .cl-certificate__mockup {
    padding: 36px 28px;
  }

  .cl-certificate__name {
    font-size: 1.4rem;
  }
}

/* ============================================================
   RESPONSIVE — Mobile ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  .cl-section {
    padding: 56px 16px;
  }

  .cl-hero {
    padding: 72px 16px 56px;
  }

  .cl-hero__title {
    font-size: 1.75rem;
  }

  .cl-hero__desc {
    font-size: 1rem;
  }

  .cl-hero__metrics {
    gap: 8px;
  }

  .cl-hero__metric {
    padding: 6px 12px;
    font-size: .78rem;
  }

  .cl-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cl-btn {
    justify-content: center;
    width: 100%;
  }

  .cl-outcomes__grid {
    grid-template-columns: 1fr;
  }

  .cl-instructor__card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 20px;
  }

  .cl-instructor__avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .cl-instructor__credentials {
    justify-content: center;
  }

  .cl-heading__title {
    font-size: 1.5rem;
  }

  .cl-heading__subtitle {
    font-size: .95rem;
  }

  .cl-module__header {
    padding: 14px 16px;
    gap: 10px;
  }

  .cl-module__number {
    width: 28px;
    height: 28px;
    font-size: .72rem;
  }

  .cl-lesson {
    grid-template-columns: 28px 1fr auto;
    padding: 10px 16px 10px 36px;
    gap: 8px;
  }

  .cl-lesson__artifacts {
    display: none;
  }

  .cl-lesson__name {
    font-size: .82rem;
  }

  .cl-faq__question {
    padding: 14px 16px;
    font-size: .88rem;
  }

  .cl-faq__answer {
    padding: 0 16px 16px;
    font-size: .85rem;
  }

  .cl-certificate__mockup {
    padding: 28px 20px;
  }

  .cl-certificate__name {
    font-size: 1.2rem;
  }

  .cl-certificate__footer {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .cl-enrollment-bar__inner {
    flex-direction: column;
    gap: 10px;
  }

  .cl-enrollment-bar__info {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .cl-enrollment-bar__actions {
    width: 100%;
    flex-direction: column;
  }

  .cl-enrollment-bar__actions .cl-btn {
    width: 100%;
  }

  .cl-wayfinding__link {
    padding: 12px 14px;
    font-size: .8rem;
  }

  body.cl-enrollment-bar-active {
    padding-bottom: 140px;
  }

  .cl-hero__preview {
    max-width: 100%;
  }
}



/* ── Shell padding for every landing section (HTML uses bare cl-* names) ────── */
.cl-outcomes,
.cl-curriculum,
.cl-instructor,
.cl-certificate,
.cl-faq {
  padding: 64px 24px;
}
.cl-outcomes { background: var(--cl-surface); }
.cl-curriculum { background: #ffffff; }
.cl-instructor { background: var(--cl-surface); }
.cl-certificate { background: #ffffff; }
.cl-faq { background: var(--cl-surface); }

.cl-wayfinding { padding: 10px 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--cl-border); border-bottom: 1px solid var(--cl-border); position: sticky; top: 0; z-index: 40; }
.cl-wayfinding__inner { max-width: var(--cl-section-max); margin: 0 auto; display:flex; gap:8px; padding: 0 24px; flex-wrap:wrap; }
.cl-wayfinding__link, .cl-wayfinding__pill { display:inline-flex; align-items:center; padding:7px 16px; border-radius:var(--cl-radius-pill); font-size:.82rem; font-weight:600; color:var(--cl-muted); border:1px solid var(--cl-border); text-decoration:none; background:#fff; transition: all var(--cl-transition); }
.cl-wayfinding__link:hover, .cl-wayfinding__link.is-active { color: var(--cl-primary); border-color: var(--cl-primary); background: rgba(0,87,163,.06); }

/* ── Shims for HTML tokens not in original spec ─────────────────── */
.cl-hero__eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cl-hero__tag { display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.cl-lesson-list { list-style:none; padding:0; margin:0; }
.cl-lesson__title, .cl-lesson__name { font-weight:600; color:var(--cl-dark); }
.cl-lesson__dot, .cl-lesson__icon { width:7px; height:7px; border-radius:50%; background:var(--cl-border); display:inline-block; }
.cl-lesson__dots, .cl-lesson__artifacts { display:flex; gap:6px; align-items:center; }
.cl-lesson__link { font-size:.78rem; font-weight:700; color:var(--cl-primary); text-decoration:none; }
.cl-lesson__link:hover { text-decoration:underline; }
.cl-lesson__badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--cl-radius-pill); font-size:.68rem; font-weight:700; }
.cl-lesson__badge--free { background:rgba(16,185,129,.12); color:#047857; }
.cl-lesson__badge--lock { background:rgba(100,116,139,.12); color:var(--cl-muted); }
.cl-instructor__info { min-width:0; }
.cl-outcomes__icon, .cl-outcomes__num, .cl-outcomes__title, .cl-outcomes__desc { /* legacy aliases */ }
.cl-outcomes__card { background:var(--cl-surface-elevated); border:1px solid var(--cl-border); border-radius:var(--cl-radius-lg); padding:32px 24px; text-align:center; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .cl-wayfinding,
  .cl-enrollment-bar {
    display: none !important;
  }

  .cl-hero {
    background: #f8fafc !important;
    color: #1e293b !important;
    -webkit-print-color-adjust: exact;
  }

  .cl-animate {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cl-animate,
  .cl-animate--scale,
  .cl-animate--slide-left,
  .cl-animate--slide-right {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .cl-btn,
  .cl-outcome-card,
  .cl-module__chevron,
  .cl-faq__chevron,
  .cl-enrollment-bar {
    transition: none;
  }
}
/* Course-first public Trial landing refresh (CiCC theme palette). */
.cicc-lms-course-landing {
  --cl-primary:#0757a6; --cl-accent:#f97316; --cl-dark:#102a43; --cl-surface:#f4f8fc;
  --cl-border:#dbe5ef; --cl-text:#203449; --cl-muted:#62778c; --cl-gold:#ffd166;
  background:var(--cl-surface); overflow:clip;
}
.cicc-lms-course-landing .cl-hero {
  isolation:isolate; min-height:540px; padding:132px 24px 64px;
  background:radial-gradient(ellipse at 72% 8%,rgba(48,174,190,.24),transparent 34%),linear-gradient(118deg,#082b50 0%,#0757a6 57%,#087b83 100%);
}
.cicc-lms-course-landing .cl-hero__container {
  width:min(100%,1160px); grid-template-columns:minmax(0,1.08fr) minmax(370px,.82fr);
  gap:clamp(38px,6vw,86px); align-items:center; padding:0;
}
.cicc-lms-course-landing .cl-hero__content { position:relative; z-index:2; padding:4px 0; }
.cicc-lms-course-landing .cl-hero__eyebrow {
  display:inline-flex; align-items:center; gap:10px; min-height:34px; margin-bottom:18px;
  padding:7px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px;
  color:#e3f5ff; background:rgba(6,31,58,.25); font-size:.72rem; font-weight:800; letter-spacing:.09em;
}
.cicc-lms-course-landing .cl-hero__live-dot,.cicc-lms-course-landing .cl-artifact-showcase__pulse {
  width:8px; height:8px; flex:none; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.16);
}
.cicc-lms-course-landing .cl-hero__divider { opacity:.55; }
.cicc-lms-course-landing .cl-hero__title {
  max-width:740px; margin:0 0 17px; color:#fff!important; font-size:clamp(2.35rem,4vw,3.55rem)!important;
  font-weight:850!important; line-height:1.08!important; letter-spacing:-.035em; text-shadow:0 3px 24px rgba(0,0,0,.2);
}
.cicc-lms-course-landing .cl-hero__desc { max-width:620px; margin:0 0 25px; color:#e2eff9!important; font-size:1.08rem; line-height:1.72; }
.cicc-lms-course-landing .cl-hero__metrics { gap:10px; margin:0 0 25px; }
.cicc-lms-course-landing .cl-hero__metric {
  display:grid; min-width:110px; gap:1px; padding:10px 14px; border:1px solid rgba(255,255,255,.17);
  border-radius:13px; color:#c9dceb; background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
}
.cicc-lms-course-landing .cl-hero__metric strong { color:#fff; font-size:1.12rem; line-height:1.25; }
.cicc-lms-course-landing .cl-hero__metric span { color:#c6dae9; font-size:.75rem; }
.cicc-lms-course-landing .cl-hero__metric--trial { border-color:rgba(255,209,102,.42); background:rgba(255,209,102,.1); }
.cicc-lms-course-landing .cl-hero__metric--trial strong { color:#ffe08a; }
.cicc-lms-course-landing .cl-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.cicc-lms-course-landing .cl-btn { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:12px 19px; border-radius:10px; font-size:.94rem; font-weight:800; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.cicc-lms-course-landing .cl-btn:hover { transform:translateY(-2px); }
.cicc-lms-course-landing .cl-btn--primary { border:1px solid #ff8b38!important; color:#fff!important; background:#f97316!important; box-shadow:0 8px 24px rgba(249,115,22,.28); }
.cicc-lms-course-landing .cl-btn--primary:hover { color:#fff!important; background:#e85d04!important; box-shadow:0 12px 30px rgba(249,115,22,.36); }
.cicc-lms-course-landing .cl-btn--ghost { border:1px solid rgba(255,255,255,.48)!important; color:#fff!important; background:rgba(255,255,255,.06)!important; }
.cicc-lms-course-landing .cl-btn--ghost:hover { color:#fff!important; background:rgba(255,255,255,.14)!important; }
.cicc-lms-course-landing .cl-hero__assurance { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:15px 0 0; color:#cee0ee; font-size:.82rem; }
.cicc-lms-course-landing .cl-hero__assurance span:first-child { color:#6ee7a0; font-weight:900; }
.cicc-lms-course-landing .cl-hero__glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); pointer-events:none; }
.cicc-lms-course-landing .cl-hero__glow--one { top:-190px; right:28%; width:370px; height:370px; background:rgba(56,189,248,.1); }
.cicc-lms-course-landing .cl-hero__glow--two { right:-180px; bottom:-280px; width:540px; height:540px; background:rgba(249,115,22,.12); }

.cicc-lms-course-landing .cl-trial-card {
  position:relative; z-index:2; width:100%; overflow:hidden; border:1px solid rgba(255,255,255,.34);
  border-radius:20px; background:#fff; box-shadow:0 28px 76px rgba(1,22,43,.32); transform:rotate(1.2deg);
  transition:transform .3s ease,box-shadow .3s ease;
}
.cicc-lms-course-landing .cl-trial-card:hover { transform:rotate(0) translateY(-4px); box-shadow:0 34px 82px rgba(1,22,43,.4); }
.cicc-lms-course-landing .cl-trial-card__link { display:block; color:inherit!important; }
.cicc-lms-course-landing .cl-trial-card__visual { position:relative; display:grid; aspect-ratio:1.78; overflow:hidden; place-items:center; background:#092d50; }
.cicc-lms-course-landing .cl-trial-card__visual>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cicc-lms-course-landing .cl-trial-card__visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(2,20,40,.03),rgba(2,20,40,.42)); pointer-events:none; }
.cicc-lms-course-landing .cl-trial-art { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:24px 28px; color:#fff; background:radial-gradient(circle at 51% 49%,rgba(31,175,192,.46),transparent 24%),linear-gradient(135deg,#07345b,#0757a6 58%,#0b7883); }
.cicc-lms-course-landing .cl-trial-art__kicker,.cicc-lms-course-landing .cl-trial-art__foot { position:relative; z-index:1; color:#d4ebf5; font-size:.62rem; font-weight:850; letter-spacing:.15em; }
.cicc-lms-course-landing .cl-trial-art__mark { position:absolute; top:50%; left:50%; display:grid; width:128px; height:128px; place-items:center; border:1px solid rgba(255,255,255,.48); border-radius:35px; background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04)); box-shadow:0 18px 48px rgba(3,22,46,.22),inset 0 1px rgba(255,255,255,.3); transform:translate(-50%,-53%) rotate(-8deg); backdrop-filter:blur(12px); }
.cicc-lms-course-landing .cl-trial-art__mark span { color:#fff; font-size:3rem; font-weight:900; letter-spacing:-.12em; transform:rotate(8deg); }
.cicc-lms-course-landing .cl-trial-art__mark i { position:absolute; top:12px; right:14px; color:#ffd166; font-size:1.2rem; font-style:normal; }
.cicc-lms-course-landing .cl-trial-art__orbit { position:absolute; top:50%; left:50%; width:255px; height:140px; border:1px solid rgba(255,255,255,.3); border-radius:50%; transform:translate(-50%,-50%) rotate(25deg); }
.cicc-lms-course-landing .cl-trial-art__orbit--two { width:300px; height:180px; border-color:rgba(255,209,102,.42); transform:translate(-50%,-50%) rotate(-31deg); }
.cicc-lms-course-landing .cl-trial-art__labels { position:absolute; right:25px; bottom:42px; left:25px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:.82rem; font-weight:900; letter-spacing:.1em; }
.cicc-lms-course-landing .cl-trial-art__labels b { color:#ffd166; font-size:1.1rem; }
.cicc-lms-course-landing .cl-trial-card__play { position:absolute; z-index:2; top:50%; left:50%; display:grid; width:58px; height:58px; place-items:center; padding-left:4px; border:1px solid rgba(255,255,255,.85); border-radius:50%; color:#fff; background:rgba(5,30,56,.62); box-shadow:0 6px 22px rgba(0,0,0,.24); font-size:1.05rem; transform:translate(-50%,-50%); transition:transform .2s ease,background .2s ease; }
.cicc-lms-course-landing .cl-trial-card:hover .cl-trial-card__play { background:#f97316; transform:translate(-50%,-50%) scale(1.1); }
.cicc-lms-course-landing .cl-trial-card__duration { position:absolute; z-index:2; right:14px; bottom:13px; padding:6px 9px; border:1px solid rgba(255,255,255,.35); border-radius:7px; color:#fff; background:rgba(5,30,56,.72); font-size:.65rem; font-weight:850; letter-spacing:.06em; }
.cicc-lms-course-landing .cl-trial-card__body { padding:19px 21px 17px; }
.cicc-lms-course-landing .cl-trial-card__eyebrow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:#557087; font-size:.68rem; font-weight:850; letter-spacing:.08em; }
.cicc-lms-course-landing .cl-trial-card__open { display:inline-flex; align-items:center; gap:7px; color:#087b59; }
.cicc-lms-course-landing .cl-trial-card__open i { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px #dcfce7; }
.cicc-lms-course-landing .cl-trial-card__body h2 { margin:8px 0 5px; color:#102a43; font-size:1.16rem; line-height:1.35; }
.cicc-lms-course-landing .cl-trial-card__body p { margin:0; color:#62778c; font-size:.85rem; line-height:1.55; }
.cicc-lms-course-landing .cl-trial-card__footer { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:15px; padding-top:13px; border-top:1px solid #e7eef5; color:#62778c; font-size:.76rem; }
.cicc-lms-course-landing .cl-trial-card__footer strong { color:#0757a6; font-size:.82rem; }

.cicc-lms-course-landing .cl-wayfinding { top:0; border-bottom:1px solid #e3ebf2; box-shadow:0 4px 15px rgba(16,42,67,.035); }
.cicc-lms-course-landing .cl-wayfinding__inner { min-height:62px; gap:clamp(16px,3vw,34px); }
.cicc-lms-course-landing .cl-wayfinding__link { position:relative; color:#526b82!important; font-size:.83rem; font-weight:750; }
.cicc-lms-course-landing .cl-wayfinding__link.is-active,.cicc-lms-course-landing .cl-wayfinding__link:hover { color:#0757a6!important; }
.cicc-lms-course-landing .cl-wayfinding__link.is-active::after { position:absolute; right:0; bottom:-21px; left:0; height:3px; border-radius:3px 3px 0 0; content:""; background:#f97316; }
.cicc-lms-course-landing .cl-wayfinding__cta { display:inline-flex; gap:9px; align-items:center; margin-left:auto; padding:9px 14px; border-radius:9px; color:#fff!important; background:#0757a6; font-size:.8rem; font-weight:800; white-space:nowrap; }
.cicc-lms-course-landing .cl-wayfinding__cta:hover { color:#fff!important; background:#064681; }
.cicc-lms-course-landing .cl-section { padding:78px 24px; }
.cicc-lms-course-landing .cl-outcomes { background:linear-gradient(180deg,#f4f8fc,#fff); }
.cicc-lms-course-landing .cl-heading { max-width:770px; margin:0 auto 39px; }
.cicc-lms-course-landing .cl-heading__label { color:#e76310; font-size:.69rem; letter-spacing:.15em; }
.cicc-lms-course-landing .cl-heading__title { color:#102a43; font-size:clamp(1.8rem,3vw,2.55rem); letter-spacing:-.025em; }
.cicc-lms-course-landing .cl-heading__subtitle { color:#63788d; font-size:1rem; line-height:1.7; }
.cicc-lms-course-landing .cl-outcomes__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.cicc-lms-course-landing .cl-outcome-card { position:relative; min-width:0; padding:21px 20px 22px; border:1px solid #e2eaf1; border-radius:15px; background:#fff; box-shadow:0 7px 24px rgba(16,42,67,.045); transition:transform .2s ease,box-shadow .2s ease; }
.cicc-lms-course-landing .cl-outcome-card:hover { transform:translateY(-3px); box-shadow:0 15px 32px rgba(16,42,67,.09); }
.cicc-lms-course-landing .cl-outcome-card__icon { display:grid; width:38px; height:38px; margin-bottom:14px; place-items:center; border-radius:11px; color:#0757a6; background:#e9f4ff; font-size:.78rem; font-weight:900; }
.cicc-lms-course-landing .cl-outcome-card:nth-child(2) .cl-outcome-card__icon { color:#a84306; background:#fff0e5; }
.cicc-lms-course-landing .cl-outcome-card:nth-child(3) .cl-outcome-card__icon { color:#087b70; background:#e3f8f4; }
.cicc-lms-course-landing .cl-outcome-card:nth-child(4) .cl-outcome-card__icon { color:#6d43a4; background:#f2eaff; }
.cicc-lms-course-landing .cl-outcome-card__module { display:block; min-height:30px; color:#8293a3; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cicc-lms-course-landing .cl-outcome-card__title { margin:6px 0 8px; color:#102a43; font-size:1.03rem; line-height:1.35; }
.cicc-lms-course-landing .cl-outcome-card__desc { margin:0; color:#62778c; font-size:.84rem; line-height:1.62; }

.cicc-lms-course-landing .cl-trial-section { position:relative; overflow:hidden; background:#092b4b; }
.cicc-lms-course-landing .cl-trial-section::before { position:absolute; top:-190px; right:-120px; width:480px; height:480px; border:1px solid rgba(255,255,255,.09); border-radius:50%; content:""; box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.02); }
.cicc-lms-course-landing .cl-trial-section__layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,7vw,96px); align-items:center; }
.cicc-lms-course-landing .cl-trial-section .cl-heading__label { color:#ffd166; }
.cicc-lms-course-landing .cl-trial-section .cl-heading__title { margin:0 0 14px; color:#fff; }
.cicc-lms-course-landing .cl-trial-section__intro p { max-width:430px; margin:0 0 23px; color:#c8d9e6; line-height:1.75; }
.cicc-lms-course-landing .cl-artifact-showcase { padding:24px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:linear-gradient(140deg,rgba(255,255,255,.105),rgba(255,255,255,.045)); box-shadow:0 18px 55px rgba(0,0,0,.16); backdrop-filter:blur(8px); }
.cicc-lms-course-landing .cl-artifact-showcase__head { display:flex; align-items:center; gap:13px; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.14); }
.cicc-lms-course-landing .cl-artifact-showcase__pulse { width:10px; height:10px; }
.cicc-lms-course-landing .cl-artifact-showcase__head>div { display:grid; gap:2px; color:#fff; }
.cicc-lms-course-landing .cl-artifact-showcase__head strong { font-size:1.04rem; }
.cicc-lms-course-landing .cl-artifact-showcase__head span:not(.cl-artifact-showcase__pulse) { color:#aac2d5; font-size:.78rem; }
.cicc-lms-course-landing .cl-artifact-showcase__head>a { display:grid; width:37px; height:37px; margin-left:auto; place-items:center; border:1px solid rgba(255,255,255,.23); border-radius:9px; color:#fff!important; font-size:1.2rem; }
.cicc-lms-course-landing .cl-artifact-showcase__grid { display:flex; flex-wrap:wrap; gap:9px; padding:18px 0 9px; }
.cicc-lms-course-landing .cl-artifact-chip { display:inline-flex; gap:8px; align-items:center; min-height:37px; padding:7px 11px; border:1px solid rgba(255,255,255,.16); border-radius:9px; color:#e9f4fb; background:rgba(255,255,255,.075); font-size:.77rem; font-weight:700; }
.cicc-lms-course-landing .cl-artifact-chip i { color:#ffd166; font-size:.9rem; font-style:normal; }
.cicc-lms-course-landing .cl-artifact-showcase__note { margin:10px 0 0; color:#b4c9d9; font-size:.79rem; line-height:1.6; }

.cicc-lms-course-landing .cl-curriculum { background:#f4f8fc; }
.cicc-lms-course-landing .cl-curriculum__list { display:grid; gap:11px; max-width:950px; margin-inline:auto; }
.cicc-lms-course-landing .cl-module { overflow:hidden; border:1px solid #dfe8f0; border-radius:13px; background:#fff; box-shadow:0 3px 12px rgba(16,42,67,.035); transition:border-color .2s ease,box-shadow .2s ease; }
.cicc-lms-course-landing .cl-module[open] { border-color:#b9d7ee; box-shadow:0 9px 24px rgba(16,42,67,.065); }
.cicc-lms-course-landing .cl-module__header { display:grid; grid-template-columns:54px minmax(0,1fr) auto 20px; gap:14px; align-items:center; min-height:78px; padding:14px 19px; list-style:none; cursor:pointer; }
.cicc-lms-course-landing .cl-module__header::-webkit-details-marker { display:none; }
.cicc-lms-course-landing .cl-module__number { display:grid; width:45px; height:45px; place-items:center; border-radius:12px; color:#0757a6; background:#eaf4fc; font-size:.82rem; font-weight:900; }
.cicc-lms-course-landing .cl-module__info { display:grid; min-width:0; gap:4px; }
.cicc-lms-course-landing .cl-module__title { overflow:hidden; color:#102a43; font-size:.97rem; text-overflow:ellipsis; }
.cicc-lms-course-landing .cl-module__meta { color:#788c9e; font-size:.75rem; }
.cicc-lms-course-landing .cl-module__badge { padding:6px 9px; border-radius:999px; color:#64778a; background:#f1f5f8; font-size:.62rem; font-weight:850; letter-spacing:.04em; white-space:nowrap; }
.cicc-lms-course-landing .cl-module__badge.is-trial { color:#087b59; background:#e5f8ef; }
.cicc-lms-course-landing .cl-module__chevron { color:#73879a; transition:transform .2s ease; }
.cicc-lms-course-landing .cl-module[open] .cl-module__chevron { color:#0757a6; transform:rotate(180deg); }
.cicc-lms-course-landing .cl-module__body { padding:0 19px 13px; border-top:1px solid #edf2f6; background:#fbfdff; }
.cicc-lms-course-landing .cl-lesson-list { margin:0; padding:0; list-style:none; }
.cicc-lms-course-landing .cl-lesson { display:grid; grid-template-columns:24px minmax(0,1fr) auto 92px; gap:12px; align-items:center; padding:14px 4px; border-bottom:1px solid #eaf0f5; }
.cicc-lms-course-landing .cl-lesson:last-child { border-bottom:0; }
.cicc-lms-course-landing .cl-lesson__icon { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; color:#8798a8; background:#eef2f6; font-size:.62rem; }
.cicc-lms-course-landing .cl-lesson.is-trial .cl-lesson__icon { color:#fff; background:#0a9b70; }
.cicc-lms-course-landing .cl-lesson__details { display:grid; min-width:0; gap:3px; }
.cicc-lms-course-landing .cl-lesson__name { color:#233c52; font-size:.86rem; line-height:1.4; }
.cicc-lms-course-landing .cl-lesson__outcome { overflow:hidden; color:#7b8d9e; font-size:.73rem; line-height:1.4; text-overflow:ellipsis; }
.cicc-lms-course-landing .cl-lesson__status { justify-self:start; padding:5px 8px; border-radius:999px; font-size:.61rem; font-weight:850; letter-spacing:.035em; white-space:nowrap; }
.cicc-lms-course-landing .cl-lesson__status--free { color:#087b59; background:#e5f8ef; }
.cicc-lms-course-landing .cl-lesson__status--locked { color:#687b8d; background:#edf2f6; }
.cicc-lms-course-landing .cl-lesson__link { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:34px; padding:6px 9px; border:1px solid #b8d5ec; border-radius:8px; color:#0757a6!important; background:#f3f9ff; font-size:.74rem; font-weight:800; white-space:nowrap; }
.cicc-lms-course-landing .cl-lesson__link:hover { color:#fff!important; border-color:#0757a6; background:#0757a6; }
.cicc-lms-course-landing .cl-lesson__lock { justify-self:center; font-size:.76rem; opacity:.65; }

.cicc-lms-course-landing .cl-faq { background:#fff; }
.cicc-lms-course-landing .cl-faq__list { max-width:850px; margin-inline:auto; padding:6px 22px; border:1px solid #e1eaf2; border-radius:14px; background:#fff; box-shadow:0 7px 26px rgba(16,42,67,.045); }
.cicc-lms-course-landing .cl-faq__item { border-bottom:1px solid #edf2f6; }
.cicc-lms-course-landing .cl-faq__item:last-child { border-bottom:0; }
.cicc-lms-course-landing .cl-faq__question { display:flex; justify-content:space-between; gap:15px; padding:17px 0; color:#193550; font-size:.92rem; font-weight:780; list-style:none; cursor:pointer; }
.cicc-lms-course-landing .cl-faq__question::-webkit-details-marker { display:none; }
.cicc-lms-course-landing .cl-faq__chevron { color:#0757a6; transition:transform .2s ease; }
.cicc-lms-course-landing .cl-faq__item[open] .cl-faq__chevron { transform:rotate(180deg); }
.cicc-lms-course-landing .cl-faq__answer p { margin:0 0 17px; color:#62778c; font-size:.86rem; line-height:1.7; }

.cicc-lms-course-landing .cl-enrollment-bar { border-top:1px solid #dce7f0; background:rgba(255,255,255,.97); box-shadow:0 -7px 30px rgba(16,42,67,.09); backdrop-filter:blur(14px); }
.cicc-lms-course-landing .cl-enrollment-bar__inner { min-height:84px; }
.cicc-lms-course-landing .cl-enrollment-bar__info { display:grid; gap:2px; }
.cicc-lms-course-landing .cl-enrollment-bar__kicker { color:#e76310; font-size:.61rem; font-weight:900; letter-spacing:.12em; }
.cicc-lms-course-landing .cl-enrollment-bar__title { color:#102a43; font-size:.87rem; }
.cicc-lms-course-landing .cl-enrollment-bar__info>span:last-child { color:#71869a; font-size:.72rem; }
.cicc-lms-course-landing .cl-enrollment-bar__actions { gap:9px; }
.cicc-lms-course-landing .cl-enrollment-bar__actions .cl-btn { min-height:42px; padding:9px 14px; font-size:.8rem; }
.cicc-lms-course-landing .cl-btn--ghost-dark { border:1px solid #cad7e2!important; color:#34516a!important; background:#fff!important; }
.cicc-lms-course-landing .cl-btn--ghost-dark:hover { color:#0757a6!important; background:#f4f9fd!important; }
.cicc-lms-course-landing :focus-visible { outline:3px solid #f59e0b; outline-offset:3px; }

@media (max-width:900px) {
  .cicc-lms-course-landing .cl-hero__container { grid-template-columns:minmax(0,1fr) minmax(310px,.85fr); gap:34px; }
  .cicc-lms-course-landing .cl-outcomes__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .cicc-lms-course-landing .cl-hero { min-height:0; padding:40px 18px 48px; }
  .cicc-lms-course-landing .cl-hero__container { grid-template-columns:1fr; gap:30px; }
  .cicc-lms-course-landing .cl-hero__content { padding:0; }
  .cicc-lms-course-landing .cl-hero__eyebrow { font-size:.61rem; }
  .cicc-lms-course-landing .cl-hero__title { max-width:600px; font-size:clamp(2.15rem,8.5vw,3rem)!important; }
  .cicc-lms-course-landing .cl-hero__desc { font-size:.98rem; }
  .cicc-lms-course-landing .cl-hero__metric { min-width:0; flex:1 1 28%; padding:9px 10px; }
  .cicc-lms-course-landing .cl-hero__actions { display:grid; grid-template-columns:1fr; }
  .cicc-lms-course-landing .cl-hero__actions .cl-btn { width:100%; }
  .cicc-lms-course-landing .cl-trial-card { max-width:520px; margin-inline:auto; transform:none; }
  .cicc-lms-course-landing .cl-wayfinding__inner { gap:18px; min-height:56px; }
  .cicc-lms-course-landing .cl-wayfinding__link { font-size:.74rem; }
  .cicc-lms-course-landing .cl-wayfinding__cta { display:none; }
  .cicc-lms-course-landing .cl-section { padding:56px 18px; }
  .cicc-lms-course-landing .cl-heading { margin-bottom:27px; }
  .cicc-lms-course-landing .cl-trial-section__layout { grid-template-columns:1fr; gap:28px; }
  .cicc-lms-course-landing .cl-trial-section__intro .cl-heading__title { font-size:2rem; }
  .cicc-lms-course-landing .cl-artifact-showcase { padding:18px; }
  .cicc-lms-course-landing .cl-module__header { grid-template-columns:43px minmax(0,1fr) 18px; gap:10px; min-height:70px; padding:12px; }
  .cicc-lms-course-landing .cl-module__number { width:39px; height:39px; }
  .cicc-lms-course-landing .cl-module__badge { grid-column:2; justify-self:start; }
  .cicc-lms-course-landing .cl-module__chevron { grid-column:3; grid-row:1; }
  .cicc-lms-course-landing .cl-module__body { padding-inline:12px; }
  .cicc-lms-course-landing .cl-lesson { grid-template-columns:22px minmax(0,1fr) auto; gap:8px; }
  .cicc-lms-course-landing .cl-lesson__status { grid-column:2; grid-row:2; }
  .cicc-lms-course-landing .cl-lesson__link,.cicc-lms-course-landing .cl-lesson__lock { grid-column:3; grid-row:1 / span 2; }
  .cicc-lms-course-landing .cl-enrollment-bar__inner { align-items:center; gap:9px; padding-block:10px; }
  .cicc-lms-course-landing .cl-enrollment-bar__actions { display:flex; }
  .cicc-lms-course-landing .cl-enrollment-bar__actions .cl-btn--ghost-dark { display:none; }
}
@media (max-width:420px) {
  .cicc-lms-course-landing .cl-outcomes__grid { grid-template-columns:1fr; }
  .cicc-lms-course-landing .cl-hero__metric { min-width:0; }
  .cicc-lms-course-landing .cl-enrollment-bar__info { max-width:57%; }
  .cicc-lms-course-landing .cl-enrollment-bar__title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cicc-lms-course-landing .cl-enrollment-bar__actions .cl-btn { padding-inline:10px; }
}
@media (max-width:640px) {
  .cicc-lms-course-landing .cl-hero { padding:72px 16px 56px; }
}
@media (prefers-reduced-motion:reduce) {
  .cicc-lms-course-landing *, .cicc-lms-course-landing *::before, .cicc-lms-course-landing *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}