styles.css

:root{--ink:#17231f;--muted:#66736d;--paper:#f4f3ef;--white:#fffefa;--green:#17654e;--lime:#c6ef72;--line:#dedfd7;--orange:#cc693c;--shadow:0 20px 55px #263b2c0c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}.topbar,main,footer{width:min(1100px,calc(100% - 48px));margin:auto}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:19px;font-weight:800;letter-spacing:-.8px}.brand>span:last-child{color:var(--green)}.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;background:var(--green);color:white;border-radius:9px;font-size:16px}.local-note{color:var(--muted);font-size:12px}.local-note i{display:inline-block;background:#3d9c72;width:7px;height:7px;border-radius:50%;margin-right:7px}.hero{padding:62px 0 46px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--green);margin:0 0 12px}.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.02;letter-spacing:-3.5px;margin:0;max-width:700px}.hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green);letter-spacing:-2.5px}.intro{font-size:16px;color:var(--muted);max-width:570px;margin:20px 0 0}.hero-badge{width:142px;height:142px;border-radius:50%;background:var(--lime);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;transform:rotate(8deg)}.hero-badge>span{font-size:27px;line-height:1}.hero-badge small{font-size:9px;text-align:center;line-height:1.25;letter-spacing:1.5px;font-weight:900;margin-top:5px}.badge-orbit{position:absolute;inset:9px;border:1px dashed #385b363e;border-radius:50%}.card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.checker{padding:30px}.section-head,.result-heading{display:flex;justify-content:space-between;align-items:center}.section-head h2,.result-heading h2{font-size:23px;letter-spacing:-.7px;margin:0 0 21px}.step{font-size:11px;color:var(--muted);margin-top:-14px}.step b{color:#a5aaa2;font-weight:400}label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}textarea{width:100%;height:146px;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:14px;background:#fff;color:var(--ink);font:inherit;line-height:1.55;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #17654e18}.input-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:7px}.actions{display:flex;align-items:center;gap:16px;margin-top:18px}.primary{border:0;border-radius:8px;padding:12px 17px;background:var(--green);color:white;font:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:background .2s,transform .2s}.primary:hover{background:#10533f;transform:translateY(-1px)}.primary span{margin-left:18px;font-size:16px}.quiet{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:12px;cursor:pointer}.quiet:hover{color:var(--green)}.error{color:#a53624;font-size:12px}.privacy{font-size:10px;color:var(--muted);margin:15px 0 0}.privacy span{margin-right:5px}.results{padding:48px 0 4px}.result-heading{align-items:flex-start}.result-heading h2{margin-bottom:19px}.result-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:15px}.score-card{padding:24px;display:flex;align-items:center;gap:22px}.meter{--angle:0deg;width:88px;height:88px;border-radius:50%;background:conic-gradient(var(--green) var(--angle),#e8e9e1 0);display:grid;place-items:center;flex:none}.meter-inner{width:70px;height:70px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;flex-direction:column}.meter-inner strong{font-size:23px;line-height:1}.meter-inner span{font-size:9px;color:var(--muted)}.risk-label{font-weight:800;font-size:14px;margin:0 0 4px}.muted{color:var(--muted);font-size:12px;margin:0}.findings{padding:22px 26px}.findings h3{font-size:13px;margin:0 0 13px}.findings ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.findings li{font-size:12px;padding-left:24px;position:relative;color:#45524c}.findings li:before{content:"!";position:absolute;left:0;top:0;display:grid;place-items:center;width:16px;height:16px;background:#f7e6da;color:#a54925;border-radius:50%;font-size:10px;font-weight:800}.findings .all-clear:before{content:"✓";background:#e6f1d3;color:var(--green)}.next-step{display:flex;gap:13px;padding:17px 20px;background:#e9eee5;border-radius:12px;margin-top:15px}.next-icon{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:8px;background:var(--green);color:white}.next-step strong{font-size:12px}.next-step p{font-size:11px;color:#58645d;margin:3px 0 0}.disclaimer{font-size:10px;color:var(--muted);max-width:740px;margin:13px 0 0}.how{padding:68px 0 58px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.how-grid article{border-top:1px solid var(--line);padding-top:16px}.how-grid article>span{color:var(--green);font-size:11px;font-weight:800}.how-grid h3{font-size:15px;margin:10px 0 5px}.how-grid p{font-size:12px;color:var(--muted);margin:0;max-width:260px}footer{border-top:1px solid var(--line);padding:22px 0 32px;display:flex;justify-content:space-between;font-size:11px}footer a{color:var(--green);text-decoration:none;font-weight:700}footer a:hover{text-decoration:underline}[hidden]{display:none!important}@media(max-width:680px){.topbar,main,footer{width:min(100% - 32px,560px)}.topbar{height:64px}.hero{padding:47px 0 30px}.hero h1{letter-spacing:-2px}.hero h1 em{letter-spacing:-1.7px}.hero-badge{width:88px;height:88px;margin-left:10px}.hero-badge small{font-size:7px}.hero-badge>span{font-size:18px}.badge-orbit{inset:6px}.intro{font-size:14px}.checker{padding:21px 17px}.section-head h2,.result-heading h2{font-size:19px}.result-grid{grid-template-columns:1fr}.score-card{padding:18px}.results{padding-top:38px}.how{padding:50px 0 42px}.how-grid{grid-template-columns:1fr;gap:15px}.how-grid article{padding-top:12px}.how-grid p{max-width:none}.result-heading{gap:8px}.result-heading .quiet{font-size:10px}footer{gap:12px;align-items:flex-start;flex-direction:column}}

.lesson{max-width:760px;padding:48px 0 74px}.lang{font-size:12px;font-weight:700;color:var(--green);text-decoration:none}.back{display:inline-block;color:var(--muted);font-size:12px;text-decoration:none;margin-bottom:35px}.back:hover{color:var(--green)}.lesson h1{font-size:clamp(38px,6vw,60px);line-height:1.02;letter-spacing:-3px;margin:0}.lesson h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green);letter-spacing:-2px}.lead{color:var(--muted);font-size:15px;max-width:590px;margin:17px 0 28px}.progress-row{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:11px;margin:0 0 10px}.progress{height:5px;background:#e0e3da;flex:1;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;width:33.33%;background:var(--green);transition:width .25s}.quiz{padding:28px}.scenario-tag{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--green);margin-bottom:12px}.quiz h2{font-size:21px;line-height:1.4;letter-spacing:-.5px;margin:0 0 22px}.choices{display:grid;gap:9px}.choice{width:100%;padding:13px 15px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}.choice:hover:not(:disabled){border-color:var(--green);background:#f7faf5}.choice:disabled{cursor:default}.choice.correct{border-color:#408c64;background:#eef6e9}.choice.wrong{border-color:#cd7955;background:#fcf0e8}.feedback{padding:14px 15px;background:#edf1e9;border-radius:9px;margin:14px 0;color:#42534a;font-size:12px;line-height:1.6}.quiz .primary{margin-top:12px}.done{padding:35px;margin-top:10px}.done-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);font-size:21px;font-weight:800;margin-bottom:22px}.done h2{font-size:25px;letter-spacing:-.8px;margin:0 0 8px}.done>p:not(.eyebrow){font-size:13px;color:var(--muted);max-width:580px}.link-button{display:inline-block;text-decoration:none;margin-top:8px}.lesson-note{color:var(--muted);font-size:10px;margin-top:14px}@media(max-width:680px){.lesson{padding:35px 0 55px}.back{margin-bottom:25px}.lesson h1{letter-spacing:-2px}.quiz{padding:21px 17px}.quiz h2{font-size:18px}.done{padding:24px}}
.header-links{display:flex;align-items:center;gap:15px;margin-left:auto;margin-right:18px}.lesson-link{color:var(--green);text-decoration:none;font-size:11px;font-weight:800}.lesson-link:hover{text-decoration:underline}@media(max-width:680px){.header-links{gap:9px;margin-right:10px}.lesson-link{font-size:10px}.local-note{font-size:0}.local-note i{margin-right:0}}