: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); }
/* Approval Relay additions */
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0; }
.form-grid { display:grid; gap:10px; max-width:560px; }
.form-grid label { font-weight:600; font-size:.95rem; }
.form-grid input, textarea { font:inherit; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; width:100%; }
.secret { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 14px; }
.secret code { flex:1 1 300px; background:#f3f1ec; padding:10px 12px; border-radius:8px; word-break:break-all; font-size:.9rem; }
.secret button, .small { font-size:.9rem; padding:8px 14px; }
pre { background:#1d1d1f; color:#f5f5f7; padding:14px 16px; border-radius:10px; overflow:auto; font-size:.85rem; }
.warn-box { border-left:4px solid var(--warn); background:#fff8eb; padding:10px 14px; border-radius:8px; }
.req h3 { margin:0 0 6px; font-size:1.15rem; word-break:break-word; }
.req .details { white-space:pre-wrap; word-break:break-word; background:#f7f6f2; padding:10px; border-radius:8px; font-size:.95rem; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.actions button { flex:1 1 140px; font-size:1.15rem; padding:16px; }
button.approve { background:var(--good); } button.deny { background:var(--bad); }
.status-pill { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:99px; color:#fff; background:var(--muted); }
.status-pill.approved{background:var(--good)} .status-pill.denied{background:var(--bad)} .status-pill.expired{background:var(--warn)}
.log { list-style:none; padding:0; font-size:.9rem; }
.log li { padding:6px 0; border-bottom:1px solid var(--line); }
.note { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; }