:root { --navy:#173b4d; --navy-2:#24566e; --blue:#0094d4; --blue-bright:#62c8ee; --taupe:#72655b; --ink:#173b4d; --muted:#667985; --paper:#f5f9fb; --white:#fff; --line:#d5e5ec; --green:#2d8a5b; --amber:#72655b; --shadow:0 22px 60px rgba(0,99,143,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; min-height:100%; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
button, input { font:inherit; }
button:focus-visible, a:focus-visible, video:focus-visible, input:focus-visible { outline:3px solid var(--taupe); outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.8rem 1rem; color:#000; background:#fff; border-radius:8px; }
.skip-link:focus { top:1rem; }
.course-header { height:68px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; color:#fff; background:#72655b; border-bottom:1px solid rgba(0,0,0,.12); }
.course-header[hidden] { display:none; }
.brand-button { padding:8px 0; color:#fff; background:none; border:0; font-size:1rem; font-weight:750; letter-spacing:-.01em; cursor:pointer; }
.header-progress { width:min(360px,45vw); color:#fff; font-size:.75rem; }
.progress-track { height:3px; margin-top:8px; overflow:hidden; background:rgba(255,255,255,.28); border-radius:20px; }
#progress-bar { display:block; width:0; height:100%; background:#fff; border-radius:inherit; transition:width .5s cubic-bezier(.22,1,.36,1); }
main { min-height:100vh; }
.eyebrow, .check-kicker { display:block; margin:0 0 10px; color:#0094d4; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:800; }
h1, h2, p { text-wrap:pretty; }
h1 { margin:0; font-size:clamp(2.25rem,4vw,4.35rem); line-height:1.02; letter-spacing:-.05em; }
h2 { letter-spacing:-.03em; }
p { line-height:1.6; }
.primary { min-height:48px; padding:.8rem 1.35rem; color:#fff; background:#0094d4; border:0; border-radius:10px; box-shadow:0 9px 22px rgba(0,148,212,.23); font-weight:750; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.primary:hover { transform:translateY(-1px); box-shadow:0 13px 28px rgba(0,152,208,.3); filter:brightness(1.03); }
button:disabled { opacity:.38; cursor:not-allowed; transform:none!important; }
.landing, .completion { min-height:100vh; display:flex; align-items:flex-end; padding:clamp(28px,7vw,104px); background-position:center; background-size:cover; }
.landing { align-items:flex-end; background-image:url("../assets/images/Cover Page.jpg"); background-position:center bottom; }
.completion { align-items:center; justify-content:center; background-image:url("../assets/images/Background.jpg"); }
.landing-copy, .completion-copy { width:min(610px,88vw); padding:clamp(28px,4vw,52px); color:var(--ink); background:rgba(255,255,255,.94); border:1px solid rgba(0,148,212,.28); border-radius:18px; box-shadow:0 28px 80px rgba(0,79,115,.18); backdrop-filter:blur(18px); animation:rise-in .65s cubic-bezier(.22,1,.36,1) both; }
.landing-copy { padding:clamp(24px,3vw,38px); }
.landing-copy h1 { font-size:clamp(2rem,3.4vw,3.65rem); }
.completion-copy { position:relative; overflow:hidden; width:min(760px,92vw); padding:clamp(38px,4.5vw,64px); background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92)); border-color:rgba(255,255,255,.5); box-shadow:0 55px 130px rgba(3,20,32,.5),0 1px 0 rgba(255,255,255,.7) inset; text-align:center; }
.completion-copy::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--blue),var(--green)); }
.completion-copy h1 { font-size:clamp(1.85rem,2.8vw,2.85rem); }
.completion-copy .training-path, .completion-copy .next-step-note { text-align:left; }
.completion-badge { position:relative; width:96px; height:96px; margin:0 auto 22px; animation:pop-in .5s cubic-bezier(.34,1.56,.64,1) both; }
.completion-badge::before { content:""; position:absolute; inset:-18px; background:radial-gradient(circle,rgba(45,138,91,.4),transparent 70%); filter:blur(9px); z-index:-1; }
.completion-badge svg { width:100%; height:100%; overflow:visible; }
.badge-ring-track { fill:none; stroke:#dceef4; stroke-width:6; }
.badge-ring { fill:none; stroke:var(--green); stroke-width:7; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50px 50px; stroke-dasharray:100; stroke-dashoffset:100; animation:badge-ring-draw .7s .15s cubic-bezier(.22,1,.36,1) forwards; }
.badge-check { fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; animation:badge-check-draw .45s .7s cubic-bezier(.22,1,.36,1) forwards; }
.completion-copy .training-path li { opacity:0; animation:rise-in .5s cubic-bezier(.22,1,.36,1) forwards; }
.completion-copy .training-path li:nth-child(1) { animation-delay:.85s; }
.completion-copy .training-path li:nth-child(2) { animation-delay:.98s; }
.completion-copy .training-path li:nth-child(3) { animation-delay:1.11s; }
.completion-copy .path-step { background:#fff; box-shadow:0 3px 12px rgba(7,27,43,.05); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.completion-copy .path-step:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(7,27,43,.1); }
.completion-copy .path-step.is-active { border-color:var(--blue); box-shadow:0 18px 40px rgba(0,148,212,.2); }
.completion-copy .path-step-marker { background:linear-gradient(135deg,#edf2f4,#e1eaee); }
.completion-copy .path-step.is-done .path-step-marker { background:linear-gradient(135deg,var(--green),#24704a); box-shadow:0 6px 16px rgba(45,138,91,.4); }
.completion-copy .path-step.is-active .path-step-marker { background:linear-gradient(135deg,var(--blue),#0077ab); box-shadow:0 6px 16px rgba(0,148,212,.4); }
.completion-copy .next-step-note { opacity:0; background:linear-gradient(135deg,rgba(0,148,212,.09),rgba(45,138,91,.07)); border-color:rgba(0,148,212,.25); animation:rise-in .5s 1.28s cubic-bezier(.22,1,.36,1) forwards; }
.completion-copy .primary { background:linear-gradient(135deg,var(--blue),#0077ab); box-shadow:0 16px 34px rgba(0,119,171,.35); padding:.95rem 1.85rem; }
.completion-copy .primary:hover { box-shadow:0 20px 42px rgba(0,119,171,.42); }
.landing-copy p, .completion-copy p { color:#315568; }
.landing-copy .primary, .completion-copy .primary { margin-top:14px; }
.landing-actions { display:flex; align-items:center; gap:18px; margin-top:14px; }
.landing-actions .primary { margin-top:0; }
.reset-button { min-height:44px; padding:.7rem .2rem; color:#72655b; background:transparent; border:0; border-bottom:1px solid #72655b; font-weight:700; cursor:pointer; }
.reset-button:hover { color:#0094d4; border-color:#0094d4; }
.intro { min-height:100vh; display:flex; align-items:center; padding:clamp(32px,6vw,88px); background-color:var(--paper); background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)),url("../assets/images/Background.jpg"); background-position:center; background-size:cover; }
.intro-shell { width:min(880px,100%); margin:auto; animation:rise-in .55s ease both; }
.intro-heading { max-width:620px; margin:0 auto clamp(36px,6vw,64px); text-align:center; }
.intro-heading .eyebrow { color:var(--taupe); margin-bottom:16px; }
.intro-heading h1 { color:var(--navy); font-weight:650; letter-spacing:-.055em; font-size:clamp(2.4rem,5vw,4.75rem); }
.intro-rule { display:block; width:56px; height:1px; margin:22px auto 0; background:linear-gradient(90deg,transparent,var(--taupe),transparent); }
.intro-heading p { max-width:480px; margin:22px auto 0; color:var(--muted); font-weight:500; font-size:clamp(.98rem,1.3vw,1.12rem); opacity:.88; }
.intro-path-label { margin:0 0 16px; color:var(--taupe); text-align:center; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; font-weight:800; }
.intro .training-path { display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:14px; margin:0; }
.intro .path-step { height:auto; background:rgba(255,255,255,.9); border-color:rgba(114,101,91,.2); box-shadow:0 14px 38px rgba(7,27,43,.06); backdrop-filter:blur(12px); }
.intro .training-path-compact .path-step summary { min-height:0; padding:20px 18px; }
.intro .training-path-compact .path-step-marker { color:var(--navy); background:transparent; border:1.5px solid rgba(114,101,91,.45); }
.intro .training-path-compact .path-step.is-active { border-color:var(--taupe); box-shadow:0 10px 26px rgba(114,101,91,.16); }
.intro .training-path-compact .path-step.is-active .path-step-marker { color:#fff; background:var(--taupe); border-color:var(--taupe); }
.intro .training-path-compact .path-step.is-active .path-step-chevron { color:var(--taupe); }
.intro .training-path-compact .path-step.is-done .path-step-marker { color:#fff; background:var(--green); border-color:var(--green); }
.intro .training-path-compact .path-step-copy strong { margin:0; font-size:.98rem; letter-spacing:-.01em; }
.intro .training-path-compact .path-step-details { padding:0 18px 20px 68px; }
.intro .training-path-compact .path-step-description { margin:0 0 10px; color:var(--muted); font-size:.85rem; }
.intro-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(32px,5vw,52px); }
.intro-actions .primary { padding:1rem 2.3rem; letter-spacing:.01em; background:linear-gradient(135deg,var(--navy),var(--navy-2)); box-shadow:0 18px 40px rgba(23,59,77,.32); }
.intro-actions .primary:hover { box-shadow:0 22px 48px rgba(23,59,77,.4); }
.intro-actions small { color:var(--muted); text-align:center; font-size:.75rem; letter-spacing:.01em; }
.training-path { display:flex; flex-direction:column; gap:12px; margin:26px 0; padding:0; list-style:none; }
.path-step { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; transition:border-color .2s ease,box-shadow .2s ease; }
.path-step summary { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; cursor:pointer; list-style:none; }
.path-step summary::-webkit-details-marker { display:none; }
.path-step summary:hover { background:#f7fbfc; }
.path-step-marker { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; color:#758792; background:#edf2f4; border-radius:50%; font-size:.75rem; font-weight:800; }
.path-step.is-active { border-color:var(--blue); box-shadow:0 10px 26px rgba(0,148,212,.14); }
.path-step.is-active .path-step-marker { color:#fff; background:var(--blue); }
.path-step.is-done .path-step-marker { color:#fff; background:var(--green); }
.path-step-copy { flex:1; }
.path-step-copy strong, .path-step-copy small { display:block; }
.path-step-copy strong { margin-bottom:3px; color:var(--navy); font-size:.92rem; }
.path-step-copy small { color:var(--muted); line-height:1.4; }
.path-step-chevron { flex:0 0 auto; margin-top:5px; color:var(--blue); font-size:1.15rem; transition:transform .2s ease; }
.path-step[open] .path-step-chevron { transform:rotate(180deg); }
.path-step-details { padding:0 16px 16px 62px; }
.path-step-details p { margin:0; padding-top:13px; color:#486573; border-top:1px solid var(--line); font-size:.84rem; line-height:1.55; }
.next-step-note { margin:6px 0 18px; padding:14px 16px; color:#315568; background:#eef8fc; border:1px solid rgba(0,148,212,.28); border-radius:12px; font-size:.9rem; }
.menu-shell { min-height:calc(100vh - 68px); padding:clamp(36px,6vw,78px) max(22px,calc((100vw - 1040px)/2)); background-color:rgba(255,255,255,.78); background-image:url("../assets/images/Background.jpg"); background-position:center; background-size:cover; background-attachment:fixed; background-blend-mode:screen; }
.menu-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:34px; animation:rise-in .5s ease both; }
.menu-hero > div:first-child { max-width:650px; }
.menu-hero h1 { color:var(--navy); }
.menu-hero p { margin:16px 0 0; color:var(--muted); font-size:1.05rem; }
.progress-orbit { width:150px; height:150px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:#fff; border:1px solid var(--line); border-radius:50%; box-shadow:0 15px 38px rgba(7,27,43,.08); }
.progress-orbit svg { position:absolute; inset:7px; width:calc(100% - 14px); height:calc(100% - 14px); transform:rotate(-90deg); }
.progress-orbit circle { fill:none; stroke-width:3; }
.orbit-track { stroke:#dceef4; }
.orbit-value { stroke:#0094d4; stroke-linecap:round; transition:stroke-dasharray .5s cubic-bezier(.22,1,.36,1); }
.progress-orbit strong { color:var(--navy); font-size:2rem; letter-spacing:-.05em; }
.progress-orbit span { color:var(--muted); font-size:.68rem; }
.continue-card { width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 48px; padding:25px 28px; color:#fff; text-align:left; background:#0094d4; border:1px solid #0094d4; border-radius:16px; box-shadow:var(--shadow); cursor:pointer; transition:transform .22s ease,box-shadow .22s ease; animation:rise-in .55s .06s ease both; }
.continue-card:hover { transform:translateY(-2px); box-shadow:0 28px 66px rgba(5,25,40,.2); }
.continue-card small, .continue-card strong { display:block; }
.continue-card small { margin-bottom:7px; color:#fff; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:800; }
.continue-card strong { font-size:clamp(1rem,2vw,1.35rem); }
.continue-action { display:flex; gap:14px; color:#fff; font-size:.9rem; font-weight:750; }
.path-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.path-heading h2 { margin:0; color:var(--navy); font-size:1.25rem; }
.path-heading span { color:var(--muted); font-size:.8rem; }
.module-grid { display:grid; gap:12px; }
.course-section { overflow:hidden; background:rgba(255,255,255,.92); border:1px solid rgba(126,156,169,.42); border-radius:16px; box-shadow:0 12px 34px rgba(7,27,43,.08); transition:box-shadow .2s ease,border-color .2s ease; }
.course-section[open] { border-color:#7cbfd1; box-shadow:0 18px 44px rgba(7,27,43,.13); }
.course-section summary { min-height:88px; display:grid; grid-template-columns:48px 1fr auto 24px; gap:16px; align-items:center; padding:17px 22px; cursor:pointer; list-style:none; }
.course-section summary::-webkit-details-marker { display:none; }
.course-section summary { color:#fff; background:#0094d4; }
.course-section summary:hover { background:#0086bf; }
.course-section[open] summary { background:#0094d4; }
.course-section.is-locked { border-color:#d8d2ce; box-shadow:none; }
.course-section.is-locked summary, .course-section.is-locked summary:hover { color:#fff; background:#9a9089; cursor:not-allowed; }
.course-section.is-locked .section-number { font-size:.45rem; }
.section-number { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:11px; font-size:.72rem; font-weight:800; }
.section-copy strong, .section-copy small { display:block; }
.section-copy strong { margin-bottom:5px; color:#fff; font-size:1.05rem; }
.section-copy small { color:#b9ced8; line-height:1.35; }
.section-progress { min-width:66px; color:#fff; font-size:.72rem; font-weight:750; text-align:right; }
.section-progress.is-complete { color:#fff; }
.section-chevron { color:#fff; font-size:1.2rem; transition:transform .22s ease; }
.course-section[open] .section-chevron { transform:rotate(180deg); }
.section-lessons { padding:10px 14px 14px 28px; background:rgba(244,248,249,.95); border-top:1px solid #d4e2e6; animation:section-open .25s ease both; }
.module-card { width:100%; min-height:72px; display:grid; grid-template-columns:42px 1fr auto 24px; gap:14px; align-items:center; position:relative; padding:13px 16px; color:var(--ink); text-align:left; background:rgba(255,255,255,.94); border:0; border-bottom:1px solid #e2eaed; cursor:pointer; transition:background .18s ease,padding .18s ease; }
.module-card::before { content:""; width:10px; height:1px; position:absolute; left:-14px; top:50%; background:#9fb9c3; }
.section-lessons .module-card:last-child { border-bottom:0; }
.module-card:hover { padding-left:26px; background:#f6fbfd; }
.module-card.is-current { background:#eef8fc; box-shadow:inset 4px 0 0 #72655b; }
.module-number { width:30px; height:30px; display:grid; place-items:center; color:#758792; background:#edf2f4; border-radius:50%; font-size:.68rem; font-weight:800; }
.module-card.is-current .module-number { color:#fff; background:#72655b; box-shadow:0 5px 13px rgba(114,101,91,.25); }
.module-copy strong, .module-copy small { display:block; }
.module-copy strong { margin-bottom:5px; color:var(--navy); font-size:.95rem; }
.module-copy small { max-width:680px; color:var(--muted); line-height:1.35; }
.module-status { min-width:76px; color:#86949c; font-size:.7rem; font-weight:750; }
.module-status.is-complete { color:var(--green); }
.module-status.is-progress { color:var(--amber); }
.row-arrow { color:#8ca0aa; transition:transform .18s ease; }
.module-card:hover .row-arrow { transform:translateX(4px); color:var(--blue); }
body[data-screen="lesson"] { background:var(--paper); }
body[data-screen="lesson"] main { min-height:calc(100vh - 68px); background-color:rgba(255,255,255,.84); background-image:url("../assets/images/Background.jpg"); background-position:center; background-size:cover; background-attachment:fixed; background-blend-mode:screen; }
.lesson { min-height:calc(100vh - 68px); padding:24px max(22px,calc((100vw - 1180px)/2)) 50px; }
.lesson-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; color:#687d88; font-size:.75rem; }
.lesson-back { display:flex; align-items:center; gap:9px; padding:8px 0; color:#385565; background:none; border:0; cursor:pointer; }
.lesson-back:hover { color:var(--blue); }
.lesson-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:24px; color:var(--navy); animation:rise-in .45s ease both; }
.lesson-heading > div { max-width:850px; }
.lesson-heading h1 { font-size:clamp(1.8rem,3.5vw,3.5rem); }
.lesson-status { flex:0 0 auto; margin-bottom:6px; padding:8px 12px; color:#607782; background:rgba(255,255,255,.78); border:1px solid #cedadd; border-radius:20px; font-size:.72rem; font-weight:750; }
.lesson-status.is-complete { color:var(--green); background:#eaf7f0; border-color:#b9ddc9; }
.player-shell { overflow:hidden; background:#fff; border:1px solid rgba(138,158,168,.32); border-radius:16px; box-shadow:0 26px 65px rgba(7,27,43,.18); animation:rise-in .55s .05s ease both; }
.video-frame { position:relative; }
video { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:cover; background:transparent; }
.video-error { margin:0; padding:14px 18px; color:#ffd0d0; background:#5d1c22; }
.player-meta { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 18px 14px 22px; color:#607580; background:rgba(255,255,255,.98); border-top:1px solid #e4e9eb; }
.player-meta p { margin:0; font-size:.82rem; }
.transcript-button { min-height:40px; flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:8px 13px; color:#315669; background:#edf7fa; border:1px solid #c7e2e9; border-radius:9px; cursor:pointer; }
.transcript-button:hover { color:var(--blue); background:#e4f5fa; }
.player-status { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 18px 14px 22px; border-top:1px solid #e4e9eb; background:#fff; animation:rise-in .3s ease both; }
.unlock-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:#8ca0aa; background:#edf1f3; border-radius:50%; }
.player-status strong, .player-status small { display:block; }
.player-status strong { color:var(--ink); font-size:.84rem; }
.player-status small { margin-top:3px; font-size:.72rem; }
.player-status-locked { color:#71828c; }
.player-status-resume { color:#315568; background:#f2fafc; }
.player-status-resume .unlock-icon { color:var(--blue); background:#dcf0f8; }
.player-status-resume .primary { min-height:40px; margin-left:auto; padding:.55rem 1rem; }
.player-status-loading { justify-content:center; gap:11px; color:#315568; background:#f7fbfc; font-size:.82rem; font-weight:700; }
.quick-check-spinner { width:18px; height:18px; flex:0 0 auto; border:2px solid #c7e2e9; border-top-color:var(--blue); border-radius:50%; animation:quick-check-spin .7s linear infinite; }
.player-status-summary { align-items:flex-start; color:#2f6b4c; background:#f3fbf6; }
.player-status-summary .success-mark { width:32px; height:32px; margin:0; flex:0 0 auto; font-size:.9rem; }
.player-status-summary strong { color:#1f6b46; }
.player-status-summary p { margin:4px 0 0; color:#2f6b4c; font-size:.85rem; }
.check-modal-backdrop { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,20,28,.66); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease; }
.check-modal-backdrop.is-open { opacity:1; }
.check-modal { width:min(600px,100%); max-height:88vh; overflow:auto; padding:clamp(28px,5vw,48px); text-align:center; background:#fff; border-radius:20px; box-shadow:0 44px 110px rgba(2,12,19,.4); outline:none; transform:translateY(16px) scale(.98); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.check-modal-backdrop.is-open .check-modal { transform:none; }
.check-intro h2, .knowledge-check h2, .takeaway-card h2 { margin:0 0 12px; color:var(--navy); font-size:clamp(1.65rem,3vw,2.35rem); }
.ghost-button { min-height:44px; padding:.6rem 1.1rem; color:#41606f; background:transparent; border:1px solid var(--line); border-radius:9px; font-weight:700; cursor:pointer; transition:border .18s ease,background .18s ease,color .18s ease; }
.ghost-button:hover { color:var(--blue); background:#f2fafc; border-color:#8cd5e9; }
.check-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.knowledge-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; }
.check-intro p { margin:0 0 22px; color:var(--muted); }
.check-intro .primary span { margin-left:12px; }
.knowledge-check { width:min(600px,100%); text-align:left; }
.knowledge-check .check-kicker, .knowledge-check h2 { text-align:center; }
.question { margin:24px 0 16px; color:var(--navy); font-weight:750; }
.knowledge-check fieldset { display:grid; gap:10px; margin:0 0 20px; padding:0; border:0; }
.answer-option { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:#fafbfb; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border .18s ease,background .18s ease,transform .18s ease; }
.answer-option:hover { transform:translateX(2px); background:#f2fafc; border-color:#8cd5e9; }
.answer-option:has(input:checked) { background:#eaf8fc; border-color:var(--blue); }
.answer-option input { margin-top:3px; accent-color:var(--blue); }
.answer-feedback p { margin:16px 0 0; padding:12px 14px; border-radius:9px; font-size:.86rem; }
.answer-feedback .correct { color:#226944; background:#ebf7f0; }
.answer-feedback .incorrect { color:#805513; background:#fff6e6; }
.takeaway-card { width:min(610px,100%); }
.success-mark { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 18px; color:#fff; background:var(--green); border-radius:50%; box-shadow:0 9px 22px rgba(45,138,91,.24); font-size:1.35rem; animation:pop-in .35s cubic-bezier(.34,1.56,.64,1) both; }
.takeaway-card > p { margin:0 auto 18px; color:var(--muted); }
.takeaway-card ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.takeaway-card li { padding:8px 11px; color:#42606f; background:#eef6f8; border-radius:20px; font-size:.75rem; }
.takeaway-card .primary { margin-top:26px; }
.lesson-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.nav-button { min-height:66px; display:flex; align-items:center; gap:14px; padding:11px 16px; color:#516873; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:transform .18s ease,border .18s ease,box-shadow .18s ease; }
.nav-button:hover:not(:disabled) { transform:translateY(-2px); border-color:#9dcbd7; box-shadow:0 10px 25px rgba(7,27,43,.08); }
.nav-button.is-next { justify-content:flex-end; text-align:right; }
.nav-button small { display:block; margin-bottom:3px; color:#8b9aa2; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; }
.drawer-backdrop { position:fixed; inset:0; z-index:40; background:rgba(2,12,19,.62); backdrop-filter:blur(3px); animation:fade-in .2s ease; }
.transcript-panel { width:min(480px,94vw); height:100vh; display:flex; flex-direction:column; position:fixed; top:0; right:0; z-index:50; padding:26px; background:#fff; box-shadow:-24px 0 70px rgba(0,0,0,.25); transform:translateX(105%); visibility:hidden; transition:transform .32s cubic-bezier(.22,1,.36,1),visibility .32s; }
.transcript-panel.is-open { transform:translateX(0); visibility:visible; }
.transcript-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.transcript-header h2 { margin:0; color:var(--navy); font-size:1.8rem; }
.icon-button { width:40px; height:40px; color:#526773; background:#f1f4f5; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }
.transcript-panel input { min-height:46px; padding:11px 14px; border:1px solid #bcc9cf; border-radius:10px; }
.transcript-content { flex:1; overflow:auto; margin-top:16px; border-top:1px solid var(--line); }
.transcript-cue { width:100%; display:grid; grid-template-columns:52px 1fr; gap:12px; padding:14px 8px; color:var(--ink); text-align:left; line-height:1.5; background:transparent; border:0; border-bottom:1px solid #e7ecee; cursor:pointer; }
.transcript-cue > span:first-child { color:var(--blue); font-size:.72rem; font-weight:800; }
.transcript-cue:hover, .transcript-cue.is-active { background:#edf9fc; }
.transcript-message { color:var(--muted); }
.transcript-error { color:#8d2c35; }
@keyframes rise-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes reveal-up { from { opacity:0; transform:translateY(22px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes pop-in { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes section-open { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@keyframes badge-ring-draw { to { stroke-dashoffset:0; } }
@keyframes badge-check-draw { to { stroke-dashoffset:0; } }
@keyframes quick-check-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
  .course-header { height:64px; }
  .header-progress { width:48vw; }
  .menu-hero { align-items:flex-start; }
  .progress-orbit { width:112px; height:112px; }
  .progress-orbit strong { font-size:1.55rem; }
  .progress-orbit span { max-width:80px; text-align:center; }
  .continue-card { align-items:flex-end; }
  .module-card { grid-template-columns:40px 1fr 20px; }
  .course-section summary { grid-template-columns:40px 1fr 20px; }
  .section-progress { grid-column:2; grid-row:2; text-align:left; }
  .section-chevron { grid-column:3; grid-row:1/3; }
  .module-status { grid-column:2; grid-row:2; }
  .row-arrow { grid-column:3; grid-row:1/3; }
  .lesson-heading { align-items:flex-start; flex-direction:column; gap:15px; }
  .lesson-status { margin:0; }
  .player-meta { align-items:flex-start; flex-direction:column; }
  .player-status-resume .primary { margin-left:0; width:100%; }
  .transcript-button { align-self:stretch; justify-content:center; }
  .landing { background-position:right bottom; }
  .intro { align-items:flex-start; padding:38px 22px; }
  .intro .training-path { grid-template-columns:1fr; }
  .intro .path-step summary { min-height:0; }
}
@media (max-width:520px) {
  .menu-hero { display:block; }
  .progress-orbit { width:auto; height:auto; display:flex; flex-direction:row; justify-content:flex-start; gap:10px; margin-top:24px; padding:13px 16px; border-radius:12px; }
  .progress-orbit::before { display:none; }
  .progress-orbit svg { display:none; }
  .progress-orbit strong { font-size:1.2rem; }
  .continue-card { display:block; }
  .continue-action { margin-top:18px; }
  .module-card { padding:15px 14px; }
  .module-copy small { display:none; }
  .lesson { padding-inline:14px; }
  .lesson-nav { grid-template-columns:1fr; }
  .check-modal { padding:25px 18px; }
  .check-modal-backdrop { padding:12px; }
  .landing, .completion { padding:20px; }
  .landing { padding-bottom:20px; }
  .landing-copy, .completion-copy { width:100%; }
  .landing-actions { align-items:flex-start; flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .completion-badge, .completion-copy .training-path li, .completion-copy .next-step-note { opacity:1; }
  .badge-ring, .badge-check { stroke-dashoffset:0; }
}