/* For business. Customers who asked, a live sample inbox, pay per lead in the coin.
   Green is go. Orange is the coin. White marks a request that came straight from the customer. */

/* ---------- first screen: the words beside three people asking ---------- */
.bhero{position:relative;padding:clamp(26px,4.4vw,72px) 0 clamp(30px,5vw,72px)}
.bhero__grid{display:grid;gap:30px}
.bhero__grid>*{min-width:0}
.bhero h1{margin-top:14px;max-width:11ch;font-size:clamp(2.75rem,10.4vw,5.3rem);line-height:.98;letter-spacing:-.02em}
.bhero .lead{margin-top:16px;max-width:44ch}
.bhero__act{margin-top:22px}
.bhero__act .btn{width:100%}
.bhero__viz{position:relative}
.bhero__viz::before{content:"";position:absolute;inset:-6% -4% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side at 30% 40%,rgba(99,217,54,.2),transparent),radial-gradient(closest-side at 78% 70%,rgba(255,138,36,.16),transparent);filter:blur(14px)}
.say{display:grid;gap:12px}
.say__b{position:relative;justify-self:start;max-width:min(90%,400px);padding:14px 16px 12px;border-radius:22px 22px 22px 6px;background:linear-gradient(180deg,#fff,#e4eadf);color:#0b0e0b;box-shadow:inset 0 1px 0 #fff,0 26px 50px -26px #000}
.say__b:nth-child(2){justify-self:end;border-radius:22px 22px 6px 22px}
.say__q{font:700 1.08rem/1.28 var(--sans)}
.say__m{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:.85rem;font-weight:600;color:#38423a}
.say__m .icon{width:17px;height:17px}
.bhero__tag{margin-top:14px}
@media (min-width:560px){.bhero__act .btn{width:auto}}
@media (min-width:980px){
  .bhero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}
  .say{gap:18px}
  .say__b{max-width:430px;padding:20px 22px 16px;border-radius:28px 28px 28px 8px}
  .say__b:nth-child(2){border-radius:28px 28px 8px 28px}
  .say__b:nth-child(3){margin-left:9%}
  .say__q{font-size:1.32rem}
  .say__m{font-size:.92rem}
  .bhero__tag{margin-left:9%}
}

/* ---------- how it works: one glass panel, three cells, outlined numbers ---------- */
.how__list{display:grid;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 70px -44px #000}
.how__s{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);align-content:start;gap:5px 12px;padding:22px 20px 22px}
.how__s+.how__s{border-top:1px solid var(--line)}
.how__n{grid-row:1/span 4;font:900 4.1rem/.8 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--green-hi);text-shadow:0 0 26px rgba(99,217,54,.3)}
.how__s--o .how__n{-webkit-text-stroke-color:var(--orange-hi);text-shadow:0 0 26px rgba(255,138,36,.34)}
.how__s h3{font-size:1.36rem}
.how__s p{grid-column:2;color:var(--text-2)}
.how__link{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px}
@media (min-width:860px){
  .how__list{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-xl)}
  .how__s{grid-template-columns:minmax(0,1fr);gap:8px;padding:34px 32px 34px}
  .how__s+.how__s{border-top:0;border-left:1px solid var(--line)}
  .how__n{grid-row:auto;margin-bottom:16px;font-size:6.6rem}
  .how__s h3{font-size:1.6rem}
  .how__s p,.how__link{grid-column:1}
  /* a small arrow sits on each divider so the three cells read as a sequence */
  .how__s+.how__s::before{content:"";position:absolute;left:-18px;top:62px;width:36px;height:36px;border-radius:50%;background:#101410;border:1px solid var(--line-2)}
  .how__s+.how__s::after{content:"";position:absolute;left:-6px;top:75px;width:9px;height:9px;border-right:2.5px solid var(--text-2);border-top:2.5px solid var(--text-2);transform:rotate(45deg)}
}

/* ---------- the live sample inbox ---------- */
.inbox{display:flex;flex-direction:column;gap:14px}
.inbox__side{display:contents}
.inbox__main{order:1;min-width:0}
.inbox__ctl{order:2}
/* the wallet stays in view on a phone, so every take shows the balance drop */
.wal{order:0;position:sticky;top:calc(var(--top) + 8px);z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 16px 13px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -40px 60px -40px rgba(255,138,36,.3),0 22px 40px -18px #000}
.wal__k{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.wal__n{display:flex;align-items:baseline;gap:8px;margin-top:6px;font:800 2rem/1 var(--display);letter-spacing:-.02em;color:var(--orange-hi);transform-origin:0 60%;transition:transform var(--t-2) var(--spring)}
.wal__n .coin{align-self:center;font-size:1.2rem}
.wal__u{font:600 .86rem/1 var(--sans);letter-spacing:0;color:var(--orange-pale)}
.wal.bump .wal__n{transform:scale(1.07)}
.wal__mini{display:flex;gap:16px;text-align:right}
.wal__mini dt{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wal__mini dd{margin-top:5px;font:800 1.2rem/1 var(--display)}
.wal__low{grid-column:1/-1;padding-top:10px;border-top:1px solid rgba(255,138,36,.34);font-size:.92rem;line-height:1.45;color:var(--orange-pale)}
.wal__low strong{color:#fff}
.wal__low .link{white-space:nowrap}
.anim .wal.shake{animation:wal-shake .42s var(--ease)}
@keyframes wal-shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}100%{transform:none}}

.inbox__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px 0}
.inbox__head h3{display:flex;align-items:center;gap:10px;font-size:1.3rem}
.inbox__head h3:focus{outline:none}
.livedot{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.livedot::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px rgba(140,240,96,.6);opacity:0}
.anim .inbox.is-live .livedot::after{animation:bping 1.6s var(--ease) infinite}
@keyframes bping{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}
.inbox__count{font-size:.9rem;font-weight:600;color:var(--text-2);white-space:nowrap}
.inbox__for{margin-top:6px;padding:0 2px;font-size:.92rem;color:var(--green-pale);overflow-wrap:anywhere}

.offers{display:grid;gap:12px;margin-top:12px}
.offer{position:relative;padding:16px 16px 15px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 60px -44px #000}
.offer__top{display:flex;align-items:center;gap:10px;min-height:26px}
.offer__cat{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-pale)}
.offer__cat .icon{width:18px;height:18px}
.offer__flag--new{display:none}
.offer.is-new .offer__flag--new{display:inline-flex}
.offer__age{margin-left:auto;font-size:.85rem;color:var(--text-3);white-space:nowrap}
.offer__need{margin-top:10px;font:800 1.2rem/1.2 var(--display);letter-spacing:-.005em}
.offer__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.offer__city{display:inline-flex;align-items:center;gap:5px;font-size:.93rem;color:var(--text-2)}
.offer__city .icon{width:17px;height:17px;color:var(--text-3)}
.offer__src--ask{background:#fff;color:#0b0e0b}
.offer__who{display:flex;align-items:center;gap:10px;min-height:50px;margin-top:14px;padding:8px 12px;border-radius:14px;background:#0a0d0a;border:1px dashed var(--line-3)}
.offer__who:focus{outline:none}
.offer__lock{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--text-2)}
.offer__lock .icon{width:18px;height:18px}
.offer__mask{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.66rem;letter-spacing:.2em;color:var(--text-3)}
.offer__real{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.offer__real b{font:800 1.12rem/1.2 var(--display)}
.offer__real span{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.offer__done{display:grid;gap:5px;margin-top:11px}
.offer__ok{display:flex;align-items:center;gap:6px;font-size:.87rem;color:var(--text-2)}
.offer__ok .icon{width:16px;height:16px;color:var(--green-hi)}
.offer__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:14px}
.offer__price{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:4px 7px;font:800 1.6rem/1 var(--display);color:var(--orange-hi)}
.offer__price .coin{font-size:1rem}
.offer__price small{grid-column:1/-1;font:600 .82rem/1 var(--sans);color:var(--orange-pale)}
.offer__act{display:flex;gap:8px;margin-left:auto}
.offer__act .btn{min-width:84px}
.offer__short{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,138,36,.12);border:1px solid rgba(255,138,36,.45);font-size:.93rem;line-height:1.45;color:var(--orange-pale)}
.offer__short strong{display:block;color:#fff}
.offer__short .link{white-space:nowrap}
.offer__paid{font-size:.93rem;font-weight:600;color:var(--green-pale)}
.offer.is-taken{border-color:rgba(99,217,54,.5);background:linear-gradient(180deg,rgba(99,217,54,.13),rgba(99,217,54,.035))}
.offer.is-taken .offer__who{border-style:solid;border-color:rgba(99,217,54,.45);background:rgba(99,217,54,.09)}
.offer.is-taken .offer__lock{background:var(--green);color:var(--green-ink)}
.anim .offer.is-taken .offer__who{animation:who-in .5s var(--ease)}
@keyframes who-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.offers__empty{padding:22px 18px;border-radius:22px;border:1px dashed var(--line-3);color:var(--text-2)}
.offers__empty strong{display:block;margin-bottom:4px;font:800 1.2rem/1.2 var(--display);color:var(--text)}
.offers__empty .btn{margin-top:14px}
.inbox__fine{margin-top:14px;padding:0 2px;font-size:.88rem;color:var(--text-3)}
.inbox__ctl{padding-top:16px;border-top:1px solid var(--line)}
.inbox__ctl-k{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.inbox__ctl-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

@media (min-width:980px){
  .inbox{display:grid;grid-template-columns:330px minmax(0,1fr);gap:32px;align-items:start}
  .inbox__side{display:block;position:sticky;top:calc(var(--top) + 20px)}
  .wal{position:relative;top:auto;grid-template-columns:minmax(0,1fr);gap:0;padding:24px 24px 22px;border-radius:var(--r-lg)}
  .wal__n{margin-top:12px;font-size:3.3rem;flex-wrap:wrap}
  .wal__n .coin{font-size:1.8rem}
  .wal__u{flex-basis:100%;margin-top:6px;font-size:.98rem}
  .wal__mini{gap:0;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:left}
  .wal__mini>div{flex:1}
  .wal__mini dd{font-size:1.6rem}
  .wal__low{margin-top:16px;padding-top:14px}
  .inbox__ctl{margin-top:18px;padding:0 4px;border-top:0}
  .inbox__head{padding-top:0}
  .offer{display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-areas:"top who" "need who" "meta foot" "short short";column-gap:28px;align-items:start;padding:20px 22px 18px}
  .offer__top{grid-area:top}
  .offer__need{grid-area:need;font-size:1.3rem}
  .offer__meta{grid-area:meta}
  .offer__who{grid-area:who;margin-top:0}
  .offer__foot,.offer__done{grid-area:foot;align-self:end;margin-top:12px}
  .offer__short{grid-area:short}
}

/* ---------- sample prices ---------- */
.prices__in{display:grid;gap:26px}
.prices__in>*{min-width:0}
.prices__copy h2{margin-top:12px;max-width:12ch}
.prices__copy .lead{margin-top:14px}
.prices__copy .note{margin-top:18px;max-width:46ch}
.prices__card{padding:6px 14px 6px;border-radius:var(--r-lg)}
.ptable thead th{padding:14px 4px 10px}
.ptable .ptable__g th{padding:20px 4px 8px;border-bottom:1px solid var(--line-2);color:var(--green-pale)}
.ptable .ptable__g--ask th{color:#fff}
.ptable tbody th[scope="row"]{position:relative;padding:13px 6px 13px 56px;border-bottom:1px solid var(--line);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text)}
.ptable tbody tr:last-child th[scope="row"],.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody+tbody tr:last-child th[scope="row"]{border-bottom:0}
.ptable tbody:first-of-type tr:last-child th[scope="row"],.ptable tbody:first-of-type tr:last-child td{border-bottom:0}
.ptable td{padding:13px 4px}
.ptable__ic{position:absolute;left:4px;top:50%;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border-radius:12px;background:rgba(99,217,54,.14);box-shadow:inset 0 0 0 1px rgba(99,217,54,.38);color:var(--green-hi)}
.ptable__ic--w{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--line-3);color:#fff}
.ptable__t b{display:block;font:800 1.08rem/1.2 var(--display)}
.ptable__t small{display:block;margin-top:3px;font-size:.86rem;line-height:1.35;color:var(--text-2)}
.ptable td.r{white-space:nowrap;vertical-align:middle}
.ptable__p{display:inline-flex;align-items:center;gap:7px;font:800 1.34rem/1 var(--display);color:var(--orange-hi)}
.ptable__p .coin{font-size:.95rem}
.ptable td .sample{display:flex;width:max-content;margin:6px 0 0 auto}
@media (min-width:560px){
  .prices__card{padding:10px 24px 10px}
  .ptable td .sample{display:inline-flex;margin:0 0 0 12px;vertical-align:middle}
}
@media (min-width:980px){
  .prices__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
  .prices__copy{position:sticky;top:calc(var(--top) + 30px)}
}

/* ---------- lead quality, on a bright band ---------- */
.qual__head h2{margin-top:12px;max-width:12ch;font-size:clamp(2.4rem,8.6vw,4.4rem);line-height:.99}
.qual__grid{display:grid;gap:12px;margin-top:clamp(24px,4vw,44px)}
.qual__grid>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:4px 14px;padding:20px 18px;border-radius:24px;background:#fff;box-shadow:0 1px 0 #fff inset,0 22px 44px -30px rgba(11,14,11,.55)}
.qual__ic{grid-row:1/span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#0b0e0b;color:var(--green-hi)}
.qual__ic .icon{width:24px;height:24px;stroke-width:2.2}
.qual__grid h3{align-self:end;font-size:1.3rem}
.qual__grid p{font-size:1.01rem;line-height:1.48;color:#2b342b}
@media (min-width:700px){.qual__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1080px){
  .qual__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .qual__grid>li{grid-template-columns:minmax(0,1fr);gap:8px;padding:26px 24px 28px}
  .qual__ic{grid-row:auto;margin-bottom:10px}
}

/* ---------- questions ---------- */
.faq__in{display:grid;gap:22px}
.faq__in>*{min-width:0}
.faq__head h2{margin-top:12px}
.faq__list{display:grid;gap:10px}
.faq__q{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--line);transition:border-color var(--t-2)}
.faq__q[open]{border-color:rgba(99,217,54,.5)}
.faq__q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:12px 16px 12px 18px;border-radius:20px;cursor:pointer;list-style:none}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary h3{font-size:1.2rem}
.faq__q summary i{position:relative;flex:none;display:block;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);transition:background var(--t-2)}
.faq__q summary i::before,.faq__q summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.5px;margin:-1.25px 0 0 -6.5px;border-radius:2px;background:#fff;transition:transform var(--t-2) var(--ease)}
.faq__q summary i::after{transform:rotate(90deg)}
.faq__q[open] summary i{background:var(--green);box-shadow:none}
.faq__q[open] summary i::before,.faq__q[open] summary i::after{background:var(--green-ink)}
.faq__q[open] summary i::after{transform:rotate(0deg)}
.faq__a{padding:0 18px 18px;color:var(--text-2);max-width:64ch}
.faq__a .link,.wal__low .link,.offer__short .link{padding-block:12px}
.anim .faq__q[open] .faq__a{animation:faq-in .34s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .faq__in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:60px;align-items:start}
  .faq__q summary{padding:14px 20px 14px 24px;min-height:72px}
  .faq__q summary h3{font-size:1.34rem}
  .faq__a{padding:0 24px 22px}
}

/* ---------- closing action ---------- */
.bcta__in{display:grid;gap:22px;padding:30px 22px 30px;border-radius:var(--r-lg)}
.bcta__in h2{max-width:13ch}
.bcta__copy p{margin-top:12px;color:var(--text-2);max-width:44ch}
.bcta__in .btn{width:100%}
@media (min-width:560px){.bcta__in .btn{width:auto;justify-self:start}}
@media (min-width:900px){.bcta__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:54px 56px;border-radius:var(--r-xl)}}

/* ---------- claim your business, in a sheet ---------- */
.claim .sheet__head{margin-bottom:18px}
.claim .sheet__head h2:focus,.claim__done h3:focus{outline:none}
.claim__k{margin-bottom:8px;font:700 .76rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--green-hi)}
.claim__form{display:grid;gap:14px}
.claim__two{display:grid;gap:14px}
@media (min-width:460px){.claim__two{grid-template-columns:1fr 1fr}}
.claim__form .btn{margin-top:6px}
.claim__fine{font-size:.85rem;color:var(--text-3);text-align:center}
.claim__done{display:grid;gap:14px;justify-items:start}
.claim__ok{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#e6ffd9 0,#8cf060 34%,#49b922 68%,#1d6a0e 100%);color:var(--green-ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34),0 0 30px rgba(99,217,54,.55)}
.claim__ok .icon{width:30px;height:30px;stroke-width:2.6}
.anim .claim__done:not([hidden]) .claim__ok{animation:ok-pop .5s var(--spring)}
@keyframes ok-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.claim__done h3{font-size:1.7rem;overflow-wrap:anywhere}
.claim__sum{color:var(--text-2)}
.claim__done .note{justify-self:stretch}