:root { --ink:#152027; --muted:#58666c; --paper:#fffdf9; --line:#dce3df; --accent:#126a59; --accent-dark:#094d41; --tint:#e8f4ef; --warn:#9b4c14; --radius:18px; }
* { box-sizing:border-box; } body { margin:0; background:#f3f6f3; color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; } .shell { max-width:760px; padding:20px 16px 48px; margin:auto; outline:none; } .brand { padding:6px 4px 24px; letter-spacing:.08em; font-weight:800; font-size:.9rem; } .brand a { color:var(--ink); text-decoration:none; } .brand span { color:var(--accent); } .card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 20px; box-shadow:0 8px 24px #1f35200d; } h1 { font-size:clamp(1.75rem,5vw,2.55rem); line-height:1.12; letter-spacing:-.035em; margin:10px 0 18px; } h2 { font-size:1.38rem; line-height:1.2; margin:6px 0 12px; } h3 { font-size:1rem; margin:0 0 6px; } p { margin:0 0 16px; } .eyebrow,.progress-meta { font-size:.75rem; letter-spacing:.1em; font-weight:800; color:var(--accent); } .button { border:0; border-radius:12px; min-height:52px; padding:13px 18px; font:800 .83rem/1.2 inherit; letter-spacing:.035em; text-align:center; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; } .button.primary { color:#fff; background:var(--accent); } .button.primary:hover,.button.primary:focus-visible { background:var(--accent-dark); } .button.secondary { color:var(--ink); background:transparent; border:1px solid #9aa7a1; } button:disabled { opacity:.45; cursor:not-allowed; } .intro .button { width:100%; margin:10px 0 18px; } .notice,.disclaimer { color:var(--muted); font-size:.88rem; } .progress-meta { display:flex; justify-content:space-between; }.progress { height:8px; background:#dce7e1; border-radius:100px; margin:10px 0 29px; overflow:hidden; }.progress span { display:block; height:100%; background:var(--accent); border-radius:inherit; transition:width .22s ease; } .help { border-left:3px solid var(--accent); padding-left:13px; color:var(--muted); } fieldset { border:0; padding:0; margin:25px 0; } legend { font-weight:700; margin-bottom:10px; }.answers { display:grid; gap:10px; }.answer { min-height:54px; border:1px solid #aebbb5; background:#fff; border-radius:12px; padding:12px; color:var(--ink); font:700 1rem inherit; cursor:pointer; }.answer:hover,.answer:focus-visible,.answer.selected { border-color:var(--accent); background:var(--tint); box-shadow:0 0 0 2px #126a5922; }.navigation { display:flex; gap:10px; justify-content:space-between; }.navigation .button { flex:1; }.score { display:grid; grid-template-columns:repeat(3,1fr); margin:24px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.score div { padding:12px 8px; text-align:center; }.score div+div { border-left:1px solid var(--line); }.score dt { color:var(--muted); font-size:.75rem; line-height:1.25; }.score dd { margin:5px 0 0; color:var(--accent); font-size:1.65rem; font-weight:800; }.checks { margin-top:32px; }.check { padding:17px 0; border-top:1px solid var(--line); }.check p:last-child { color:var(--muted); margin-bottom:0; }.status { display:inline-block; border-radius:100px; padding:2px 8px; font-size:.76rem; font-weight:800; margin-bottom:8px; }.status.no { background:#fff0e6; color:var(--warn); }.status.unsure { background:#edf0ed; color:#4f5d54; }.kit { margin:36px -20px -28px; padding:28px 20px; background:var(--tint); border-radius:0 0 var(--radius) var(--radius); }.kit ul { padding-left:20px; margin:0 0 20px; }.kit li { margin-bottom:7px; }.price { color:var(--accent-dark); font-size:1.8rem; font-weight:800; }.price small { font-size:.85rem; font-weight:600; }.kit .button { width:100%; }.link-button { display:block; border:0; background:none; margin:26px auto 0; color:var(--accent-dark); text-decoration:underline; cursor:pointer; font-weight:700; }.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; }.noscript { padding:20px; } @media (min-width:600px) { .shell { padding-top:42px; }.card { padding:42px; }.kit { margin:40px -42px -42px; padding:42px; }.answers { grid-template-columns:repeat(3,1fr); }.navigation { justify-content:flex-end; }.navigation .button { flex:0 1 auto; min-width:150px; } }