/* ── HERO ── */
    .course-index-hero {
      position: relative;
      isolation: isolate;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
    }
    .course-index-hero::after { content: none; }
    .course-index-hero::before { content: none; }
    .course-index-hero h1 { text-shadow: none; color: var(--primary); }
    .course-index-hero p { text-shadow: none; color: var(--text-light); }

    /* ── LAYOUT: Content + Sidebar ── */
    .learn-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 32px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (max-width: 1024px) {
      .learn-layout { grid-template-columns: 1fr; }
    }

    .learn-content { min-width: 0; }

    /* ── SIDEBAR ── */
    .learn-sidebar {
      position: sticky;
      top: 100px;
      align-self: start;
    }
    .sidebar-profile {
      background: #fff;
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 16px;
      padding: 28px;
      text-align: center;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
    }
    .sidebar-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: linear-gradient(135deg, #123f2e, #16543a);
      color: #fff; margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; font-weight: 700;
      box-shadow: 0 4px 12px rgba(29,107,74,.2);
    }
    .sidebar-name {
      font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 16px;
    }
    .sidebar-stats {
      display: flex; justify-content: center; gap: 32px; margin-bottom: 16px;
    }
    .sidebar-stat-num {
      font-size: 1.5rem; font-weight: 800; color: #123f2e; display: block;
    }
    .sidebar-stat-label {
      font-size: .78rem; color: #626b64; font-weight: 500;
    }
    .sidebar-progress-bar {
      width: 100%; height: 8px; background: #f1f5f9; border-radius: 9999px;
      overflow: hidden; margin-top: 8px;
    }
    .sidebar-progress-fill {
      height: 100%; background: linear-gradient(90deg, #2a7d59, var(--accent-mid));
      border-radius: 9999px;
      transition: width .6s cubic-bezier(.4,0,.2,1);
    }
    .sidebar-progress-text {
      font-size: .82rem; color: #64748b; margin-top: 6px;
    }

    /* Assigned courses list in sidebar */
    .sidebar-assigned {
      background: #fff;
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
    }
    .sidebar-assigned h3 {
      font-size: .95rem; font-weight: 700; color: #1e293b; margin-bottom: 16px;
    }
    .sidebar-assigned-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid #f1f5f9;
      text-decoration: none; color: inherit;
      transition: background .15s;
    }
    .sidebar-assigned-item:last-child { border-bottom: none; }
    .sidebar-assigned-item:hover { background: #f8faf9; border-radius: 6px; margin: 0 -8px; padding: 8px 8px; }
    .sidebar-assigned-thumb {
      width: 40px; height: 40px; border-radius: 6px;
      background-size: cover; background-position: center;
      background-color: #e2e8f0; flex-shrink: 0;
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar-assigned-thumb .course-card__glyph svg { width: 20px; max-width: 20px; opacity: .95; }
    .sidebar-assigned-title {
      font-size: .82rem; font-weight: 500; color: #1e293b; line-height: 1.3;
    }

    /* ── SECTION HEADERS ── */
    .learn-section-header {
      font-size: 1.25rem; font-weight: 700; color: #1e293b;
      margin: 36px 0 18px;
      padding-bottom: 10px;
      border-bottom: 2px solid #f1f5f9;
      letter-spacing: -0.02em;
    }
    .learn-section-header:first-child { margin-top: 24px; }

    /* ── COURSE CARD GRID ── */
    .course-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 16px;
    }
    @media (max-width: 1024px) {
      .course-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .course-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .course-grid { grid-template-columns: 1fr; }
    }

    /* ── Continue / resume hero: the prominent "pick up where you left off" card ── */
    .learn-continue {
      display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
      background: #fff; border: 1px solid var(--border, #e8ecf1); border-radius: 18px;
      padding: 24px 28px; box-shadow: 0 4px 20px rgba(18,63,46,.06); margin-bottom: 28px;
    }
    .learn-continue--done { background: linear-gradient(135deg, #eef4e8, #eef4e8); border-color: #cfe0c6; }
    .learn-continue__body { flex: 1; min-width: 240px; }
    .learn-continue__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-mid); margin-bottom: 8px; }
    .learn-continue__track { font-size: .82rem; color: #64748b; font-weight: 600; margin-bottom: 3px; }
    .learn-continue__title { font-family: var(--font); font-size: 1.4rem; font-weight: 600; color: #123f2e; line-height: 1.2; letter-spacing: -.01em; }
    .learn-continue__sub { font-size: .92rem; color: #475569; margin-top: 6px; line-height: 1.5; }
    .learn-continue__progress { margin-top: 14px; max-width: 440px; }
    .learn-continue__bar { height: 8px; border-radius: 4px; background: #e8ecf1; overflow: hidden; }
    .learn-continue__bar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-mid)); transition: width .8s cubic-bezier(.22,1,.36,1); }
    .learn-continue__pct { font-size: .78rem; color: #64748b; font-weight: 600; margin-top: 7px; }
    .learn-continue__cta {
      flex: none; display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 55%, var(--accent-dark) 100%);
      color: #fff; font-weight: 700; font-size: .95rem; padding: 14px 28px; border-radius: var(--radius-full);
      text-decoration: none; transition: all .2s; box-shadow: 0 4px 14px rgba(29,107,74,.25);
    }
    .learn-continue__cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 22px rgba(29,107,74,.3); }
    @media (max-width: 600px) {
      .learn-continue { padding: 20px; }
      .learn-continue__title { font-size: 1.2rem; }
      .learn-continue__cta { width: 100%; justify-content: center; }
    }

    .course-card {
      background: #fff;
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 14px;
      overflow: hidden;
      transition: all .35s cubic-bezier(.22,1,.36,1);
      text-decoration: none;
      color: inherit;
      display: block;
      position: relative;
    }
    .course-card:hover {
      border-color: rgba(29,107,74,.2);
      box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.1);
      transform: translateY(-2px);
    }

    .course-card__thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      background-size: cover;
      background-position: center;
      background-color: #e2e8f0;
      position: relative;
      overflow: hidden;
    }
    /* Soft top-left highlight gives the flat gradient real depth. */
    .course-card__thumb::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 95% 75% at 28% 18%, rgba(255,255,255,.20), transparent 62%);
    }
    /* Centred topical glyph — makes each card read as designed art, not a blank box. */
    .course-card__glyph {
      position: absolute; inset: 0; z-index: 1;
      display: flex; align-items: center; justify-content: center;
      color: #fff; pointer-events: none;
    }
    .course-card__glyph svg {
      width: 40%; max-width: 66px; height: auto; opacity: .92;
      filter: drop-shadow(0 2px 7px rgba(0,0,0,.22));
    }
    .course-card:hover .course-card__glyph svg { transform: scale(1.06); transition: transform .35s cubic-bezier(.22,1,.36,1); }

    /* Completion check badge */
    .course-card__badge {
      position: absolute; top: 8px; right: 8px;
      width: 26px; height: 26px; border-radius: 50%;
      background: linear-gradient(135deg, #2a7d59, var(--accent-mid));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem;
      box-shadow: 0 2px 6px rgba(29,107,74,.3);
    }
    .course-card__badge--progress {
      background: #f59e0b;
    }

    .course-card__body {
      padding: 12px 14px 16px;
    }

    .course-card__track {
      font-size: .7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: .5px; color: #626b64; margin-bottom: 4px;
    }

    .course-card__title {
      font-size: .92rem; font-weight: 700; color: #123f2e;
      margin-bottom: 6px; line-height: 1.3;
    }

    .course-card__meta {
      font-size: .78rem; color: #64748b; line-height: 1.5;
    }
    .course-card__meta strong { color: #1e293b; }

    .course-card__cert {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .78rem; color: var(--accent-mid); font-weight: 600;
      margin-top: 6px; cursor: pointer;
      text-decoration: none;
    }
    .course-card__cert:hover { color: #16543a; text-decoration: underline; }

    /* ── STATUS PILL (for in-progress / not started) ── */
    .course-card__status {
      display: inline-block; font-size: .72rem; font-weight: 600;
      padding: 3px 10px; border-radius: 12px; margin-top: 6px;
    }
    .course-card__status--next {
      background: linear-gradient(135deg, #2a7d59, var(--accent-mid));
      color: #fff;
      border-radius: 9999px;
    }
    .course-card__status--todo {
      background: #f1f5f9; color: #626b64;
      border-radius: 9999px;
    }

    /* ── EMPTY STATE ── */
    .learn-empty {
      text-align: center; padding: 40px 20px;
      background: #f9fafb; border-radius: 10px;
      border: 1px dashed #d1d5db; color: #64748b;
    }

    /* ── PDF BONUS COURSE CARDS ── */
    .pdf-course-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
      display: flex;
      flex-direction: column;
    }
    .pdf-course-card:hover {
      border-color: var(--accent-mid);
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }
    .pdf-course-card__thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      background-size: cover;
      background-position: center;
      background-color: #e2e8f0;
      position: relative;
      overflow: hidden;
    }
    .pdf-course-card__thumb::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 95% 75% at 28% 18%, rgba(255,255,255,.20), transparent 62%);
    }
    .pdf-course-card__locale-badge {
      position: absolute; top: 8px; left: 8px;
      padding: 3px 10px; border-radius: 12px;
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .5px;
      background: rgba(29,107,74,.9); color: #fff;
    }
    .pdf-course-card__body {
      padding: 14px 16px 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .pdf-course-card__track {
      font-size: .7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: .5px; color: #626b64; margin-bottom: 4px;
    }
    .pdf-course-card__title {
      font-size: .92rem; font-weight: 700; color: #123f2e;
      margin-bottom: 6px; line-height: 1.3;
    }
    .pdf-course-card__desc {
      font-size: .8rem; color: #64748b; line-height: 1.5;
      margin-bottom: 12px; flex: 1;
    }
    .pdf-course-card__actions {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .pdf-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 18px; border-radius: 50px; border: none;
      font-size: .78rem; font-weight: 600; cursor: pointer;
      transition: all .2s cubic-bezier(.4,0,.2,1);
      text-decoration: none;
    }
    .pdf-btn--read {
      background: linear-gradient(135deg, var(--accent-mid) 0%, #16543a 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(29,107,74,.2);
    }
    .pdf-btn--read:hover {
      box-shadow: 0 4px 16px rgba(29,107,74,.35);
      transform: translateY(-1px);
      color: #fff;
    }
    .pdf-btn--download {
      background: rgba(0,0,0,.04);
      color: #6b7280;
    }
    .pdf-btn--download:hover {
      background: rgba(29,107,74,.08);
      color: var(--accent-mid);
      transform: translateY(-1px);
    }

    /* ── ONBOARDING PROMPT ── */
    .learn-onboard-prompt {
      text-align: center; padding: 44px 24px;
      background: linear-gradient(135deg, #eef4e8, #eef4e8);
      border-radius: 16px;
      border: 2px solid #b9d3ac; margin: 24px 0 16px;
    }
    .learn-onboard-prompt p { color: #123f2e; font-size: 1.05rem; margin-bottom: 16px; }

    /* ── MOBILE: Learning page ── */
    @media (max-width: 768px) {
      .course-index-hero { padding: 36px 0; }
      .course-index-hero h1 { font-size: 1.5rem; }
      .course-index-hero p { font-size: .9rem; }

      .learn-layout { padding: 0 16px; gap: 20px; }

      /* Sidebar becomes horizontal summary on mobile */
      .learn-sidebar { position: static; }
      .sidebar-profile { padding: 20px 16px; border-radius: 12px; }
      .sidebar-avatar { width: 48px; height: 48px; font-size: 1.1rem; }
      .sidebar-name { font-size: 1rem; }
      .sidebar-stats { gap: 24px; }
      .sidebar-stat-num { font-size: 1.2rem; }

      .sidebar-assigned { padding: 16px; border-radius: 12px; }
      .sidebar-assigned-item { padding: 10px 0; min-height: 44px; }
      .sidebar-assigned-thumb { width: 36px; height: 36px; }

      .learn-section-header { font-size: 1.1rem; margin: 28px 0 14px; }

      /* Course cards — larger touch targets */
      .course-card__body { padding: 14px 16px 18px; }
      .course-card__title { font-size: .95rem; }
      .course-card__status { padding: 5px 14px; min-height: 32px; font-size: .76rem; }
    }

    @media (max-width: 480px) {
      .course-index-hero { padding: 28px 0; }
      .course-index-hero h1 { font-size: 1.3rem; }

      .sidebar-stats { gap: 16px; }
    }
  /* ══════════════════════════════════════════════════════════════════
     DESIGN-SYSTEM ALIGNMENT — match the product-forward homepage.
     ══════════════════════════════════════════════════════════════════ */
  :root{
    --primary:#123f2e; --accent:#2a7d59; --accent-mid:#1d6b4a; --clay:#c2673a; --clay-strong:#a8531f; --gold:#e6b45c;
    --canvas:#f5f7f3; --surface:#fff; --surface-2:#f0f3ee; --line:#e6ebe3;
    --text:#3f4a43; --text-light:#5c675e; --text-muted:#626b64; --ink:#15241d;
    --font-display:'Fraunces','Georgia',serif;
  }
  body:not(.cert-body){ background:var(--canvas); color:var(--text); font-variant-numeric:tabular-nums; }
  h1,h2,h3,.learn-section-header,.course-index-hero h1,.course-card__title,.learn-continue__title{
    font-family:var(--font-display)!important; font-weight:560!important; letter-spacing:-.018em; color:var(--primary); }
  .eyebrow{ color:var(--accent-mid)!important; font-weight:700; letter-spacing:.15em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; }
  .eyebrow::before{ content:""; width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--clay),var(--gold)); }
  /* course cards → clean surface, hairline, soft radius, lift on hover */
  .course-card,.pdf-course-card,.learn-continue{
    background:var(--surface); border:1px solid var(--line)!important; border-radius:16px!important;
    box-shadow:0 1px 2px rgba(13,49,35,.05),0 1px 3px rgba(13,49,35,.04); }
  .course-card{ transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s; }
  .course-card:hover{ transform:translateY(-3px); border-color:var(--accent)!important; box-shadow:0 12px 30px rgba(13,49,35,.09)!important; }
  /* buttons → clay pill */
  .cta,.pdf-btn,.btn--primary,.learn-continue .btn{ border-radius:9999px!important; font-weight:650!important; }
  .cta,.btn--primary{ background:var(--clay-strong)!important; color:#fff!important; border:0!important; box-shadow:0 8px 20px rgba(168,83,31,.24)!important; transition:transform .22s cubic-bezier(.22,1,.36,1),background .2s!important; }
  .cta:hover,.btn--primary:hover{ background:var(--clay-strong)!important; transform:translateY(-2px)!important; }
  /* progress accents → brand green */
  .progress > i,.progress__fill,.pct{ color:var(--accent-mid); }
  .status--next{ color:var(--clay-strong)!important; }

  /* ══════════════════════════════════════════════════════════════════
     LEARNING EXPERIENCE (.lx) — premium learning dashboard
     ══════════════════════════════════════════════════════════════════ */
  .learn-layout{ grid-template-columns:1fr!important; max-width:1120px; }
  .learn-sidebar{ display:none!important; }
  .course-index-hero .learning-illustration{ display:none; }
  .course-index-hero{ padding:34px 0 6px!important; background:var(--canvas)!important; text-align:left!important; }
  .course-index-hero .container{ max-width:1120px; }
  .course-index-hero h1{ color:var(--ink)!important; font-size:clamp(1.6rem,1.2rem+1.3vw,2.15rem)!important; }
  .course-index-hero p{ color:var(--text-light); margin-top:6px; opacity:1; }
  .lx{ --pos:#15803d; }
  .lx svg{ display:block; }
  .lx-eyebrow{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--clay-strong); display:inline-flex; align-items:center; gap:9px; }
  .lx-h{ font-family:var(--font-display); font-weight:560; letter-spacing:-.018em; color:var(--ink); font-size:1.35rem; margin:0 0 16px; }
  .lx-sec{ margin-top:44px; }
  .lx-sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
  .lx-sec__head .lx-h{ margin:0; }
  .lx-muted{ color:var(--text-muted); font-size:.85rem; }
  .lx-library-intro{ max-width:720px; margin:0 0 24px; color:var(--text-light); line-height:1.65; }
  .lx-library-tools{ display:grid; grid-template-columns:minmax(220px,1fr) 190px auto; gap:10px; align-items:center; margin:0 0 26px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--sh-sm,0 1px 2px rgba(13,49,35,.05)); }
  .lx-library-tools label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .lx-library-tools input,.lx-library-tools select{ min-height:44px; width:100%; border:1px solid #d7e0da; border-radius:10px; background:#fff; color:var(--ink); padding:10px 12px; font:600 .84rem/1.2 Inter,system-ui,sans-serif; }
  .lx-library-tools input:focus,.lx-library-tools select:focus{ outline:3px solid rgba(194,103,58,.2); border-color:var(--clay-strong); }
  .lx-library-tools__count{ min-width:98px; color:var(--text-muted); font-size:.78rem; font-weight:700; text-align:right; }
  .lx-library-empty{ display:none; margin:18px 0 0; padding:18px; border:1px dashed #cfdad3; border-radius:12px; color:var(--text-muted); text-align:center; }
  .lx-library-group[hidden],.lx-card[hidden]{ display:none!important; }
  .lx-library-group + .lx-library-group{ margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
  .lx-library-group__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
  .lx-library-group__head h3{ margin:0; color:var(--ink); font-family:var(--font-display); font-size:1.15rem; font-weight:560; }
  .lx-library-group__head p{ max-width:680px; margin:5px 0 0; color:var(--text-muted); font-size:.86rem; line-height:1.55; }
  .lx-library-group__count{ flex:none; padding:5px 10px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); font-size:.72rem; font-weight:700; }

  /* Continue flagship */
  .lx-continue{ position:relative; overflow:hidden; border-radius:22px; color:#eaf1e8;
    background:radial-gradient(120% 130% at 88% 8%,#16543a 0%,#0d3123 52%,#0a241a 100%);
    display:grid; grid-template-columns:1.35fr .95fr; gap:12px; box-shadow:0 24px 54px rgba(10,36,26,.22); }
  .lx-continue::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:radial-gradient(rgba(143,191,156,.16) 1px,transparent 1px); background-size:24px 24px;
    -webkit-mask-image:radial-gradient(110% 80% at 80% 20%,#000,transparent 72%); mask-image:radial-gradient(110% 80% at 80% 20%,#000,transparent 72%); }
  .lx-continue__body{ position:relative; padding:32px 34px; z-index:1; }
  .lx-continue .lx-eyebrow{ color:var(--gold); }
  .lx-continue__track{ margin-top:14px; font-size:.86rem; color:#bcd0be; }
  .lx-continue__title{ font-family:var(--font-display); font-weight:560; font-size:clamp(1.4rem,1.1rem+1.2vw,2rem); color:#fff; letter-spacing:-.02em; line-height:1.14; margin:5px 0 0; }
  .lx-continue__bar{ height:9px; border-radius:6px; background:rgba(255,255,255,.14); overflow:hidden; margin:22px 0 8px; max-width:440px; }
  .lx-continue__bar i{ display:block; height:100%; border-radius:6px; width:0; background:linear-gradient(90deg,var(--emerald-400,#4f9e77),#7fd6a3); transition:width 1.1s cubic-bezier(.22,1,.36,1); }
  .lx-continue__meta{ font-size:.82rem; color:#626b64; }
  .lx-continue__cta{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; background:var(--clay-strong); color:#fff!important; font-weight:650; font-size:1rem; padding:14px 26px; border-radius:9999px; box-shadow:0 10px 24px rgba(168,83,31,.3); transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s; }
  .lx-continue__cta:hover{ transform:translateY(-2px); background:var(--clay-strong); }
  .lx-continue__art{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:24px; }
  .lx-continue__ring{ position:relative; width:168px; height:168px; }
  .lx-continue__ring svg{ transform:rotate(-90deg); } .lx-continue__ring circle{ fill:none; stroke-width:11; stroke-linecap:round; }
  .lx-ring-track{ stroke:rgba(255,255,255,.12); } .lx-ring-prog{ stroke:#7fd6a3; transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
  .lx-continue__ringc{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .lx-continue__ringpct{ font-size:2rem; font-weight:750; color:#fff; letter-spacing:-.03em; }
  .lx-continue__ringlbl{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:#626b64; margin-top:2px; }

  /* Journey roadmap */
  .lx-journey{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:8px 22px; box-shadow:var(--sh-sm,0 1px 2px rgba(13,49,35,.05)); }
  .lx-trow{ display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-2,#eef1ec); position:relative; }
  .lx-trow:last-child{ border-bottom:0; }
  .lx-trow__node{ position:relative; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent-mid); }
  .lx-trow__node svg{ width:22px; height:22px; }
  .lx-trow--done .lx-trow__node{ background:var(--accent-mid); color:#fff; }
  .lx-trow--cur .lx-trow__node{ background:#fff; color:var(--clay-strong); box-shadow:0 0 0 2px var(--clay) inset; }
  .lx-trow__main{ min-width:0; }
  .lx-trow__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .lx-trow__name{ font-weight:650; color:var(--ink); font-size:.98rem; display:flex; align-items:center; gap:9px; }
  .lx-trow__tag{ font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:20px; }
  .lx-trow--done .lx-trow__tag{ color:var(--pos); background:rgba(21,128,61,.1); }
  .lx-trow--cur .lx-trow__tag{ color:var(--clay-strong); background:rgba(194,103,58,.12); }
  .lx-trow__count{ font-size:.8rem; color:var(--text-muted); white-space:nowrap; }
  .lx-trow__bar{ height:7px; border-radius:5px; background:var(--surface-2); overflow:hidden; margin-top:9px; }
  .lx-trow__bar i{ display:block; height:100%; border-radius:5px; width:0; background:var(--accent-mid); transition:width 1s cubic-bezier(.22,1,.36,1); }
  .lx-trow--cur .lx-trow__bar i{ background:linear-gradient(90deg,var(--clay),var(--clay-soft,#e08c5a)); }

  /* Apply-to-money tiles */
  .lx-apply{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .lx-tile{ display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--sh-sm,0 1px 2px rgba(13,49,35,.05)); }
  .lx-tile__viz{ flex:none; }
  .lx-tile__lbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
  .lx-tile__val{ font-size:1.35rem; font-weight:750; letter-spacing:-.02em; color:var(--ink); margin-top:3px; }
  .lx-tile__val span{ font-size:.85rem; font-weight:500; color:var(--text-muted); }
  .lx-tile__link{ font-size:.82rem; font-weight:650; color:var(--accent-mid); margin-top:8px; display:inline-flex; align-items:center; gap:5px; }

  /* Course library cards */
  .lx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:20px; }
  .lx-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(13,49,35,.05); transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s; }
  .lx-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 16px 34px rgba(13,49,35,.1); }
  .lx-card__art{ position:relative; height:118px; overflow:hidden; border-bottom:1px solid var(--line-2,#eef1ec); }
  .lx-card__art > svg,
  .lx-card__art > img{ width:100%; height:100%; display:block; }
  .lx-card__art > img{ object-fit:cover; object-position:center; transition:transform .45s cubic-bezier(.22,1,.36,1); }
  .lx-card:hover .lx-card__art > img{ transform:scale(1.025); }
  .lx-card__state{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); box-shadow:0 2px 6px rgba(13,49,35,.14); }
  .lx-card__state svg{ width:16px; height:16px; }
  .lx-card__state--done{ background:var(--accent-mid); color:#fff; }
  .lx-card__state--cur{ background:var(--clay-strong); color:#fff; }
  .lx-card__rec{ position:absolute; top:12px; left:12px; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--clay-strong); background:rgba(255,255,255,.92); padding:4px 9px; border-radius:20px; box-shadow:0 2px 6px rgba(13,49,35,.1); }
  .lx-card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
  .lx-card__track{ font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-mid); }
  .lx-card__title{ font-family:var(--font-display); font-weight:560; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; line-height:1.2; margin:6px 0 0; }
  .lx-card__meta{ display:flex; align-items:center; gap:14px; margin-top:12px; font-size:.78rem; color:var(--text-muted); }
  .lx-card__meta span{ display:inline-flex; align-items:center; gap:5px; } .lx-card__meta svg{ width:13px; height:13px; }
  .lx-card__bar{ height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:13px; }
  .lx-card__bar i{ display:block; height:100%; border-radius:4px; width:0; background:var(--accent-mid); transition:width .9s cubic-bezier(.22,1,.36,1); }
  .lx-card__foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; }
  .lx-card__cta{ font-size:.86rem; font-weight:650; color:var(--clay-strong); display:inline-flex; align-items:center; gap:6px; }
  .lx-card__cta--muted{ color:var(--text-muted); }
  .lx-card__cert{ font-size:.76rem; font-weight:600; color:var(--accent-mid); display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
  .lx-card__cert svg{ width:13px; height:13px; }

  /* achievements */
  .lx-ach{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
  .lx-ao{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
  .lx-ao__ic{ width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-muted); }
  .lx-ao--on .lx-ao__ic{ background:var(--accent-mid); color:#fff; } .lx-ao__ic svg{ width:18px; height:18px; }
  .lx-ao__t{ font-size:.86rem; font-weight:600; color:var(--text-muted); } .lx-ao--on .lx-ao__t{ color:var(--ink); }

  /* reveal */
  .lx-rv{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1); }
  .lx-rv.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .lx *{ animation:none!important; transition:none!important; } .lx-rv{ opacity:1; transform:none; } }

  @media (max-width:820px){
    .lx-continue{ grid-template-columns:1fr; }
    .lx-continue__art{ display:none; }
    .lx-apply{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .lx-grid{ grid-template-columns:1fr; }
    .lx-library-tools{ grid-template-columns:1fr; }
    .lx-library-tools__count{ text-align:left; }
    .lx-continue__body{ padding:26px 22px; }
    .lx-trow{ grid-template-columns:38px 1fr; gap:12px; } .lx-trow__node{ width:38px; height:38px; }
  }