/* Generated by tools/scope-course-css.py from coursepkg/human-trafficking/styles.css -- do not edit by hand. */
.cx {
  --ink: #16242E;
  --navy: #103A53;
  --blue: #1B6C8C;        
  --blue-deep: #0F4D66;
  --teal: #0E9AA1;        
  --teal-deep: #0B6E73;
  --blue-lt: #E5F1F5;     
  --blue-lt2: #F1F8FA;    
  --blue-bdr: #BCDCE4;
  --bg: #EDF4F6;
  --paper: #FFFFFF;
  --grey: #57686F;
  --green: #138A6E;
  --red: #C0392B;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --sans: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --shadow: 0 18px 50px -28px rgba(16, 58, 83, 0.55);
}
.cx, .cx * { box-sizing: border-box; }
.cx {
  margin: 0; padding: 0;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(14, 154, 161, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(27, 108, 140, 0.10), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.cx .app { max-width: 1080px; margin: 0 auto; padding: 0 22px 80px; }
.cx .topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px 24px; margin: 0 -22px 0;
  background: rgba(237, 244, 246, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--blue-bdr);
}
.cx .brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.cx .brand .mark { font-weight: 800; letter-spacing: 0.22em; color: var(--teal-deep); font-size: 0.82rem; white-space: nowrap; }
.cx .brand .sep { color: var(--blue-bdr); }
.cx .brand .kit { color: var(--grey); font-size: 0.78rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx .progress-wrap { display: flex; align-items: center; gap: 10px; }
.cx .progress-track { width: 160px; height: 7px; border-radius: 99px; background: #d3e6ec; overflow: hidden; }
.cx .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--blue)); transition: width .4s ease; }
.cx .progress-label { font-size: 0.72rem; color: var(--grey); letter-spacing: 0.04em; white-space: nowrap; }
.cx .layout { display: grid; grid-template-columns: 248px 1fr; gap: 34px; margin-top: 30px; align-items: start; }
@media (max-width: 820px) {
.cx .layout { grid-template-columns: 1fr; }
.cx .sidebar { position: static; }
 }
.cx .sidebar { position: sticky; top: 86px; }
.cx .sidebar ol { list-style: none; margin: 0; padding: 0; }
.cx .sidebar li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 4px; border-radius: 10px; cursor: pointer; color: var(--grey); font-size: 0.9rem; transition: background .18s, color .18s; user-select: none; }
.cx .sidebar li:hover { background: var(--blue-lt2); color: var(--ink); }
.cx .sidebar li.active { background: var(--blue-lt); color: var(--navy); font-weight: 600; }
.cx .sidebar li .dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1.5px solid var(--blue-bdr); display: grid; place-items: center; font-size: 0.62rem; color: var(--blue); background: var(--paper); }
.cx .sidebar li.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.cx .sidebar li.active .dot { border-color: var(--blue); }
.cx .panel { background: var(--paper); border: 1px solid #e1edf1; border-radius: 18px; padding: 40px 44px; box-shadow: var(--shadow); min-height: 60vh; animation: cx-rise .45s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 560px) {
.cx .panel { padding: 28px 22px; }
 }
@keyframes cx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cx .eyebrow { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; margin-bottom: 12px; }
.cx h1.title { font-family: var(--serif); font-weight: 700; font-size: 2.55rem; line-height: 1.08; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.cx .subtitle { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--blue); margin: 0 0 22px; }
.cx h2.lesson-h { font-family: var(--serif); font-size: 1.85rem; color: var(--navy); margin: 0 0 8px; line-height: 1.15; }
.cx h3 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); margin: 26px 0 10px; }
.cx p { margin: 0 0 14px; }
.cx strong { color: var(--navy); }
.cx .lead { font-size: 1.08rem; }
.cx .hot-take { border-left: 5px solid var(--teal); background: var(--blue-lt); padding: 22px 26px; border-radius: 0 14px 14px 0; margin: 22px 0 26px; }
.cx .hot-take .tag { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; }
.cx .hot-take p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; color: var(--navy); margin: 8px 0 0; }
.cx .callout { border-left: 5px solid var(--blue-bdr); background: var(--blue-lt2); padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 20px 0; }
.cx .callout.teal { border-left-color: var(--teal); background: var(--blue-lt); }
.cx .callout .tag { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; margin-bottom: 6px; }
.cx .callout.warn { border-left-color: var(--red); background: #FBEDEB; }
.cx .callout.warn .tag { color: var(--red); }
.cx .big-idea p { font-family: var(--serif); font-style: italic; font-size: 1.18rem; color: var(--navy); margin: 4px 0 0; }
.cx .meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0; }
@media (max-width: 560px) {
.cx .meta-grid { grid-template-columns: repeat(2, 1fr); }
 }
.cx .meta-cell { border: 1px solid var(--blue-bdr); background: var(--blue-lt2); border-radius: 12px; padding: 14px 16px; }
.cx .meta-cell .k { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; }
.cx .meta-cell .v { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-top: 3px; }
.cx ul.clean, .cx ol.clean { margin: 8px 0 18px; padding-left: 0; list-style: none; }
.cx ul.clean li, .cx ol.clean li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.cx ul.clean li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--teal); }
.cx ol.clean { counter-reset: o; }
.cx ol.clean li { counter-increment: o; }
.cx ol.clean li::before { content: counter(o); position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 800; }
.cx .signature { font-family: var(--serif); font-style: italic; color: var(--teal-deep); font-size: 1.12rem; }
.cx .video-wrap { position: relative; margin: 22px auto; border-radius: 18px; overflow: hidden; border: 1px solid #d7e7ec; background: #122a35; aspect-ratio: 9 / 16; max-width: 320px; box-shadow: 0 20px 44px -24px rgba(15,58,83,.65); }
.cx .video-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; background:#122a35; }
.cx .video-ph { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, #163642, #163642 16px, #12303b 16px, #12303b 32px); color: #e3f1f4; }
.cx .video-ph .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 1.4rem; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.cx .video-ph .vt { font-weight: 700; letter-spacing: 0.04em; }
.cx .video-ph .vs { font-size: 0.82rem; color: #9fc4cd; }
.cx .video-ph code { background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 6px; color: #e3f1f4; font-size: 0.8rem; }
.cx .script { background: var(--blue-lt); border-left: 5px solid var(--teal); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
.cx .script .tag { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; }
.cx .script .secs { color: var(--grey); font-weight: 400; letter-spacing: 0.04em; margin-left: 8px; }
.cx .script p { margin: 8px 0 0; color: var(--ink); }
.cx .widget { border: 1px solid #dbeaef; border-radius: 16px; padding: 22px 24px; margin: 22px 0; background: linear-gradient(180deg, var(--blue-lt2), #fff); }
.cx .widget-tag { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; margin-bottom: 14px; display:flex; align-items:center; gap:9px; }
.cx .widget-tag .pill { font-size: 0.58rem; letter-spacing: .14em; background: var(--teal); color: #fff; padding: 3px 9px; border-radius: 99px; font-weight: 800; }
.cx .stage-map { display: flex; gap: 10px; flex-wrap: wrap; }
.cx .stage-chip { flex: 1 1 150px; border: 1.5px solid var(--blue-bdr); background: #fff; color: var(--navy); border-radius: 12px; padding: 14px 12px; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 0.92rem; text-align: center; transition: all .16s; }
.cx .stage-chip:hover { border-color: var(--teal); transform: translateY(-2px); }
.cx .stage-chip.active { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); color: #fff; border-color: var(--blue-deep); }
.cx .stage-chip .step { display:block; font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; font-weight: 700; }
.cx .stage-detail { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid #dbeaef; min-height: 70px; color: var(--ink); animation: cx-rise .3s both; }
.cx .stage-detail .st { font-family: var(--serif); font-weight: 700; color: var(--navy); display: block; margin-bottom: 4px; }
.cx .swap-grid { display: grid; gap: 12px; }
.cx .swap-card { border: 1px solid #dbeaef; border-radius: 12px; padding: 16px 18px; background: #fff; }
.cx .swap-card .weak { color: var(--grey); font-style: italic; }
.cx .swap-card .strong { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--blue-bdr); color: var(--navy); font-weight: 600; animation: cx-rise .25s both; }
.cx .swap-card .strong .lbl { display:block; font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); font-weight: 800; margin-bottom: 4px; }
.cx .swap-card.open .strong { display: block; }
.cx .swap-card .reveal { margin-top: 10px; }
.cx .mini-btn { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; border: 1px solid var(--teal); color: var(--teal-deep); background: #fff; border-radius: 9px; padding: 7px 14px; cursor: pointer; transition: all .15s; }
.cx .mini-btn:hover { background: var(--teal); color: #fff; }
.cx .swap-card.open .reveal { display: none; }
.cx .cus-row { display: flex; gap: 10px; }
.cx .cus-step { flex: 1; border: 1.5px solid var(--blue-bdr); background: #fff; border-radius: 12px; padding: 16px 10px; cursor: pointer; text-align: center; transition: all .16s; }
.cx .cus-step:hover { border-color: var(--teal); transform: translateY(-2px); }
.cx .cus-step.active { background: linear-gradient(180deg, var(--teal), var(--teal-deep)); border-color: var(--teal-deep); }
.cx .cus-step .k { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--blue); line-height: 1; }
.cx .cus-step.active .k, .cx .cus-step.active .lab { color: #fff; }
.cx .cus-step .lab { font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-top: 4px; }
.cx .cus-detail { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid #dbeaef; min-height: 64px; animation: cx-rise .3s both; }
.cx .cus-detail .line { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-weight: 700; }
.cx .cus-detail .note { color: var(--ink); margin-top: 6px; }
.cx .two-challenge { display: none; margin-top: 14px; padding: 14px 18px; border-left: 4px solid var(--blue); background: var(--blue-lt2); border-radius: 0 10px 10px 0; animation: cx-rise .3s both; }
.cx .two-challenge.show { display: block; }
.cx .scenario-q { font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.cx .scen-opt { display: block; width: 100%; text-align: left; border: 1px solid #dbeaef; background: #fff; border-radius: 11px; padding: 13px 16px; margin-bottom: 9px; cursor: pointer; font-family: var(--sans); font-size: 0.96rem; color: var(--ink); transition: all .15s; }
.cx .scen-opt:hover { border-color: var(--teal); background: var(--blue-lt2); }
.cx .scen-opt.best { border-color: var(--green); background: #e9f6f1; }
.cx .scen-opt.off { border-color: var(--blue-bdr); opacity: .6; }
.cx .scen-fb { display: none; margin-top: 6px; padding: 14px 18px; border-radius: 12px; animation: cx-rise .3s both; }
.cx .scen-fb.show { display: block; }
.cx .scen-fb.good { background: #e9f6f1; border-left: 4px solid var(--green); }
.cx .scen-fb.redirect { background: var(--blue-lt2); border-left: 4px solid var(--blue); }
.cx .q { border: 1px solid #e1edf1; border-radius: 14px; padding: 20px 22px; margin: 16px 0; background: var(--paper); }
.cx .q .qnum { color: var(--teal-deep); font-weight: 800; }
.cx .q .stem { font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.cx .opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border: 1px solid #dde9ed; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.cx .opt:hover { border-color: var(--blue-bdr); background: var(--blue-lt2); }
.cx .opt input { margin-top: 4px; accent-color: var(--blue); }
.cx .opt .ltr { font-weight: 700; color: var(--grey); }
.cx .opt.correct { border-color: var(--green); background: #e9f6f1; }
.cx .opt.wrong { border-color: var(--red); background: #fbedeb; }
.cx .opt.locked { cursor: default; }
.cx .rationale { display: none; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--blue-lt2); font-size: 0.92rem; color: var(--ink); border-left: 4px solid var(--blue-bdr); }
.cx .rationale .why { color: var(--teal-deep); font-weight: 700; font-style: italic; }
.cx .rationale .oc { color: var(--blue); font-style: italic; }
.cx .q.answered .rationale { display: block; }
.cx .quiz-status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0; padding: 18px 22px; border-radius: 14px; background: var(--blue-lt); border: 1px solid var(--blue-bdr); }
.cx .score-ring { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--navy); }
.cx .score-ring small { font-size: 0.95rem; color: var(--grey); }
.cx .verdict { font-weight: 700; }
.cx .verdict.pass { color: var(--green); }
.cx .verdict.fail { color: var(--red); }
.cx .chat-intro { color: var(--grey); margin-bottom: 14px; }
.cx .chat-window { border: 1px solid #dbeaef; border-radius: 16px; background: linear-gradient(180deg, var(--blue-lt2), #fff); padding: 18px; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cx .msg { display: flex; gap: 10px; align-items: flex-end; animation: cx-rise .26s both; }
.cx .msg.user { flex-direction: row-reverse; }
.cx .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; color: #fff; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); }
.cx .msg.user .avatar { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); }
.cx .bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; line-height: 1.5; font-size: 0.97rem; }
.cx .msg.bot .bubble { background: #fff; border: 1px solid #dbeaef; border-bottom-left-radius: 5px; color: var(--ink); }
.cx .msg.user .bubble { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); color: #fff; border-bottom-right-radius: 5px; }
.cx .bubble.beat { background: transparent; border: none; color: var(--teal-deep); font-weight: 700; font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; padding: 4px 6px; max-width: 100%; }
.cx .typing .bubble { display: inline-flex; gap: 4px; align-items:center; }
.cx .typing .d { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bdr); animation: cx-blink 1.2s infinite; }
.cx .typing .d:nth-child(2) { animation-delay: .2s; }
.cx .typing .d:nth-child(3) { animation-delay: .4s; }
@keyframes cx-blink { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }
.cx .chat-input { display: flex; gap: 10px; margin-top: 14px; }
.cx .chat-input textarea { flex: 1; resize: none; min-height: 48px; max-height: 140px; border: 1px solid #cfe2e8; border-radius: 12px; padding: 12px 14px; font-family: var(--sans); font-size: 0.96rem; color: var(--ink); background: #fff; }
.cx .chat-input textarea:focus { outline: none; border-color: var(--teal); }
.cx .chat-input textarea:disabled { background: #eef4f6; }
.cx .care-footer { border-left: 5px solid var(--teal); background: var(--blue-lt); border-radius: 0 12px 12px 0; padding: 20px 24px; margin-top: 22px; font-style: italic; color: var(--navy); display:none; animation: cx-rise .3s both; }
.cx .care-footer.show { display: block; }
.cx .save-row { display: none; margin-top: 14px; text-align: center; }
.cx .save-row.show { display: block; animation: cx-rise .3s both; }
.cx .navrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid #e3eef1; }
.cx .btn { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; padding: 12px 22px; border-radius: 11px; border: 1px solid var(--blue-bdr); background: var(--paper); color: var(--blue-deep); cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; }
.cx .btn:hover { transform: translateY(-1px); }
.cx .btn.primary { background: linear-gradient(180deg, var(--teal), var(--blue)); border-color: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(15, 77, 102, .8); }
.cx .btn.primary:hover { box-shadow: 0 16px 30px -12px rgba(15, 77, 102, .9); }
.cx .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cx .btn.ghost { border-color: transparent; background: transparent; color: var(--grey); }
.cx .btn.ghost:hover { color: var(--ink); }
.cx .complete-banner { display: none; margin: 24px 0; padding: 22px 26px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, var(--blue-lt), #fff); border: 1px solid var(--blue-bdr); }
.cx .complete-banner.show { display: block; animation: cx-rise .4s both; }
.cx .complete-banner .big { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); font-weight: 700; }
.cx .foot { text-align: center; color: var(--grey); font-size: 0.78rem; margin-top: 40px; letter-spacing: 0.03em; }
.cx .carry { border-left: 5px solid var(--teal); background: var(--blue-lt); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 18px 0; }
.cx .carry p { font-family: var(--serif); font-style: italic; font-size: 1.28rem; color: var(--navy); margin: 0; }
.cx .meet { border-left: 5px solid var(--blue-bdr); background: var(--blue-lt2); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 20px 0; }
.cx .panel { overflow: hidden; }
.cx .hero { position: relative; overflow: hidden; margin: -40px -44px 0; padding: 38px 44px 30px; background: linear-gradient(135deg, #0F3A52 0%, #14506B 55%, #0B6E73 100%); border-bottom: 4px solid var(--teal); }
@media (max-width: 560px) {
.cx .hero { margin: -28px -22px 0; padding: 28px 22px 24px; }
 }
.cx .hero::after { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(125deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); pointer-events:none; }
.cx .hero-hex { position:absolute; top:-26px; right:-14px; opacity:.12; }
.cx .hero-inner { position: relative; z-index: 1; }
.cx .hero-eyebrow { color:#bfe6ea; font-weight:800; letter-spacing:.2em; font-size:.78rem; text-transform:uppercase; margin-bottom:14px; }
.cx .hero-eyebrow span { color: rgba(191,230,234,.5); margin:0 12px; }
.cx .hero-title { font-family: var(--serif); font-weight:700; font-size:2.7rem; line-height:1.05; color:#fff; margin:0; letter-spacing:-.01em; }
@media (max-width: 560px) {
.cx .hero-title { font-size: 2rem; }
 }
.cx .hero-sub { font-family: var(--serif); font-style: italic; color:#9fd4d9; font-size:1.25rem; margin-top:8px; }
.cx .badges { display:flex; flex-wrap:wrap; gap:14px; margin: 26px 0 8px; }
.cx .badge { border:1.5px solid var(--blue-bdr); border-radius:12px; padding:13px 24px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; font-size:.8rem; color:var(--teal-deep); background:#fff; box-shadow: 0 10px 24px -16px rgba(15,77,102,.5); }
.cx .badge.filled { background: linear-gradient(180deg, var(--teal), var(--teal-deep)); border-color: var(--teal-deep); color:#fff; }
.cx .badge-note { color: var(--grey); font-size:.9rem; margin: 8px 0 4px; }
.cx .sec-h { display:flex; align-items:center; gap:12px; font-family: var(--sans); font-weight:800; font-size:1.2rem; color: var(--navy); margin: 30px 0 12px; }
.cx .sec-h::before { content:""; width:5px; height:1.15rem; border-radius:3px; background: var(--teal); flex:none; }
.cx .approval-box { border-left:5px solid var(--teal); background: var(--blue-lt); border-radius:0 12px 12px 0; padding:20px 24px; color: var(--navy); font-weight:600; font-size:1.04rem; }
.cx .muted-i { color: var(--grey); font-style: italic; margin-bottom:10px; }
.cx ul.arrow { list-style:none; padding-left:0; margin:8px 0 6px; }
.cx ul.arrow li { position:relative; padding-left:30px; margin-bottom:12px; }
.cx ul.arrow li::before { content:"\25B8"; position:absolute; left:6px; top:0; color: var(--teal); font-size:1.05rem; }
.cx ul.checks { list-style:none; padding-left:0; margin:8px 0; }
.cx ul.checks li { position:relative; padding-left:40px; margin-bottom:13px; min-height:26px; display:flex; align-items:center; }
.cx ul.checks li::before { content:"\2713"; position:absolute; left:0; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background: var(--teal-deep); color:#fff; font-size:.82rem; font-weight:800; display:grid; place-items:center; }
.cx .team-row { margin: 8px 0; }
.cx .team-row .role { display:inline-block; color: var(--teal-deep); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; margin-right:16px; }
.cx .team-row .name { color: var(--navy); font-weight:600; font-size:1.05rem; }
.cx .fine-rule { border:none; border-top:1px solid #e3eef1; margin:26px 0 18px; }
.cx .fine { color: var(--grey); font-size:.86rem; line-height:1.55; margin-bottom:12px; }
.cx .fine strong { color: var(--navy); }
.cx .curve-box { margin: 4px 0 18px; padding: 18px 20px 8px; border:1px solid #dbeaef; border-radius:14px; background:#fff; }
.cx .curve-cap { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: var(--teal-deep); font-weight:700; margin-bottom:8px; }
.cx .curve-svg { width:100%; height:auto; display:block; }
.cx .lesson-ico { vertical-align:-4px; margin-right:10px; }
.cx .video-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--teal-deep); background: var(--blue-lt); border: 1px solid var(--blue-bdr);
  padding: 6px 12px; border-radius: 999px; margin: 8px 0 10px;
}
.cx .video-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.cx .video-wrap + .video-kicker { margin-top: 22px; }
.cx .resource-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  margin: 22px 0 4px; padding: 16px 18px; border: 1px solid var(--blue-bdr);
  background: var(--blue-lt2); border-radius: 14px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cx .resource-card:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 12px 26px -16px rgba(2,128,144,.55); }
.cx .resource-card .rc-ico { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--blue-bdr); border-radius: 11px; }
.cx .resource-card .rc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cx .resource-card .rc-title { font-weight: 700; color: var(--navy); font-size: 1rem; }
.cx .resource-card .rc-note { font-size: 0.86rem; color: var(--grey); }
.cx .resource-card .rc-cta { flex: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); padding: 9px 16px; border-radius: 9px; }
.cx .hook-card .hook-line { font-size: 1.08rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.cx .cite { font-size: 0.76rem; color: var(--grey); margin-top: 10px; line-height: 1.5; }
.cx .chart-card, .cx .stat-card, .cx .article-card, .cx .case-card, .cx .choice-card, .cx .reveal-card {
  border: 1px solid var(--blue-bdr); background: #fff; border-radius: 14px;
  padding: 20px 22px; margin: 20px 0;
}
.cx .chart-card .tag, .cx .stat-card .tag, .cx .article-card .tag, .cx .case-card .tag, .cx .choice-card .tag, .cx .reveal-card .tag {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; margin-bottom: 10px; display: block;
}
.cx .chart-title { margin: 0 0 12px; }
.cx .chart-bars { display: flex; flex-direction: column; gap: 10px; }
.cx .chart-row { display: grid; grid-template-columns: 108px 1fr 48px; align-items: center; gap: 10px; }
.cx .chart-label { font-size: 0.84rem; color: var(--grey); font-weight: 700; }
.cx .chart-track { height: 12px; border-radius: 99px; background: var(--blue-lt2); overflow: hidden; }
.cx .chart-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.cx .chart-val { font-size: 0.84rem; font-weight: 800; color: var(--teal-deep); text-align: right; }
.cx .chart-note, .cx .poll-q { color: var(--grey); margin-top: 12px; }
.cx .poll-q { margin-top: 0; margin-bottom: 12px; font-weight: 700; color: var(--navy); }
.cx .stat-card { text-align: center; background: linear-gradient(180deg, var(--blue-lt), #fff); }
.cx .stat-num { font-size: 2.6rem; font-weight: 800; color: var(--teal-deep); line-height: 1; margin-bottom: 6px; }
.cx .stat-cap { font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.cx .stat-note { color: var(--grey); font-size: 0.92rem; margin: 0; }
.cx .fig-card, .cx .meme-card { margin: 22px 0; }
.cx .fig-card .fig-img-wrap, .cx .meme-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--blue-bdr); background: var(--blue-lt2); }
.cx .fig-card img, .cx .meme-card img { width: 100%; display: block; max-height: 420px; object-fit: contain; background: #fff; }
.cx .fig-card figcaption, .cx .meme-card figcaption { padding: 14px 4px 0; }
.cx .fig-line { font-weight: 700; color: var(--navy); margin: 4px 0; }
.cx .fig-sub { color: var(--grey); margin: 0 0 4px; }
.cx .meme-card figcaption p { font-style: italic; color: var(--navy); margin: 4px 0 0; }
.cx .img-broken .fig-img-wrap, .cx .meme-card.img-broken { display: none; }
.cx .reveal-q {
  display: block; width: 100%; text-align: left; font-family: var(--sans); font-size: 1rem; font-weight: 700;
  color: var(--navy); background: var(--blue-lt2); border: 1px dashed var(--blue-bdr); border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
}
.cx .reveal-card.open .reveal-q { border-style: solid; border-color: var(--teal); }
.cx .reveal-a { margin-top: 12px; padding: 14px 16px; border-left: 4px solid var(--teal); background: var(--blue-lt); border-radius: 0 10px 10px 0; }
.cx .reveal-a p { margin: 0 0 6px; }
.cx .choice-q, .cx .case-title { font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.cx .choice-opts { display: flex; flex-direction: column; gap: 10px; }
.cx .choice-opt {
  text-align: left; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--navy);
  background: #fff; border: 1.5px solid var(--blue-bdr); border-radius: 12px; padding: 12px 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cx .choice-opt .sub { display: block; font-size: 0.76rem; color: var(--grey); font-weight: 400; margin-top: 3px; }
.cx .choice-opt:hover:not(:disabled) { border-color: var(--teal); background: var(--blue-lt2); }
.cx .choice-opt.right { border-color: var(--teal); background: var(--blue-lt); }
.cx .choice-opt.off { opacity: 0.55; }
.cx .choice-opt.mine { opacity: 1; box-shadow: 0 0 0 2px var(--navy); }
.cx .choice-opt.mine::after { content: "Your choice"; display: block; margin-top: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--grey); }
.cx .choice-fb-item { margin-top: 12px; padding: 12px 16px; border-left: 4px solid var(--teal); background: var(--blue-lt); border-radius: 0 10px 10px 0; }
.cx .case-patient { font-size: 0.84rem; color: var(--grey); font-weight: 700; margin: 0 0 4px; }
.cx .case-timeline { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cx .case-timeline li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink); }
.cx .case-timeline .who { flex: none; min-width: 56px; font-weight: 800; color: var(--teal-deep); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
.cx .case-decision { margin-top: 4px; padding: 16px; background: var(--blue-lt2); }
.cx .case-debrief { margin-top: 14px; padding: 14px 16px; border-left: 4px solid var(--blue-bdr); background: #fafcfd; border-radius: 0 10px 10px 0; }
.cx .case-debrief .lbl { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); font-weight: 800; display: block; margin-bottom: 4px; }
.cx .static-chat { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.cx .article-source { font-size: 0.8rem; color: var(--grey); font-weight: 700; letter-spacing: .03em; margin: 0 0 4px; }
.cx .article-title { margin: 0 0 10px; }
.cx .article-takeaway { background: var(--blue-lt2); border-radius: 10px; padding: 12px 14px; }
.cx .article-link { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--teal-deep); text-decoration: none; }
.cx .article-link:hover { text-decoration: underline; }
.cx > .topbar { margin: 0; }
@media (max-width: 820px) {
.cx .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.cx .sidebar, .cx .layout > * { min-width: 0; }
.cx .sidebar ol { position: relative; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 22px; margin: 0 -22px; padding: 2px 22px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cx .sidebar ol::-webkit-scrollbar { display: none; }
.cx .sidebar li { flex: none; margin: 0; max-width: 72vw; min-height: 44px; box-sizing: border-box; padding: 6px 14px 6px 8px; border: 1px solid var(--blue-bdr); background: var(--paper); border-radius: 999px; scroll-snap-align: start; white-space: nowrap; }
.cx .sidebar li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cx .sidebar li.active { border-color: var(--blue); }
.cx .sidebar li.nav-part { display: none; }

}
@media (max-width: 560px) {
.cx .topbar { gap: 12px; padding: 12px 22px; }
.cx .brand .sep, .cx .brand .kit { display: none; }
.cx .progress-wrap { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.cx .progress-track { width: auto; flex: 1 1 auto; min-width: 48px; max-width: 160px; }

}