@import url("tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{min-height:100vh}
img,svg{max-width:100%; display:block}
a{color:var(--yay); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s var(--ease)}
a:hover{color:var(--yay-press)}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.035em; font-weight:600; line-height:1.12; color:var(--ink); text-wrap:balance}
button,input,select,textarea{font:inherit; color:inherit}

.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:24px}
.narrow{max-width:40rem}
.measure{max-width:68ch; margin-inline:auto}
.sr{position:absolute;left:-9999px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.tiny{font-size:.75rem}
.center{text-align:center}

/* Demo banner — present, quiet */
.demo-banner{
  background:var(--ink); color:#F5F5F7;
  font-size:.75rem; font-weight:500; letter-spacing:.01em;
  text-align:center; padding:8px 16px;
}
html[data-theme="dark"] .demo-banner{background:#F5F5F7; color:#1D1D1F}

/* Glassy sticky header */
.top{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.topin{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  min-width:0;
}
.brand .lockup{
  height:56px; width:auto; max-width:none;
  flex:0 0 auto;
}
.brand em{
  font-style:normal; font-size:.62rem; font-weight:600;
  background:transparent; color:var(--muted);
  border:1px solid var(--line); padding:2px 7px; border-radius:var(--r-full);
  text-transform:uppercase; letter-spacing:.08em;
}
.wordmark{font-family:var(--display); font-weight:600; letter-spacing:-.045em; font-size:1.28rem; color:var(--ink)}
.wordmark i{font-style:normal; color:inherit}
img.lockup-dark{display:none}
html[data-theme="dark"] img.lockup-light{display:none}
html[data-theme="dark"] img.lockup-dark{display:block}

.nav{display:flex; gap:2px; align-items:center; font-size:.9rem}
.nav a{
  text-decoration:none; color:var(--ink); font-weight:500;
  padding:8px 12px; border-radius:10px; white-space:nowrap;
  transition:background .2s var(--ease);
}
.nav a:hover{background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink)}
.nav .pill{
  background:var(--yay); color:#fff;
  padding:8px 16px; border-radius:var(--r-full);
  font-weight:600;
}
.nav .pill:hover{background:var(--yay-press); color:#fff}
.nav .ghost{color:var(--muted)}
.theme-toggle{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s;
}
.theme-toggle:hover{background:var(--surface); border-color:var(--line-strong)}
.theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:block}

/* Buttons — flat, quiet */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  min-height:44px; padding:0 20px; border-radius:12px; font-weight:600; font-size:.95rem;
  line-height:1; text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:hover{background:var(--bg); color:var(--ink); border-color:var(--line-strong); text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--yay); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--yay-press); color:#fff; border-color:transparent}
.btn.block{width:100%}
.btn.coral{background:var(--no); color:#fff; border-color:transparent}
.btn.coral:hover{background:var(--no-press); color:#fff}
.btn.ghost{background:transparent}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:20px;
}
.flash{border-radius:12px; padding:14px 16px; margin:14px 0; font-size:.95rem; font-weight:500}
.flash.ok{background:var(--yay-soft); color:var(--yay-ink)}
.flash.err,.flash.bad{background:var(--no-soft); color:var(--no-ink)}
.flash.warn{background:var(--warnbg); color:var(--warn)}
.flash ul{margin:0; padding-left:18px}

/* Hero */
.hero{padding:64px 0 48px; background:var(--bg); text-align:center}
.hero-inner{max-width:40rem; margin-inline:auto}
.page-intro{text-align:center; padding:48px 0 32px}
.page-intro.tight{padding:8px 0 16px}
.page-intro h1,.page-intro h2{margin:0 auto .35em; max-width:18ch}
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.hero h1,.page-intro h1{
  font-size:clamp(2.5rem, 5vw, 4.25rem);
  letter-spacing:-.048em; font-weight:600;
  margin:0 auto .35em; max-width:16ch; text-wrap:balance;
}
.lede{color:var(--muted); font-size:1.125rem; max-width:62ch; font-weight:400; line-height:1.6; margin:0 0 24px}
.hero .lede,.page-intro .lede,.auth .lede{margin-inline:auto; text-align:center}
.hero .ctarow,.page-intro .ctarow{justify-content:center}

/* Airbnb-style pill search */
.searchbox, .search-pill{
  display:flex; align-items:stretch;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  box-shadow:var(--shadow);
  overflow:hidden;
  max-width:740px;
  margin:0 auto;
}
.search-pill .slot:first-child{flex:1.7}
.search-pill .slot:nth-child(3){flex:1}
/* placeholder */
.searchbox{display:grid; grid-template-columns:1fr; gap:0; padding:0}
.searchbox input, .search-pill input{
  border:0; background:transparent; width:100%;
  padding:0; min-height:auto; font-size:.98rem; color:var(--ink); outline:none;
}
.search-pill .slot{flex:1; padding:10px 22px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.search-pill .slot label, .search-pill .slot .lab{
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.search-pill .div{width:1px; background:var(--line); margin:10px 0; flex:0 0 1px}
.search-pill .pill-go, .searchbox .btn.primary, .search-pill button{
  margin:8px; border:0; background:var(--yay); color:#fff;
  border-radius:var(--r-full); padding:0 22px; min-height:48px;
  font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s var(--ease), transform .2s;
}
.search-pill .pill-go:hover, .searchbox .btn.primary:hover{background:var(--yay-press); color:#fff}
.searchbox input{padding:16px 20px}
.searchbox input:focus, .search-pill input:focus{outline:2px solid var(--yay); outline-offset:2px}
.searchbox.compact{margin:32px auto 0; max-width:740px}

/* When the home form uses the pill layout, hide bare labels already marked .sr */
@media(min-width:720px){
  form.searchbox.search-pill{display:flex; grid-template-columns:unset}
  form.searchbox.search-pill > input{
    /* JS-free: we'll structure home with .seg wrappers */
  }
}

.methods3{display:grid; grid-template-columns:1fr; gap:16px; margin-top:0; align-items:stretch}
.m3{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:24px; box-shadow:none; height:100%;
}
.m3 p{margin:.6em 0 0; font-size:.95rem; color:var(--muted); line-height:1.45; font-weight:400}
.m3 .badge{font-size:.75rem}
.m3 .ico{
  width:40px; height:40px; border-radius:10px;
  background:var(--yay-soft); color:var(--yay);
  display:grid; place-items:center; margin-bottom:14px;
}
.m3 .ico svg{width:20px; height:20px}
.step-num{display:none}

.h2{font-size:1.5rem; margin:var(--s-8) 0 var(--s-4); letter-spacing:-.03em}
.h3{font-size:1.05rem; margin:0 0 8px; font-weight:600}

.cats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding-bottom:4px}
.cat{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 16px 14px;
  text-decoration:none; color:var(--ink); font-weight:550; font-size:.9rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.cat:hover{transform:translateY(-2px) scale(1.01); box-shadow:var(--shadow); color:var(--ink); border-color:var(--line-strong); text-decoration:none}
.cat span{
  font-size:1.25rem; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; background:var(--bg);
}
.c-restaurants,.c-restaurants-food,
.c-coffee,.c-contractors,.c-home-services,
.c-auto,.c-beauty,.c-shops,.c-retail,.c-services,
.c-health-wellness,.c-hospitality-travel,.c-pets,
.c-education,.c-entertainment,.c-civic{background:var(--surface)}

.list{display:grid; gap:12px}
.bizcard{
  display:flex; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; text-decoration:none; color:var(--ink);
  box-shadow:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.bizcard:hover{transform:translateY(-2px); box-shadow:var(--shadow); color:var(--ink); border-color:var(--line-strong); text-decoration:none}
.bizicon{
  width:48px; height:48px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; font-size:1.3rem; background:var(--bg);
}
.bizicon.xl{width:80px; height:80px; font-size:2rem; border-radius:16px}
.bizmeta{flex:1; min-width:0}
.bizname{font-weight:600; letter-spacing:-.025em; font-size:1.02rem}
.chev{color:var(--muted); font-size:1.25rem; opacity:.4}

.rating-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0}
.stars i{font-style:normal; color:var(--line-strong); font-size:1rem}
.stars i.on{color:var(--star)}
.stars.big i{font-size:1.35rem}
.yay-score{font-size:1.05rem; color:var(--yay); font-weight:600; letter-spacing:-.03em}
html[data-theme="dark"] .yay-score{color:var(--yay)}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:600; letter-spacing:.01em;
  padding:4px 10px 4px 8px; border-radius:var(--r-full);
  background:var(--bg); color:var(--muted); border:1px solid var(--line);
}
.badge svg{width:14px; height:14px}
.badge.sm{font-size:.7rem; padding:3px 8px 3px 6px}
.b-scan{background:var(--scanbg); color:var(--scan); border-color:transparent}
.b-receipt{background:var(--recbg); color:var(--rec); border-color:transparent}
.b-invite{background:var(--invbg); color:var(--inv); border-color:transparent}

.ticks{padding-left:0; list-style:none}
.ticks li{padding-left:28px; position:relative; margin:12px 0; font-weight:400; color:var(--ink)}
.ticks li:before{
  content:""; position:absolute; left:0; top:.35em;
  width:16px; height:16px; border-radius:50%;
  background:var(--yay) center / 10px 10px no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 6.5 11.5 12.5 4.5'/></svg>");
}
.explain{margin-top:var(--s-8); padding:32px !important}
.link{font-weight:600; text-decoration:none}
.link:hover{text-decoration:underline}

.bizhero{padding:36px 0 8px; background:var(--bg)}
.bizhead{display:flex; gap:16px; align-items:center}
.bizhead h1{margin:0; font-size:clamp(1.8rem, 3vw, 2.4rem)}
.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.72rem; font-weight:600; padding:3px 8px;
  border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface); color:var(--muted);
}
.tag.warn{background:var(--warnbg); color:var(--warn); border-color:transparent}
.tag.ok{background:var(--yay-soft); color:var(--yay-ink); border-color:transparent}
.tag.bad{background:var(--no-soft); color:var(--no-ink); border-color:transparent}
.blurb{color:var(--muted); font-size:1.02rem}
.scorecard{
  display:grid; gap:16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; box-shadow:var(--shadow); margin:16px 0;
}
.score{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.score .big{font-size:3rem; font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--yay)}
html[data-theme="dark"] .score .big{color:var(--yay)}
.drow{display:grid; grid-template-columns:28px 1fr 24px; gap:8px; align-items:center; font-size:.8rem}
.bar{height:6px; background:var(--bg); border-radius:9px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--star); border-radius:9px}
.howv{display:grid; gap:6px}
.hv{display:flex; justify-content:space-between; align-items:center}
.ctarow{display:flex; gap:8px; align-items:center; justify-content:flex-start; flex-wrap:wrap; margin:16px 0 8px}
.ctarow .btn{min-height:44px}

.review header{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.who{display:flex; gap:10px; align-items:center}
.av{
  width:36px; height:36px; border-radius:50%; background:var(--yay);
  color:#fff; display:grid; place-items:center; font-weight:600; font-size:.85rem;
}
.review p{margin:.5em 0}
.rtitle{margin-left:4px}
.resp{background:var(--bg); border-left:2px solid var(--yay); border-radius:10px; padding:12px 14px; margin-top:8px}
.resp p{margin:.3em 0 0}
.disclose{background:var(--warnbg); border-radius:10px; padding:6px 10px}
.disputed{background:var(--invite-soft); border-radius:10px; padding:6px 10px; color:var(--invite)}
.review footer a{text-decoration:none}
.empty{text-align:center; color:var(--muted); padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:8px}
.empty h2,.lead-empty h2{margin:0; text-wrap:balance}
.empty-art{width:96px; height:96px; margin:0 auto 12px; display:block}

.form label{display:block; font-weight:600; font-size:.9rem; margin:14px 0}
.form input:not([type=radio]):not([type=checkbox]):not([type=file]),
.form textarea,.form select{
  display:block; width:100%; margin-top:6px; font:inherit; font-weight:400;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  min-height:48px; background:var(--surface); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.form input:focus, .form textarea:focus, .form select:focus{
  outline:none; border-color:var(--yay); box-shadow:0 0 0 3px color-mix(in srgb, var(--yay) 18%, transparent);
}
.form textarea{resize:vertical}
.form label.check,.form label.radio{display:flex; gap:10px; font-weight:500; align-items:flex-start}
.form label.check input{margin-top:4px}
.form.inline{display:flex; gap:8px; flex-wrap:wrap; align-items:stretch}
.form.inline textarea,.form.inline input{flex:1 1 220px; margin:0!important}

.starpick{border:0; padding:0; margin:0; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.starpick legend{font-weight:600; font-size:.9rem; margin-bottom:4px}
.starpick input{position:absolute; opacity:0}
.starpick label{font-size:2.2rem; color:var(--line-strong); cursor:pointer; margin:0; line-height:1; transition:transform .15s var(--ease), color .15s}
.starpick input:checked~label,.starpick label:hover,.starpick label:hover~label{color:var(--star)}
.starpick label:hover{transform:scale(1.06)}
.starpick input:focus-visible+label{outline:2px solid var(--brand)}

.seg{display:flex; gap:6px; margin:8px 0; flex-wrap:wrap}
.seg label{margin:0}
.seg input{position:absolute; opacity:0}
.seg span{display:inline-block; padding:8px 14px; border-radius:var(--r-full); border:1px solid var(--line); font-weight:600; font-size:.85rem; background:var(--surface)}
.seg input:checked+span{background:var(--ink); border-color:var(--ink); color:var(--bg)}

.drop{
  display:block; border:1px dashed var(--line-strong);
  background:var(--bg);
  border-radius:16px; padding:20px; text-align:center; cursor:pointer; margin:10px 0!important;
}
.drop input{display:block; margin:0 auto 8px; max-width:100%}
.demo-only{background:var(--warnbg); border-radius:12px; padding:10px 14px; font-size:.88rem}
.demo-only summary{cursor:pointer; font-weight:600}
.verified-strip{display:flex; gap:10px; align-items:center; background:var(--yay-soft); border-color:transparent}
.back{display:inline-block; margin-top:16px; text-decoration:none; font-weight:500; color:var(--muted)}

.scanres{text-align:center; padding:32px 18px}
.scanres.ok{background:var(--yay-soft)}
.scanres.bad{background:var(--no-soft)}
.scanres.wait{background:var(--warnbg)}
.bigicon{
  width:72px; height:72px; margin:0 auto 8px; border-radius:50%;
  display:grid; place-items:center; font-size:2rem; font-weight:600;
  background:var(--surface); box-shadow:var(--shadow); color:var(--yay);
}
.scanres.bad .bigicon{color:var(--no)}
.pulse{animation:fade .5s var(--ease) 1}
@keyframes pop{0%{opacity:0}100%{opacity:1}}
.checks{list-style:none; padding:0; margin:8px 0}
.checks li{padding:8px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.checks li b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:.72rem; margin-right:6px; color:#fff}
.checks .ok b{background:var(--yay)}
.checks .bad b{background:var(--no)}
.checks .unk b{background:var(--muted)}

.dashhead{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.kpi{margin:0; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.kpi b{display:block; font-size:1.85rem; letter-spacing:-.04em; font-weight:600}
.actions2{display:grid; gap:12px; margin-top:12px}
.action{display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--ink); margin:0; transition:transform .2s var(--ease), box-shadow .2s}
.action:hover{transform:translateY(-2px); color:var(--ink); box-shadow:var(--shadow)}
.aicon{
  width:44px; height:44px; border-radius:12px; background:var(--bg); color:var(--ink);
  display:grid; place-items:center; font-size:1.2rem; flex:0 0 auto;
}
.action div{flex:1}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btnrow form{margin:0}
.note{background:var(--bg)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.chips.scroll{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.chip{
  flex:0 0 auto; padding:8px 14px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface);
  text-decoration:none; color:var(--ink); font-size:.85rem; font-weight:500;
  transition:background .2s, border-color .2s, color .2s;
}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip:hover{border-color:var(--line-strong); text-decoration:none; color:var(--ink)}
.chip.on:hover{color:var(--bg)}

.qrgrid{display:grid; gap:18px}
.poster{text-align:center; padding:32px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.pbrand{display:flex; align-items:center; justify-content:center; margin:0 auto 8px}
.pbrand .lockup{height:44px; width:auto; max-width:none}
.qrbox{position:relative}
.qrbox .qr-logo{
  position:absolute; left:50%; top:50%;
  width:18%; height:18%;
  transform:translate(-50%,-50%);
  background:#fff; border-radius:50%;
  padding:2.2%; box-sizing:border-box;
  object-fit:contain;
}
.poster h2{font-size:1.5rem; margin:.4em 0 .2em}
.plede{margin:0 0 14px}
.qrbox{background:#fff; border-radius:16px; padding:14px; display:inline-block; box-shadow:var(--shadow); border:1px solid var(--line)}
.qrbox svg{width:250px; height:250px; display:block}
.countdown{margin-top:8px; font-size:.85rem; color:var(--muted)}
.wrapcode{word-break:break-all; font-size:.72rem}
.tickets{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0; margin-top:14px; background:var(--surface); border:1px solid var(--line)}
.ticket{display:flex; gap:10px; align-items:center; padding:12px; border:1px dashed var(--line-strong)}
.ticket.used{opacity:.45}
.tq svg{width:96px; height:96px; display:block}
.tt{display:flex; flex-direction:column; font-size:.82rem; gap:2px}
.links{list-style:none; padding:0; margin:0}
.links li{display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.log{list-style:none; padding:0; margin:0}
.log li{padding:6px 0; border-bottom:1px solid var(--line)}
.prose{padding:48px 0 64px; max-width:68ch; margin-inline:auto}
.prose h1{margin:0 auto 16px; text-align:center; max-width:18ch}
.prose h2{margin:40px 0 12px}
.prose p,.prose li{max-width:68ch}
.draft{background:var(--no-soft); color:var(--no-ink); font-weight:600; border-radius:12px; padding:12px 16px; margin:0 0 24px; text-align:center}
.vstep h3{margin:.4em 0 .2em}
.vstep p{margin:.2em 0}
.testlogins ul{margin:.4em 0; padding-left:18px}
code{background:var(--bg); border-radius:6px; padding:1px 6px; font-size:.9em}
.keyout{background:var(--ink); color:#E8F2EE; padding:14px 16px; border-radius:12px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-size:.85rem}
html[data-theme="dark"] .keyout{background:#0A0A0A}
.prose-table{width:100%; border-collapse:collapse; overflow:auto}
.prose-table th,.prose-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.prose pre,pre.keyout{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.foot{margin-top:64px; border-top:1px solid var(--line); background:transparent; padding:48px 0 calc(32px + var(--bottom-nav-h)); text-align:center}
.foot .wrap > p{max-width:68ch; margin-inline:auto}
.foot-brand{margin:0 auto 16px; display:flex; justify-content:center}
.foot-brand a{display:inline-block; text-decoration:none}
.foot-brand .lockup{height:36px; width:auto; max-width:none}
.promise{font-weight:550}
.error-mark{height:48px; width:auto; max-width:none; margin:0 0 24px}

.promise b{color:var(--yay)}
.pager{display:flex; gap:16px; align-items:center; justify-content:center; margin:22px 0 8px}
.crumbs{margin:10px 0 6px; color:var(--muted)}
.attr{margin:24px 0 8px; max-width:52em}
fieldset{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 12px}

/* Yay / No — quiet, with a small check on Yay */
.yayno-pick{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0}
.yayno-pick input{position:absolute; opacity:0}
.yay-btn span,.no-btn span{
  display:flex; align-items:center; justify-content:center; min-height:96px;
  border-radius:16px; font-size:1.65rem; font-weight:600; letter-spacing:-.03em;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  transition:background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.yay-btn:hover span{border-color:var(--yay); color:var(--yay)}
.no-btn:hover span{border-color:var(--no); color:var(--no-ink)}
.yay-btn input:checked+span{
  background:var(--yay); border-color:var(--yay); color:#fff;
}
.yay-btn input:checked+span::after{
  content:""; width:18px; height:18px; margin-left:10px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 9.5 17 19 7'/></svg>") center / contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 9.5 17 19 7'/></svg>") center / contain no-repeat;
  animation:check-in .4s var(--ease);
}
.no-btn input:checked+span{
  background:var(--no); border-color:var(--no); color:#fff;
}
@keyframes check-in{
  from{opacity:0; transform:scale(.6)}
  to{opacity:1; transform:scale(1)}
}

.skeleton{background:linear-gradient(90deg, var(--bg) 25%, var(--line) 50%, var(--bg) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; border-radius:12px; color:transparent}
@keyframes shimmer{to{background-position:-200% 0}}
.fade-in{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(4,1fr); gap:2px;
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; color:var(--muted); font-size:.65rem; font-weight:550;
  padding:6px 4px; border-radius:10px; min-height:48px;
}
.bottom-nav a svg{width:22px; height:22px}
.bottom-nav a.on,.bottom-nav a:hover{color:var(--yay); background:transparent}

@media(max-width:719px){
  .bottom-nav{display:grid}
  .nav .hide-sm{display:none}
  body{padding-bottom:var(--bottom-nav-h)}
  .brand .lockup{height:44px}
  :root{--header-h:64px}
  .topin{height:var(--header-h)}
  .searchbox, .search-pill{border-radius:20px; flex-direction:column}
  .search-pill .div{width:auto; height:1px; margin:0 20px}
  .search-pill .pill-go, .searchbox .btn.primary{margin:8px 12px 12px; width:auto}
}

@media(min-width:720px){
  .hero{padding:96px 0 64px}
  .hero h1,.page-intro h1{font-size:clamp(3.25rem, 5.2vw, 4.5rem)}
  form.searchbox:not(.search-pill){grid-template-columns:1.6fr 1fr auto}
  form.searchbox:not(.search-pill) input{padding:14px 18px}
  form.searchbox:not(.search-pill) .btn.primary{margin:6px; border-radius:var(--r-full)}
  .list{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .actions2{grid-template-columns:1fr 1fr}
  .scorecard{grid-template-columns:auto 1fr auto; align-items:center}
  .qrgrid{grid-template-columns:minmax(320px,420px) 1fr}
  .methods3{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .foot{padding-bottom:48px}
  .bottom-nav{display:none}
  .chips.scroll{flex-wrap:wrap; overflow:visible}
}

@media(min-width:1100px){
  .cats{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:480px){
  .nav{gap:0; font-size:.82rem}
  .nav a{padding:7px 8px}
  .hero,.page-intro{padding:40px 0 32px}
  .wrap{padding-inline:16px}
  .hero .ctarow,.page-intro .ctarow{flex-direction:column; align-items:stretch}
  .hero .ctarow .btn,.page-intro .ctarow .btn{width:100%}
}

@media print{
  .lockup-dark{display:none!important}
  .lockup-light{display:block!important}
  .noprint,.demo-banner,.top,.foot,.flash,.bottom-nav,.theme-toggle{display:none!important}
  body{background:#fff; padding:0; color:#111}
  .card{box-shadow:none}
  .qrpage .qrgrid{display:block}
  .qrpage .poster{border:1px solid #0B5C47; max-width:560px; margin:0 auto; padding:40px}
  .qrpage .qrbox svg{width:340px; height:340px}
  .ticketpage .tickets{grid-template-columns:repeat(3,1fr); border:0}
  .ticket{break-inside:avoid}
}

.live{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--yay); margin-right:4px; animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.25}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .btn,.btn.primary,.yay-btn span,.no-btn span,.cat,.bizcard,.action{transform:none!important}
}

.plans{display:grid; gap:16px}
@media(min-width:720px){.plans{grid-template-columns:1fr 1fr}}
.illu{width:64px; height:64px; margin:0 auto 8px; display:block}

/* ---- directory: maps, hours, owner content, galleries ---- */
.biz-grid{display:grid; grid-template-columns: 1fr 320px; gap:28px; align-items:start; margin: 24px auto 48px;}
@media (max-width: 820px){ .biz-grid{grid-template-columns:1fr; gap:18px;} }
.biz-map{height:240px; width:100%; border-radius:12px; background:#e8efe9; z-index:0;}
.map-card, .contact-card{margin-bottom:16px;}
.map-attr{margin:8px 4px 0;}
.hours-now{margin:8px 0 0; font-size:.95rem;}
.hours-now.open b{color:var(--yay-ink,#0B5C47);}
.hours-now.closed b{color:var(--warn,#8a5a00);}
.hours-list{list-style:none; padding:0; margin:12px 0;}
.hours-list li{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:.92rem;}
.hours-list li.today{font-weight:650;}
.hours-row{display:flex; align-items:center; gap:10px; margin:6px 0; flex-wrap:wrap;}
.hours-day{width:7.5em; font-weight:600;}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin: 4px 0 18px; border-bottom:1px solid var(--line,#ddd); padding-bottom:8px;}
.tabs a{padding:6px 10px; border-radius:8px; text-decoration:none;}
.tabs a:hover, .tabs a:focus{background:var(--yay-soft,#e8f4ef);}
.owner-content{border-left:3px solid var(--yay-ink,#0B5C47);}
.owner-label{font-style:italic; margin-top:-8px;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin:12px 0;}
.gallery figure{margin:0;}
.gallery img{width:100%; height:140px; object-fit:cover; border-radius:10px; background:#eee;}
table.rates{width:100%; border-collapse:collapse; margin:8px 0 16px;}
table.rates th, table.rates td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line,#eee); vertical-align:top;}
.row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;}
.preset-row{display:grid; gap:16px; margin:12px 0 32px}
@media(min-width:720px){.preset-row{grid-template-columns:1fr 1fr}}
.preset-yay{border:2px solid #0B5C47}
.preset-no{border:2px solid #C0392B}
.preset-yay h3{color:#0B5C47}
.preset-no h3{color:#C0392B}
.preset-yay .qrbox svg,.preset-no .qrbox svg{width:180px; height:180px}
@media print{
  .preset-print{break-before:page}
  .preset-yay,.preset-no{break-inside:avoid}
}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:4px 12px; max-height:220px; overflow:auto; border:1px solid var(--line,#ddd); padding:8px; border-radius:8px;}
.btn.link{background:none; border:none; color:inherit; text-decoration:underline; cursor:pointer; padding:0; font:inherit;}
.addr{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0;}

/* ---------- features-v2: made-it-right, neighbors, repeats, staff, counter, most-yayed ---------- */
.tag.made{background:var(--yay-soft);color:var(--yay-ink);font-weight:600;}
.timeline{list-style:none;padding:0;margin:12px 0 0;border-left:2px solid var(--line);padding-left:16px;}
.timeline li{margin:0 0 12px;position:relative;}
.timeline li::before{content:"";position:absolute;left:-21px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--yay);box-shadow:0 0 0 3px var(--yay-soft);}
.timeline li.original::before{background:var(--no);box-shadow:0 0 0 3px var(--no-soft);}
.timeline .tl-when{color:var(--muted);font-size:.8rem;}
.meter,.neighbor-callout{display:flex;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:12px 0;}
.meter .share{font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:1.6rem;color:var(--yay-ink);}
.neighbor-callout{background:var(--yay-soft);border-color:transparent;}
.shout{display:inline-flex;align-items:center;gap:6px;background:var(--yay-soft);color:var(--yay-ink);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:600;}
.made-count{font-weight:600;color:var(--yay-ink);}
.score-extras{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:stretch;margin-top:4px;}
.score-extras .meter,.score-extras .neighbor-callout,.score-extras .made-count{margin:0;}
.score-extras .made-count{padding:12px 16px;display:flex;align-items:center;background:var(--yay-soft);border-radius:12px;}
.score-extras .neighbor-callout[hidden]{display:none;}
pre, .prose-table{overflow-x:auto;max-width:100%;}
pre code{white-space:pre-wrap;word-break:break-word;}


/* Vote / confirm */
.vote-page .confirm-line{font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:1.8rem;line-height:1.2;margin:.2rem 0 .4rem;}
.vote-page .confirm-line.xl,.vote-confirm.emphasis .confirm-line{font-size:2.2rem;}
.vote-page .suite-line{font-weight:700;font-size:1.2rem;margin:0;}
.vote-page .suite-line.xl,.vote-confirm.emphasis .suite-line{font-size:1.6rem;}
.vote-page .at-line{color:var(--muted);font-size:1.05rem;margin:.2rem 0 1rem;}
.vote-page .not-this{margin-top:14px;}
.vote-page .not-this a{font-weight:600;color:var(--yay-ink);}
.yay-ink{color:var(--yay-ink);} .no-ink{color:var(--no-ink);}
.btn.yay-fill{background:var(--yay);color:#fff;border-color:var(--yay);}
.btn.no-fill{background:var(--no);color:#fff;border-color:var(--no);}
.nearby-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px;}
.nearby-list .suite-line{display:block;font-weight:600;color:var(--yay-ink);}
.nearby-list a{display:block;text-decoration:none;color:inherit;}
.nearby-list .btn{margin-top:8px;}
.poster-preview img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff;}

/* Most Yayed */
.most-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;}
.most-list li{display:flex;align-items:center;gap:16px;}
.most-list .rank{font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:1.4rem;color:var(--yay-ink);width:2rem;text-align:center;}
.most-list li.top{border-color:var(--yay);box-shadow:0 0 0 1px var(--yay-soft);}
.most-list.compact li{padding:8px 0;border:none;display:flex;gap:10px;}
.disputed.under-review,.verification-note{background:var(--warnbg);color:var(--warn);padding:8px 12px;border-radius:8px;}

/* ---------- ownership anti-fraud ---------- */
.claim-docs{margin:20px 0;padding:16px 0;border-top:1px solid var(--line);}
.id-consent{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;}
.admin-docs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
@media(max-width:720px){.admin-docs{grid-template-columns:1fr;}}
.admin-docs .name-match{margin:12px 0;padding:8px 12px;border-radius:8px;font-weight:600;}
.admin-docs .name-match.ok{background:var(--yay-soft);color:var(--yay-ink);}
.admin-docs .name-match.warn{background:var(--warnbg);color:var(--warn);}
.admin-docs .masked{font-variant-numeric:tabular-nums;letter-spacing:.08em;}
.admin-docs .revealed{margin-left:8px;font-weight:600;}
.id-frame{width:100%;min-height:360px;border:1px solid var(--line);border-radius:12px;background:#fff;}
.warn-list{color:var(--warn);margin:8px 0;}

/* AI verification & moderation */
.lede{font-size:1.15rem;line-height:1.55;color:var(--muted);margin:0 0 1.2rem;}
.vscore-card{padding:24px;}
.vscore-head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;margin-bottom:16px;}
.vscore{font-family:var(--display);font-weight:700;font-size:3.2rem;letter-spacing:-.04em;line-height:1;color:var(--yay-ink);}
.vscore.mid{color:var(--warn);}
.vscore.high{color:var(--no-ink);}
.vrec{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:.2rem 0 .4rem;text-transform:capitalize;}
.vrisk-track{height:8px;background:var(--line);border-radius:999px;overflow:hidden;}
.vrisk-bar{height:100%;background:linear-gradient(90deg,var(--yay),#c4a35a,var(--no));border-radius:999px;transition:width .4s var(--ease);}
.vchecks{list-style:none;padding:0;margin:16px 0 32px;display:grid;gap:10px;}
.vchecks li{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.vchecks .vdot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none;background:var(--line-strong);}
.vchecks li.pass{border-color:transparent;background:var(--yay-soft);}
.vchecks li.pass .vdot{background:var(--yay);box-shadow:0 0 0 3px color-mix(in srgb,var(--yay) 20%,transparent);}
.vchecks li.fail{border-color:transparent;background:var(--no-soft);}
.vchecks li.fail .vdot{background:var(--no);}
.vchecks li.unknown .vdot{background:var(--star);}
.reasons{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px;}
.reasons li{padding:10px 14px;border-radius:12px;border:1px solid var(--line);}
.reasons li.pass{background:var(--yay-soft);border-color:transparent;}
.reasons li.fail{background:var(--no-soft);border-color:transparent;}
.risk-panel{box-shadow:var(--shadow-lg);}
.mod-item + .mod-item{margin-top:12px;}
.admin-docs + .card, .risk-embed{margin-top:16px;}
@media (max-width:640px){
  .vscore-head{grid-template-columns:1fr;}
  .vscore{font-size:2.4rem;}
}

/* Diligence-ready accessibility: skip link and visible focus */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  z-index:10000;
}
.skip-link:focus, .skip-link:focus-visible{
  position:absolute; left:12px; top:12px; width:auto; height:auto; overflow:visible;
  padding:8px 14px; background:#111; color:#fff; border-radius:8px;
  font-weight:600; text-decoration:none; outline:2px solid #fff; outline-offset:2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--yay, #0B6E4F);
  outline-offset:2px;
}

/* QR kits — quiet, editorial, emerald */
.kit-hero{padding:64px 0 16px; text-align:center}
.kit-hero h1{max-width:16ch; margin-inline:auto}
.kit-page{padding-bottom:72px}
.kit-page .h2{margin:36px 0 14px}
.kit-policy p{margin:0}
.kit-preview{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; margin-top:8px}
.kit-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kit-pair figure{margin:0; background:#fff; color:#1D1D1F; border-radius:18px; padding:12px; border:1px solid var(--line)}
.kit-pair figcaption{text-align:center; font-family:var(--display); font-weight:600; letter-spacing:-.03em; margin-top:6px}
.kit-pair figure:first-child figcaption{color:#0B5C47}
.kit-pair figure:last-child figcaption{color:#8A5A57}
.kit-qr svg{width:100%; height:auto}
.kit-free{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:22px; background:linear-gradient(180deg, var(--surface), var(--yay-soft))}
.kit-price{font-family:var(--display); font-size:2rem; letter-spacing:-.04em; font-weight:600; margin:.2rem 0 .6rem; line-height:1.05}
.kit-ph{display:block; margin-top:6px; font-family:var(--font); font-size:.68rem; font-weight:600; letter-spacing:.08em; color:var(--warn)}
.kit-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:16px}
.kit-grid > *{flex:1 1 260px; max-width:320px}
.kit-card{display:flex; flex-direction:column; gap:8px; min-height:100%}
.kit-card h3{margin:0}
.kit-card p{margin:0}
.kit-qty{margin-top:auto}
.kit-qty input{max-width:120px}
.kit-checkout{display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:22px}
.kit-ship-row{display:grid; grid-template-columns:1.4fr .6fr .8fr; gap:12px}
.kit-order + .kit-order{margin-top:12px}
.kit-status{display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:12px}
.kit-status label{margin:0; min-width:180px}
.kit-tm{margin-top:28px}
.kit-shot{display:block; border-radius:14px; overflow:hidden; background:#111; margin:0 0 12px}
.kit-shot img{width:100%; height:240px; object-fit:contain; object-position:center; background:#f3f3f4; display:block}
.kit-card h3 a{color:inherit; text-decoration:none}
.kit-finishes{border:0; margin:8px 0 0; padding:0}
.kit-finishes .check{font-weight:500; margin:6px 0}
.kit-finish-line{color:var(--muted)}
.kit-detail{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; margin-top:12px}
.kit-gallery{display:grid; gap:12px}
.kit-hero-photo,.kit-flat{width:100%; height:auto; border-radius:18px; background:#111}
.kit-finish-picks{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0}
.kit-finish-pick{display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; background:var(--surface)}
.kit-finish-pick.on{border-color:var(--yay); box-shadow:0 0 0 3px color-mix(in srgb, var(--yay) 18%, transparent)}
.kit-finish-pick img{width:64px; height:80px; object-fit:cover; border-radius:8px}
@media (max-width:800px){
  .kit-detail{grid-template-columns:1fr}
  .kit-shot img{height:200px}
}

/* Revenue surfaces — tokens only, mobile first */
.rev-page{padding-bottom:var(--s-8)}
.rev-hero h1{max-width:14ch}
.with-rail{display:grid; gap:var(--s-5); align-items:start}
.ad-block,.ad-rail{
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s-4);
}
.ad-kicker{
  margin:0 0 var(--s-2);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.ad-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--s-4);
  margin-top:var(--s-3);
}
.ad-card h3{margin:0 0 6px; font-size:1.05rem; letter-spacing:-.02em}
.ad-card h3 a{color:inherit; text-decoration:none}
.ad-card h3 a:hover{text-decoration:underline}
.ad-card p{margin:0 0 var(--s-3); color:var(--muted)}
.ad-img{width:100%; max-height:180px; object-fit:cover; border-radius:var(--r-sm); margin-bottom:var(--s-3)}
.ad-rail{margin-top:var(--s-4)}
.stat-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3); margin:var(--s-4) 0}
.plan-grid{display:grid; gap:var(--s-4); margin:var(--s-4) 0}
.attorney{border-left:3px solid var(--warn); margin-top:var(--s-5)}
.attorney h2{font-size:1.15rem; margin-top:0}
@media (min-width:800px){
  .plan-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (min-width:960px){
  .with-rail{grid-template-columns:minmax(0,1fr) 280px}
  .ad-rail{position:sticky; top:calc(var(--header-h) + var(--s-3)); margin-top:0}
}
@media (max-width:800px){
  .kit-hero{padding-top:36px}
  .kit-preview, .kit-free, .kit-checkout{grid-template-columns:1fr; display:grid}
  .kit-ship-row{grid-template-columns:1fr}
  .kit-checkout{align-items:stretch}
}

/* Website widget dashboard */
.plan-grid{display:grid; gap:12px}
@media (min-width:720px){.plan-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.plan-grid{grid-template-columns:1fr 1fr 1fr}}
.wdg{padding-bottom:64px}
.wdg-head{display:grid; gap:16px; margin-top:8px}
.wdg-kicker{
  margin:18px 0 0; font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.wdg h1{margin:.15em 0 0; font-size:clamp(2rem, 4vw, 2.75rem); max-width:16ch; text-wrap:balance}
.wdg-lede{margin:12px 0 0; font-size:1.0625rem; max-width:62ch; color:var(--ink)}
.wdg-price{margin:0}
.wdg-price p{margin:0}
.wdg-status{
  display:inline-flex; align-items:center; min-height:28px; padding:0 10px;
  border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.wdg-status.on{background:var(--yay-soft); color:var(--yay-ink)}
.wdg-status.off{background:var(--bg); color:var(--ink); border:1px solid var(--line)}
.wdg-amt{
  margin-top:10px !important; font-family:var(--display); font-weight:600;
  font-size:2.25rem; letter-spacing:-.04em; line-height:1;
}
.wdg-amt span{font-size:1rem; letter-spacing:0; color:var(--muted); font-weight:500}
.wdg-price p:last-child{margin-top:8px; color:var(--muted); font-size:.875rem}
.wdg-banner{border-radius:14px; padding:14px 16px; margin:20px 0 0; font-weight:500}
.wdg-banner.on{background:var(--yay-soft); color:var(--yay-ink)}
.wdg-banner.off{background:var(--bg); border:1px solid var(--line); color:var(--ink)}
.wdg section{margin-top:28px}
.wdg .h2{margin:0 0 12px; font-size:1.35rem}
.wdg-choices{display:grid; gap:8px}
.wdg-choice{
  display:flex; flex-direction:column; gap:4px; min-height:72px;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); color:var(--ink); text-decoration:none;
}
.wdg-choice b{font-family:var(--display); font-weight:600; letter-spacing:-.02em}
.wdg-choice span{color:var(--muted); font-size:.875rem; line-height:1.4}
.wdg-choice:hover{border-color:var(--line-strong); color:var(--ink); text-decoration:none}
.wdg-choice.on{border-color:var(--yay); box-shadow:inset 0 0 0 1px var(--yay); background:var(--yay-soft)}
.wdg-choice.on span{color:var(--yay-ink)}
.wdg-split{display:grid; gap:8px}
.wdg-caption{margin:0 0 8px; font-size:.8125rem; font-weight:600; color:var(--muted)}
.wdg-frame{
  width:100%; max-width:100%; border:0; border-radius:18px; display:block;
  background:var(--bg); margin:0 0 14px;
}
.wdg-code{padding:0; overflow:hidden}
.wdg-codehead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px 0;
}
.wdg-codehead h3{margin:0; font-size:1rem}
.wdg-code .keyout{margin:12px; max-width:100%}
.wdg-domains{list-style:none; padding:0; margin:0 0 16px}
.wdg-domains li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.wdg-domains li span{font-weight:600; overflow-wrap:anywhere}
.wdg-domains form{margin:0}
.wdg-domains .btn, .wdg-code .btn, .wdg-add .btn{min-height:44px}
.wdg-add label{margin-top:0}
.wdg-addrow{display:grid; gap:8px}
.wdg-add input{font-size:16px; min-height:44px; width:100%}
.wdg-empty{color:var(--muted)}
.wdg-buy h2{margin:0 0 8px; font-size:1.35rem}
.wdg-policy h2{margin:0 0 8px; font-size:1.15rem}
.wdg-policy p{margin:.4em 0}
@media (min-width:720px){
  .wdg-choices{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .wdg-addrow{grid-template-columns:minmax(0, 1fr) auto; align-items:center}
}
@media (min-width:880px){
  .wdg-head{grid-template-columns:minmax(0, 1.5fr) minmax(220px, 280px); align-items:start; gap:28px}
  .wdg-split{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; align-items:start}
}
@media (max-width:719px){
  .wdg-choice, .wdg-add .btn, .wdg-buy .btn{width:100%}
}
/* YayNo Plus leads — mobile first, one decision at a time.
   Status colors reuse the existing tokens (warn on warnbg, yay ink on yay soft),
   and every state also has a text label. */
.plan-grid{grid-template-columns:1fr}
.lead-flow{padding:28px 0 calc(32px + env(safe-area-inset-bottom))}
.lead-flow h1{font-size:clamp(2rem, 7vw, 3rem); margin:8px 0 12px}
.lead-flow .lede{margin:0 0 16px}
.lead-flow .page-intro .lede{text-align:center; margin-inline:auto; max-width:62ch}
.lead-flow .h2{margin:28px 0 12px}
.lead-steps{margin:0 0 20px; padding-left:1.2rem}
.lead-steps li{margin:6px 0}
.lead-form .btn,.lead-actions .btn,.lead-pause .btn{min-height:48px}
.lead-flow .form input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]),
.lead-flow .form textarea,.lead-flow .form select{min-height:48px}
.lead-flow .form textarea{min-height:120px}
.lead-flow label.check{padding:8px 0; min-height:48px}
.choice-set{border:0; margin:0 0 8px; padding:0}
.choice-set legend{font-weight:600; margin-bottom:8px}
.choice-row{display:grid; gap:10px}
.choice-stack{grid-template-columns:1fr}
.choice{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px;
  padding:14px; min-height:48px; background:var(--surface); cursor:pointer;
}
.choice:has(input:checked){border-color:var(--yay); box-shadow:0 0 0 3px color-mix(in srgb, var(--yay) 18%, transparent)}
.choice input{width:1.15rem; height:1.15rem; margin-top:3px; accent-color:var(--yay)}
.choice b{display:block}
.choice small{display:block; color:var(--muted); font-weight:400}
.hp{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden}
.lead-price-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; margin:0 0 16px}
.lead-price{font-family:var(--display); font-size:clamp(1.7rem, 6vw, 2.4rem); letter-spacing:-.04em; line-height:1.15; margin:4px 0}
.lead-flag{display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); margin:0 0 8px}
.lead-state{display:flex; flex-direction:column; gap:2px; border-radius:16px; padding:16px 18px; margin:0 0 16px}
.lead-state b{font-family:var(--display); font-size:1.35rem; letter-spacing:-.03em}
.lead-state.wait{background:var(--warnbg); color:var(--warn)}
.lead-state.ok{background:var(--yay-soft); color:var(--yay-ink)}
.lead-state.quiet{background:var(--bg-tint); color:var(--ink)}
.lead-state.bad{background:var(--no-soft); color:var(--no-ink)}
.lead-kicker{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.lead-actions{display:grid; gap:10px; margin-top:16px}
.lead-pause{margin-top:12px}
.lead-nav{display:flex; gap:8px; overflow:auto; padding:4px 0 12px}
.lead-nav a{
  flex:0 0 auto; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  min-height:44px; display:inline-flex; align-items:center;
  background:var(--surface); font-weight:600;
}
.lead-nav a[aria-current="page"]{background:var(--ink); color:var(--bg); border-color:transparent}
.lead-list{display:grid; gap:12px}
.lead-row{display:grid; gap:6px; text-decoration:none; color:inherit}
.lead-row:hover{border-color:var(--line-strong); color:inherit}
.lead-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.lead-pill{display:inline-flex; align-items:center; min-height:28px; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:700}
.tone-wait{background:var(--warnbg); color:var(--warn)}
.tone-ok{background:var(--yay-soft); color:var(--yay-ink)}
.tone-quiet{background:var(--bg-tint); color:var(--ink)}
.tone-bad{background:var(--no-soft); color:var(--no-ink)}
.lead-kpis{display:grid; gap:12px; margin:0 0 8px}
.lead-kpis b{display:block; font-family:var(--display); font-size:1.8rem; letter-spacing:-.03em}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.timeline li{display:grid; grid-template-columns:12px 1fr; gap:12px}
.timeline i{width:12px; height:12px; border-radius:99px; background:var(--yay); margin-top:6px}
.ledger{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ledger-top{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.contact-dl{display:grid; gap:10px; margin:12px 0}
.contact-dl div{display:grid; gap:2px}
.contact-dl dt{font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.contact-dl dd{margin:0; font-size:1.05rem}
.ledger-amt{grid-template-columns:repeat(3, 1fr)}
.field-error{color:var(--no-ink); font-size:.875rem; margin:4px 0 0}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"]{border-color:var(--no)}
.counsel{margin-top:8px}
.counsel summary{cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center}
.counsel-line{margin-top:16px}
.price-list{list-style:none; padding:0; margin:8px 0}
.price-list li{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line)}
.price-list b{font-weight:600; text-align:right}
.lead-empty h2{margin:0 0 8px; font-size:1.35rem}
.lead-admin + .lead-admin{margin-top:12px}
@media (max-width:719px){
  .lead-flow{padding-bottom:calc(24px + var(--bottom-nav-h) + env(safe-area-inset-bottom))}
}
@media (min-width:560px){
  .choice-row:not(.choice-stack){grid-template-columns:1fr 1fr}
  .lead-actions{grid-template-columns:1fr 1fr}
}
@media (min-width:720px){
  .plan-grid{grid-template-columns:repeat(3, 1fr)}
  .lead-kpis{grid-template-columns:1fr 1fr}
}

/* Claim landing — the page printed on flyers and counter cards. */
.claim-hero{padding-bottom:8px}
.claim-land{padding:8px 0 72px}
.claim-hits{display:grid; gap:12px}
.claim-hit{display:grid; gap:14px; align-items:center}
.claim-hit .bizname{font-family:var(--display); font-weight:600; letter-spacing:-.03em; font-size:1.2rem}
.auth{padding-top:32px; padding-bottom:64px}
.auth > h1,.auth .page-intro{text-align:center}
.auth .page-intro h1{font-size:clamp(2rem, 4vw, 2.75rem); max-width:18ch}
.auth > p{text-align:center; max-width:52ch; margin-inline:auto}
.founding-card .page-intro h2{max-width:28ch}
.balance.addons > *{flex-basis:320px; max-width:440px}
.price-card h2,.price-card h3,.price-card .eyebrow{text-align:center}
.price-card h3{min-height:2.8em; display:flex; align-items:flex-end; justify-content:center}
.bizhero{padding:48px 0 16px}
.balance{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px; margin:16px 0 32px}
.balance > *{flex:1 1 240px; max-width:280px; min-width:min(100%, 240px); display:flex; flex-direction:column; text-align:left}
.balance > * .btn,.balance > * .card-foot{margin-top:auto; width:100%}
.price-main{
  font-family:var(--display); font-weight:600; letter-spacing:-.04em; line-height:1.15;
  font-size:clamp(1.7rem, 2.4vw, 2.15rem); margin:.25em 0 .6em; text-align:center; text-wrap:balance;
}
.price-card .ad-kicker,.price-card h3{text-align:center; margin-left:auto; margin-right:auto}
.price-card h3{font-size:1.2rem; margin:0 0 8px}
.search-band{padding:32px 0 8px; text-align:center}
.search-band .chips{justify-content:center}
.h2 .count{margin-left:.45em; font-weight:500; color:var(--muted); font-size:.7em}
.dashhead{margin-top:32px; align-items:flex-end}
.kpis,.actions2{align-items:stretch}
.kpi,.action{height:100%}
.lead-kpis .card{display:flex; flex-direction:column; justify-content:center; min-height:112px}
.lead-empty,.empty{text-align:center}
.bizhead h1{text-wrap:balance}
.score{align-items:center}
.claim-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.claim-actions .btn{min-height:44px}
@media (min-width:720px){
  .claim-hit{grid-template-columns:minmax(0, 1fr) auto}
  .claim-actions{justify-content:flex-end}
}
@media (max-width:719px){
  .claim-actions, .claim-actions .btn{width:100%}
  .claim-actions{flex-direction:column; align-items:stretch}
}