:root{
      /* Institutional teal palette — locked */
      --accent:#2a7d82; --accent-deep:#1a4d52; --accent-mid:#4a8d92; --accent-soft:#e7f0f0;
      --ink:#1a1f2b; --ink-soft:#3a4254; --slate-soft:#5d6678;
      --paper:#f6f7f9; --paper-2:#eef0f4; --white:#ffffff;
      --line:#dfe3ea; --line-soft:#e9ecf1;
      --positive:#2f7d5b; --positive-soft:#e3efe7;
      --danger:#b54a3a; --danger-soft:#f6e0db;
      --warn:#9a7d3a; --warn-soft:#f0ead9;
      /* Fonts */
      --font-display: "Fraunces", Georgia, serif;
      --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
      /* Surfaces */
      --shadow: 0 8px 28px rgba(26,31,43,.06);
      --radius: 14px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a{ color: inherit; text-decoration: none; }

    /* ─── Site nav (matches all other pages) ─── */
    .nav{ background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
    .nav__inner{ max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 24px; }
    .brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:500; font-size:1.05rem; color: var(--ink); }
    .brand-mark{ width:30px; height:30px; border-radius:8px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); display:grid; place-items:center; color:#fff; font-weight:700; font-family: var(--font-mono); font-size:.95rem; }
    .nav__menu{ list-style:none; margin:0; padding:0; display:flex; gap:24px; flex:1; }
    .nav__menu a{ font-size:.95rem; color: var(--ink-soft); font-weight:500; }
    .nav__menu a:hover{ color: var(--accent-deep); }
    .nav__cta{ display:flex; gap:10px; }
    .btn-ghost-sm{ font-size:.88rem; padding:8px 14px; border-radius:8px; background:transparent; border:1px solid var(--line); color: var(--ink-soft); font-weight:600; cursor:pointer; }
    .btn-ghost-sm:hover{ border-color: var(--accent-mid); color: var(--accent-deep); }

    /* ─── Sub-nav (learners section) ─── */
    .subnav{ background: var(--paper-2); border-bottom: 1px solid var(--line); }
    .subnav__inner{ max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; }
    .subnav__menu{ list-style:none; margin:0; padding:0; display:flex; gap:20px; flex:1; flex-wrap: wrap; }
    .subnav__menu a{ font-size:.88rem; color: var(--ink-soft); font-weight:500; }
    .subnav__menu a:hover{ color: var(--accent-deep); }
    .subnav__cta a{ font-family: var(--font-mono); font-size:.78rem; font-weight:700; color: var(--accent-deep); letter-spacing: .04em; }

    /* ─── Page shell ─── */
    .page{ min-height: 100vh; }

    /* ─── Hero (institutional teal — no coral/navy) ─── */
    .hero{
      background: linear-gradient(135deg, var(--accent-deep) 0%, #1f4148 55%, #15363b 100%);
      color: #fff;
      border-bottom: 1px solid var(--accent-deep);
    }
    .hero-inner{
      max-width: 1180px;
      margin: 0 auto;
      padding: clamp(40px, 5vw, 64px) 20px clamp(36px, 4vw, 52px);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 36px;
      align-items: center;
    }
    .eyebrow{
      display:inline-flex; align-items:center; gap:8px;
      color: #f3c89a;
      font-family: var(--font-mono);
      font-size:.74rem; font-weight:700;
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: 14px;
    }
    .eyebrow::before{ content:""; width:24px; height:2px; background:#f3c89a; }
    h1{
      color: #fff;
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(34px, 4.5vw, 52px);
      line-height: 1.05;
      letter-spacing: -0.015em;
      margin: 0 0 16px;
    }
    .h-emph{ font-style: italic; color: #f3c89a; font-weight: 400; }
    .hero p{
      font-size: 1.05rem;
      color: #cdd9da;
      max-width: 60ch;
      margin: 0 0 24px;
      line-height: 1.55;
    }
    .hero-form{
      background: #fff;
      border-radius: var(--radius);
      padding: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 12px;
      align-items: end;
      box-shadow: var(--shadow);
    }
    label{
      display: block;
      font-family: var(--font-mono);
      font-size: .7rem;
      font-weight: 700;
      color: var(--ink-soft);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    select, input, textarea{
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: .95rem;
      font-family: var(--font-body);
      background: var(--white);
      color: var(--ink);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    select:focus, input:focus, textarea:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    button{
      border: 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-weight: 600;
      border-radius: 10px;
      padding: 12px 18px;
      font-size: .95rem;
      transition: background .15s, transform .12s, box-shadow .15s;
    }
    button:hover{ transform: translateY(-1px); }
    .btn-primary{
      background: var(--accent-deep);
      color: #fff;
      white-space: nowrap;
    }
    .btn-primary:hover{ background: var(--accent); }
    .btn-secondary{
      background: var(--accent-soft);
      color: var(--accent-deep);
      font-weight: 700;
    }
    .btn-secondary:hover{ background: #d8e8e9; }
    .btn-outline{
      background: var(--white);
      color: var(--ink);
      border: 1px solid var(--line);
    }
    .btn-outline:hover{ border-color: var(--accent-mid); color: var(--accent-deep); }

    /* ─── Hero side card (teal-on-teal with subtle highlight) ─── */
    .hero-card{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
      color: #fff;
      border-radius: var(--radius);
      padding: 26px;
      position: relative;
      overflow: hidden;
    }
    .hero-card h2{
      margin: 0 0 8px;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.4rem;
      letter-spacing: -0.015em;
    }
    .hero-card > p{
      color: #cdd9da;
      font-size: .92rem;
      margin-bottom: 18px;
    }
    .mini-stat-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .mini-stat{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      padding: 14px;
    }
    .mini-stat strong{
      display: block;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.7rem;
      line-height: 1;
      margin-bottom: 4px;
      color: #fff;
    }
    .mini-stat span{
      color: #a8b7b9;
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* ─── Main grid ─── */
    .main{
      max-width: 1180px;
      margin: 0 auto;
      padding: 32px 20px 64px;
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 24px;
    }
    .content-stack{ display: grid; gap: 22px; }

    .section-card{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .section-header{
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 14px;
      margin-bottom: 18px;
    }
    .section-header h2{
      margin: 0;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
      font-size: 1.5rem;
      letter-spacing: -0.015em;
    }
    .section-header p{
      margin: 4px 0 0;
      color: var(--slate-soft);
      font-size: .9rem;
    }

    .dashboard-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .metric-card{
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px;
      background: var(--paper);
    }
    .metric-card span{
      font-family: var(--font-mono);
      font-size: .7rem;
      color: var(--slate-soft);
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .metric-card strong{
      display: block;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
      font-size: 1.85rem;
      line-height: 1;
      margin-top: 8px;
    }

    .progress-wrap{ margin-top: 20px; }
    .progress-line{
      width: 100%;
      height: 14px;
      background: var(--paper-2);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
    }
    .progress-bar{
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--positive));
      border-radius: 999px;
      transition: width 0.5s ease;
    }
    .progress-meta{
      display: flex;
      justify-content: space-between;
      color: var(--slate-soft);
      font-size: .82rem;
      font-weight: 600;
      margin-top: 8px;
    }

    .status-badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: .74rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .status-safe{ background: var(--positive-soft); color: var(--positive); }
    .status-watch{ background: var(--warn-soft); color: var(--warn); }
    .status-risk{ background: var(--danger-soft); color: var(--danger); }

    /* ─── Gap analysis ─── */
    .gap-list{ display: grid; gap: 12px; }
    .gap-item{
      display: grid;
      grid-template-columns: 200px 1fr 90px;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--white);
    }
    .gap-item strong{ color: var(--ink); font-weight: 600; font-size: .95rem; }
    .gap-track{
      background: var(--paper-2);
      border-radius: 999px;
      height: 10px;
      overflow: hidden;
    }
    .gap-fill{
      height: 100%;
      width: 0%;
      background: var(--accent);
      border-radius: 999px;
      transition: width 0.5s ease;
    }
    .gap-item span{ font-family: var(--font-mono); font-size:.8rem; color: var(--slate-soft); text-align: right; }

    /* ─── Course recommendations ─── */
    .course-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .course-card{
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px;
      background: var(--white);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      transition: transform .12s, border-color .12s, box-shadow .12s;
    }
    .course-card:hover{
      transform: translateY(-2px);
      border-color: var(--accent-mid);
      box-shadow: 0 6px 20px rgba(26,77,82,.08);
    }
    .course-card h3{
      margin: 0;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
      font-size: 1.05rem;
      line-height: 1.25;
    }
    .course-card p{
      color: var(--slate-soft);
      margin: 8px 0 0;
      font-size: .88rem;
    }
    .course-meta{ display: flex; gap: 6px; flex-wrap: wrap; }
    .tag{
      background: var(--accent-soft);
      color: var(--accent-deep);
      padding: 4px 10px;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

    /* ─── Planner output ─── */
    .planner-row{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: end;
    }
    .planner-output{
      margin-top: 14px;
      border-radius: 10px;
      padding: 14px 16px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      font-weight: 600;
      font-size: .92rem;
      line-height: 1.55;
    }
    .planner-output strong{ font-weight: 700; }
    .planner-output--safe{
      background: var(--positive-soft);
      color: var(--positive);
    }
    .planner-output--watch{
      background: var(--warn-soft);
      color: var(--warn);
    }
    .planner-output--risk{
      background: var(--danger-soft);
      color: var(--danger);
    }

    /* ─── Records list ─── */
    .records-form{
      display: grid;
      grid-template-columns: 1.2fr 0.7fr 0.7fr auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 16px;
    }
    .records-list{ display: grid; gap: 8px; }
    .record-row{
      display: grid;
      grid-template-columns: 1fr 80px 120px auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      background: var(--white);
      padding: 12px 14px;
      border-radius: 10px;
      font-size: .9rem;
    }
    .record-row strong{ color: var(--ink); font-weight: 600; }

    /* ─── Sidebar ─── */
    .sidebar{
      position: sticky;
      top: 92px;
      align-self: start;
      display: grid;
      gap: 16px;
    }
    .sticky-card{
      background: var(--accent-deep);
      color: #fff;
      border-radius: var(--radius);
      padding: 22px;
    }
    .sticky-card h3{
      margin: 0 0 14px;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.2rem;
      letter-spacing: -0.015em;
    }
    .sticky-stat{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.13);
      padding: 11px 0;
      color: #cdd9da;
      font-size: .9rem;
    }
    .sticky-stat:last-of-type{ border-bottom: none; }
    .sticky-stat strong{ color: #fff; font-weight: 600; }

    .email-box{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
    }
    .email-box h3{
      color: var(--ink);
      font-family: var(--font-display);
      font-weight: 500;
      margin: 0 0 6px;
      font-size: 1.1rem;
    }
    .email-box > p{
      color: var(--slate-soft);
      font-size: .88rem;
      margin: 0 0 14px;
    }

    /* ─── Trust strip (HIPAA / SOC 2 / IACET) ─── */
    .trust-strip{
      background: var(--paper-2);
      border-bottom: 1px solid var(--line);
    }
    .trust-strip__inner{
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 20px;
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: .04em;
    }
    .trust-strip__item{ display: flex; align-items: center; gap: 8px; }
    .trust-strip__item::before{
      content: "";
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
    }
    .trust-strip__item--gold::before{ background: var(--warn); }

    /* ─── Footer note ─── */
    .footer-note{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px 48px;
      color: var(--slate-soft);
      font-size: .85rem;
      line-height: 1.6;
    }
    .footer-note strong{ color: var(--ink); font-weight: 600; }

    .hidden{ display: none; }

    /* ─── Responsive ─── */
    @media (max-width: 980px){
      .hero-inner, .main{ grid-template-columns: 1fr; }
      .sidebar{ position: static; }
      .dashboard-grid, .course-grid{ grid-template-columns: repeat(2, 1fr); }
      .hero-form{ grid-template-columns: 1fr; }
      .records-form{ grid-template-columns: 1fr 1fr; }
      .records-form button{ grid-column: 1 / -1; }
      .gap-item{ grid-template-columns: 1fr; }
    }
    @media (max-width: 620px){
      .nav__menu, .subnav__menu{ display: none; }
      .dashboard-grid, .course-grid, .records-form{ grid-template-columns: 1fr; }
      .record-row{ grid-template-columns: 1fr; }
      .planner-row{ grid-template-columns: 1fr; }
      button{ width: 100%; }
    }

    @media print{
      .nav, .subnav, .trust-strip, .hero, .sidebar, .records-form button, .btn-primary, .btn-secondary, .btn-outline{ display: none !important; }
      body{ background: white; }
      .main{ display: block; padding: 0; }
      .section-card{ box-shadow: none; border: 1px solid #ddd; margin-bottom: 14px; }
    }

    /* ─── Credential context panel ─── */
    .credential-note{
      margin-top: 20px;
      padding: 16px 18px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 18px;
      align-items: start;
    }
    .credential-note__cycle{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .credential-note__label{
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 700;
      color: var(--slate-soft);
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .credential-note__cycle strong{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1rem;
      color: var(--ink);
    }
    .credential-note__body p{
      margin: 0;
      font-size: .88rem;
      color: var(--ink-soft);
      line-height: 1.5;
    }
    .credential-note__source{
      font-family: var(--font-mono);
      font-size: .72rem;
      color: var(--slate-soft);
      margin-top: 8px !important;
      letter-spacing: .02em;
    }

    /* ─── Export gate modal ─── */
    .export-modal{
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .export-modal[hidden]{ display: none; }
    .export-modal__backdrop{
      position: absolute;
      inset: 0;
      background: rgba(26, 31, 43, 0.55);
      backdrop-filter: blur(4px);
    }
    .export-modal__card{
      position: relative;
      background: var(--white);
      border-radius: 18px;
      padding: 36px 32px 32px;
      max-width: 480px;
      width: 100%;
      box-shadow: 0 24px 60px rgba(26, 31, 43, 0.3);
      max-height: 92vh;
      overflow-y: auto;
    }
    .export-modal__close{
      position: absolute;
      top: 14px;
      right: 14px;
      background: transparent;
      border: none;
      font-size: 1.6rem;
      color: var(--slate-soft);
      cursor: pointer;
      padding: 4px 10px;
      line-height: 1;
    }
    .export-modal__close:hover{ color: var(--ink); }
    .export-modal__icon{
      width: 52px; height: 52px;
      border-radius: 12px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      display: grid;
      place-items: center;
      margin-bottom: 16px;
    }
    .export-modal__card h2{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.55rem;
      letter-spacing: -.015em;
      margin: 0 0 10px;
      color: var(--ink);
    }
    .export-modal__card p{
      color: var(--ink-soft);
      font-size: .92rem;
      margin: 0 0 14px;
      line-height: 1.55;
    }
    .export-modal__line{
      color: var(--ink) !important;
      font-weight: 500;
    }
    .export-modal__consent{
      margin-top: 14px;
    }
    .export-modal__checkbox{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: .85rem;
      color: var(--ink-soft);
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 0;
      line-height: 1.45;
    }
    .export-modal__checkbox input{
      width: auto;
      margin: 3px 0 0 0;
      flex-shrink: 0;
    }
    .export-modal__legal{
      font-size: .75rem !important;
      color: var(--slate-soft) !important;
      margin-top: 12px !important;
      line-height: 1.5;
    }

    /* ─── Status feedback toast ─── */
    .feedback-toast{
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--ink);
      color: #fff;
      padding: 14px 24px;
      border-radius: 8px;
      font-size: .92rem;
      font-weight: 500;
      box-shadow: 0 8px 32px rgba(26,31,43,.28);
      opacity: 0;
      transition: transform .25s, opacity .25s;
      z-index: 150;
      pointer-events: none;
      max-width: 90vw;
    }
    .feedback-toast.is-visible{
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .feedback-toast--success{ background: var(--positive); }

    @media (max-width: 620px){
      .credential-note{ grid-template-columns: 1fr; gap: 10px; }
      .export-modal__card{ padding: 28px 22px 24px; }
    }

    /* ─── Credential stack (multi-credential dashboard) ─── */
    .credential-stack{
      display: grid;
      gap: 10px;
    }
    .credential-stack__empty{
      padding: 28px 20px;
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: 12px;
      background: var(--paper);
    }
    .cred-card{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .12s;
      position: relative;
    }
    /* Alternating hues — soft visual demarcation between stacked credentials.
       Use nth-of-type with class chaining to ignore the empty-state sibling.
       The :not() pattern ensures we only count rendered .cred-card elements. */
    .credential-stack .cred-card{ background: var(--white); }
    .credential-stack .cred-card + .cred-card{ background: var(--paper); }
    .credential-stack .cred-card + .cred-card + .cred-card{ background: var(--white); }
    .credential-stack .cred-card + .cred-card + .cred-card + .cred-card{ background: var(--paper); }
    .credential-stack .cred-card + .cred-card + .cred-card + .cred-card + .cred-card{ background: var(--white); }
    .credential-stack .cred-card + .cred-card + .cred-card + .cred-card + .cred-card + .cred-card{ background: var(--paper); }
    .cred-card:hover{
      border-color: var(--accent-mid);
      box-shadow: 0 4px 14px rgba(26, 77, 82, .06);
    }
    .cred-card--active{
      background: var(--white) !important;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .cred-card--active::before{
      content: "ACTIVE";
      position: absolute;
      top: -8px;
      left: 14px;
      background: var(--accent);
      color: #fff;
      font-family: var(--font-mono);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .08em;
      padding: 2px 8px;
      border-radius: 99px;
    }
    .cred-card__head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .cred-card__code{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.1rem;
      color: var(--ink);
      letter-spacing: -.01em;
      line-height: 1.15;
    }
    .cred-card__meta{
      font-family: var(--font-mono);
      font-size: .68rem;
      color: var(--slate-soft);
      margin-top: 2px;
    }
    .cred-card__head-right{
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cred-card__remove{
      background: transparent;
      border: 1px solid var(--line);
      color: var(--slate-soft);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      font-size: .95rem;
      line-height: 1;
      padding: 0;
      transition: border-color .15s, color .15s, background .15s;
    }
    .cred-card__remove:hover{
      border-color: var(--danger);
      color: var(--danger);
      background: var(--danger-soft);
    }
    .cred-card__metrics{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }
    .cred-card__metric{
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      padding: 7px 10px;
      background: var(--white);
    }
    /* On hued (paper-background) cards, metric inner-card gets paper-2 for contrast */
    .credential-stack .cred-card + .cred-card .cred-card__metric{ background: var(--paper-2); }
    .credential-stack .cred-card + .cred-card + .cred-card .cred-card__metric{ background: var(--white); }
    .credential-stack .cred-card + .cred-card + .cred-card + .cred-card .cred-card__metric{ background: var(--paper-2); }
    .cred-card--active .cred-card__metric{ background: var(--paper) !important; }
    .cred-card__metric span{
      font-family: var(--font-mono);
      font-size: .6rem;
      color: var(--slate-soft);
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .cred-card__metric strong{
      display: block;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
      font-size: 1.15rem;
      line-height: 1;
      margin-top: 3px;
    }
    .cred-card__progress{
      margin-bottom: 2px;
    }
    .cred-card__progress .progress-line{ height: 10px; }
    .cred-card__progress .progress-meta{ font-size: .76rem; margin-top: 6px; }
    .cred-card__details{
      margin-top: 10px;
      border-top: 1px solid var(--line-soft);
      padding-top: 8px;
    }
    .cred-card__details > summary{
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: .72rem;
      color: var(--ink-soft);
      font-weight: 600;
      letter-spacing: .03em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      list-style: none;
      padding: 4px 0;
    }
    .cred-card__details > summary::-webkit-details-marker{ display: none; }
    .cred-card__details > summary::before{
      content: "▸";
      color: var(--accent);
      transition: transform .12s;
      display: inline-block;
      margin-right: 8px;
    }
    .cred-card__details[open] > summary::before{
      transform: rotate(90deg);
    }
    .cred-card__source{
      color: var(--slate-soft);
      font-size: .66rem;
      font-weight: 500;
    }
    .cred-card__gaps{
      margin-top: 10px;
      display: grid;
      gap: 6px;
    }
    .cred-card__gaps .gap-item{
      padding: 8px 12px;
      grid-template-columns: 180px 1fr 80px;
    }
    .cred-card__note{
      margin: 10px 0 0;
      padding: 8px 12px;
      background: var(--paper-2);
      border-radius: 6px;
      font-size: .78rem;
      color: var(--ink-soft);
      line-height: 1.5;
    }
    .cred-card--active .cred-card__note{ background: var(--accent-soft); }

    /* ─── Share & Trust section (Phase A + B) ─── */
    .share-trust{
      background: var(--paper-2);
      border-top: 1px solid var(--line);
      padding: 56px 0 64px;
    }
    .share-trust__inner{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px;
      display: grid;
      gap: 56px;
    }
    
    /* Share block */
    .share-block{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 32px 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
      box-shadow: var(--shadow);
    }
    .share-block__head h3{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.6rem;
      color: var(--ink);
      margin: 0 0 8px;
      letter-spacing: -.015em;
    }
    .share-block__head p{
      color: var(--ink-soft);
      font-size: .98rem;
      margin: 0;
      line-height: 1.55;
    }
    .share-block__buttons{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }
    .share-btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--white);
      border: 1px solid var(--line);
      color: var(--ink);
      padding: 11px 16px;
      border-radius: 10px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: .9rem;
      cursor: pointer;
      transition: all .15s;
    }
    .share-btn:hover{
      border-color: var(--accent-mid);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(26, 77, 82, .08);
    }
    .share-btn--linkedin:hover{ color: #0a66c2; }
    .share-btn--copy.is-copied{
      background: var(--positive);
      color: #fff;
      border-color: var(--positive);
    }
    
    /* Trust block */
    .trust-block{
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 48px;
      align-items: start;
    }
    .trust-block__eyebrow{
      font-family: var(--font-mono);
      font-size: .72rem;
      color: var(--accent-deep);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .trust-block__col h3{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.9rem;
      color: var(--ink);
      margin: 0 0 16px;
      letter-spacing: -.02em;
      line-height: 1.15;
    }
    .trust-block__col p{
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.65;
      margin: 0 0 16px;
    }
    .trust-block__credentials{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .trust-cred{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 16px 18px;
    }
    .trust-cred__label{
      font-family: var(--font-mono);
      font-size: .68rem;
      color: var(--slate-soft);
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .trust-cred__value{
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.05rem;
      color: var(--ink);
      letter-spacing: -.01em;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .trust-cred__detail{
      font-family: var(--font-mono);
      font-size: .68rem;
      color: var(--slate-soft);
      letter-spacing: .02em;
    }
    
    @media (max-width: 880px){
      .share-block{ grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
      .share-block__buttons{ justify-content: flex-start; }
      .trust-block{ grid-template-columns: 1fr; gap: 28px; }
      .trust-block__credentials{ grid-template-columns: 1fr; }
    }

    /* Multi-credential badge on course cards */
    .course-card__multi{
      background: var(--positive);
      color: #fff;
      padding: 3px 9px;
      border-radius: 99px;
      font-family: var(--font-mono);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .04em;
    }
      background: var(--positive);
      color: #fff;
      padding: 3px 9px;
      border-radius: 99px;
      font-family: var(--font-mono);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

    /* Record credentials picker */
    .record-credentials{
      margin-bottom: 18px;
      padding: 14px 16px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .record-credentials__label{
      display: block;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 700;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 10px;
    }
    .record-credentials__chips{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .record-credentials__chip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--white);
      border: 1px solid var(--line);
      padding: 7px 12px;
      border-radius: 99px;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: .76rem;
      font-weight: 700;
      color: var(--ink-soft);
      transition: all .12s;
      margin-bottom: 0;
      text-transform: none;
      letter-spacing: .02em;
    }
    .record-credentials__chip:has(input:checked){
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-deep);
    }
    .record-credentials__chip input{
      width: auto;
      margin: 0;
      cursor: pointer;
    }
    .record-credentials__help{
      margin: 10px 0 0 !important;
      font-size: .78rem !important;
      color: var(--slate-soft);
      line-height: 1.5;
    }

    /* Enhanced record rows showing credential tags */
    .record-row--enhanced{
      grid-template-columns: 1fr 90px 130px auto;
      align-items: center;
    }
    .record-row__main{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .record-row__main strong{
      font-size: .95rem;
    }
    .record-row__tags{
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .record-cred-tag{
      background: var(--accent-soft);
      color: var(--accent-deep);
      padding: 2px 9px;
      border-radius: 99px;
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .record-row__ceus{
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--ink);
    }
    .record-row__date{
      font-family: var(--font-mono);
      font-size: .82rem;
      color: var(--slate-soft);
    }
    .record-row__remove{
      padding: 7px 14px !important;
      font-size: .82rem;
    }

    @media (max-width: 980px){
      .cred-card__metrics{ grid-template-columns: repeat(2, 1fr); }
      .record-row--enhanced{ grid-template-columns: 1fr; gap: 8px; }
    }