@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: light; --ink:#182321; --muted:#61706b; --line:#d9e0d8; --green:#165c46; --light:#f4f7f1; --paper:#fffefa; --orange:#d2673a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; }
.shell { width:min(1240px,calc(100% - 72px)); margin:auto; }
.topbar { height:94px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 23px 'Manrope',Arial,sans-serif; letter-spacing:-.05em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--green); color:white; border-radius:10px; font-size:19px; }
.brand-dot { color:var(--orange); }
.topbar-side { font-size:13px; color:var(--muted); }
.hero { padding:96px 0 114px; max-width:870px; }
.eyebrow,.section-kicker { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.15em; }
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow-line { display:block; width:28px; height:1px; background:var(--green); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Manrope',Arial,sans-serif; letter-spacing:-.065em; }
.hero h1 { margin:25px 0 28px; font-size:clamp(48px,6.6vw,84px); font-weight:700; line-height:1.09; }
.hero h1 em { font-style:normal; color:var(--green); }
.hero-copy { color:var(--muted); font-size:20px; line-height:1.55; max-width:630px; }
.audit-form { margin-top:54px; }
.audit-form label { display:block; font-size:14px; font-weight:700; margin-bottom:12px; }
.input-row { display:flex; border:1px solid #b6c6ba; background:white; border-radius:18px; padding:6px; box-shadow:0 14px 42px rgba(33,68,47,.08); }
.input-row:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.input-row input { flex:1; min-width:0; border:0; background:transparent; padding:18px 21px; font:16px 'DM Sans',Arial,sans-serif; color:var(--ink); outline:0; }
.input-row input::placeholder { color:#9aa6a1; }
button { cursor:pointer; font:700 15px 'DM Sans',Arial,sans-serif; }
.input-row button,.secondary-button { border:0; border-radius:13px; padding:17px 25px; background:var(--green); color:white; white-space:nowrap; }
.input-row button span { padding-left:12px; font-size:18px; }
.input-row button:hover,.secondary-button:hover { background:#0e4433; }
.form-hint { margin:14px 0 0; color:#809089; font-size:13px; }
.alert { max-width:700px; margin-top:24px; border:1px solid #dfa997; border-radius:12px; padding:15px 18px; color:#9f3b23; background:#fff4ee; }
.how { border-top:1px solid var(--line); padding:60px 0 88px; display:grid; grid-template-columns:1fr 1.5fr; gap:80px; }
.how h2 { font-size:40px; line-height:1.15; margin:22px 0 0; }
.how-list { display:grid; }
.how-list div { border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:29px; padding:17px 0; }
.how-list b { color:var(--orange); font-size:13px; }
.how-list p { margin:0; font-size:17px; }
.footer { border-top:1px solid var(--line); padding:27px 0 42px; display:flex; justify-content:space-between; gap:25px; color:#8a9690; font-size:12px; }
.report { padding-bottom:80px; }
.crumb { padding:38px 0; display:flex; gap:13px; font-size:13px; color:var(--muted); }
.crumb a { text-decoration:none; }
.report-head { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:25px 0 52px; }
.report-head h1 { font-size:clamp(42px,5vw,68px); line-height:1.1; max-width:780px; margin:22px 0 15px; }
.source-link { font-size:14px; color:var(--green); text-decoration:none; border-bottom:1px solid #aac9bd; padding-bottom:3px; }
.score { flex:none; text-align:right; color:var(--green); }
.score-number { font:800 clamp(70px,8vw,112px)/1 'Manrope',Arial,sans-serif; letter-spacing:-.09em; }
.score span { display:block; font-size:15px; margin-top:12px; }
.report-summary { background:var(--light); border-radius:20px; padding:25px 30px; display:flex; align-items:center; gap:55px; flex-wrap:wrap; }
.report-summary div { display:grid; gap:8px; }
.summary-label { color:var(--muted); font-size:12px; }
.report-summary strong { font-size:16px; }
.tag { padding:9px 13px; border-radius:100px; color:#8b5c11; background:#fff1d5; font-size:12px; font-weight:700; }
.recommendations { padding:76px 0 48px; }
.section-heading h2 { font-size:43px; margin:13px 0 28px; }
.recommendations ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.recommendations li { min-height:120px; padding:24px; background:white; border:1px solid var(--line); border-radius:16px; display:flex; gap:19px; }
.reco-icon { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#eaf3ea; color:var(--green); }
.recommendations li strong { font-size:17px; }
.recommendations li p { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.recommendations .all-good { display:block; grid-column:1/-1; }
.report-actions { border-radius:22px; background:#163d32; color:white; padding:38px 42px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.report-actions h2 { font-size:28px; margin:0 0 9px; }
.report-actions p { margin:0 0 18px; max-width:570px; color:#c7d8cc; font-size:14px; }
.report-actions code { display:block; overflow-wrap:anywhere; color:#eaf7d4; font-size:12px; }
.report-actions .secondary-button { background:white; color:#154333; }
.report-actions .secondary-button:hover { background:#eaf3ea; }
.history { padding:45px 0 0; }
.scan-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.scan-link { padding:10px 14px; border:1px solid var(--line); border-radius:9px; text-decoration:none; font-size:13px; color:var(--muted); }
.scan-link.active { color:var(--green); border-color:var(--green); background:#edf6ee; }
.admin { padding:60px 0 100px; overflow-x:auto; }
.admin h1 { font-size:40px; }
table { width:100%; border-collapse:collapse; background:white; font-size:14px; }
th,td { border-bottom:1px solid var(--line); padding:15px 12px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:12px; }
td { overflow-wrap:anywhere; }
.status { white-space:nowrap; padding:5px 8px; border-radius:6px; font-size:12px; }
.status.good { background:#e4f3e8; color:#185837; }
.status.partial { background:#fff0d6; color:#825509; }
.status.missing { background:#fae3df; color:#973a2d; }
.status.unknown { background:#eef0ef; color:#57605b; }
.review-section { margin-top:55px; max-width:700px; }
.review-section h2 { font-size:32px; margin-bottom:8px; }
.review-section p { color:var(--muted); font-size:14px; }
.review-form { display:grid; gap:16px; margin-top:25px; }
.review-form label { display:grid; gap:7px; font-size:13px; font-weight:700; }
.review-form select,.review-form textarea { width:100%; border:1px solid #b6c6ba; border-radius:10px; padding:12px; background:white; color:var(--ink); font:15px 'DM Sans',Arial,sans-serif; }
.review-form button { justify-self:start; }
.error { padding:100px 0; min-height:50vh; }
.error h1 { font-size:42px; }
@media(max-width:760px) { .shell { width:min(100% - 36px,600px); } .topbar { height:72px; } .topbar-side { display:none; } .hero { padding:65px 0 75px; } .hero h1 { font-size:48px; } .hero-copy { font-size:17px; } .audit-form { margin-top:35px; } .input-row { display:grid; } .input-row input { padding:17px; } .input-row button { width:100%; } .how { grid-template-columns:1fr; gap:20px; padding:40px 0 60px; } .how h2 { font-size:33px; } .footer { display:grid; } .report-head { display:grid; padding:5px 0 35px; } .report-head h1 { font-size:42px; } .score { text-align:left; } .score-number { font-size:80px; } .report-summary { gap:20px; display:grid; } .recommendations { padding-top:55px; } .recommendations ul { grid-template-columns:1fr; } .report-actions { display:grid; padding:28px; } .report-actions .secondary-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }