:root {
  --bg:#fbfaf7; --fg:#1d2329; --muted:#56616b; --accent:#1f6f8b; --accent-fg:#ffffff; --rule:#dfe3e6;
  --card:#ffffff; --hero-bg:#0f1b22; --hero-fg:#f3f6f8; --warn-bg:#fff3cd; --warn-fg:#6b4a00; --lock:#8a96a0;
  --cat-0:#2a78d6; --cat-1:#eb6834; --cat-2:#1baf7a; --cat-3:#eda100; --cat-4:#e87ba4; --cat-5:#008300;
  --cat-6:#4a3aa7; --cat-7:#e34948; --series:#1f6f8b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#14181c; --fg:#e7eaec; --muted:#a3adb5; --accent:#6fb1df; --accent-fg:#0d1418; --rule:#2c3339;
    --card:#1b2026; --hero-bg:#0a1216; --warn-bg:#3a2f10; --warn-fg:#f0d58a; --lock:#6d7a84;
    --cat-0:#3987e5; --cat-1:#d95926; --cat-2:#199e70; --cat-3:#c98500; --cat-4:#d55181; --cat-5:#008300;
    --cat-6:#9085e9; --cat-7:#e66767; --series:#6fb1df;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
.wrap { max-width:68rem; margin:0 auto; padding:0 16px; }
.wrap.narrow { max-width:46rem; }
.draft { margin:0; padding:10px 16px; background:var(--warn-bg); color:var(--warn-fg); font-weight:600; text-align:center; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* top bar */
.topbar { position:sticky; top:0; z-index:1000; display:flex; align-items:center; gap:16px; padding:10px 16px;
  background:var(--card); border-bottom:1px solid var(--rule); }
.logo { font-weight:700; color:var(--fg); text-decoration:none; margin-right:auto; }
.menu { display:flex; align-items:center; gap:18px; }
.menu a { color:var(--fg); text-decoration:none; padding:6px 2px; }
.menu a[aria-current="page"] { border-bottom:2px solid var(--accent); }
.menu a.signup { background:var(--accent); color:var(--accent-fg); padding:8px 14px; border-radius:8px; font-weight:600; }
.menu-toggle { display:none; }
.menu-button { display:none; }
@media (max-width:720px) {
  .menu-toggle { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); display:block; }
  .menu-button { display:block; cursor:pointer; font-weight:600; }
  .menu-toggle:focus-visible + .menu-button { outline:2px solid var(--accent); }
  .menu { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--card); border-bottom:1px solid var(--rule); padding:8px 16px; }
  .menu-toggle:checked ~ .menu { display:flex; }
}
/* hero */
.hero { background:linear-gradient(rgba(10,18,22,.62), rgba(10,18,22,.72)), url("../assets/hero.jpg") center/cover, var(--hero-bg);
  color:var(--hero-fg); padding:72px 16px 64px; text-align:center; }
.hero-inner { max-width:44rem; margin:0 auto; }
.hero h1 { font-size:clamp(2rem,6vw,3.2rem); line-height:1.1; margin:0 0 16px; }
.hero-lede { font-size:1.1rem; opacity:.92; }
.hero-search { display:flex; gap:8px; max-width:34rem; margin:24px auto 12px; }
.hero-search input { flex:1; min-width:0; padding:12px 14px; border-radius:8px; border:0; font:inherit; }
.hero-search button { padding:12px 18px; border-radius:8px; border:0; background:var(--accent); color:#fff; font-weight:600; }
.hero-latest { opacity:.85; font-size:.95rem; }
/* cards, plans, buttons */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:16px; margin:32px 0; }
.card { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:20px; color:var(--fg); text-decoration:none; }
.card h2 { font-size:1.1rem; margin:0 0 6px; color:var(--accent); }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:16px; margin:24px 0; }
.plan { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:20px; }
.plan.featured { border:2px solid var(--accent); }
.price { font-size:1.8rem; font-weight:700; margin:4px 0 12px; } .price span { font-size:1rem; color:var(--muted); }
.button { display:inline-block; padding:12px 18px; border-radius:8px; font-weight:600; text-decoration:none; border:2px solid var(--accent); }
.button.primary { background:var(--accent); color:var(--accent-fg); } .button.secondary { color:var(--accent); }
.note, .lede { color:var(--muted); }
.compare { width:100%; border-collapse:collapse; } .compare th, .compare td { text-align:left; padding:8px; border-bottom:1px solid var(--rule); }
.site-footer { border-top:1px solid var(--rule); margin-top:48px; padding:24px 0 40px; color:var(--muted); font-size:.92rem; }
.disclaimer { color:var(--fg); font-weight:600; }
/* analysis */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:12px; margin:16px 0 8px; }
.tile { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:12px; }
.tile b { display:block; font-size:1.5rem; } .tile span { color:var(--muted); font-size:.9rem; }
.chart-block { margin:28px 0; } .chart { width:100%; max-width:640px; height:auto; }
.chart .axis, .chart .value { fill:var(--fg); font-size:12px; } .chart .value { fill:var(--muted); }
.chart .hit { fill:transparent; } .chart g:hover .hit { fill:var(--rule); opacity:.5; }
.chart .baseline { stroke:var(--rule); stroke-width:1; }
.chart .bar.s-1 { fill:var(--series); }
.chart .bar.t-0 { fill:var(--cat-0); } .chart .bar.t-1 { fill:var(--cat-1); } .chart .bar.t-2 { fill:var(--cat-2); }
.chart .bar.t-3 { fill:var(--cat-3); } .chart .bar.t-4 { fill:var(--cat-4); } .chart .bar.t-5 { fill:var(--cat-5); }
.chart .bar.t-6 { fill:var(--cat-6); } .chart .bar.t-7 { fill:var(--cat-7); }
.data-table { border-collapse:collapse; font-size:.92rem; margin-top:8px; }
.data-table th, .data-table td { text-align:left; padding:4px 10px 4px 0; border-bottom:1px solid var(--rule); }
.caption { color:var(--muted); font-size:.9rem; }
.locked { border:1px dashed var(--rule); border-radius:10px; padding:14px; color:var(--lock); }
.locked a { color:var(--lock); }
/* map app */
.mapapp { display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 56px); }
.sidebar { overflow-y:auto; border-right:1px solid var(--rule); padding:12px 14px; background:var(--card); }
.sidebar h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 6px; }
.sidebar input[type=search] { width:100%; padding:9px 10px; border:1px solid var(--rule); border-radius:8px; font:inherit; background:var(--bg); color:var(--fg); }
.sidebar label { display:flex; align-items:center; gap:6px; font-size:.93rem; padding:2px 0; }
.sidebar .count { margin-left:auto; color:var(--muted); font-size:.85rem; }
.sidebar .lockrow { color:var(--lock); } .sidebar .lockrow a { color:var(--lock); }
.swatch { width:10px; height:10px; border-radius:50%; display:inline-block; }
.mapmain { position:relative; display:flex; flex-direction:column; min-width:0; }
.mapbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--rule); background:var(--card); }
.mapbar .spacer { flex:1; } .mapbar button { font:inherit; padding:6px 10px; border:1px solid var(--rule); border-radius:6px; background:var(--bg); color:var(--fg); cursor:pointer; }
.mapbar button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
#map { flex:1; min-height:300px; }
#table-view { flex:1; overflow:auto; padding:8px 12px; display:none; }
.mapapp.show-table #map { display:none; } .mapapp.show-table #table-view { display:block; }
#table-view table { border-collapse:collapse; width:100%; font-size:.9rem; }
#table-view th { cursor:pointer; text-align:left; position:sticky; top:0; background:var(--card); }
#table-view th, #table-view td { padding:6px 8px; border-bottom:1px solid var(--rule); }
#table-view tr:hover td { background:var(--rule); cursor:pointer; }
.panel { position:absolute; top:52px; right:12px; width:min(380px, calc(100% - 24px)); max-height:calc(100% - 64px); overflow-y:auto;
  background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; box-shadow:0 4px 18px rgba(0,0,0,.25); z-index:900; display:none; }
.panel.open { display:block; } .panel h3 { margin:0 0 2px; } .panel .meta { color:var(--muted); font-size:.9rem; }
.panel dl { display:grid; grid-template-columns:max-content 1fr; gap:3px 10px; font-size:.92rem; } .panel dt { color:var(--muted); } .panel dd { margin:0; }
.panel h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:12px 0 4px; }
.panel ul { padding-left:18px; margin:0; font-size:.88rem; } .panel .close { float:right; border:0; background:none; font-size:1.2rem; color:var(--muted); cursor:pointer; }
.mapfoot { padding:6px 12px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--rule); background:var(--card); }
.unmapped { margin-top:12px; font-size:.9rem; }
@media (max-width:720px) {
  .mapapp { grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto; }
  .mapmain { order:-1; }
  .sidebar { border-right:0; border-bottom:1px solid var(--rule); max-height:none; }
  #map { flex:none; height:70vh; }
  .panel { position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; max-height:60vh; border-radius:12px 12px 0 0; }
}