@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#172033; --muted:#667085; --paper:#f8f6f2; --green:#c7662e; --navy:#14213d; --mint:#f4d8bf; --success:#2f7b62; --success-soft:#e4f3eb; --line:#dfe1e5; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 "DM Sans",sans-serif; }
button,input { font:inherit; }
.course-header { height:64px; display:flex; justify-content:space-between; align-items:center; padding:0 28px; color:white; background:var(--navy); border-bottom:3px solid var(--green); }
.course-brand { display:flex; align-items:center; gap:11px; }
.course-brand > span { width:30px; height:30px; display:grid; place-items:center; background:var(--mint); color:var(--navy); border-radius:8px 8px 8px 2px; font-weight:800; }
.course-brand strong { font:700 14px "Manrope",sans-serif; }
.lms-status { color:#b8cbc7; font-size:11px; }
.lms-status i { display:inline-block; width:7px; height:7px; margin-right:6px; background:var(--mint); border-radius:50%; }
.course-shell { min-height:calc(100vh - 64px); display:grid; grid-template-columns:310px 1fr; }
.course-nav { padding:45px 32px; background:#f1eee9; border-right:1px solid var(--line); }
.nav-eyebrow,.lesson-label,.update-kicker,.scenario > span { color:var(--green); font-size:9px; font-weight:700; letter-spacing:.15em; }
.course-nav h1 { margin:11px 0 8px; font:700 25px/1.15 "Manrope",sans-serif; letter-spacing:-.03em; }
.course-nav > p { color:var(--muted); font-size:12px; }
.course-nav ol { padding:0; margin:39px 0; list-style:none; }
.course-nav li { display:flex; gap:13px; align-items:center; padding:13px 0; opacity:.45; }
.course-nav li > span { width:30px; height:30px; display:grid; place-items:center; border:1px solid #aebbb3; border-radius:50%; font-size:9px; }
.course-nav li strong,.course-nav li small { display:block; }
.course-nav li strong { font-size:12px; }
.course-nav li small { color:var(--muted); font-size:10px; }
.course-nav li.active,.course-nav li.done { opacity:1; }
.course-nav li.active > span { color:white; background:var(--navy); border-color:var(--navy); }
.course-nav li.done > span { font-size:0; color:var(--success); background:var(--success-soft); border-color:#b6d6c4; }
.course-nav li.done > span::after { content:"✓"; font-size:11px; }
.source-mini { padding:15px; color:var(--muted); background:white; border:1px solid var(--line); font-size:10px; }
.source-mini strong { color:var(--ink); }
.source-mini span { color:var(--green); }
.lesson-stage { min-width:0; display:flex; flex-direction:column; background:linear-gradient(145deg,#fff,#f5f1ec); }
.lesson-progress { height:3px; background:#e2e7e0; }
.lesson-progress span { display:block; width:33.33%; height:100%; background:var(--green); transition:.3s; }
.screen { display:none; flex:1; }
.screen.active { display:block; }
.screen-content { width:min(790px,calc(100% - 64px)); margin:0 auto; padding:65px 0 45px; }
.screen-content h2 { max-width:690px; margin:12px 0 13px; font:700 42px/1.1 "Manrope",sans-serif; letter-spacing:-.045em; }
.lead { max-width:690px; color:var(--muted); font-size:16px; }
.change-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:31px; }
.change-grid article { min-height:135px; padding:20px; background:white; border:1px solid var(--line); border-radius:8px; }
.change-grid article > span { color:var(--green); font-size:9px; }
.change-grid h3 { margin:13px 0 5px; font:700 16px "Manrope",sans-serif; }
.change-grid p { margin:0; color:var(--muted); font-size:12px; }
.source-note { display:flex; gap:12px; align-items:start; margin-top:20px; padding:13px 15px; background:#fff3e8; border-left:3px solid var(--green); font-size:11px; }
.source-note > span { width:20px; height:20px; display:grid; place-items:center; color:white; background:var(--green); border-radius:50%; font-weight:700; }
.source-note p { margin:0; }
.update-block { display:grid; grid-template-columns:50px 1fr; gap:19px; margin-top:34px; padding:24px; background:white; border:1px solid var(--line); border-radius:10px; }
.update-number { width:42px; height:42px; display:grid; place-items:center; color:var(--green); background:#f8e5d5; border-radius:50%; font-weight:700; font-size:11px; }
.update-block h3 { margin:6px 0 9px; font:700 19px "Manrope",sans-serif; }
.update-block p { color:var(--muted); font-size:12px; }
.evidence-chip { display:inline-block; padding:5px 8px; color:var(--green); background:#f8e5d5; border-radius:4px; font-size:9px; font-weight:700; }
.roles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0 4px; }
.roles div { padding:12px; background:#f5f2ee; border-radius:5px; }
.roles strong,.roles span { display:block; }
.roles strong { font-size:10px; }
.roles span { color:var(--muted); font-size:9px; }
.update-block .qualifier { color:#785d32; }
.scenario { margin:25px 0; padding:20px 22px; background:#fff2e7; border-left:3px solid var(--green); }
.scenario p { margin:7px 0 0; }
fieldset { margin:0 0 16px; padding:20px; background:white; border:1px solid var(--line); border-radius:8px; }
legend { padding:0 5px; font:700 13px "Manrope",sans-serif; }
legend span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:7px; color:white; background:var(--navy); border-radius:50%; font-size:9px; }
label { display:block; margin:9px 0; padding:10px 12px; border:1px solid #e2e6e1; border-radius:5px; cursor:pointer; font-size:12px; }
label:hover { background:#fff7f0; }
input { margin-right:8px; accent-color:var(--green); }
.form-error { min-height:18px; color:#a4433c; font-size:11px; }
.submit-quiz,.result button { padding:12px 19px; color:white; background:var(--navy); border:0; border-radius:7px; cursor:pointer; font-weight:700; }
.result { padding:45px; text-align:center; background:white; border:1px solid var(--line); border-radius:10px; }
.result-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto; color:var(--success); background:var(--success-soft); border-radius:50%; font-size:20px; }
.result h3 { margin:15px 0 5px; font:700 25px "Manrope",sans-serif; }
.result > strong { display:block; margin:16px 0; color:var(--success); font:700 38px "Manrope",sans-serif; }
.tracking-confirmation { color:var(--muted); font-size:10px; }
.course-controls { height:70px; display:flex; justify-content:space-between; align-items:center; padding:0 35px; background:white; border-top:1px solid var(--line); }
.course-controls button { padding:9px 15px; border:1px solid #bcc7c0; border-radius:6px; background:white; cursor:pointer; }
.course-controls button:disabled { opacity:.35; }
.course-controls #next-button { color:white; background:var(--navy); border-color:var(--navy); }
.course-controls #next-button[hidden] { display:none; }
.course-controls span { color:var(--muted); font-size:10px; }
@media(max-width:850px){.course-shell{grid-template-columns:1fr}.course-nav{display:none}.screen-content{width:min(100% - 34px,790px);padding-top:40px}.screen-content h2{font-size:34px}.roles{grid-template-columns:1fr}.course-header{padding:0 16px}}
@media(max-width:560px){.change-grid{grid-template-columns:1fr}.update-block{grid-template-columns:1fr}.course-brand strong{font-size:11px}.lms-status{font-size:9px}.screen-content h2{font-size:31px}.course-controls{padding:0 17px}}