:root { --bg:#fbfaf7; --fg:#1d1d1f; --muted:#6b6b70; --line:#e5e2db; --accent:#1f5eff; --good:#1a8f4c; --ok:#7a9a1a; --warn:#c77d00; --bad:#c2362b; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.55; }
a { color:var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
header.site, footer.site, main > section { max-width:880px; margin:0 auto; padding:0 20px; }
header.site { display:flex; justify-content:space-between; align-items:center; padding-top:18px; padding-bottom:18px; }
header.site nav a { margin-left:18px; text-decoration:none; color:var(--fg); }
.brand { font-weight:700; text-decoration:none; color:var(--fg); font-size:1.15rem; }
.hero { padding-top:48px; padding-bottom:24px; }
.hero h1 { font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; margin:0 0 12px; }
.lede { font-size:1.15rem; color:var(--muted); max-width:640px; }
.scan { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.scan input { flex:1 1 360px; font-size:1.05rem; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
button, .button { font-size:1.05rem; padding:14px 22px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button:disabled { opacity:.6; cursor:wait; }
.button.secondary { background:#e9e7e1; color:var(--muted); cursor:default; }
.turnstile { flex-basis:100%; }
.status { min-height:1.5em; color:var(--muted); }
.results { padding-top:12px; padding-bottom:24px; }
.summary { display:flex; gap:22px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.summary h2 { margin:0; font-size:1.1rem; word-break:break-all; }
.grade { font-size:1.4rem; font-weight:700; margin:4px 0; }
.ring { --p:0; width:96px; height:96px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c, var(--accent)) calc(var(--p) * 1%), var(--line) 0); }
.ring[data-band=good]{--c:var(--good)} .ring[data-band=ok]{--c:var(--ok)} .ring[data-band=warn]{--c:var(--warn)} .ring[data-band=bad]{--c:var(--bad)}
.ring span { width:76px; height:76px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:1.7rem; font-weight:700; }
.muted { color:var(--muted); }
.fixes li { margin-bottom:12px; }
.pill { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:99px; color:#fff; }
.pill.high{background:var(--bad)} .pill.medium{background:var(--warn)} .pill.low{background:var(--ok)}
.checks ul { list-style:none; padding:0; }
.checks li { padding:10px 0 10px 28px; border-bottom:1px solid var(--line); position:relative; }
.checks .mark { position:absolute; left:4px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--line); }
.checks .pass .mark{background:var(--good)} .checks .partial .mark{background:var(--warn)} .checks .fail .mark{background:var(--bad)}
.pro { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.pro h3 { margin:0 0 4px; }
.how, .pricing { padding-top:24px; padding-bottom:24px; border-top:1px solid var(--line); }
footer.site { padding-top:24px; padding-bottom:40px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); }
/* App additions */
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:12px 0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 14px; }
label.f { display:flex; flex-direction:column; gap:4px; font-size:.9rem; font-weight:600; }
label.f input, label.f select, label.f textarea, textarea.f { font:inherit; font-weight:400; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%; }
label.f textarea { min-height:64px; resize:vertical; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.small, button.small { font-size:.85rem; padding:7px 12px; border-radius:8px; }
button.ghost { background:#efede7; color:var(--fg); }
button.danger { background:#f6e3e1; color:var(--bad); }
pre.out { background:#1d1d1f; color:#f5f5f7; padding:12px 14px; border-radius:10px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-size:.85rem; }
.tag { display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:99px; background:#efede7; color:var(--muted); }
.warn-list { list-style:none; padding:0; margin:8px 0; }
.warn-list li { padding:6px 10px; border-left:4px solid var(--warn); background:#fff8eb; border-radius:6px; margin-bottom:6px; font-size:.92rem; }
.warn-list li.error { border-color:var(--bad); background:#fdeeee; }
.checks-inline label { font-weight:400; margin-right:12px; }
h2 .muted, h3 .muted { font-weight:400; font-size:.9rem; }
.app { padding-top:8px; padding-bottom:24px; }
label.button { font-size:.85rem; padding:7px 12px; border-radius:8px; background:#efede7; color:var(--fg); cursor:pointer; }
.list-row { display:flex; gap:8px; margin:6px 0; }
.list-row input { flex:1; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
label.inline { display:flex; gap:6px; align-items:center; font-weight:600; font-size:.9rem; }