:root{--ink:#10213a;--muted:#516078;--brand:#2257d7;--brand-dark:#173b92;--paper:#fff;--soft:#f2f6ff;--line:#d7e0ee;--warn:#fff7df;--warn-line:#d99a00;--ok:#0b6b50;--shadow:0 18px 50px rgba(20,42,82,.11)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#f8faff;font:16px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--brand-dark)}
.skip-link{position:absolute;left:-9999px;top:1rem;background:#fff;padding:.75rem 1rem;z-index:10}
.skip-link:focus{left:1rem}
.site-header{height:72px;padding:0 max(1rem,calc((100% - 1160px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:800;text-decoration:none}
.brand img{display:block}
.header-link{font-weight:700;text-decoration:none}
main{max-width:1160px;margin:auto;padding:0 1.25rem}
.hero{padding:72px 0 42px;max-width:900px}
.eyebrow,.result-label{margin:0 0 .7rem;color:var(--brand);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.045em;margin:.2rem 0 1.25rem}
h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.025em}
h3{line-height:1.25}
.lead{font-size:1.18rem;color:var(--muted);max-width:760px}
.notice{border-left:4px solid var(--warn-line);background:var(--warn);padding:1rem 1.1rem;margin:1.5rem 0}
.source-note{font-size:.92rem;color:var(--muted)}
.checker-shell{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:1.5rem;align-items:start}
.checker-card,.result-card,.explain,.faq{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(1.15rem,3vw,2rem);box-shadow:var(--shadow)}
.checker-card h2,.result-card h2{margin-top:0}
fieldset{border:0;padding:0;margin:1.6rem 0}
legend{font-weight:800;margin-bottom:.7rem}
label{display:flex;align-items:flex-start;gap:.65rem;padding:.62rem .72rem;border-radius:9px}
label:hover{background:var(--soft)}
input{width:1.15rem;height:1.15rem;margin-top:.18rem;accent-color:var(--brand);flex:0 0 auto}
button{border:0;border-radius:10px;padding:.82rem 1rem;font:inherit;font-weight:800;cursor:pointer;margin:.25rem .35rem .25rem 0}
.primary{background:var(--brand);color:#fff}
.primary:hover{background:var(--brand-dark)}
.secondary{color:var(--brand-dark);background:#e8efff}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f0a500;outline-offset:3px}
.result-card{position:sticky;top:1rem;border-top:5px solid var(--ok)}
.result-card[hidden]{display:none}
.result-card ul{padding-left:1.25rem}
.result-card li{margin:.55rem 0}
.boundary{padding:1rem;background:var(--soft);font-size:.9rem;color:var(--muted)}
.explain,.faq{margin-top:2rem}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid article{padding:1rem;background:var(--soft);border-radius:12px}
.grid h3{margin-top:0}
details{border-top:1px solid var(--line);padding:1rem 0}
summary{font-weight:800;cursor:pointer}
footer{text-align:center;color:var(--muted);padding:3rem 1rem}
@media(max-width:760px){.hero{padding-top:48px}.checker-shell,.grid{grid-template-columns:1fr}.result-card{position:static}.site-header{height:64px}.header-link{font-size:.9rem}.result-actions button{width:100%;margin-right:0}}
@media(max-width:380px){main{padding:0 .85rem}.checker-card,.result-card,.explain,.faq{padding:1rem;border-radius:14px}h1{font-size:2.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}