/* ShieldsON Learning Center — static, editorial design system */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#0b1220;background:#fafaf7;line-height:1.6;font-size:17px}
img,svg{display:block;max-width:100%;height:auto}
a{color:#0a4d8c;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Iowan Old Style","Apple Garamond",Baskerville,"Times New Roman","Droid Serif",Times,"Source Serif Pro",serif;line-height:1.15;letter-spacing:-0.01em;color:#0b1220;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-top:2.2em}
h3{font-size:1.25rem;font-weight:700;margin-top:1.6em}
p{margin:0 0 1.1em}
hr{border:none;border-top:1px solid #e7e4dc;margin:3rem 0}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.prose{max-width:720px;margin:0 auto;padding:0 24px}
.prose p,.prose li{font-size:1.075rem;color:#1f2937}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.6em 0;padding:1em 1.4em;border-left:4px solid #0a4d8c;background:#f1f5f9;color:#0b1220;border-radius:0 10px 10px 0;font-style:italic}
.prose strong{color:#0b1220}

/* Header */
.lc-header{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.92);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e7e4dc}
.lc-header .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto}
.lc-left{display:inline-flex;align-items:center;gap:10px}
.lc-brand{display:inline-flex;align-items:center;gap:0;font-weight:800;letter-spacing:-.01em;font-size:1.25rem;color:#0b1220;white-space:nowrap}
.lc-brand .badge{width:36px;height:36px;border-radius:12px;background:#2D6FE8;display:inline-flex;align-items:center;justify-content:center}
.lc-brand .badge{margin-right:8px}
.lc-brand .badge svg{width:20px;height:20px}
.brand-word{display:inline;white-space:nowrap}
.on{color:#1D4ED8;text-shadow:0 0 10px rgba(29,78,216,.55),0 0 22px rgba(29,78,216,.35)}
.lc-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lc-nav > a{padding:8px 12px;border-radius:999px;color:#374151;font-weight:600;font-size:.95rem}
.lc-nav > a:hover{background:#eef2f7;text-decoration:none}
.lc-nav > a.cta{background:#0b1220;color:#fff}
.lc-nav > a.cta:hover{background:#0a4d8c}

/* Static dropdown menus (hamburger + account) */
.lc-menu{position:relative}
.lc-menu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:40px;padding:0 12px;border-radius:999px;border:1px solid #e7e4dc;background:#fff;color:#0b1220;font-weight:700;font-size:.9rem}
.lc-menu > summary::-webkit-details-marker{display:none}
.lc-menu > summary:hover{border-color:#0a4d8c;background:#f1f5ff}
.lc-burger{display:inline-block;width:18px;height:14px;position:relative}
.lc-burger::before,.lc-burger::after,.lc-burger{background:none}
.lc-burger::before,.lc-burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:#0b1220;border-radius:2px}
.lc-burger::before{top:0;box-shadow:0 6px 0 #0b1220}
.lc-burger::after{bottom:0}
.lc-menu-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;border:1px solid #e7e4dc;border-radius:14px;box-shadow:0 20px 50px -20px rgba(11,18,32,.25);padding:8px;z-index:100}
.lc-menu-panel.right{left:auto;right:0}
.lc-menu-panel a{display:block;padding:8px 12px;border-radius:8px;color:#0b1220;font-weight:600;font-size:.92rem}
.lc-menu-panel a:hover{background:#eef2f7;text-decoration:none}
.lc-menu-label{padding:8px 12px 4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6b7280}
.lc-menu-sep{height:1px;background:#e7e4dc;margin:6px 4px}

/* Breadcrumbs */
.crumbs{font-size:.9rem;color:#6b7280;padding:18px 0 6px}
.crumbs a{color:#6b7280}
.crumbs span{margin:0 .4em;color:#cbd5e1}

/* Hero */
.hero{padding:64px 0 32px;text-align:center}
.hero .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0a4d8c;background:#e6efff;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.hero p.lead{font-size:1.2rem;color:#374151;max-width:680px;margin:0 auto}

/* Tiles */
.tiles{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:40px 0}
.tile{display:block;background:#fff;border:1px solid #e7e4dc;border-radius:18px;padding:28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;color:#0b1220}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(15,23,42,.25);border-color:#cdd6e0;text-decoration:none}
.tile .icon{width:48px;height:48px;border-radius:12px;background:#e6efff;color:#0a4d8c;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.tile h3{margin:0 0 8px;font-size:1.35rem}
.tile p{color:#4b5563;margin:0}
.tile .meta{display:flex;gap:10px;align-items:center;font-size:.85rem;color:#6b7280;margin-top:14px}
.tile .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#f1f5f9;color:#0a4d8c;font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}

/* Big two-tile hub */
.hub{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin:40px 0 60px}
.hub .tile{padding:40px;border-radius:24px;background:linear-gradient(180deg,#fff,#f5f3ec)}
.hub .tile .icon{width:64px;height:64px;border-radius:18px}
.hub .tile h2{margin:0 0 10px;font-size:1.85rem}
.hub .tile p{font-size:1.05rem}
.hub .tile .arrow{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#0a4d8c}

/* Article hero */
.article-hero{padding:56px 0 28px;border-bottom:1px solid #e7e4dc;background:linear-gradient(180deg,#f4f1e8,#fafaf7)}
.article-hero .container{text-align:center}
.article-hero .tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0a4d8c;margin-bottom:14px}
.article-hero .byline{color:#6b7280;font-size:.95rem;margin-top:10px}
.article-figure{margin:32px auto 0;max-width:1100px;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,18,32,.25)}
.article-figure svg{width:100%;height:auto;display:block}

/* Callouts */
.callout{margin:1.8em 0;padding:1.3em 1.5em;border-radius:14px;border:1px solid #e7e4dc;background:#fff}
.callout.warn{border-color:#fbbf24;background:#fffbeb}
.callout.tip{border-color:#34d399;background:#ecfdf5}
.callout.danger{border-color:#fb7185;background:#fff1f2}
.callout h4{margin:0 0 .3em;font-family:inherit;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:#0b1220}
.callout p:last-child{margin-bottom:0}

/* Checklist */
.checklist{list-style:none;padding:0;margin:1.2em 0}
.checklist li{position:relative;padding:.55em 0 .55em 2em;border-bottom:1px solid #eef0ec}
.checklist li::before{content:"";position:absolute;left:0;top:.85em;width:18px;height:18px;border-radius:5px;background:#0a4d8c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>") center/14px no-repeat}

/* Class detail */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:24px 0 8px;padding:18px;border-radius:14px;background:#f5f3ec;border:1px solid #e7e4dc}
.kv div{font-size:.95rem}
.kv strong{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;margin-bottom:4px}

/* Footer */
.lc-footer{margin-top:80px;padding:40px 0;border-top:1px solid #e7e4dc;color:#6b7280;font-size:.9rem;text-align:center;background:#f5f3ec}
.lc-footer a{color:#0a4d8c}

/* Focus */
:focus-visible{outline:2px solid #0a4d8c;outline-offset:3px;border-radius:6px}

@media (max-width:640px){
  .hero{padding:40px 0 20px}
  .hub .tile{padding:28px}
}

/* Lessons (interactive, no JS — uses <details>) */
.start-cta{display:flex;justify-content:center;margin:18px 0 8px}
.start-cta a{display:inline-block;padding:14px 28px;background:#0a4d8c;color:#fff;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px -8px rgba(10,77,140,.6)}
.start-cta a:hover{background:#0b1220}
.lesson{border:1px solid #e7e4dc;border-radius:14px;background:#fff;margin:14px 0;overflow:hidden;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.lesson[open]{box-shadow:0 10px 30px -18px rgba(15,23,42,.25)}
.lesson>summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;gap:14px;font-weight:700;color:#0b1220}
.lesson>summary::-webkit-details-marker{display:none}
.lesson>summary::after{content:"+";margin-left:auto;font-size:1.5rem;color:#0a4d8c;font-weight:400;transition:transform .2s}
.lesson[open]>summary::after{content:"–"}
.lesson .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0a4d8c;color:#fff;font-size:.95rem;flex-shrink:0}
.lesson .dur{margin-left:8px;font-size:.82rem;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.lesson .body{padding:6px 24px 22px;border-top:1px solid #f1ede4}
.lesson .body p,.lesson .body li{font-size:1.02rem;color:#1f2937}
.lesson .body h4{margin:1.3em 0 .4em;font-size:1.02rem;font-family:inherit;color:#0a4d8c;text-transform:uppercase;letter-spacing:.06em}
.lesson .takeaway{margin-top:14px;padding:12px 16px;background:#f1f5f9;border-left:3px solid #0a4d8c;border-radius:0 8px 8px 0;font-size:.98rem}
.lesson .quiz{margin-top:14px;padding:14px 16px;background:#fff8e8;border:1px solid #f0e3b8;border-radius:10px}
.lesson .quiz summary{cursor:pointer;font-weight:700;color:#7a5a00}
.lesson-next{display:flex;justify-content:flex-end;margin-top:12px}
.lesson-next a{font-weight:700;color:#0a4d8c}

/* === Media card (audio explainer) === */
.media-card{margin:6px 0 22px;border:1px solid #e7e4dc;border-radius:14px;background:linear-gradient(180deg,#06243f,#0a4d8c);color:#fff;padding:18px 20px;display:grid;grid-template-columns:1fr;gap:12px;box-shadow:0 14px 40px -22px rgba(10,77,140,.6)}
.media-visual{height:90px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.media-visual svg{width:100%;height:100%}
.media-meta{display:flex;flex-direction:column;gap:2px}
.media-label{font-size:.95rem;font-weight:700;letter-spacing:.02em}
.media-sub{font-size:.82rem;color:#bfdcff;opacity:.85}
.media-audio{width:100%;height:40px;border-radius:8px;background:#fafaf7}
.media-audio::-webkit-media-controls-panel{background:#fafaf7}

/* === Quiz === */
.quiz{margin:22px 0 6px;padding:18px 20px;background:#fff8e8;border:1px solid #f0e3b8;border-radius:14px}
.quiz h4{margin:0 0 12px;font-family:inherit;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:#7a5a00}
.qz-q{padding:12px 0;border-top:1px dashed #e8d895}
.qz-q:first-of-type{border-top:none;padding-top:0}
.qz-prompt{margin:0 0 10px;font-size:1.02rem;color:#0b1220}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{appearance:none;border:1.5px solid #d6c98f;background:#fff;color:#0b1220;padding:10px 14px;border-radius:10px;text-align:left;font:inherit;font-size:.98rem;cursor:pointer;transition:border-color .15s,background .15s,transform .05s}
.qz-opt:hover:not(:disabled){border-color:#0a4d8c;background:#f1f5f9}
.qz-opt:active:not(:disabled){transform:scale(.99)}
.qz-opt:disabled{cursor:default;opacity:.85}
.qz-opt.right{border-color:#0a8c4d;background:#dcfce7;color:#064e3b}
.qz-opt.wrong{border-color:#dc2626;background:#fee2e2;color:#7f1d1d}
.qz-feedback{margin-top:10px;font-size:.95rem;color:#374151;min-height:1.2em}
.qz-feedback .ok{color:#0a8c4d;font-weight:700}
.qz-feedback .no{color:#dc2626;font-weight:700}
.qz-score{margin-top:14px;padding-top:12px;border-top:1px dashed #e8d895;font-size:1rem;color:#0b1220;min-height:1.2em}

/* === Hero share & actions === */
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hero-cta{display:inline-block;padding:13px 26px;background:#0a4d8c;color:#fff;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px -8px rgba(10,77,140,.6)}
.hero-cta:hover{background:#0b1220;text-decoration:none}
.hero-share{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:#fff;color:#0b1220;border:1.5px solid #cbd5e1;border-radius:999px;font-weight:700;font:inherit;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.hero-share:hover{border-color:#0a4d8c;background:#eef2f7}
.hero-share.lg{padding:15px 28px;font-size:1.02rem}

/* === Share footer === */
.share-footer{margin:48px 0 32px;padding:32px;border-radius:18px;background:linear-gradient(180deg,#f4f1e8,#fafaf7);border:1px solid #e7e4dc;text-align:center}
.share-footer h3{margin:0 0 8px;font-size:1.4rem}
.share-footer p{max-width:520px;margin:0 auto 18px;color:#4b5563}

/* ======================================================================
   PREMIUM CLASS PAGE — cinematic dark hero, outline rail, video lessons
   ====================================================================== */
.class-main{background:#fafaf7}

/* Cinematic hero */
.class-hero{position:relative;background-size:cover;background-position:center;color:#fff;padding:96px 0 120px;border-bottom:1px solid #e7e4dc}
.class-hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:80px;background:linear-gradient(180deg,rgba(250,250,247,0),#fafaf7);pointer-events:none}
.class-hero-inner{position:relative;z-index:1}
.class-hero-text{max-width:780px}
.class-hero .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffd17a;background:rgba(255,209,122,.12);border:1px solid rgba(255,209,122,.35);padding:6px 14px;border-radius:999px;margin-bottom:22px}
.class-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.class-hero-lead{color:#dbe6f3;font-size:1.18rem;max-width:680px;margin-bottom:30px;line-height:1.55}
.class-hero-lead strong{color:#fff}
.class-hero .hero-actions{justify-content:flex-start;margin-bottom:36px}
.class-hero .hero-cta{background:#ffd17a;color:#0b1220;padding:16px 32px;font-size:1.05rem;box-shadow:0 12px 40px -10px rgba(255,209,122,.45)}
.class-hero .hero-cta:hover{background:#fff;color:#0b1220}
.class-hero .hero-share{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.class-hero .hero-share:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.45)}
.class-hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;margin:0;padding:24px 28px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:640px}
.class-hero-meta div{margin:0}
.class-hero-meta dt{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb6cf;margin-bottom:6px}
.class-hero-meta dd{margin:0;font-size:1.02rem;font-weight:700;color:#fff}

/* Progress rail */
.progress-rail{position:sticky;top:64px;z-index:40;background:#fafaf7;border-bottom:1px solid #e7e4dc;padding:14px 0}
.progress-inner{display:flex;align-items:center;gap:18px}
.progress-track{flex:1;height:6px;border-radius:999px;background:#e7e4dc;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#0a4d8c,#ffd17a);border-radius:999px;transition:width .4s ease}
.progress-label{font-size:.85rem;font-weight:600;color:#4b5563;white-space:nowrap}

/* Two-column layout */
.class-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;padding:48px 24px 24px;align-items:start}
.class-outline{position:sticky;top:120px;align-self:start;background:#fff;border:1px solid #e7e4dc;border-radius:18px;padding:24px;box-shadow:0 4px 24px -16px rgba(15,23,42,.15);max-height:calc(100vh - 160px);overflow:auto}
.class-outline h3{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;margin:0 0 14px;font-family:inherit}
.outline-list{list-style:none;padding:0;margin:0 0 24px}
.outline-list li{margin:0}
.outline-list a{display:flex;gap:12px;align-items:center;padding:10px 12px;margin:2px -8px;border-radius:10px;color:#0b1220;transition:background .15s}
.outline-list a:hover{background:#f1f5f9;text-decoration:none}
.outline-list a.done .ol-num{background:#0a8c4d;color:#fff}
.outline-list a.done .ol-num::after{content:"✓"}
.outline-list a.done .ol-num span{display:none}
.ol-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef2f7;color:#0a4d8c;font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.ol-text{display:flex;flex-direction:column;min-width:0}
.ol-t{font-size:.92rem;font-weight:600;line-height:1.3}
.ol-d{font-size:.78rem;color:#6b7280;margin-top:2px}
.outline-learn{border-top:1px solid #eef0ec;padding-top:18px}
.outline-learn h4{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;margin:0 0 10px;font-family:inherit}
.outline-learn .checklist li{font-size:.92rem;padding:.4em 0 .4em 1.8em}
.outline-learn .checklist li::before{top:.65em;width:14px;height:14px}
.outline-learn + .outline-learn{margin-top:18px}
.dl-list,.src-list{list-style:none;padding:0;margin:.4em 0 0}
.dl-list li,.src-list li{padding:.5em 0;border-bottom:1px solid #eef0ec}
.dl-list li:last-child,.src-list li:last-child{border-bottom:0}
.dl-list a{display:flex;flex-direction:column;gap:2px;font-size:.92rem;font-weight:600;color:#0a4d8c;padding-left:1.6em;position:relative}
.dl-list a::before{content:"⬇";position:absolute;left:0;top:.05em;font-size:.95rem;color:#0a4d8c}
.dl-meta{font-size:.75rem;font-weight:500;color:#6b7280;letter-spacing:.02em}
.src-list a{font-size:.9rem;font-weight:600;color:#0a4d8c;display:block;line-height:1.35}
.src-pub{display:block;font-size:.74rem;color:#6b7280;margin-top:2px}

/* Class body */
.class-body{min-width:0;max-width:780px}
.class-body-intro{margin-bottom:24px}
.class-body-intro h2{margin-top:0;font-size:1.85rem}
.class-body-intro p{font-size:1.05rem;color:#4b5563}

/* Lesson card — premium */
.lesson{border:1px solid #e7e4dc;border-radius:18px;background:#fff;margin:18px 0;overflow:hidden;box-shadow:0 1px 0 rgba(15,23,42,.02);transition:box-shadow .2s,border-color .2s}
.lesson[open]{box-shadow:0 24px 60px -34px rgba(15,23,42,.3);border-color:#cdd6e0}
.lesson>summary{padding:22px 26px;gap:18px}
.lesson .num{width:38px;height:38px;font-size:1rem;font-weight:700;background:#0b1220}
.lesson.lesson-complete .num{background:#0a8c4d}
.lesson.lesson-complete .num::after{content:"✓";font-size:1.1rem}
.lesson.lesson-complete .num span{display:none}
.lesson .ltitle{flex:1;font-size:1.1rem}
.lesson .dur{background:#f1f5f9;color:#0a4d8c;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em}
.lesson-status{width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex-shrink:0;display:none}
.lesson.lesson-watched .lesson-status{display:inline-block;background:#0a8c4d}
.lesson .body{padding:0 26px 26px}

/* Video card */
.video-card{margin:8px 0 26px;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px -34px rgba(11,18,32,.5)}
.lesson-video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.video-meta{padding:14px 18px;background:linear-gradient(180deg,#06243f,#0a1f3a);color:#fff;display:flex;flex-direction:column;gap:2px}
.vm-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffd17a}
.vm-title{font-size:1rem;font-weight:600;color:#dbe6f3}

/* Lesson read body */
.lesson-read p,.lesson-read li{font-size:1.04rem;color:#1f2937;line-height:1.65}
.lesson-read h4{margin:1.5em 0 .5em;font-size:.78rem;font-family:inherit;color:#0a4d8c;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.lesson-read ul,.lesson-read ol{padding-left:1.3em;margin:0 0 1.2em}
.lesson-read li{margin:.4em 0}
.lesson-read strong{color:#0b1220}

/* Takeaway — premium */
.takeaway{margin-top:22px;padding:18px 22px;background:linear-gradient(135deg,#fff8e8,#fff4d6);border:1px solid #f0e3b8;border-radius:14px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;border-left:0;border-radius:14px}
.takeaway strong{display:inline-flex;align-items:center;justify-content:center;background:#0b1220;color:#ffd17a;padding:6px 12px;border-radius:999px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-family:inherit;font-weight:700}
.takeaway span{font-size:1.02rem;color:#0b1220;line-height:1.5;font-weight:500}

/* Quiz — slightly refined */
.quiz{margin-top:24px}

/* Achievements and saved progress */
.achievement-panel{margin:0 0 26px;padding:24px;border:1px solid #e7e4dc;border-radius:18px;background:linear-gradient(135deg,#fff,#fff8e8);box-shadow:0 18px 50px -34px rgba(11,18,32,.28)}
.achievement-kicker{margin:0 0 6px;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#0a4d8c}
.achievement-panel h2,.achievement-panel h3{margin:0 0 8px;font-family:inherit;font-size:1.2rem;letter-spacing:0;color:#0b1220}
.next-badge{margin:0;color:#4b5563;font-weight:650}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
.badge-card{display:flex;gap:10px;align-items:center;padding:12px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#6b7280}
.badge-card.earned{border-style:solid;border-color:#0a8c4d;background:#ecfdf5;color:#0b1220}
.badge-card.next{border-style:solid;border-color:#ffd17a;background:#fffbeb;color:#0b1220}
.badge-icon{width:34px;height:34px;border-radius:999px;background:#e7e4dc;color:#0b1220;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.badge-card.earned .badge-icon{background:#0a8c4d;color:#fff}.badge-card.next .badge-icon{background:#ffd17a;color:#0b1220}
.badge-card strong{display:block;font-size:.92rem}.badge-card small{display:block;font-size:.78rem;line-height:1.25;color:inherit;opacity:.82}
.class-hub-progress{margin:18px 0 28px}.class-progress-card h3{margin-top:10px}.card-progress{height:6px;border-radius:999px;background:#e7e4dc;overflow:hidden;margin:18px 0 4px}.card-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0a4d8c,#ffd17a);transition:width .35s ease}.class-progress-card.class-done{border-color:#0a8c4d;background:linear-gradient(180deg,#fff,#ecfdf5)}

/* Next-steps footer */
.next-steps{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:48px 0 24px}
.ns-primary,.ns-secondary{padding:14px 28px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem}
.ns-primary{background:#0b1220;color:#fff}
.ns-primary:hover{background:#0a4d8c;text-decoration:none}
.ns-secondary{background:transparent;color:#0b1220;border:2px solid #0b1220}
.ns-secondary:hover{background:#0b1220;color:#fff;text-decoration:none}

/* Mobile */
@media (max-width: 980px){
  .class-layout{grid-template-columns:1fr;gap:32px;padding-top:32px}
  .class-outline{position:static;max-height:none;order:2}
  .class-body{order:1;max-width:100%}
  .class-hero{padding:64px 0 80px}
  .progress-rail{top:60px}
  .lesson>summary{padding:18px}
  .lesson .body{padding:0 18px 22px}
}