*,*::before,*::after{box-sizing:border-box}
:root{
--navy-900:#062438;--navy-800:#0b3b5c;--navy-700:#12507a;
--navy-100:#e7f0f7;--navy-050:#f3f8fc;
--teal-700:#0e6f78;--teal-100:#dff2f3;
--sand-100:#f8f4ec;--sand-200:#efe7d8;--amber-700:#8a5a10;--amber-100:#fdf1da;
--ink:#0f1f2b;--ink-2:#31465a;--mute:#5f7385;--faint:#8a9bab;
--line:#e2e9f0;--line-2:#cfdae4;--bg:#fff;--soft:#f6f9fc;
--ok:#12633f;--ok-100:#e2f3ea;
--ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--display:'Source Serif 4',Georgia,'Times New Roman',serif;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
--e1:0 1px 2px rgba(10,35,55,.06),0 1px 3px rgba(10,35,55,.05);
--e2:0 6px 16px rgba(10,35,55,.09),0 2px 5px rgba(10,35,55,.05);
--max:1180px;--tap:44px;--t:0ms}
@media(prefers-reduced-motion:no-preference){:root{--t:160ms cubic-bezier(.2,.6,.3,1)}}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--ui);
-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
color:var(--navy-900);margin:0;line-height:1.15}
h1{font-size:clamp(28px,4.4vw,44px)}
h2{font-size:clamp(20px,2.5vw,26px);line-height:1.2;margin:var(--s7) 0 var(--s4)}
h3{font-size:18px;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 var(--s4)}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:62ch}
.hint{font-size:13.5px;color:var(--mute);margin:var(--s2) 0 0}
.note{font-size:14.5px;color:var(--ink-2)}
.eyebrow{font:600 12px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
color:var(--teal-700);margin:0 0 var(--s3)}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:3px solid var(--navy-700);outline-offset:2px;
border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:#fff;
padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:var(--e2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s5)}
.band{background:var(--sand-100);border-block:1px solid var(--sand-200)}
.band-soft{background:var(--soft);border-block:1px solid var(--line)}
.sect{padding:var(--s8) 0}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-md);
border:1px solid var(--line-2);background:#fff;color:var(--ink);
font:600 14.5px/1 var(--ui);cursor:pointer;text-decoration:none;
transition:background var(--t),border-color var(--t),transform var(--t);
white-space:nowrap}
.btn:hover{background:var(--soft);border-color:var(--navy-700);
text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn.primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--navy-700)}
.btn.quiet:hover{background:var(--navy-050);border-color:var(--navy-100)}
.btn.lg{min-height:52px;padding:0 var(--s6);font-size:16px}
/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:var(--s5);min-height:68px;
flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s3);font-family:var(--display);
font-weight:600;font-size:17.5px;color:var(--navy-900);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:9px;flex:none;
background:var(--navy-800);color:#fff;display:grid;place-items:center;
font:700 14px/1 var(--ui)}
.brand small{display:block;font:400 11.5px/1.3 var(--ui);color:var(--mute);
letter-spacing:0}
nav.site{margin-left:auto;display:flex;gap:var(--s1);flex-wrap:wrap}
nav.site a{padding:12px var(--s3);border-radius:var(--r-sm);
font:500 15px/1 var(--ui);color:var(--ink-2);min-height:var(--tap);
display:inline-flex;align-items:center}
nav.site a:hover{background:var(--navy-050);color:var(--navy-800);
text-decoration:none}
main{display:block}
footer.site{border-top:1px solid var(--line);background:var(--soft);
padding:var(--s7) 0;margin-top:var(--s8);font-size:14px;color:var(--mute)}
footer.site a{color:var(--ink-2)}
/* hero + search */
.hero{padding:var(--s8) 0 var(--s7);
background:radial-gradient(1200px 400px at 12% -8%,var(--navy-050),transparent 65%)}
.hero h1{max-width:18ch}
.hero .lede{margin:var(--s4) 0 var(--s6)}
.searchbar{background:#fff;border:1px solid var(--line-2);
border-radius:var(--r-xl);box-shadow:var(--e2);padding:var(--s3);display:grid;
gap:var(--s2);grid-template-columns:1fr}
@media(min-width:880px){.searchbar{grid-template-columns:1.1fr 1fr 1fr auto;
align-items:end;padding:var(--s3) var(--s3) var(--s3) var(--s5)}}
.field{display:flex;flex-direction:column;gap:6px;padding:var(--s2) var(--s3)}
.field label{font:600 12px/1 var(--ui);letter-spacing:.06em;
text-transform:uppercase;color:var(--mute)}
.field select,.field input{font:400 16px/1.4 var(--ui);color:var(--ink);border:0;
background:transparent;padding:0;min-height:28px;width:100%}
.field select:focus,.field input:focus{outline:none}
.field:focus-within{background:var(--navy-050);border-radius:var(--r-md)}
@media(min-width:880px){.field+.field{border-left:1px solid var(--line)}}
.qchips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
/* 44px, not 40px. Measured on the rendered mobile branch: the chips were the
   only interactive element under the 44px touch-target guideline -- 16 of them
   on the homepage alone. Found by measuring, not by reading the CSS. */
.qchip,.chip{display:inline-flex;align-items:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-pill);
border:1px solid var(--line-2);background:#fff;color:var(--ink-2);
font:500 14px/1 var(--ui);transition:all var(--t);text-decoration:none}
.qchip span{font:600 12px/1 var(--ui);color:var(--mute);background:var(--soft);
border-radius:var(--r-pill);padding:4px 8px}
.qchip:hover,.chip:hover{border-color:var(--navy-700);color:var(--navy-800);
background:var(--navy-050);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.stats{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s7);
padding-top:var(--s5);border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:30px;font-weight:600;
color:var(--navy-800);line-height:1}
.stat span{font-size:13.5px;color:var(--mute)}
/* cards */
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;
transition:box-shadow var(--t),border-color var(--t),transform var(--t)}
.card:hover{box-shadow:var(--e2);border-color:var(--line-2);
transform:translateY(-1px)}
.card.pad{padding:var(--s5)}
.cbody{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.crow{display:flex;gap:var(--s4);align-items:flex-start}
.cav{width:52px;height:52px;border-radius:var(--r-md);overflow:hidden;flex:none;
border:1px solid var(--line);background:var(--soft)}
.cav .ph{width:52px;height:52px}
.cmain{min-width:0}
.cflags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:6px}
.card h3 a{color:var(--navy-900)}
.cmeta{font-size:14px;color:var(--mute);margin:4px 0 0;display:flex;
align-items:center;flex-wrap:wrap;gap:6px}
.dot{color:var(--faint)}
.cdesc{font-size:14.5px;color:var(--ink-2);margin:0}
.area{font-size:13.5px;color:var(--mute);margin:0}
.area .k,.rows .k{font-weight:600;color:var(--ink-2)}
.cver{font-size:12.5px;color:var(--faint);margin:auto 0 0;padding-top:var(--s2)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.tags li{font:500 12.5px/1 var(--ui);color:var(--ink-2);background:var(--soft);
border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
/* Tier treatments exist as unused capability. No generator path assigns them;
   qa_site.py asserts no rendered page carries a tier label. */
.card.t-enhanced{border-color:var(--navy-100)}
.card.t-featured{border-color:var(--sand-200);box-shadow:var(--e2)}
/* badges */
.vb{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--ui);
padding:6px 10px;border-radius:var(--r-pill);position:relative;cursor:help}
.vb.sm{font-size:11.5px;padding:5px 9px}
.vb.public{background:var(--teal-100);color:var(--teal-700)}
.vb.owner{background:var(--navy-800);color:#fff}
.vb::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);
left:0;width:min(260px,70vw);background:var(--navy-900);color:#fff;
font:400 12.5px/1.45 var(--ui);padding:9px 11px;border-radius:var(--r-sm);
opacity:0;visibility:hidden;transition:opacity var(--t);z-index:40;
box-shadow:var(--e2)}
.vb:hover::after,.vb:focus::after,.vb:focus-visible::after{opacity:1;
visibility:visible}
.rate{display:inline-flex;align-items:center;gap:4px;color:var(--amber-700)}
.rate b{color:var(--ink);font-weight:600}
.rate .src{color:var(--mute);font-weight:400}
/* results + map */
.toolbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
padding:var(--s4) 0;border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.count{font:600 15px/1 var(--ui);color:var(--ink)}
.ordering{margin:0}
.seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);
border-radius:var(--r-pill);padding:3px;gap:2px;margin-left:auto}
.seg button{min-height:var(--tap);padding:0 var(--s4);border:0;background:none;
border-radius:var(--r-pill);font:600 14px/1 var(--ui);color:var(--mute);
cursor:pointer;transition:all var(--t)}
.seg button[aria-pressed=true]{background:#fff;color:var(--navy-800);
box-shadow:var(--e1)}
.mapwrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
background:var(--navy-050);min-height:320px;position:relative;height:380px}
.mapwrap.tall{height:520px}
.maproot{position:absolute;inset:0;width:100%;height:100%}
/* width/height are NOT redundant with inset:0. MapLibre rewrites the
   container's `position` to `relative` on init, which defeats an
   absolutely-positioned inset and collapses the element to 0 height -- the
   map then sized its canvas to 300px inside a 380px frame. Explicit
   percentage dimensions survive the override. Found by measuring the rendered
   page, not by reading the CSS. */
.mapfallback{position:absolute;inset:0;display:grid;place-items:center;
text-align:center;padding:var(--s6);color:var(--mute);font-size:14px}
.maplegend{position:absolute;left:12px;bottom:12px;z-index:5;
background:rgba(255,255,255,.94);border:1px solid var(--line);
border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;color:var(--ink-2);
box-shadow:var(--e1);max-width:262px}
.pin{width:34px;height:34px;border-radius:var(--r-pill);background:var(--navy-800);
color:#fff;display:grid;place-items:center;font:700 12.5px/1 var(--ui);
border:2px solid #fff;box-shadow:var(--e2);cursor:pointer}
.pin.empty{background:#fff;color:var(--mute);border-color:var(--line-2)}
.maplibregl-popup-content{font:400 13.5px/1.5 var(--ui);border-radius:var(--r-md)}
body.view-map .resultlist{display:none}
body.view-map .resultmap{display:block}
.resultmap{display:none;margin-bottom:var(--s5)}
@media(min-width:1000px){
  .splitview{display:grid;grid-template-columns:minmax(400px,1fr) 1fr;
    gap:var(--s5);align-items:start}
  .splitview .resultmap{display:block;position:sticky;top:84px}
  body.view-map .resultlist{display:block}
  .seg{display:none}
}
.tile{display:block;padding:var(--s4) var(--s5);border:1px solid var(--line);
border-radius:var(--r-md);background:#fff;box-shadow:var(--e1);
transition:all var(--t)}
.tile:hover{border-color:var(--navy-700);background:var(--navy-050);
text-decoration:none;transform:translateY(-1px)}
.tile b{display:block;font:600 15.5px/1.3 var(--ui);color:var(--navy-900)}
.tile small{color:var(--mute);font-size:13px}
.empty{text-align:center;padding:var(--s8) var(--s5);
border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--soft)}
.crumbs{font-size:13px;color:var(--mute);margin:var(--s5) 0 var(--s4)}
.crumbs a{color:var(--mute)}
/* profile */
.phead{display:flex;gap:var(--s5);align-items:flex-end;
padding:var(--s5) 0 var(--s5);flex-wrap:wrap}
.plogo{width:88px;height:88px;border-radius:var(--r-lg);overflow:hidden;
border:3px solid #fff;box-shadow:var(--e2);background:#fff;flex:none}
.plogo .ph{width:100%;height:100%}
.pid{min-width:0;flex:1}
.pid h1{font-size:clamp(25px,3.4vw,36px);margin:var(--s2) 0 0}
.pid .acts{margin-top:var(--s4)}
.pgrid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:940px){.pgrid{grid-template-columns:1fr 340px}}
.pblock{margin-bottom:var(--s6)}
.pblock h2{margin:0 0 var(--s3)}
.pblock.card.pad{margin-bottom:var(--s4)}
.rows{margin:0}
.rows>div{display:flex;gap:var(--s4);padding:10px 0;
border-bottom:1px solid var(--line);font-size:14.5px}
.rows>div:last-child{border-bottom:0}
.rows .k{flex:0 0 118px;color:var(--mute);font-weight:400}
.pmap{height:260px;border-radius:var(--r-lg);border:1px solid var(--line);
background:var(--navy-050);position:relative;overflow:hidden}
.verif{font-size:12.5px;color:var(--faint);margin:var(--s3) 0 0}
@media(max-width:620px){
  .rows>div{flex-direction:column;gap:2px}
  .rows .k{flex:none}
  .acts .btn{flex:1 1 auto}
}
/* ======================================================================
   V2 — visual weight. Same markup contract, stronger consumer read.
   ====================================================================== */
:root{--gold:#f0a12a;--gold-d:#c97f10;--star-off:#dde5ec;
--ink-inv:rgba(255,255,255,.82)}
/* stars: a clipped gold row over a grey row, so 4.6 is 4.6 and not 5 */
.stars{position:relative;display:inline-block;width:80px;height:16px;
flex:none;vertical-align:-2px}
.stars svg{display:block;width:80px;height:16px}
.sback,.sfill{position:absolute;left:0;top:0;height:16px;overflow:hidden}
.sback{width:80px}
.sback svg{fill:var(--star-off)}
.sfill svg{fill:var(--gold)}
.ratebar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
font-size:13.5px;color:var(--mute);margin:6px 0 0}
.ratebar b{color:var(--ink);font:700 14.5px/1 var(--ui)}
/* The review count gets its own line by default. It cannot fit beside the
   stars in a three-up card (168px of usable width against ~230px of
   content), and a wrapped '· 2,788 Google reviews' leaves the separator
   dangling at the start of the line. The inline form with the separator is
   used only where there is measured room for it -- the profile header. */
.ratebar .rvc{color:var(--mute);flex-basis:100%;margin-top:1px}
.ratebar.big .rvc{flex-basis:auto;margin-top:0}
.ratebar.big .rvc::before{content:'· ';color:var(--faint)}
.ratebar.big{font-size:15px;margin-top:var(--s3)}
.ratebar.big .stars{width:112px;height:22px}
.ratebar.big .stars svg,.ratebar.big .sback{width:112px;height:22px}
.ratebar.big .sback,.ratebar.big .sfill{height:22px}
.ratebar.big b{font-size:19px}
.trademark{font-size:12px;color:var(--faint);margin:var(--s3) 0 0}
/* business card */
.bcard{position:relative}
/* The banner must NOT be positioned. It was `position:relative`, which put it
   in the positioned-element paint layer and drew it OVER the logo tile that
   overlaps it -- every logo was sliced in half along the banner's bottom edge.
   The overlap is achieved by negative margin alone, so the banner needs no
   positioning; the tile carries the z-index instead. Ledger F-0029. */
.bcard .bbanner{height:58px;
background:linear-gradient(120deg,hsl(var(--h) 46% 95%),hsl(var(--h) 34% 88%));
border-bottom:1px solid var(--line);display:flex;align-items:flex-start;
justify-content:flex-end;padding:var(--s3) var(--s4)}
.bcard .cbody{padding:0 var(--s5) var(--s5)}
/* Only the LOGO overlaps the banner. An earlier version lifted the whole
   .crow by -26px with align-items:flex-end, which pulled the <h3> up behind
   the banner and made the business name invisible on every single card --
   including the one-line names, which vanished completely. The CSS read as
   reasonable; the rendered page had no business names on it. Found by looking
   at a screenshot of the real generated page. Ledger F-0028. */
.bcard .crow{margin-top:var(--s3);align-items:flex-start}
.bcard .cav{width:68px;height:68px;border:3px solid #fff;
box-shadow:var(--e1);border-radius:14px;margin-top:-46px;
position:relative;z-index:2}
.bcard .cav .ph{width:100%;height:100%}
.bcard .cmain{padding-bottom:2px;flex:1}
.bcard h3{font-size:19px;margin-top:0;overflow-wrap:anywhere}
.bcat{font:600 12px/1 var(--ui);letter-spacing:.03em;text-transform:uppercase;
color:var(--teal-700)}
.bcard .cmeta{margin-top:5px;gap:5px}
.bcard .acts{margin-top:var(--s3);padding-top:var(--s4);
border-top:1px solid var(--line)}
/* section heads */
.sechead{max-width:66ch;margin:0 0 var(--s5)}
.sechead.center{margin-left:auto;margin-right:auto;text-align:center}
.sechead h2{margin:0}
.sechead .subt{color:var(--ink-2);font-size:16.5px;margin:var(--s3) 0 0}
.subt.light{color:var(--ink-inv)}
.eyebrow.light{color:#8fd3da}
/* hero v2: the search is the product, so it sits on a dark field */
.hero.v2{background:linear-gradient(160deg,#052232 0%,#0b3b5c 45%,
#12507a 100%);color:#fff;padding:var(--s8) 0 var(--s7);position:relative;
overflow:hidden}
.hero.v2::after{content:'';position:absolute;inset:auto -10% -60% 40%;
height:420px;background:radial-gradient(closest-side,
rgba(143,211,218,.16),transparent);pointer-events:none}
.hero.v2 h1{color:#fff;font-size:clamp(30px,5vw,52px);max-width:20ch}
.hero.v2 h1 em{font-style:normal;color:#9ad9df}
.hero.v2 .lede{color:var(--ink-inv);max-width:58ch}
.hero.v2 .eyebrow{color:#9ad9df}
.hero.v2 .searchbar{box-shadow:0 18px 40px rgba(2,15,25,.38)}
.hero.v2 .qchips{align-items:center}
.hero.v2 .qchip{background:rgba(255,255,255,.08);border-color:
rgba(255,255,255,.22);color:#eaf4f8}
.hero.v2 .qchip span{background:rgba(255,255,255,.14);color:#cfe7ee}
.hero.v2 .qchip:hover{background:rgba(255,255,255,.18);color:#fff;
border-color:rgba(255,255,255,.5)}
.chiplabel{font:600 12px/1 var(--ui);letter-spacing:.08em;
text-transform:uppercase;color:#8fd3da;margin-right:var(--s2)}
/* stats bar */
.statsbar{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--e2);display:grid;grid-template-columns:1fr 1fr;
margin:calc(var(--s7) * -1 - 10px) auto var(--s7);position:relative;z-index:5;
max-width:var(--max);overflow:hidden}
@media(min-width:760px){.statsbar{grid-template-columns:repeat(4,1fr)}}
.statsbar .stat{padding:var(--s5);text-align:center;border-top:1px solid
var(--line);border-left:1px solid var(--line)}
.statsbar .stat:nth-child(-n+2){border-top:0}
.statsbar .stat:nth-child(odd){border-left:0}
@media(min-width:760px){
  .statsbar .stat{border-top:0}
  .statsbar .stat:nth-child(odd){border-left:1px solid var(--line)}
  .statsbar .stat:first-child{border-left:0}
}
.statsbar .stat b{font-size:34px}
.statsbar .stat span{display:block;margin-top:4px;font-size:13px;
letter-spacing:.02em}
/* tiles with counts */
.tile{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.tile .n{font:600 12.5px/1 var(--ui);color:var(--mute);background:var(--soft);
border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px;
flex:none}
/* how-it-works cards */
.how{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.how{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.how{grid-template-columns:repeat(3,1fr)}}
.how .card{padding:var(--s5)}
.howicon{width:42px;height:42px;border-radius:12px;display:grid;
place-items:center;background:var(--teal-100);color:var(--teal-700);
margin-bottom:var(--s3)}
.howstep{font:700 12px/1 var(--ui);color:var(--faint);letter-spacing:.1em;
margin-bottom:var(--s2)}
/* owner CTA band */
.ctaband{background:linear-gradient(150deg,#062438,#0e4a6b);color:#fff;
padding:var(--s8) 0;margin-top:var(--s8)}
.ctaband h2{color:#fff}
.ctainner{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:940px){.ctainner{grid-template-columns:1.5fr 1fr;
align-items:start;gap:var(--s8)}}
.ctaside{border-left:3px solid rgba(154,217,223,.4);padding-left:var(--s5)}
.ticks{list-style:none;margin:var(--s4) 0 var(--s5);padding:0;
color:var(--ink-inv);font-size:15px}
.ticks li{padding-left:26px;position:relative;margin-bottom:8px}
.ticks li::before{content:'✓';position:absolute;left:0;color:#9ad9df;
font-weight:700}
.btn.onlight{background:#fff;border-color:#fff;color:var(--navy-900)}
.btn.onlight:hover{background:#eaf4f8;border-color:#eaf4f8}
.btn.ghostlight{background:transparent;border-color:rgba(255,255,255,.4);
color:#fff}
.btn.ghostlight:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* profile v2 */
/* Not positioned, for the same reason as .bbanner: a positioned cover paints
   over the header that overlaps it, and the business name was sliced in half
   along the cover's bottom edge. Ledger F-0029 covers both. */
.pcover{height:150px;border-radius:var(--r-lg) var(--r-lg) 0 0;
background:linear-gradient(120deg,hsl(var(--h) 44% 94%),
hsl(var(--h) 30% 85%));border:1px solid var(--line);border-bottom:0}
@media(min-width:760px){.pcover{height:196px}}
.phead.v2{padding:0 var(--s5) var(--s5);align-items:flex-start;
border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg)
var(--r-lg);background:#fff;padding-top:var(--s5);position:relative;z-index:2}
/* The tile carries its own position and z-index rather than relying on the
   parent's. The parent happened to win the paint order here, which means the
   invariant held by accident -- and an accidental invariant is one refactor
   away from F-0029 happening again. */
.phead.v2 .plogo{width:104px;height:104px;margin-top:-72px;
position:relative;z-index:2}
.phead.v2 .cflags{margin-bottom:var(--s2)}
/* Long URLs and service-area lists must wrap inside the 340px aside rather
   than running out of the card. */
.rows>div>span:last-child,.rows>div{overflow-wrap:anywhere;min-width:0}
.pmap .pin.here{background:var(--teal-700);width:26px;height:26px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gslot{aspect-ratio:4/3;border:1px dashed var(--line-2);border-radius:var(--r-md);
background:var(--soft);display:grid;place-items:center;color:var(--faint);
font-size:12.5px;text-align:center;padding:var(--s3)}
.hours{margin:0;font-size:14.5px}
.hours>div{display:flex;justify-content:space-between;gap:var(--s4);
padding:8px 0;border-bottom:1px solid var(--line)}
.hours>div:last-child{border-bottom:0}
.hours .d{color:var(--mute)}
@media(max-width:620px){
  .hero.v2{padding-top:var(--s6)}
  .statsbar{margin-top:calc(var(--s6) * -1)}
  .ctaside{border-left:0;border-top:3px solid rgba(154,217,223,.4);
    padding:var(--s5) 0 0}
}