:root { --ink:#17332c; --muted:#5c7069; --leaf:#2d7258; --cream:#f7f5ed; --card:#fff; --line:#d7e3db; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.55 system-ui,sans-serif; }
.wrap { width:min(680px,calc(100% - 32px)); margin:0 auto; padding:52px 0 40px; }
header { margin-bottom:28px; }
.eyebrow { color:var(--leaf); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }
h1 { font-size:clamp(2.2rem,7vw,4rem); line-height:1; letter-spacing:-.05em; margin:0 0 18px; }
.intro { color:var(--muted); font-size:1.12rem; max-width:560px; margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 30px #17332c0d; padding:28px; }
h2 { font-size:1.3rem; margin:0 0 20px; }
form { display:grid; gap:9px; }
label { font-weight:700; margin-top:7px; }
label span { color:var(--muted); font-size:.85rem; font-weight:400; }
select,input { appearance:none; background:#fbfcf9; border:1px solid #b7ccc0; border-radius:9px; color:var(--ink); font:inherit; padding:12px 13px; width:100%; }
select:focus,input:focus,button:focus { outline:3px solid #a5d5bd; outline-offset:2px; }
button { background:var(--leaf); border:0; border-radius:9px; color:#fff; cursor:pointer; font:700 1rem inherit; margin-top:18px; padding:13px 18px; }
button:hover { background:#235c46; }
.result { margin-top:22px; }
.result-heading { align-items:start; display:flex; justify-content:space-between; }
.text-button { background:none; color:var(--leaf); font-size:.9rem; margin:0; padding:0; }
blockquote { border-left:4px solid #9ac9ae; font-size:1.2rem; margin:4px 0 28px; padding:4px 0 4px 18px; }
.result h2 { margin-bottom:5px; }
.result p { color:var(--muted); }
.result #copy { margin-top:8px; }
.status { min-height:1.5em; font-size:.9rem; margin:10px 0 0; }
.note { color:var(--muted); font-size:.9rem; margin:22px 4px 0; }
@media (max-width:500px) { .wrap { padding-top:32px; } .card { padding:22px; } }