:root { --ink:#19231f; --muted:#718078; --paper:#f7f8f3; --green:#285b48; --mint:#dceee4; --yellow:#f3c969; --line:#dce3dc; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:auto; max-width:1180px; padding:28px 28px 18px; }
.brand { color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:700; text-decoration:none; }.brand-mark { color:var(--green); font-size:1.4rem; margin-right:7px; }.header-note { color:var(--muted); font-size:.85rem; }.header-nav { align-items:center; display:flex; gap:22px; }.header-nav a { background:var(--mint); border-radius:7px; color:var(--green); font-size:.82rem; font-weight:700; padding:9px 13px; text-decoration:none; }
.page-shell { margin:auto; max-width:1180px; padding:60px 28px 100px; }.hero { max-width:650px; margin-bottom:62px; }.eyebrow { color:var(--green); font-size:.73rem; font-weight:700; letter-spacing:.14em; margin:0 0 15px; text-transform:uppercase; }
h1,h2 { font-family:'Space Grotesk',sans-serif; margin:0; } h1 { font-size:clamp(2.6rem,6vw,5.2rem); letter-spacing:-.065em; line-height:.98; } h1 em { color:var(--green); font-style:normal; }.hero-copy { color:var(--muted); font-size:1.1rem; margin-top:25px; }
.quiz-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }.quiz-card { background:white; border:1px solid var(--line); border-radius:16px; color:var(--ink); min-height:270px; padding:25px; text-decoration:none; transition:.2s ease; }.quiz-card:hover { border-color:var(--green); box-shadow:0 12px 28px #285b4814; transform:translateY(-3px); }.card-topline,.card-meta { color:var(--muted); display:flex; font-size:.76rem; justify-content:space-between; }.arrow { color:var(--green); font-size:1.4rem; }.quiz-card h2 { font-size:1.55rem; margin:48px 0 10px; }.quiz-card p { color:var(--muted); line-height:1.5; margin:0; }.card-meta { border-top:1px solid var(--line); margin-top:28px; padding-top:16px; }
.back-link,.text-link { color:var(--green); font-size:.88rem; font-weight:600; text-decoration:none; }.quiz-heading { margin:55px 0 45px; max-width:700px; }.quiz-heading h1 { font-size:clamp(2.6rem,5vw,4.5rem); }.quiz-heading p:not(.eyebrow) { color:var(--muted); line-height:1.6; margin:22px 0 0; }
.quiz-form { max-width:800px; }.quiz-progress { border-bottom:1px solid var(--line); color:var(--muted); display:flex; font-size:.78rem; justify-content:space-between; margin-bottom:20px; padding-bottom:13px; }.question-card { background:white; border:1px solid var(--line); border-radius:14px; margin:16px 0; padding:25px; }.question-card legend { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:600; line-height:1.35; padding:0; width:100%; }.question-number { color:var(--green); display:inline-block; font-size:.8rem; margin-right:13px; vertical-align:2px; }.question-type { color:var(--muted); font-size:.75rem; margin:12px 0 0; }.choices { display:grid; gap:9px; margin-top:22px; }.choice { align-items:center; border:1px solid var(--line); border-radius:9px; cursor:pointer; display:flex; gap:12px; padding:13px 15px; transition:.15s; }.choice:hover,.choice.selected { background:var(--mint); border-color:#9fc8b3; }.choice input { position:absolute; opacity:0; }.choice-marker { border:2px solid #a8b4ad; border-radius:50%; height:17px; width:17px; }.choice input[type=checkbox] + .choice-marker { border-radius:4px; }.choice input:checked + .choice-marker { background:var(--green); border:4px solid white; box-shadow:0 0 0 2px var(--green); }.text-answer { margin-top:20px; }.text-answer textarea { border:1px solid var(--line); border-radius:9px; color:var(--ink); font:inherit; line-height:1.5; padding:13px; resize:vertical; width:100%; }.text-answer textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--mint); outline:none; }
.submit-button { background:var(--green); border:0; border-radius:8px; color:white; cursor:pointer; display:inline-flex; font:600 .92rem 'DM Sans',sans-serif; gap:28px; margin-top:20px; padding:15px 19px; text-decoration:none; }.submit-button:hover { background:#1d4636; }.submit-button span { font-size:1.2rem; line-height:.8; }.empty-state { background:white; border:1px dashed var(--line); border-radius:14px; grid-column:1/-1; padding:60px; text-align:center; }.empty-icon { color:var(--yellow); font-size:2rem; }.empty-state p { color:var(--muted); }
.result-page { max-width:720px; padding-top:55px; }.result-card { background:white; border:1px solid var(--line); border-radius:18px; padding:48px; text-align:center; }.result-icon { align-items:center; background:var(--mint); border-radius:50%; color:var(--green); display:flex; font-size:1.6rem; height:58px; justify-content:center; margin:0 auto 28px; width:58px; }.needs-work .result-icon { background:#fff0cb; color:#9a6b00; }.result-card h1 { font-size:3rem; }.result-card > p:not(.eyebrow):not(.result-score) { color:var(--muted); }.result-score { align-items:baseline; display:flex; gap:12px; justify-content:center; margin:28px 0 0; }.result-score strong { color:var(--green); font:700 3.8rem 'Space Grotesk',sans-serif; }.result-score span { color:var(--muted); font-size:.9rem; }.result-actions { align-items:center; display:flex; flex-direction:column; gap:18px; margin-top:30px; }
.empty-state h2 { margin-top:10px; }
.auth-layout { align-items:center; display:grid; gap:clamp(50px,10vw,140px); grid-template-columns:minmax(250px, .9fr) minmax(320px, 430px); margin:30px auto 0; max-width:1000px; }.auth-intro h1 { font-size:clamp(3rem,6vw,5.2rem); }.auth-intro > p:last-child { color:var(--muted); line-height:1.6; margin-top:28px; max-width:320px; }.auth-card { background:white; border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:0 18px 45px #285b480d; }.auth-card-heading h2 { font-size:1.8rem; }.auth-card-heading > p:last-child { color:var(--muted); margin:8px 0 28px; }.auth-form { display:grid; gap:17px; }.form-field { display:grid; gap:7px; }.form-field label { font-size:.82rem; font-weight:700; }.form-field input { background:#fbfcfa; border:1px solid var(--line); border-radius:7px; color:var(--ink); font:inherit; padding:12px 13px; width:100%; }.form-field input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--mint); outline:none; }.field-help { color:var(--muted); font-size:.72rem; line-height:1.4; }.field-help ul { margin:5px 0 0; padding-left:18px; }.field-error,.form-errors { color:#a04434; font-size:.78rem; line-height:1.4; }.form-errors ul { margin:0; padding-left:18px; }.auth-submit { justify-content:space-between; margin-top:8px; width:100%; }.auth-footer { border-top:1px solid var(--line); color:var(--muted); font-size:.76rem; line-height:1.5; margin:25px 0 0; padding-top:20px; }.auth-footer span { color:var(--green); }
@media (max-width:600px) { .site-header { padding:20px; }.header-note { display:none; }.page-shell { padding:42px 20px 70px; }.question-card,.result-card { padding:22px; }.result-card h1 { font-size:2.4rem; } }
@media (max-width:760px) { .auth-layout { grid-template-columns:1fr; margin-top:15px; }.auth-intro h1 { font-size:3.5rem; }.auth-card { padding:25px; } }
.course-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }.course-card { background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--ink); min-height:285px; padding:25px; text-decoration:none; transition:.2s ease; }.course-card:hover { border-color:var(--green); box-shadow:0 12px 28px #285b4814; transform:translateY(-3px); }.course-card h2 { font-size:1.55rem; margin:45px 0 10px; }.course-card p { color:var(--muted); line-height:1.5; }.level-pill { color:var(--green); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.enrolled-label { color:var(--green); font-size:.75rem; font-weight:700; }.course-detail-heading { align-items:end; display:flex; gap:40px; justify-content:space-between; margin:55px 0 38px; }.course-detail-heading h1 { font-size:clamp(2.7rem,5vw,4.8rem); max-width:720px; }.course-description { color:var(--muted); line-height:1.65; margin:22px 0 0; max-width:680px; }.enrolled-badge { background:var(--mint); border-radius:8px; color:var(--green); display:inline-block; font-size:.86rem; font-weight:700; padding:14px 17px; white-space:nowrap; }.progress-panel { background:var(--mint); border-radius:14px; margin-bottom:42px; max-width:800px; padding:20px 22px; }.progress-copy { display:flex; font-size:.82rem; justify-content:space-between; }.progress-copy strong { color:var(--green); }.progress-track { background:#c5decf; border-radius:20px; height:7px; margin:14px 0 16px; overflow:hidden; }.progress-track span { background:var(--green); border-radius:20px; display:block; height:100%; }.final-quiz-link { color:var(--green); font-size:.84rem; font-weight:700; text-decoration:none; }.section-label { color:var(--green); font-size:.72rem; font-weight:700; letter-spacing:.14em; margin-bottom:14px; text-transform:uppercase; }.module-list { max-width:850px; }.module-card { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; }.module-heading { align-items:flex-start; display:flex; gap:16px; padding:23px 25px; }.module-number { color:var(--green); font:600 .86rem 'Space Grotesk',sans-serif; padding-top:3px; }.module-heading h2 { font-size:1.25rem; }.module-heading p { color:var(--muted); font-size:.84rem; margin:8px 0 0; }.lesson-list { border-top:1px solid var(--line); }.lesson-row { align-items:center; border-bottom:1px solid #edf0ec; display:flex; gap:15px; justify-content:space-between; padding:17px 25px 17px 58px; }.lesson-row:last-child { border-bottom:0; }.lesson-copy { align-items:flex-start; display:flex; gap:12px; }.lesson-dot { border:2px solid #b5c2ba; border-radius:50%; display:block; height:14px; margin-top:4px; width:14px; }.lesson-copy h3 { font-size:.92rem; margin:0; }.lesson-copy p { color:var(--muted); font-size:.77rem; line-height:1.4; margin:5px 0 0; }.lesson-button { background:none; border:1px solid var(--green); border-radius:6px; color:var(--green); cursor:pointer; font:600 .72rem 'DM Sans',sans-serif; padding:7px 10px; white-space:nowrap; }.lesson-complete { color:var(--green); font-size:.72rem; font-weight:700; white-space:nowrap; }.lesson-locked { color:var(--muted); font-size:.7rem; white-space:nowrap; }
@media (max-width:760px) { .course-detail-heading { align-items:flex-start; flex-direction:column; }.lesson-row { padding-left:25px; }.header-user { display:none; } }
.lesson-quiz-locked { color:var(--muted); font-size:.78rem; }
.lesson-open { color:var(--green); font-size:.74rem; font-weight:700; text-decoration:none; white-space:nowrap; }.lesson-started { color:var(--muted); font-size:.72rem; white-space:nowrap; }.lesson-heading { margin:55px 0 36px; max-width:760px; }.lesson-heading h1 { font-size:clamp(2.7rem,5vw,4.8rem); margin-bottom:22px; }.lesson-content { background:#fff; border:1px solid var(--line); border-radius:16px; max-width:820px; padding:clamp(25px,5vw,55px); }.lesson-video { background:#111; border-radius:10px; margin-bottom:32px; overflow:hidden; position:relative; width:100%; }.lesson-video::before { content:""; display:block; padding-top:56.25%; }.lesson-video iframe { border:0; height:100%; left:0; position:absolute; top:0; width:100%; }.lesson-body { color:#38453e; font-size:1.05rem; line-height:1.8; }.lesson-body p:first-child { margin-top:0; }.lesson-completion { align-items:center; display:flex; gap:24px; margin-top:25px; max-width:820px; }.lesson-completion p { color:var(--muted); margin:0; }.lesson-complete-large { color:var(--green) !important; font-weight:700; }