/* EDITED IN PLACE (10/11, docs/GRADES-ON-PAGES.md: generators are retired for built pages). This file is no longer
   generated: mocks/src/compare/make_css.py made its first build and now refuses to overwrite it without --force.
   Edit the rules here; tools/css_lint.py guards them (a rule two pages share goes in core.css). The note below is history. */
/* TG compare.css: Compare towns, merged direction (page key `compare`). Generated by mocks/src/compare/make_css.py:
   the live app.css "Compare towns" rules (and the shared rules) the four mocks use, minus core.css, plus the page-local
   additions at the end. Load order: core.css, compare.css, /mocks/mock.css. */
.vs-c2{--vc:#d97706;--vt:#fdf3e4}
.vs-c3{--vc:#db2777;--vt:#fdebf3}
.vs-sw{width:10px;height:10px;border-radius:3px;background:var(--vc);flex:none;display:inline-block}
.vs-hero{padding:8px 0 0}
.vs-hero h1{font-size:46px;letter-spacing:-.04em;line-height:1.04;margin-top:8px}
.vs-hn{box-shadow:inset 0 -.16em 0 color-mix(in srgb,var(--vc) 32%,transparent)}
.vs-v{font-style:normal;font-weight:600;font-size:.5em;color:var(--faint);vertical-align:.32em;letter-spacing:0;margin:0 .1em}
.vs-lede{font-size:17px;color:var(--ink-2);max-width:760px;margin:10px 0 0;line-height:1.5}
.vs-tiles{display:grid;gap:14px;margin-top:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.vs-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-tiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vs-tile{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0;border-top:4px solid var(--vc)}
.vs-tv{display:block;height:170px;background:var(--vt);position:relative}
.vs-tv img{width:100%;height:100%;object-fit:cover}
.vs-ini{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;font-weight:800;color:var(--vc);letter-spacing:-.04em}
.vs-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--ink-2);box-shadow:0 2px 8px rgba(15,22,35,.15)}
.vs-x:hover{background:#fff;color:var(--bad)}
.vs-tb{display:flex;gap:10px;align-items:flex-start;padding:12px 14px 14px}
.vs-tb .vs-sw{margin-top:7px}
.vs-tb b{font-size:17px;letter-spacing:-.01em}
.vs-tb small{display:block;font-size:13.5px;color:var(--ink-2);font-weight:600}
.vs-tb small.vs-tm{color:var(--muted);font-weight:400;font-size:13px}
.vs-add{border:1.5px dashed #cfd5dd;border-top:1.5px dashed #cfd5dd;background:var(--surface);overflow:visible}
.vs-find{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 16px;height:100%;position:relative;text-align:center}
.vs-plus{width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent-ink)}
.vs-find b{font-size:16px}
.vs-find input{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.vs-find input:focus{outline:none;border-color:var(--accent)}
.vs-find small{font-size:12.5px;color:var(--muted)}
.vs-find .vs-res{left:12px;right:12px;top:calc(100% - 46px)}   /* the list itself: core.css (shared with the homepage band) */
.vs-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.vs-shine{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.vs-shine.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-shine.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vs-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:linear-gradient(180deg,var(--vt),#fff 120px);display:flex;flex-direction:column;gap:10px;min-width:0}
.vs-colh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vs-colh b{font-size:18px;letter-spacing:-.02em}
.vs-colh small{flex-basis:100%;color:var(--muted);font-size:13px}
.vs-so{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;transition:border-color .15s,box-shadow .15s}
.vs-sot{display:flex;flex-direction:column;min-width:0}
.vs-sot .kick{color:var(--vc);filter:brightness(.85)}
.vs-big{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:2px}
.vs-big em{font-style:normal;font-weight:800;font-size:22px;color:var(--ink)}
.vs-sot small{font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.vs-more{font-size:13.5px;margin-top:auto}
.vs-diffs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vs-df{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:6px;transition:border-color .15s}
.vs-df:hover{border-color:#c9ced7}
.vs-dfh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vs-dfh .kick{color:var(--muted)}
.vs-chip{font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--vt);color:var(--vc);filter:saturate(1.1)}
.vs-dft{font-size:17px;letter-spacing:-.015em}
.vs-strip{position:relative;height:22px;margin:8px 4px 2px}
.vs-strip::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;background:var(--hair)}
.vs-span{position:absolute;top:9px;height:4px;border-radius:4px;background:#d5dae1}
.vs-dot{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:999px;background:var(--vc);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,22,35,.25)}
.vs-vals{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--muted)}
.vs-vals i, .vs-lhead i, .vs-th i{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--vc);margin-right:6px;vertical-align:1px}
.vs-vals b{color:var(--ink);font-weight:700}
.vs-cost{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:#fff}
.vs-cin{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.vs-cin label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.vs-cin select, .vs-cin input{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font:inherit;font-size:14px;color:var(--ink);background:#fff}
.vs-rate{display:inline-flex;align-items:center;gap:4px}
.vs-rate input{width:76px}
.vs-crows{display:flex;flex-direction:column;gap:14px}
.vs-crh{display:flex;align-items:baseline;gap:8px}
.vs-crh b{font-size:15.5px}
.vs-crv{margin-left:auto;font-size:24px;font-weight:800;letter-spacing:-.03em}
.vs-crh small{color:var(--muted);font-size:13px}
.vs-cbar{height:12px;border-radius:6px;background:var(--surface);margin:6px 0 4px;overflow:hidden}
.vs-cbar i{display:block;height:100%;border-radius:6px;background:var(--vc);transition:width .25s}
.vs-crs{font-size:12.5px;color:var(--muted)}
.vs-cgap{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;color:var(--ink-2)}
.vs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vs-rc{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;min-width:0}
.vs-rch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vs-rch b{font-size:16px}
.vs-rcg{display:flex;flex-direction:column;gap:6px}
.vs-g{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid transparent}
.vs-g:hover{background:var(--surface)}
.vs-g.lead{background:var(--vt);border-color:color-mix(in srgb,var(--vc) 30%,transparent)}
.vs-gt,.vl-side>span:last-child{display:flex;flex-direction:column;min-width:0}
.vs-gt b{font-size:14.5px;display:flex;align-items:center;gap:6px}
.vs-gt b::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--vc)}
.vs-gt small{font-size:12.5px;color:var(--muted);line-height:1.3}
.vs-life{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.vs-life.n3, .vs-life.n4{grid-template-columns:1fr}
.vs-bey{grid-template-columns:repeat(4,minmax(0,1fr))}
.vs-lg{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;min-width:0}
.vs-lgh{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.vs-lgh b{font-size:16px}
.vs-lhead, .vs-lr{display:grid;grid-template-columns:minmax(110px,1fr) repeat(var(--n,2),minmax(0,1fr));gap:8px;align-items:center}
.vs-lhead.n2, .vs-lr.n2{--n:2}
.vs-lhead.n3, .vs-lr.n3{--n:3}
.vs-lhead.n4, .vs-lr.n4{--n:4}
.vs-lhead{font-size:12px;font-weight:700;color:var(--muted);padding:4px 0 6px;border-bottom:1px solid var(--hair)}
.vs-lhead span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-lr{padding:7px 0;border-bottom:1px solid var(--hair);font-size:14px}
.vs-lr:last-child{border-bottom:0}
.vs-ll{color:var(--muted);font-size:13.5px}
.vs-lc{font-weight:600;font-variant-numeric:tabular-nums;position:relative;padding-left:14px}
.vs-lc.most::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:999px;background:var(--vc)}
.vs-lc:hover{color:var(--accent-ink)}
.vs-lc .faint{color:var(--faint);font-weight:400}
.vs-where{align-items:start}
.vs-wlist{display:flex;flex-direction:column;gap:10px}
.vs-wr{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#fff}
.vs-wr b{display:block;font-size:14.5px}
.vs-wr small{font-size:13px;color:var(--muted)}
.vs-pair{display:flex;margin-top:4px}
.vs-pair i{width:14px;height:14px;border-radius:999px;background:var(--vc);border:2px solid #fff}
.vs-pair i+i{margin-left:-5px}
.vs-flows{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px}
.vs-fl{display:flex;flex-direction:column;gap:4px;font-size:14px}
.vs-fl small{color:var(--muted)}
.vs-flb{height:8px;border-radius:4px;background:var(--surface);overflow:hidden}
.vs-flb i{display:block;height:100%;background:var(--vc);border-radius:4px}
.vs-flows .link{font-size:13.5px}
.vs-pri{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:var(--accent-tint);border-color:transparent}
.vs-chips{display:flex;flex-wrap:wrap;gap:8px}
.vs-pc{height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(15,22,35,.12);background:#fff;font-weight:600;font-size:14px;color:var(--ink-2)}
.vs-pc:hover{border-color:var(--accent)}
.vs-pc[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vs-pc[aria-pressed="true"]::before{content:"✓ "}
.vs-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.vs-fit.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-fit.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vs-ft{background:#fff;border-radius:var(--r);padding:12px 14px;border-top:3px solid var(--vc)}
.vs-ft b{font-size:14.5px}
.vs-fn{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--vc)}
.vs-fn small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.vs-fnote{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted)}
.vs-hint{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.vs-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.vs-tabs button{height:34px;min-width:0;padding:0 12px;font-size:13.5px;font-weight:600}
.vs-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vs-tog{display:flex;gap:14px;font-size:13.5px;color:var(--ink-2)}
.vs-tog label{display:flex;gap:6px;align-items:center;cursor:pointer}
.vs-tog input{accent-color:var(--accent)}
.vs-tbl{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.vs-thd{border-radius:16px 16px 0 0}
.vs-tbl > .vs-tg:last-child > :last-child{border-radius:0 0 16px 16px}
.vs-tr{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--n),minmax(0,1fr));gap:14px;padding:12px 16px;border-top:1px solid var(--hair);align-items:start}
.vs-thd{position:sticky;top:var(--hdr);z-index:3;background:#fff;border-top:0;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;padding-top:12px;padding-bottom:12px}
.vs-th{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-tg[hidden]{display:none}
.vs-tgh{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.vs-tgh .ic{width:16px;height:16px;color:var(--accent-ink)}
.vs-mine .vs-tgh{background:var(--accent-tint);color:var(--accent-ink)}
.vs-tl{font-size:14px;font-weight:600;color:var(--ink-2)}
.vs-tl small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.vs-td{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14px}
.vs-td.txt{color:var(--ink-2)}
.vs-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.vs-n b{font-size:16px;font-weight:700}
.vs-n small{color:var(--muted);font-size:12px}
.vs-moe{color:var(--faint)!important}
.vs-tag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface);color:var(--muted)}
.vs-tag.hi{background:var(--vt);color:var(--vc)}
.vs-tag.fit{background:var(--accent);color:#fff}
.vs-td.is-fit .vs-n b{color:var(--accent-ink)}
.vs-bar{position:relative;height:6px;border-radius:3px;background:var(--surface)}
.vs-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--vc)}
.vs-bar em{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink);opacity:.55}
.vs-rel{font-size:12px;color:var(--muted)}
.vs-close{display:flex;gap:8px;align-items:center;padding:8px 16px 10px;font-size:12.5px;color:var(--muted);background:#fbfbfc}
.vs-close .ic{width:15px;height:15px;color:var(--faint)}
.vs-tbl.no-bench .vs-bar em, .vs-tbl.no-bench .vs-rel{display:none}
.vs-tbl.diff-only .vs-tr[data-flat], .vs-tbl.diff-only .vs-close[data-flat]{display:none}
.vs-lgb{background:var(--ink)!important;width:2px!important;height:12px!important;opacity:.55}
.vs-talk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vs-talk.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-talk.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.vs-tk{border-top:4px solid var(--vc)}
.vs-tkh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.vs-tkh b{font-size:16px}
.vs-tkh .link{margin-left:auto;font-size:13px}
.vs-mh{font-size:15px;margin:18px 0 10px;color:var(--ink-2)}
.vs-mh:first-of-type{margin-top:0}
.vs-bey .bey-v .yr{background:var(--accent);color:#fff}
.vs-fp{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:14.5px;color:var(--ink-2);transition:border-color .15s}
.vs-fp:hover{border-color:var(--accent)}
.vs-fpi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink)}
.vs-fpi svg{width:17px;height:17px}
.vs-fp>span:nth-child(2){flex:1;min-width:0}
.vs-fp .d{color:var(--muted)}
.vs-fp em{flex:none;font-style:normal;font-weight:700;color:var(--accent-ink);white-space:nowrap}
@media (max-width:560px){
  .vs-fp{flex-wrap:wrap}
  .vs-fp em{width:100%;padding-left:46px}
}
.vs-src{margin-top:32px}
@media (max-width:1100px){
  .vs-tiles.n4, .vs-shine.n4, .vs-fit.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .vs-bey{grid-template-columns:1fr 1fr}
  .vs-tiles.n3, .vs-shine.n3, .vs-talk.n3, .vs-fit.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-diffs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .vs-hero h1{font-size:32px}
  .vs-lede{font-size:15.5px}
  .vs-tiles, .vs-tiles.n3, .vs-tiles.n4{grid-template-columns:1fr 1fr;gap:10px}
  .vs-tv{height:110px}
  .vs-tb{padding:10px}
  .vs-tb b{font-size:15px}
  .vs-tb small.vs-tm{display:none}
  .vs-tiles .vs-add:nth-child(odd){grid-column:1/-1}
  .vs-find{padding:16px 12px}
  .vs-shine, .vs-shine.n3, .vs-shine.n4, .vs-talk, .vs-talk.n3, .vs-talk.n4, .vs-cards{grid-template-columns:1fr}
  .vs-tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:12px}
  .vs-tr .vs-tl{grid-column:1/-1}
  .vs-thd .vs-tl{display:none}
  .vs-td::before{content:attr(data-town);font-size:11px;font-weight:700;color:var(--vc);text-transform:uppercase;letter-spacing:.04em}
  .vs-thd{display:none}
  .vs-tog{flex-direction:column;gap:6px}
  .vs-lhead, .vs-lr{grid-template-columns:minmax(86px,1fr) repeat(var(--n,2),minmax(0,1fr));gap:6px;font-size:13px}
}

/* ===== Page-local additions (TG Compare, merged direction) ===== */
/* hero: the grades sentence and the overall grade on each tile */
.vs-lede.cmp-glede{margin-top:6px;font-size:15.5px}
.cmp-tg{display:flex;align-items:center;gap:10px;margin:auto 14px 14px;padding:10px 12px;border-radius:var(--r);background:var(--vt)}
.cmp-tg:has(.gp){background:none;padding:0}
.cmp-tg > span:not(.badge):not(.gp){display:flex;flex-direction:column;min-width:0}
.cmp-tg b{font-size:13px;color:var(--muted);font-weight:600}
.cmp-tg small{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.3}
/* where each shines: a grade badge in place of the photo */
.cmp-sob{flex:none;display:grid;place-items:center}
/* report cards: the overall card, group heads, notes */
.cmp-ov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:6px}
.cmp-ov.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-ov.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cmp-ovc{border:1px solid var(--line);border-top:4px solid var(--vc);border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,var(--vt),#fff 90px);min-width:0}
.cmp-ovh{display:flex;align-items:center;gap:12px}
.cmp-ovh span:not(.badge){display:flex;flex-direction:column;min-width:0}
.cmp-ovh b{font-size:18px;letter-spacing:-.02em}
.cmp-ovh small{font-size:13.5px;color:var(--ink-2);font-weight:600}
.cmp-why{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.cmp-camp{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.cmp-figs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--hair)}
.cmp-figs div{min-width:0}
.cmp-figs dt{font-size:12px;color:var(--muted)}
.cmp-figs dd{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.cmp-gh{margin:22px 0 10px;font-size:17px;letter-spacing:-.015em}
.cmp-gh small{display:block;margin-top:2px;font-size:13.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.vs-rch .cmp-rcl{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.vs-rch .cmp-rcl:hover{color:var(--accent-ink)}
.cmp-rcn{margin:8px 2px 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* add a town: a small grade badge on the name */
.bey-b b .cmp-bg{display:inline-flex;vertical-align:-6px;margin-right:6px}
/* where they are: one map when the towns are close (the live page draws it with the town-page map component) */
.cmp-mapbox{position:relative;border:1px solid var(--line);border-radius:14px;background:#f6f8f7;overflow:hidden;aspect-ratio:340/210}
.cmp-map{display:block;width:100%;height:100%}
.cmp-map .o{fill:#fff;stroke:#d5dbe2;stroke-width:.8}
.cmp-map .cmp-me{fill:color-mix(in srgb,var(--vc) 22%,#fff);stroke:var(--vc);stroke-width:1.6}
.cmp-map a:hover .cmp-me{fill:color-mix(in srgb,var(--vc) 36%,#fff)}
.cmp-tiles image{filter:saturate(.55)}
.cmp-map.cmp-tiles .cmp-me{fill:color-mix(in srgb,var(--vc) 30%,transparent);stroke-width:3;stroke-linejoin:round}
.cmp-map.cmp-tiles a:hover .cmp-me{fill:color-mix(in srgb,var(--vc) 45%,transparent)}
.cmp-map .cmp-pt{fill:var(--vc);stroke:#fff;stroke-width:2.5}
.cmp-lbl{position:absolute;transform:translate(-50%,-50%);font-size:12.5px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.88);padding:2px 7px;border-radius:6px;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 1.5px var(--vc)}
@media (max-width:1100px){
  .cmp-ov.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cmp-ov,.cmp-ov.n3,.cmp-ov.n4{grid-template-columns:1fr}
  .cmp-tg{margin:auto 10px 10px}
}

/* the /compare landing (no towns yet) and the one-town picker's state list: vl-* */
.vl-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:10px}
.vl-hero h1{font-size:52px;letter-spacing:-.045em;line-height:1.02;margin:8px 0 0}
.vl-hi{background:linear-gradient(transparent 62%,var(--accent-soft) 62%,var(--accent-soft) 90%,transparent 90%)}
.vl-hero .vs-lede{margin-top:14px}
.vl-find{margin-top:20px;padding:18px;border-radius:var(--r-lg);border:1.5px solid var(--accent);background:var(--accent-tint);box-shadow:0 10px 28px -16px rgba(14,159,87,.55)}
.vl-find .vs-find{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;text-align:left}
.vl-find .vs-find b{font-size:17px}
.vl-find .vs-find input[type=search]{grid-column:1/-1;height:50px;font-size:17px;border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:0 16px;width:100%}
.vl-find .vs-find small{grid-column:1/-1}
.vl-find .vs-res{grid-column:1/-1}
.vl-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:14px}
.vl-try>span{color:var(--muted);font-weight:600;margin-right:2px}
.vl-try a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--ink-2);transition:border-color .15s}
.vl-try a:hover{border-color:var(--accent)}
.vl-feat,.vl-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.vl-feat{box-shadow:0 18px 40px -24px rgba(15,22,35,.45)}
.vl-feat:hover,.vl-card:hover,.vl-gap:hover{border-color:var(--accent);box-shadow:0 12px 30px -20px rgba(15,22,35,.45)}
.vl-ph{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;height:170px;background:var(--surface)}
.vl-feat .vl-ph{height:250px}
.vl-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vl-feat .vl-vs{width:58px;height:58px;font-size:18px}
.vl-cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.vl-side b{font-size:15.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-side small{font-size:12.5px;color:var(--muted)}
.vl-feat .vl-side b{font-size:18px}
.vl-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:600;background:var(--surface);color:var(--muted)}
.vl-tag .ic{width:13px;height:13px}
.vl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vl-gaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vl-gap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.vl-gv{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase}
.vl-sts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.vl-sts.one{grid-template-columns:1fr}
.vl-st{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.vl-st[open]{border-color:var(--accent);box-shadow:0 8px 22px -18px rgba(15,22,35,.5)}
.vl-st summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:14.5px}
.vl-st summary::-webkit-details-marker{display:none}
.vl-st summary small{color:var(--muted);font-size:12.5px}
.vl-st summary::after{content:"+";font-weight:700;color:var(--accent-ink);margin-left:6px}
.vl-st[open] summary::after{content:"–"}
.vl-st ul{list-style:none;margin:0;padding:0 8px 8px}
.vl-sts.one .vl-st ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.vl-st li a{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 6px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.vl-st li a:hover{background:var(--surface)}
.vl-step{display:flex;gap:12px;padding:16px;border-radius:14px;background:var(--surface)}
.vl-step small{color:var(--muted);font-size:13.5px;line-height:1.45}
.vl-sn{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#fff}
.vl-sn .ic{width:18px;height:18px}
@media (max-width:1100px){.vl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vl-sts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.vl-hero{grid-template-columns:1fr}.vl-gaps{grid-template-columns:1fr}}
@media (max-width:640px){.vl-hero h1{font-size:36px}.vl-grid,.vl-sts,.vl-steps,.vl-sts.one .vl-st ul{grid-template-columns:1fr}.vl-feat .vl-ph{height:190px}.vl-ph{height:150px}
  .vl-gap{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}.vl-gv{display:none}.vl-gap em{grid-column:1/-1}}