:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#1a1f24; --mute:#5c6670;
  --line:#d9d3c7; --acc:#0b6e4f; --acc2:#c45c26; --warn:#8a5a00;
  --r:14px; --max:760px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px;top:8px}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
.brand{display:flex;gap:10px;align-items:center}
.brand .mark{font-size:1.5rem}
.brand strong{display:block}
.mute{color:var(--mute);font-size:.9rem}
.small{font-size:.85rem}
.top nav{display:flex;gap:14px;flex-wrap:wrap}
.top nav a{color:var(--ink);font-weight:600}
main{max-width:var(--max);margin:0 auto;padding:22px 16px 64px}
.hero{padding:8px 0 10px}
.eyebrow{display:inline-block;background:#e8e2d6;color:var(--warn);padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700;margin:0 0 12px}
.tagline{font-size:clamp(1.6rem,5vw,2.35rem);line-height:1.2;margin:0 0 14px;max-width:22ch}
.lede{color:var(--mute);margin:0 0 18px;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;border:2px solid var(--line);background:#fff;color:var(--ink);
  padding:11px 16px;border-radius:10px;font-weight:700;cursor:pointer}
.btn.main{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:18px 0}
.panel h2{margin:0 0 10px;font-size:1.2rem}
.banner{background:#fff6e5;border:1px solid #e6c98a;border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:.92rem}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--mute)}
.filters select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
caption{caption-side:bottom;padding:8px;color:var(--mute);font-size:.8rem;text-align:left}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#f0ebe3;font-weight:700;position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#faf8f4}
.price{font-variant-numeric:tabular-nums;font-weight:800;color:var(--acc)}
.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;list-style:none;padding:0;margin:0}
.grade-grid li{background:#f0ebe3;border-radius:10px;padding:12px}
.foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem}