:root { --fg:#1b1f24; --muted:#4a5562; --bg:#fff; --accent:#0b5cad; --line:#d8dee4; --warn-bg:#fff4ce; --warn-fg:#5c4300; --spons-bg:#5a2d82; }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; color:var(--fg); background:var(--bg); line-height:1.55; }
a { color:var(--accent); }
a:focus-visible, .skip:focus { outline:3px solid #f5a623; outline-offset:2px; }
.skip { position:absolute; left:-999px; top:0; background:#000; color:#fff; padding:.5rem 1rem; }
.skip:focus { left:0; z-index:10; }
.preview-banner { background:var(--warn-bg); color:var(--warn-fg); text-align:center; font-weight:700; padding:.4rem 1rem; border-bottom:1px solid #e6d28a; }
.site-header, main, .site-footer { max-width:60rem; margin:0 auto; padding:1rem; }
.site-header { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
nav a { margin-right:1rem; }
h1 { font-size:1.75rem; line-height:1.25; margin:.5rem 0 1rem; }
h2 { font-size:1.3rem; margin-top:2rem; }
h3 { font-size:1.1rem; margin:0 0 .25rem; }
.lead { font-size:1.1rem; color:var(--muted); }
.small, .meta { font-size:.9rem; color:var(--muted); }
.crumbs { font-size:.9rem; margin-bottom:.5rem; }
.cards { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.card { border:1px solid var(--line); border-radius:.5rem; padding:1rem; }
.card p { margin:.25rem 0; }
.cat-grid { list-style:none; padding:0; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.cat-grid li { border:1px solid var(--line); border-radius:.5rem; padding:.75rem; display:flex; justify-content:space-between; }
.count { color:var(--muted); }
.label-sponsored { display:inline-block; background:var(--spons-bg); color:#fff; font-size:1rem; font-weight:700; letter-spacing:.02em; padding:.1rem .45rem; border-radius:.25rem; vertical-align:middle; }
.featured-block { border:2px solid var(--spons-bg); border-radius:.5rem; padding:0 1rem 1rem; margin:1rem 0 2rem; }
.facts { border-collapse:collapse; width:100%; margin:1rem 0; }
.facts th, .facts td { text-align:left; vertical-align:top; padding:.5rem; border-bottom:1px solid var(--line); }
.facts th { width:35%; color:var(--muted); font-weight:600; }
.provenance { font-size:.9rem; background:#f4f6f8; border-left:4px solid var(--line); padding:.75rem; }
.placeholder { background:var(--warn-bg); color:var(--warn-fg); padding:.5rem .75rem; border-radius:.25rem; }
.empty { color:var(--muted); font-style:italic; }
.site-footer { border-top:1px solid var(--line); margin-top:3rem; }
.disclosure { font-weight:600; }
@media (max-width: 40rem) { h1 { font-size:1.4rem; } .facts th { width:auto; display:block; border:0; padding-bottom:0; } .facts td { display:block; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }
.compare th, .compare td { width:auto; }
article h2 { font-size:1.2rem; }
.price-note { font-size:1rem; display:block; margin-top:.25rem; }
.req-form label { display:block; margin:.6rem 0; } .req-form input[type=text], .req-form input[type=email], .req-form input[type=url], .req-form textarea, .req-form select { display:block; width:100%; max-width:36rem; padding:.4rem; }
.req-form .check { display:flex; gap:.5rem; align-items:flex-start; } .hp { position:absolute; left:-9999px; }
.dpdp-notice { border-left:4px solid #888; padding-left:.6rem; } .kit { margin-top:2rem; }