/* Called & Vetted — design system. Trust-blue primary, teal accent, green=verified,
   slate neutrals. Light + dark. Hand-written from the researched spec. */

:root {
  /* brand + semantic */
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-500:#2563EB;
  --blue-600:#1D4ED8; --blue-700:#1E40AF; --blue-900:#172554;
  --teal-500:#0D9488; --teal-600:#0F766E;
  --green-50:#ECFDF5; --green-500:#10B981; --green-600:#059669; --green-700:#047857;
  --amber-400:#FBBF24; --amber-500:#F59E0B;
  /* neutrals */
  --white:#FFFFFF; --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0;
  --gray-300:#CBD5E1; --gray-400:#94A3B8; --gray-500:#64748B; --gray-700:#334155;
  --gray-900:#0F172A;
  /* semantic surfaces (light) */
  --bg:var(--gray-50); --surface:var(--white); --surface-2:var(--gray-100);
  --border:var(--gray-200); --text:var(--gray-700); --text-strong:var(--gray-900);
  --text-muted:var(--gray-500); --primary:var(--blue-600); --primary-hover:var(--blue-700);
  --primary-tint:var(--blue-50); --verified:var(--green-600); --verified-tint:var(--green-50);
  /* scale */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  --sp-8:3rem; --sp-10:4rem;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --shadow-sm:0 1px 2px rgb(0 0 0/.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0/.08), 0 2px 4px -2px rgb(0 0 0/.06);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.10), 0 4px 6px -4px rgb(0 0 0/.05);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B1120; --surface:#111827; --surface-2:#1E293B; --border:#334155;
    --text:#E2E8F0; --text-strong:#F8FAFC; --text-muted:#94A3B8;
    --primary:#3B82F6; --primary-hover:#60A5FA; --primary-tint:#172554;
    --verified:#34D399; --verified-tint:#052e2b;
    --shadow-sm:0 1px 2px rgb(0 0 0/.4); --shadow-md:0 4px 10px rgb(0 0 0/.45);
    --shadow-lg:0 12px 24px rgb(0 0 0/.5);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); font-size:1rem; line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { color:var(--text-strong); line-height:1.2; margin:0 0 var(--sp-3); font-weight:700; }
h1 { font-size:clamp(2rem,5vw,3rem); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.015em; }
h3 { font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
p { margin:0 0 var(--sp-4); }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
.cav-icon { width:1.25em; height:1.25em; flex:0 0 auto; vertical-align:-.15em; }

.container { max-width:1200px; margin:0 auto; padding:0 var(--sp-4); }
.narrow { max-width:760px; }
main { min-height:60vh; padding-bottom:var(--sp-10); }
.muted { color:var(--text-muted); }
.section { padding:var(--sp-8) 0; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--border);
}
.site-header .inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem;
  color:var(--text-strong); text-decoration:none; letter-spacing:-.02em; }
.brand .mark { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-md);
  background:var(--primary); color:#fff; }
.brand .mark .cav-icon { width:20px; height:20px; }
.brand b { color:var(--primary); }
.nav { display:flex; gap:var(--sp-5); align-items:center; }
.nav a { color:var(--text); font-size:.9rem; font-weight:500; }
.nav a:hover { color:var(--primary); text-decoration:none; }
@media (max-width:640px){ .nav{ display:none; } }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.95rem;
  padding:.6rem 1.1rem; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer;
  min-height:44px; transition:background .15s,box-shadow .15s,border-color .15s,transform .15s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); text-decoration:none; color:#fff; }
.btn-call { background:var(--green-600); color:#fff; }
.btn-call:hover { background:var(--green-700); text-decoration:none; color:#fff; }
.btn-ghost { background:var(--surface); color:var(--text-strong); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); text-decoration:none; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgb(37 99 235/.35); }

/* ---------- hero + search ---------- */
.hero { background:
    radial-gradient(1200px 400px at 50% -10%, var(--primary-tint), transparent),
    var(--bg);
  padding:var(--sp-10) 0 var(--sp-8); text-align:center; border-bottom:1px solid var(--border); }
.hero h1 { max-width:16ch; margin-inline:auto; }
.hero .sub { font-size:1.15rem; color:var(--text-muted); max-width:52ch; margin:0 auto var(--sp-5); }
.searchbar { display:flex; gap:.5rem; background:var(--surface); padding:.5rem; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--border); max-width:640px; margin:0 auto; }
.searchbar .field { flex:1; display:flex; align-items:center; gap:.5rem; padding:0 .75rem;
  color:var(--text-muted); min-width:0; }
.searchbar select { width:100%; border:0; background:transparent; font:inherit; color:var(--text-strong);
  padding:.6rem 0; outline:none; cursor:pointer; }
.searchbar .divider { width:1px; background:var(--border); margin:.4rem 0; }
@media (max-width:560px){ .searchbar{ flex-wrap:wrap; } .searchbar .divider{ display:none; }
  .searchbar .field{ flex-basis:100%; border-bottom:1px solid var(--border); } .searchbar .btn{ flex-basis:100%; justify-content:center; } }
.trust-strip { display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:center;
  margin-top:var(--sp-5); color:var(--text-muted); font-size:.9rem; }
.trust-strip span { display:inline-flex; align-items:center; gap:.35rem; }
.trust-strip .cav-icon { color:var(--verified); }

/* ---------- category grid ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-4); }
.cat-tile { display:flex; flex-direction:column; gap:.6rem; padding:var(--sp-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); text-decoration:none; color:var(--text-strong);
  transition:transform .15s,box-shadow .15s,border-color .15s; }
.cat-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--blue-200);
  text-decoration:none; }
.cat-tile .chip { display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-md);
  background:var(--primary-tint); color:var(--primary); }
.cat-tile .chip .cav-icon { width:22px; height:22px; }
.cat-tile .label { font-weight:600; font-size:.95rem; line-height:1.25; }
.cat-tile .count { font-size:.8rem; color:var(--text-muted); }

/* ---------- town cards (home) ---------- */
.town-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-4); }
.town-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-5); transition:transform .15s,box-shadow .15s,border-color .15s; }
.town-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--blue-200); }
.town-card h3 { margin-bottom:.25rem; }
.town-card h3 a { color:var(--text-strong); }
.town-card .pills { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }

.pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600;
  padding:.25rem .6rem; border-radius:var(--r-full); background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); }
.pill-more { color:var(--primary); }

/* ---------- breadcrumbs ---------- */
.crumbs { display:flex; flex-wrap:wrap; gap:.35rem; font-size:.85rem; color:var(--text-muted);
  padding:var(--sp-4) 0 0; align-items:center; }
.crumbs a { color:var(--text-muted); }
.crumbs a:hover { color:var(--primary); }
.crumbs .sep { color:var(--gray-300); }
.crumbs .current { color:var(--text-strong); font-weight:500; }

/* ---------- page head ---------- */
.page-head { padding:var(--sp-6) 0 var(--sp-5); }
.page-head h1 { margin-bottom:var(--sp-3); }
.page-head .lede { font-size:1.05rem; color:var(--text-muted); max-width:70ch; }

/* ---------- listing cards (ranked) ---------- */
.listings { display:flex; flex-direction:column; gap:var(--sp-3); }
.listing { display:flex; gap:var(--sp-4); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,border-color .15s; }
.listing:hover { box-shadow:var(--shadow-md); border-color:var(--blue-200); }
.listing.top { border-color:var(--primary); border-left-width:3px; }
.listing .rank { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; font-weight:700;
  font-size:.95rem; border-radius:var(--r-full); background:var(--surface-2); color:var(--text); }
.listing.top .rank { background:var(--primary); color:#fff; }
.listing .body { flex:1; min-width:0; }
.listing .name { font-size:1.15rem; font-weight:600; margin:0 0 .2rem; }
.listing .name a { color:var(--text-strong); }
.listing .meta { color:var(--text-muted); font-size:.88rem; display:flex; align-items:center;
  gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.listing .badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.listing .actions { display:flex; flex-direction:column; gap:.5rem; justify-content:center; flex:0 0 auto; }
@media (max-width:560px){ .listing{ flex-wrap:wrap; } .listing .actions{ flex-direction:row; flex-basis:100%; } }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600;
  padding:.2rem .55rem; border-radius:var(--r-full); border:1px solid transparent; }
.badge .cav-icon { width:.9em; height:.9em; }
.badge-verified { background:var(--verified-tint); color:var(--verified); }
.badge-info { background:var(--primary-tint); color:var(--primary); }
.badge-plain { background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }
.badge-pick { background:var(--primary); color:#fff; }

/* ---------- business detail ---------- */
.detail-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
@media (min-width:820px){ .detail-grid{ grid-template-columns:1fr 320px; align-items:start; } }
.detail-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); }
.detail-hero { display:flex; gap:var(--sp-4); align-items:center; margin-bottom:var(--sp-4); }
.detail-hero .chip { display:grid; place-items:center; width:56px; height:56px; border-radius:var(--r-lg);
  background:var(--primary-tint); color:var(--primary); flex:0 0 auto; }
.detail-hero .chip .cav-icon { width:28px; height:28px; }
.facts { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.facts li { display:flex; gap:.6rem; align-items:flex-start; }
.facts .cav-icon { color:var(--text-muted); margin-top:.15rem; }
.aside-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); position:sticky; top:80px; }
.aside-card .btn { width:100%; justify-content:center; margin-bottom:.5rem; }

/* ---------- FAQ ---------- */
.faq { margin-top:var(--sp-6); }
.faq h3 { margin-top:var(--sp-4); font-size:1.05rem; }

/* ---------- how-it-works / info blocks ---------- */
.info { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-5); }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); }
.info-grid .step .chip { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-md);
  background:var(--verified-tint); color:var(--verified); margin-bottom:.6rem; }

/* ---------- sticky mobile call bar ---------- */
.callbar { position:fixed; inset:auto 0 0 0; z-index:60; display:none; align-items:center;
  justify-content:space-between; gap:var(--sp-3); background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgb(0 0 0/.12); padding:.6rem var(--sp-4) calc(.6rem + env(safe-area-inset-bottom)); }
.callbar .who { min-width:0; }
.callbar .who b { display:block; color:var(--text-strong); font-size:.95rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.callbar .who span { font-size:.8rem; color:var(--text-muted); }
@media (max-width:820px){ .callbar{ display:flex; } main{ padding-bottom:96px; } }

/* ---------- footer ---------- */
.site-footer { background:var(--gray-900); color:#cbd5e1; margin-top:var(--sp-10); }
.site-footer a { color:#cbd5e1; }
.site-footer a:hover { color:#fff; }
.site-footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-6); padding:var(--sp-8) 0 var(--sp-6); }
@media (max-width:720px){ .site-footer .cols{ grid-template-columns:1fr 1fr; } }
.site-footer h4 { color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.9rem; }
.site-footer .fbrand { display:flex; align-items:center; gap:.5rem; font-weight:800; color:#fff; font-size:1.1rem; margin-bottom:.6rem; }
.site-footer .fbrand .mark { background:var(--primary); width:30px; height:30px; border-radius:var(--r-md); display:grid; place-items:center; }
.site-footer .legal { border-top:1px solid #1e293b; padding:var(--sp-4) 0; font-size:.8rem; color:#94a3b8; }

.empty { text-align:center; padding:var(--sp-8); color:var(--text-muted); }