/* smm.guide — core.css
Loaded by every page, first (src/css-bundles.js says which page loads which file).
What pages of more than one area use. A rule used by the pages of one area belongs in that area's file.
Split out of main.css on 27.09.2026: rules keep their old order within each file. */
/* ==========================================================================
smm.guide design system — 2026 redesign
Emerald + white, system font stack, Trustpilot-style block stars.
========================================================================== */
/* ---------- reset & tokens ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#ffffff; --bg2:#f6f8f7; --bg3:#fafbfa;
--ink:#101613; --ink2:#5c6660; --ink3:#66706a;
--line:rgba(16,22,19,.10); --line2:rgba(16,22,19,.06);
--em:#0a8a5f; --em2:#10b077; --em-dark:#075940; --em-ink:#0b6b4a;
--em-soft:#e9f6f0; --em-soft2:#d9efe4;
--ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
--dark:#0c1210; --dark2:#131b17; --dark3:#1a2420;
--r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px; --pill:980px;
--sh-s:0 1px 2px rgba(16,22,19,.05),0 2px 8px rgba(16,22,19,.05);
--sh-m:0 1px 2px rgba(16,22,19,.05),0 6px 16px rgba(16,22,19,.06),0 16px 40px -8px rgba(16,22,19,.12);
--sh-l:0 2px 4px rgba(16,22,19,.06),0 12px 24px rgba(16,22,19,.07),0 32px 80px -16px rgba(16,22,19,.24);
--sh-em:0 1px 2px rgba(7,89,64,.3),0 8px 24px -6px rgba(10,138,95,.45),inset 0 1px 0 rgba(255,255,255,.22);
--ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background:var(--bg); color:var(--ink); font-size:16.5px; line-height:1.55;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
/* clip, like the root further down: `hidden` alone turned the body into a scroll container the moment the root
got an overflow of its own, and the sticky header and side columns then stuck to a box that never scrolls */
overflow-x:hidden;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
::selection{background:var(--em-soft2);color:var(--em-dark)}
html.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-r].in{opacity:1;transform:none}
html.js [data-r].now{transition:none}
@media (prefers-reduced-motion:reduce){
[data-r]{opacity:1;transform:none;transition:none}
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.028em;line-height:1.08}
.sub{color:var(--ink2);font-size:18.5px;line-height:1.55}
.small{font-size:13px;color:var(--ink3)}
/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:640;font-size:15px;
padding:12px 24px;border-radius:var(--pill);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,filter .25s;
white-space:nowrap;will-change:transform}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:linear-gradient(180deg,#11a874,#0a8a5f 78%);color:#fff;box-shadow:var(--sh-em)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1.5px);
box-shadow:0 2px 4px rgba(7,89,64,.3),0 14px 34px -6px rgba(10,138,95,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-dark{background:linear-gradient(180deg,#1d2723,#0c1210);color:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -8px rgba(12,18,16,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.btn-dark:hover{transform:translateY(-1.5px);filter:brightness(1.15)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.6);box-shadow:var(--sh-s)}
.btn-ghost:hover{border-color:rgba(16,22,19,.22);transform:translateY(-1.5px);box-shadow:var(--sh-m)}
.btn-sm{padding:8.5px 18px;font-size:13.5px}
.btn svg{width:15px;height:15px}
.link-more{font-size:14.5px;font-weight:650;color:var(--em-ink);display:inline-flex;align-items:center;gap:7px;
border:1.5px solid rgba(10,138,95,.4);border-radius:var(--pill);padding:10px 22px;background:#fff;
transition:all .25s var(--ease);box-shadow:var(--sh-s)}
.link-more:hover{background:var(--em-soft);border-color:rgba(10,138,95,.6);transform:translateY(-1px);box-shadow:var(--sh-m)}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.72);
backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid var(--line2)}
body.admin-bar .site-head{top:32px}
.nav{display:flex;align-items:center;gap:34px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:20.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.logo .mark-img{width:32px;height:32px;border-radius:9px;box-shadow:0 4px 10px -2px rgba(10,138,95,.45)}
.logo b{color:var(--em)}
.nav-links{display:flex;gap:4px;font-size:14.5px;font-weight:550;color:var(--ink2);margin-right:auto;align-items:center}
.nav-links .menu{display:contents}
.nav-links .menu li{display:contents}
.nav-links a{display:inline-block;padding:7px 14px;border-radius:var(--pill);transition:all .2s var(--ease);color:var(--ink2)}
.nav-links a:hover{color:var(--ink);background:rgba(16,22,19,.05)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:650}
.nav-links .current-menu-item>a,.nav-links .current_page_item>a{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);transition:all .2s}
.icon-btn:hover{background:rgba(16,22,19,.05);color:var(--ink)}
.burger{display:none}
.head-search{display:none;border-top:1px solid var(--line2);background:rgba(255,255,255,.9)}
.head-search.open{display:block}
.head-search-form{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;color:var(--ink3)}
.head-search-form input[type="search"]{flex:1;border:0;outline:none;background:none;font:inherit;font-size:15.5px;color:var(--ink)}
.m-menu{display:none}
.m-menu.open{display:block;position:fixed;inset:64px 0 0 0;background:rgba(255,255,255,.97);
backdrop-filter:blur(20px);z-index:99;padding:24px;overflow-y:auto}
.m-menu a{display:block;width:100%;text-align:left;padding:17px 8px;font-size:20px;font-weight:670;
border-bottom:1px solid var(--line2)}
.m-menu .menu,.m-menu .menu li{display:block}
.m-menu .m-cta{color:var(--em-ink)}
/* ---------- hero (front page) ---------- */
.hero{position:relative;padding:104px 0 88px;overflow:visible}
.hero h1{font-size:clamp(42px,5.6vw,76px);letter-spacing:-.038em;line-height:1.03;margin:0 0 24px}
.hero h1 b{color:var(--em)}
.hero .sub{max-width:640px;margin:0 auto 44px;font-size:19.5px}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.search{max-width:680px;position:relative;margin:0 auto}
.search input{width:100%;height:66px;border-radius:var(--pill);border:1px solid var(--line);
padding:0 148px 0 58px;font-size:17px;font-family:inherit;outline:none;background:#fff;color:var(--ink);
box-shadow:0 2px 6px rgba(16,22,19,.05),0 14px 40px -8px rgba(16,22,19,.14);transition:border .2s,box-shadow .25s}
.search input::placeholder{color:var(--ink3)}
.search input:focus{border-color:rgba(10,138,95,.55);box-shadow:0 0 0 4px rgba(16,176,119,.14),0 14px 40px -8px rgba(16,22,19,.14)}
.search .s-ico{position:absolute;left:23px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.search .btn{position:absolute;right:8px;top:8px;height:50px;padding:0 26px;font-size:15.5px}
@media (max-width:640px){
/* the headline is one sentence on a phone: balanced lines instead of a word left alone on the second one */
.hero h1 br{display:none}
.hero h1{text-wrap:balance}
}
.sg-h{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:680;padding:10px 14px 6px}
.sg-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;cursor:pointer;transition:background .15s}
.sg-item:hover{background:var(--bg2)}
.sg-item .sg-logo{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:#fff;flex:none;object-fit:contain;padding:3px}
.sg-item .sg-pic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--em-soft);color:var(--em-ink)}
.sg-item .sg-pic svg{width:15px;height:15px}
.sg-item .t{font-size:14.5px;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-item .meta{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink3);flex:none}
.sg-item .meta .stars i{width:11px;height:11px;border-radius:2px}
.sg-item .meta .stars i svg{width:7px;height:7px}
.sg-empty{padding:16px 14px;font-size:13.5px;color:var(--ink3)}
.sg-foot{border-top:1px solid var(--line2);margin-top:8px;padding:11px 14px 6px;font-size:12.5px;color:var(--ink3);
display:flex;justify-content:space-between;align-items:center}
.sg-foot b{color:var(--em-ink);font-weight:650;cursor:pointer}
/* ---------- sections ---------- */
section{padding:84px 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.3vw,42px)}
.sec-head .sub{margin-top:10px;max-width:600px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head.center .sub{margin-left:auto;margin-right:auto}
.tag-sponsored{font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:rgba(255,255,255,.7)}
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.f-card .cnt{color:var(--ink3);font-size:13.5px;font-weight:500}
.plat{position:relative;border:1px solid var(--line2);border-radius:var(--r-md);padding:22px 10px 18px;text-align:center;
transition:all .3s var(--ease);background:#fff;box-shadow:var(--sh-s);overflow:hidden}
.plat:hover{border-color:rgba(10,138,95,.35);transform:translateY(-4px);box-shadow:var(--sh-m)}
.plat span{font-size:12.5px;font-weight:650;display:block}
/* ---------- panel logos ---------- */
.plogo{position:relative;width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
box-shadow:0 4px 10px -2px rgba(16,22,19,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.plogo img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.plogo.frame{background:#fff;border:1px solid var(--line2);padding:8px;box-shadow:var(--sh-s)}
.plogo.frame img{border-radius:8px}
.plogo.sm{width:42px;height:42px;border-radius:12px}
.plogo.sm.frame{padding:6px}
.plogo.xs{width:34px;height:34px;border-radius:9px}
.plogo.xs.frame{padding:5px}
.plogo.hero{width:104px;height:104px;border-radius:26px;background:#fff;padding:14px;
box-shadow:var(--sh-l);border:1px solid var(--line2)}
.plogo.hero img{border-radius:14px}
/* ---------- stars ---------- */
.stars{position:relative;display:inline-block;vertical-align:-4px;line-height:0}
.stars .lay{display:flex;gap:3px}
.stars .lay.fill{position:absolute;top:0;left:0;overflow:hidden;flex-wrap:nowrap}
.stars i{display:grid;place-items:center;width:18px;height:18px;border-radius:3.5px;background:#dce2df;flex:none}
.stars .lay.fill i{background:linear-gradient(160deg,#12a771,#0a8a5f);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.stars i svg{width:11px;height:11px}
.stars.lg i{width:24px;height:24px;border-radius:5px}
.stars.lg i svg{width:14.5px;height:14.5px}
.rate-num{font-weight:750;letter-spacing:-.01em}
/* ---------- rank table ---------- */
.rank{border:1px solid var(--line2);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--sh-m)}
.rank-head,.rank-row{display:grid;grid-template-columns:50px 2.1fr 1.4fr .7fr .75fr .75fr;
gap:14px;align-items:center;padding:15px 26px}
.mini-ring{position:relative;flex:none;display:inline-grid;place-items:center;width:var(--rz,34px);height:var(--rz,34px)}
.mini-ring svg{grid-area:1/1;width:100%;height:100%}
.mini-ring b{grid-area:1/1;font-size:11.5px;font-weight:750;letter-spacing:-.02em}
.score-chip{display:inline-flex;align-items:center;gap:8px}
.rank-head{background:linear-gradient(180deg,#f8faf9,#f3f6f4);font-size:11.5px;font-weight:650;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line2)}
/* one line per header cell — a wrapped label makes the whole head row jitter */
.rank-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row{position:relative;border-bottom:1px solid var(--line2);transition:background .2s}
.rank-row:last-child{border-bottom:0}
.rank-row::after{content:"";position:absolute;right:18px;top:50%;width:20px;height:20px;transform:translateY(-50%) translateX(-6px);
background:no-repeat center/contain url('data:image/svg+xml;utf8,');
opacity:0;transition:all .25s var(--ease)}
.rank-row:hover{background:linear-gradient(90deg,rgba(16,176,119,.055),rgba(16,176,119,0) 55%)}
.rank-row:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.rank-cells{display:contents}
/* Groups the metric cells so they can move as one line on a phone. On the desktop
table it must dissolve, or the three cells would collapse into one column. */
.c-meta{display:contents}
.rank-pos{font-size:14px;font-weight:750;color:var(--ink3)}
.rank-pos .medal{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:14px;color:#fff;
background:linear-gradient(150deg,#13b47a,#0a8a5f);box-shadow:0 4px 10px -3px rgba(10,138,95,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.rank-pos .medal.s2{background:linear-gradient(150deg,#f0f3f1,#dde3e0);color:#4a544e;box-shadow:0 3px 8px -2px rgba(16,22,19,.15),inset 0 1px 0 rgba(255,255,255,.8)}
.rank-pos .medal.s3{background:linear-gradient(150deg,#f4ede3,#e6d8c5);color:#87683f;box-shadow:0 3px 8px -2px rgba(16,22,19,.15),inset 0 1px 0 rgba(255,255,255,.8)}
.rank-name{display:flex;align-items:center;gap:14px;min-width:0}
.rank-name .nm{font-weight:680;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:-.01em}
.rank-name .dm{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);margin-top:2px;min-width:0}
.rank-name .dm .dm-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rank-name .dm .b-online{font-size:11.5px;flex:none}
.rank-name .dm .b-online::before{width:6px;height:6px;box-shadow:0 0 0 2px rgba(34,197,94,.18)}
.cell-label{display:none}
.rank .numv{font-size:14.5px;font-weight:650}
.rank .sub-n{font-size:12px;color:var(--ink3);font-weight:450}
.rev-who .n{font-weight:680;font-size:14.5px}
.rev-who .d{font-size:12px;color:var(--ink3)}
.rev-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 3px 8px -2px rgba(16,22,19,.35),0 0 0 2px #fff}
.rev-ava img{width:100%;height:100%;object-fit:cover}
.rev-ava.duck2 img{filter:hue-rotate(210deg) saturate(.9)}
.rev-ava.duck3 img{filter:hue-rotate(-60deg) saturate(1.1)}
.lockrow .lk{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;
background:linear-gradient(150deg,#1d2723,#0c1210);box-shadow:0 8px 18px -6px rgba(12,18,16,.5)}
/* ---------- big score ring (panel page) ---------- */
.score-wrap{display:flex;gap:38px;align-items:center;flex-wrap:wrap}
.ring{position:relative;width:158px;height:158px;flex:none;display:grid;place-items:center}
.ring svg{grid-area:1/1;transform:rotate(-90deg)}
.ring circle.track{stroke:#edf1ef}
.ring circle.arc{stroke:url(#ringGrad);filter:drop-shadow(0 3px 6px rgba(10,138,95,.35))}
.ring .val{grid-area:1/1;text-align:center}
.ring .val b{font-size:42px;font-weight:780;letter-spacing:-.04em;line-height:1}
.ring .val span{display:block;font-size:10.5px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;font-weight:650;margin-top:4px}
.factors{flex:1;display:flex;flex-direction:column;gap:15px;min-width:250px}
.factor{display:grid;grid-template-columns:132px 1fr 64px;gap:14px;align-items:center;font-size:13.5px}
.factor .fn{color:var(--ink2);font-weight:570}
.factor .bar{height:7px;border-radius:5px;background:#edf1ef;overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,22,19,.06)}
.factor .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#0a8a5f,#14c084)}
.factor .fv{font-weight:680;text-align:right;font-size:13px}
/* ---------- Trust Score card ----------
Track width mirrors the bucket weight (35 pts = full row, 7 pts = a fifth),
factors sit in the formula's three groups, and every bar carries a detail
line that tells the owner exactly how to earn the missing points. */
.ring-col{display:flex;flex-direction:column;align-items:center;gap:11px;flex:none;position:relative}
/* a soft light pool behind the ring — depth without decoration */
.ring-col::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);
width:230px;height:230px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(19,180,122,.14),rgba(19,180,122,.05) 45%,transparent 68%)}
.tb-scale{width:150px}
.tb-track{display:block;height:6px;border-radius:4px;position:relative;
background:linear-gradient(90deg,#e07a5f,#eab308 45%,#14c084)}
.tb-track i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
border:2.5px solid var(--em-ink);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(16,22,19,.35)}
.tb-ends{display:flex;justify-content:space-between;margin-top:6px;
font-size:9.5px;font-weight:720;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
/* Factor breakdown: dense tabular rows the way rating breakdowns are drawn
everywhere serious — full-width gauges with quarter ticks, hairline row
separators, the label with its quiet sub-line, tabular points that carry
the row's state in their colour. */
.tlist{flex:1;min-width:320px}
.tsec{font-size:10px;font-weight:760;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink3);padding:12px 0 7px}
.tsec.first{padding-top:0}
.tr-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.tr-n{font-size:13px;font-weight:660;color:var(--ink);line-height:1.3}
.tr-sub{font-size:11px;line-height:1.42;color:var(--ink3)}
.tr-sub.warn{color:#a16207}
/* the gauge: inset track with quarter ticks, glossy gradient fill */
.tr-bar{display:block;position:relative;height:9px;border-radius:6px;overflow:hidden;
background:linear-gradient(180deg,#e4eae7,#eef2f0);
box-shadow:inset 0 1px 2px rgba(16,22,19,.1),inset 0 0 0 1px rgba(16,22,19,.03)}
.tr-bar i{display:block;height:100%;border-radius:6px;
background:linear-gradient(90deg,#087a54,#12b076 60%,#19cf8f);
box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 8px -2px rgba(18,176,118,.6)}
.tr-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(16,22,19,.09) calc(25% - 1px) 25%);
background-size:calc(100% + 1px) 100%}
.tr-pts{text-align:right;font-size:14.5px;font-weight:770;letter-spacing:-.01em;
font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-pts i{font-style:normal;font-size:11px;font-weight:620;color:var(--ink3)}
/* the row's state, told by the number: earned green, closed amber */
.trow.full .tr-pts{color:var(--em-ink)}
.trow.full .tr-pts::before{content:"";display:inline-block;width:13px;height:13px;margin-right:5px;
vertical-align:-2px;background:var(--em) no-repeat center/8px url('data:image/svg+xml;utf8,');
border-radius:50%;box-shadow:0 2px 5px -1px rgba(10,138,95,.55)}
/* a closed bucket: dashed empty track, amber hint and amber zero */
.trow.zero .tr-n{color:var(--ink2)}
.trow.zero .tr-pts{color:#a16207}
.trow.zero .tr-bar{background:repeating-linear-gradient(90deg,#edf1ef 0 7px,#f8faf9 7px 14px);box-shadow:none}
.trow.zero .tr-bar::after{display:none}
@media (max-width:640px){
.factor{grid-template-columns:106px 1fr 52px;gap:10px}
.score-wrap{gap:24px;justify-content:center}
/* flex-basis, not width: inside a flex row width loses to flex:1 and the
list stays squeezed beside the ring instead of dropping below it */
.tlist{flex:1 1 100%;min-width:0}
.tr-l{grid-column:1/-1}
}
/* ---------- tiles (audience / features) ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile-grid.g4{grid-template-columns:repeat(4,1fr)}
.how-band{background:linear-gradient(180deg,#f6f8f7,#fdfefd);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.duck-side{animation:floatY 7s ease-in-out infinite;flex:none}
/* ---------- steps (how to choose) ---------- */
.steps{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:20px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);
padding:24px 26px;box-shadow:var(--sh-s);transition:transform .3s var(--ease),box-shadow .3s}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.step .n{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:16px;font-weight:750;color:#fff;
background:linear-gradient(150deg,#13b47a,#0a8a5f);box-shadow:0 6px 14px -4px rgba(10,138,95,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.step h3{font-size:16.5px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--ink2)}
.promo-band .btn{margin-left:auto;position:relative;z-index:1;flex:none}
/* ---------- trust note ---------- */
.trust-note{max-width:860px;margin:0 auto;background:linear-gradient(120deg,#f2f8f5,#fbfdfc);border:1px solid var(--line2);
border-radius:var(--r-xl);padding:38px 44px;text-align:center;box-shadow:var(--sh-s)}
.trust-note h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:14px}
.trust-note p{color:var(--ink2);font-size:16px;line-height:1.6}
.dark-cta .glow{position:absolute;bottom:-240px;right:-120px;width:760px;height:600px;pointer-events:none;
background:radial-gradient(closest-side,rgba(18,196,132,.32),transparent 70%)}
.dark-cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
/* ---------- FAQ ---------- */
.faq-head{display:flex;align-items:center;gap:34px;margin-bottom:38px}
.duck-wrap{flex:none;width:200px;display:grid;place-items:center;position:relative}
.duck-img{width:100%;height:auto;animation:floatY 6.5s ease-in-out infinite}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.faq-item{border:1px solid var(--line2);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-s);
transition:box-shadow .3s;overflow:hidden}
.faq-item.open{box-shadow:var(--sh-m)}
.faq-item>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
padding:20px 24px;font-size:16.5px;font-weight:640;text-align:left;letter-spacing:-.01em}
.faq-item .pl{width:26px;height:26px;border-radius:9px;background:var(--bg2);display:grid;place-items:center;flex:none;
transition:all .35s var(--ease);color:var(--ink2)}
.faq-item .pl svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.faq-item.open .pl{background:var(--em-soft);color:var(--em-ink)}
.faq-item.open .pl svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a>div{padding:0 24px 22px;color:var(--ink2);font-size:15px;line-height:1.6}
.faq-a p{margin-bottom:10px}
.faq-a p:last-child{margin-bottom:0}
/* ---------- footer ---------- */
.site-foot{background:var(--dark);color:#fff;margin-top:60px;padding:64px 0 36px;position:relative;overflow:hidden}
.site-foot .glow{position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:900px;height:420px;
background:radial-gradient(closest-side,rgba(16,176,119,.13),transparent 70%);pointer-events:none}
.f-cols{display:grid;grid-template-columns:1.55fr .9fr .9fr 1fr 1.25fr;gap:38px;margin-bottom:44px;position:relative}
.f-stats{display:flex;flex-direction:column;gap:7px;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.62)}
.f-stats b{color:var(--em2);font-weight:750;margin-right:2px}
.f-soc{display:flex;gap:10px;margin-top:18px}
.f-soc a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.62);transition:color .2s,border-color .2s,background .2s}
.f-soc a:hover{color:#fff;border-color:var(--em2);background:rgba(16,176,119,.12)}
.f-h-gap{margin-top:24px}
.f-news p{font-size:12.5px;color:rgba(255,255,255,.46);line-height:1.55;margin:0 0 12px}
.f-news-form{display:flex;gap:8px;position:relative}
.f-news-in{flex:1;min-width:0;height:40px;padding:0 13px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);color:#fff;font-size:13.5px;outline:none;transition:border-color .2s}
.f-news-in::placeholder{color:rgba(255,255,255,.34)}
.f-news-in:focus{border-color:var(--em2)}
.f-news-btn{height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--em-ink);color:#fff;font-size:13.5px;
font-weight:700;cursor:pointer;transition:background .2s;flex:none}
.f-news-btn:hover{background:var(--em2)}
.f-independent{color:rgba(255,255,255,.56);font-size:12.5px}
.f-bottom-links a{color:rgba(255,255,255,.7);transition:color .2s}
.f-bottom-links a:hover{color:#fff}
.f-cols h4,.f-cols .f-h{margin-top:0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:18px;font-weight:650}
.f-cols ul{display:flex;flex-direction:column;gap:11px}
.f-cols a{font-size:14px;color:rgba(255,255,255,.68);transition:color .2s}
.f-cols a:hover{color:#fff}
.f-brand .logo{color:#fff}
.f-brand p{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:14px;max-width:290px;line-height:1.6}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:26px;display:flex;justify-content:space-between;
align-items:center;font-size:12.5px;color:rgba(255,255,255,.6);flex-wrap:wrap;gap:10px;position:relative}
/* ---------- catalog ---------- */
.cat-head{padding:48px 0 6px;position:relative}
.cat-head h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;margin:0 0 12px}
.cat-head .sub{max-width:700px}
.cat-bg{position:absolute;top:0;left:0;right:0;height:420px;pointer-events:none;z-index:-1;
background:radial-gradient(56% 110% at 50% -14%,#e6f3ec 0%,rgba(255,255,255,0) 60%)}
.pagination{display:flex;gap:8px;justify-content:center;padding:44px 0 10px;flex-wrap:wrap}
.pagination .page-numbers{min-width:42px;height:42px;padding:0 12px;border-radius:50%;display:inline-grid;place-items:center;
font-size:14px;font-weight:640;color:var(--ink2);transition:all .25s var(--ease)}
.pagination a.page-numbers:hover{background:var(--bg2)}
.pagination .page-numbers.current{background:linear-gradient(180deg,#1d2723,#0c1210);color:#fff;box-shadow:0 6px 14px -4px rgba(12,18,16,.4)}
.pagination .page-numbers.dots{pointer-events:none}
.crumbs{position:absolute;top:20px;left:0;right:0;z-index:2;font-size:13px;color:rgba(255,255,255,.75);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs svg{width:12px;height:12px;opacity:.6;flex:none}
.crumbs .here{color:#fff}
.plogo.hero{align-self:flex-start;margin-top:-44px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:660;border-radius:9px;padding:6px 12px;letter-spacing:.01em}
.badge svg{width:13px;height:13px}
.b-soft{background:var(--em-soft);color:var(--em-ink);border:1px solid var(--em-soft2)}
/* Unclaimed is a fact, not a warning: quiet grey, never red. It tells a buyer
nobody stands behind the listing and tells the owner to come and take it. */
.b-unclaimed{background:var(--bg2);color:var(--ink3);border:1px solid var(--line2);font-weight:600}
.b-unclaimed svg{opacity:.75}
.p-hero-side .big-rate{font-size:46px;font-weight:780;letter-spacing:-.035em;line-height:1}
.p-hero-side .rv{font-size:13.5px;color:var(--ink3);margin:8px 0 4px}
.p-hero-side .no-rate{font-size:14px;margin-top:4px;display:block}
.card{border:1px solid var(--line2);border-radius:var(--r-lg);background:#fff;padding:30px;box-shadow:var(--sh-s)}
.card h2,.card h3{font-size:19px;margin-bottom:20px;letter-spacing:-.016em}
.prose p{color:#2b332f;font-size:15.5px;line-height:1.68;margin-bottom:14px}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 14px 20px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px;color:#2b332f;font-size:15.5px}
.prose h2{font-size:22px;margin:26px 0 12px}
.prose h3{font-size:18px;margin:22px 0 10px}
.prose a{color:var(--em-ink);font-weight:600}
.prose img{border-radius:var(--r-md);margin:18px 0}
.prose blockquote{border-left:3px solid var(--em2);background:linear-gradient(90deg,#f2f8f5,#fbfdfc);
border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:16px 0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.fact .k{color:var(--ink2)}
.fact .v{font-weight:680;text-align:right;overflow-wrap:anywhere}
.side-cta{position:relative;background:radial-gradient(130% 120% at 80% 0%,#16221d,#0c1210 60%);color:#fff;border:0;overflow:hidden;
box-shadow:0 24px 56px -18px rgba(12,18,16,.5)}
.side-cta::after{content:"";position:absolute;bottom:-120px;right:-80px;width:300px;height:240px;
background:radial-gradient(closest-side,rgba(46,207,143,.28),transparent 70%)}
.side-cta h3{color:#fff;font-size:17px;margin-bottom:8px}
.side-cta p{font-size:13.5px;color:rgba(255,255,255,.62);margin-bottom:20px;position:relative;z-index:1}
.side-cta .btn{position:relative;z-index:1;width:100%}
/* similar panels */
.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sim-top .nm{font-weight:700;font-size:16px;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-s);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.post-card .thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#e9efec,#d9e4de);display:grid;place-items:center;color:#7d8781}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .thumb svg{width:34px;height:34px}
.post-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h2,.post-card h3{font-size:17px;letter-spacing:-.014em;line-height:1.3}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--em-ink)}
.post-card .ex{font-size:14px;color:var(--ink2);line-height:1.55}
.post-card .meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--ink3);display:flex;gap:14px}
.page-head{padding:64px 0 10px;text-align:center;position:relative}
.page-head h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.032em;margin-bottom:12px}
.page-head .sub{max-width:620px;margin:0 auto}
.article-wrap{max-width:760px;margin:0 auto;padding:30px 24px 60px}
/* ---------- contact form (CF7) ---------- */
.contact-grid{max-width:720px;margin:0 auto}
.wpcf7 label{display:block;font-size:14px;font-weight:640;margin-bottom:16px;color:var(--ink)}
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 input[type="url"],.wpcf7 textarea{
width:100%;margin-top:7px;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;font:inherit;font-size:15px;
color:var(--ink);background:#fff;outline:none;transition:border .2s,box-shadow .2s}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:rgba(10,138,95,.55);box-shadow:0 0 0 4px rgba(16,176,119,.12)}
.wpcf7 textarea{min-height:150px;resize:vertical}
.wpcf7 input[type="submit"]{display:inline-flex;font-weight:640;font-size:15px;padding:13px 30px;border-radius:var(--pill);
background:linear-gradient(180deg,#11a874,#0a8a5f 78%);color:#fff;box-shadow:var(--sh-em);border:0;cursor:pointer;
transition:transform .25s var(--ease),filter .25s}
.wpcf7 input[type="submit"]:hover{filter:brightness(1.06);transform:translateY(-1.5px)}
.wpcf7 form .wpcf7-response-output{border-radius:var(--r-md);padding:12px 16px;margin:18px 0 0;font-size:14px;border-width:1px}
.wpcf7-not-valid-tip{font-size:12.5px;color:var(--bad);margin-top:5px}
/* ---------- 404 / search ---------- */
.center-page{max-width:640px;margin:0 auto;text-align:center;padding:70px 24px 60px}
.center-page h1{font-size:clamp(30px,4vw,46px);margin-bottom:14px}
.center-page .sub{margin-bottom:30px}
.search-item .t{display:block;font-weight:680;font-size:15.5px;overflow-wrap:anywhere}
.search-item .d{display:block;font-size:12.5px;color:var(--ink3);overflow-wrap:anywhere}
.search-item .sub-n{font-size:12.5px;color:var(--ink3);font-weight:450}
@media (max-width:1040px){
/* ---------- responsive ---------- */
.tile-grid,.tile-grid.g4{grid-template-columns:repeat(2,1fr)}
.f-grid{grid-template-columns:repeat(2,1fr)}
.sim-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
.f-cols{grid-template-columns:1fr 1fr}
/* the row becomes a card: fixed first column so the logos line up across cards
whether the position is a medal or a plain number */
.rank-head{display:none}
.rank-row{grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:14px 16px 15px;align-items:center}
.rank-row::after{display:none}
.rank-pos{position:static;grid-column:1;grid-row:1;display:grid;place-items:center;font-size:13.5px}
.rank-pos .medal{width:28px;height:28px;border-radius:9px;font-size:13px}
.rank-name{grid-column:2;grid-row:1;gap:11px;align-items:center;padding-right:0}
.rank-name .plogo{width:40px;height:40px;border-radius:11px}
.rank-name .plogo.frame{padding:6px}
/* .rank-name .nm sizing lives in the final block — later rules of equal
specificity would otherwise win over anything set here */
/* One compact line instead of a 2x2 grid of labelled boxes.
The grid version stacked an uppercase caption above every value and ran a
card to roughly 370px on a phone — three panels filled the screen. Values
carry their own words here ("1,915 services", "since 2021"), so the
captions stop being furniture and the card lands near 120px. */
.rank-cells{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;
margin-top:11px;padding-top:11px;border-top:1px solid var(--line2)}
/* both levels: the rating and ring sit directly in .rank-cells, the metrics one
step deeper inside .c-meta — a child selector would only ever reach half of them */
.rank-cells>span,.rank-cells .c-meta>span{display:inline-flex;align-items:baseline;gap:5px;
min-width:0;font-size:13.5px;line-height:1.25}
.cell-label{display:inline;font-size:12.5px;color:var(--ink3);text-transform:lowercase;
letter-spacing:0;font-weight:500;margin:0}
/* stars and the ring speak for themselves; a caption on them is noise */
.c-rating .cell-label,.c-score .cell-label{display:none}
/* "1,915 services" reads; "Services 1,915" does not — so the word follows the number */
.c-count .cell-label{order:2}
.c-count .price-from{order:3}
/* Separated by space, not by dots. A "·" glued to the front of each item became a
stray mark at the start of a line whenever the group wrapped, and with a hidden
Status cell in the group there is no reliable "last item" to hang it off instead. */
.c-rating{gap:6px}
.c-score{margin-left:auto}
/* the ring anchors the right edge of the line */
/* Always its own line. Left to wrap freely, a short metric list tucked itself in
beside the rating and the rest spilled over starting with a stray separator. */
.c-meta{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 15px}
.c-price .pf-amt,.c-price .pf-per{display:inline}
.c-price .pf-amt{font-size:13.5px}
/* one scale for every value: stars, ring and numbers share a 15px reading line */
.rank .numv{font-size:15px}
.rank .stars i{width:13px;height:13px;border-radius:2.5px}
.rank .stars i svg{width:8px;height:8px}
.rank .stars{vertical-align:-2px}
.rank .mini-ring{--rz:28px}
.rank .mini-ring b{font-size:10.5px}
.rank .price-from{margin-top:3px;font-size:12.5px}
.rank .sub-n{font-size:12px}
}
@media (max-width:640px){
body{font-size:16px}
.nav-links{display:none}
.burger{display:grid}
.nav-cta .btn{display:none}
.hero{padding:48px 0 36px}
.search input{padding-right:64px;height:56px}
.search .btn span{display:none}
.search .btn{width:44px;height:44px;padding:0;top:6px;right:6px}
section{padding:52px 0}
.sec-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:26px}
.sec-head.center{align-items:center}
.tile-grid,.tile-grid.g4,.sim-grid,.post-grid,.f-grid{grid-template-columns:1fr}
.plat{padding:14px 6px 12px}
.f-cols{grid-template-columns:1fr;gap:30px}
.facts{grid-template-columns:1fr}
.plogo.hero{margin-top:-40px}
.plogo.hero{width:84px;height:84px;border-radius:20px;padding:11px}
.card{padding:22px;border-radius:18px}
.faq-grid{grid-template-columns:1fr}
.faq-head{flex-direction:column;text-align:center;gap:18px}
.duck-wrap{width:150px}
.trust-note{padding:28px 24px}
.step{padding:20px}
}
.b-online{color:#15803d;font-weight:640;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.b-online::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2.5px rgba(34,197,94,.2)}
/* ---------- forms (contacts, future account pages) ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:640;margin-bottom:7px;color:var(--ink)}
.field input,.inline-input{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;
font:inherit;font-size:15px;background:#fff;outline:none;color:var(--ink);transition:border .2s,box-shadow .2s}
.field input::placeholder,textarea.ta::placeholder{color:var(--ink3)}
.field input:focus,textarea.ta:focus{border-color:rgba(10,138,95,.55);box-shadow:0 0 0 4px rgba(16,176,119,.12)}
textarea.ta{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;font:inherit;
font-size:15px;min-height:150px;resize:vertical;outline:none;background:#fff;color:var(--ink);
transition:border .2s,box-shadow .2s;margin-bottom:4px}
.contact-grid{max-width:640px;margin:0 auto}
.state-note{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-md);padding:15px 18px;margin-bottom:18px;font-size:13.5px}
.state-note svg{flex:none;margin-top:1px}
/* neutral default, so a note without ok/warn still reads as a designed block
rather than loose text on the page background */
.state-note{background:var(--bg3);border:1px solid var(--line2);color:var(--ink2)}
.state-note.warn{background:#fdf6e8;border:1px solid #f5e3c0;color:#7c5305}
.state-note.ok{background:var(--em-soft);border:1px solid var(--em-soft2);color:var(--em-dark)}
.page-head .duck-side{flex:none}
@media (max-width:640px){
.page-head .wrap{flex-direction:column;text-align:center}
.page-head .wrap>div{text-align:center !important}
}
/* ---------- article layout ---------- */
/* baseline: on a phone the links carry a tap-sized padding, and stretched items dropped their text 4px below the "/" */
.crumbs-light{display:flex;gap:8px;justify-content:center;align-items:baseline;font-size:13px;color:var(--ink3);margin-bottom:16px}
.crumbs-light a:hover{color:var(--em-ink)}
.article-layout{max-width:1140px;margin:0 auto;padding:34px 24px 20px;display:grid;
grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
@media (max-width:1040px){
.article-layout{grid-template-columns:1fr;gap:26px}
}
/* ---------- account chrome ---------- */
.auth{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1fr}
.auth-form{display:flex;align-items:center;justify-content:center;padding:56px 24px;background:var(--bg)}
.auth-box{width:100%;max-width:420px}
.auth-box h1{font-size:30px;letter-spacing:-.03em;margin-bottom:8px}
.auth-box .subtitle{color:var(--ink2);font-size:15px;margin-bottom:26px}
.ava{width:36px;height:36px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff,0 4px 10px -2px rgba(16,22,19,.3);display:inline-block;vertical-align:middle}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.duck2 img{filter:hue-rotate(210deg) saturate(.9)}
.ava.duck3 img{filter:hue-rotate(-60deg) saturate(1.1)}
.avatar-pick{display:flex;gap:10px}
.avatar-pick .ava{width:44px;height:44px;cursor:pointer;transition:transform .2s}
.avatar-pick .ava.sel{box-shadow:0 0 0 3px var(--em),0 4px 10px -2px rgba(16,22,19,.3)}
.shell{max-width:1180px;margin:0 auto;padding:34px 24px 90px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px;align-items:start}
.lk-nav{position:sticky;top:86px;display:flex;flex-direction:column;gap:4px}
.lk-nav .who{display:flex;align-items:center;gap:12px;padding:14px 14px 18px}
.lk-nav .who b{font-size:15px;display:block}
.lk-nav .who span span{font-size:12px;color:var(--ink3);display:block}
.lk-link{text-align:left;padding:11px 15px;border-radius:var(--r-sm);font-size:14px;font-weight:570;color:var(--ink2);display:flex;align-items:center;gap:12px;transition:all .2s;width:100%}
.lk-link svg{width:17px;height:17px;flex:none}
.lk-link:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-s)}
.lk-link.on{background:var(--em-soft);color:var(--em-ink);font-weight:670;box-shadow:inset 0 0 0 1px var(--em-soft2)}
.lk-nav .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--em);color:#fff;border-radius:99px;padding:2px 7px}
.lk-link.out{margin-top:14px;color:var(--ink3)}
.stat .k{font-size:11px;color:var(--ink3);font-weight:660;margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase}
.stat .v{font-size:26px;font-weight:780;letter-spacing:-.03em}
.stat .tr{font-size:12px;font-weight:660;color:var(--em-ink);margin-top:4px;display:inline-flex;align-items:center;gap:4px}
.stat .tr.dim{color:var(--ink3);font-weight:560}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 11px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%}
.b-warn{background:#fdf3e3;color:#a16207;border:1px solid #f5e3c0}
.rev-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;display:inline-block}
.rev-ava img{width:100%;height:100%;object-fit:cover}
.rev-ava.duck2 img{filter:hue-rotate(210deg) saturate(.9)}
.rev-ava.duck3 img{filter:hue-rotate(-60deg) saturate(1.1)}
.review{border-top:1px solid var(--line2);padding:20px 0}
.review:first-of-type{border-top:0;padding-top:4px}
.rw-head{display:flex;align-items:center;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.rw-head .n{font-weight:680;font-size:14px}
.rw-head .d{font-size:12px;color:var(--ink3)}
.rw-head .stars{margin-left:auto}
.review p{font-size:14.5px;color:#2b332f;line-height:1.6}
.rw-actions{display:flex;gap:18px;margin-top:10px;font-size:12.5px;color:var(--ink3);font-weight:570}
.rw-actions button:hover{color:var(--em-ink)}
.owner-reply{margin-top:14px;margin-left:20px;background:linear-gradient(180deg,#f6faf8,#fbfdfc);border:1px solid var(--line2);border-radius:var(--r-md);padding:15px 18px}
.owner-reply .t{font-size:12px;font-weight:720;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.owner-reply .t .mk{width:17px;height:17px;border-radius:5px;background:linear-gradient(145deg,#13b47a,#0a8a5f);display:grid;place-items:center}
.owner-reply .t .mk svg{width:9px;height:9px;color:#fff}
.owner-reply p{font-size:13.5px;color:var(--ink2)}
.write{background:linear-gradient(180deg,#f6f8f7,#fbfdfc);border:1px dashed rgba(16,22,19,.18);border-radius:var(--r-lg);padding:28px;text-align:center}
.star-input{display:flex;gap:8px}
.star-input i{width:40px;height:40px;border-radius:9px;background:#dce2df;display:grid;place-items:center;cursor:pointer;transition:all .18s var(--ease)}
.star-input i svg{width:23px;height:23px}
.star-input i:hover{transform:translateY(-3px) scale(1.06)}
.star-input i.on{background:linear-gradient(160deg,#12a771,#0a8a5f);box-shadow:0 8px 18px -6px rgba(10,138,95,.55)}
.fav{display:flex;align-items:center;gap:13px;border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;background:#fff;box-shadow:var(--sh-s);transition:transform .25s var(--ease)}
.fav:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.fav b{font-size:14px;display:block}
.fav .small{display:block}
.fav .r{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;flex:none}
.set-row{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.set-row:last-child{border-bottom:0}
.set-row .k{font-size:14px;font-weight:640;width:150px;flex:none}
.set-row .v{font-size:14px;color:var(--ink2);flex:1;min-width:200px}
.claim-search{position:relative;max-width:560px;margin:26px auto 0}
.claim-search input{width:100%;height:58px;border-radius:var(--pill);border:1px solid var(--line);padding:0 110px 0 52px;font:inherit;font-size:16px;outline:none;background:#fff;box-shadow:0 2px 6px rgba(16,22,19,.05),0 12px 34px -8px rgba(16,22,19,.13)}
.claim-search .s-ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.claim-search .btn{position:absolute;right:7px;top:7px;height:44px;padding:0 22px}
.claim-hit{max-width:560px;margin:14px auto 0;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-m)}
.vmethod{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.vmethod .vm{border:1.5px solid var(--line);border-radius:var(--r-md);padding:15px;cursor:pointer;transition:all .22s;background:#fff;text-align:left}
.vmethod .vm.on{border-color:var(--em);background:linear-gradient(180deg,#f4faf7,#fff);box-shadow:0 0 0 3px rgba(16,176,119,.1)}
.vmethod b{font-size:13px;display:block;margin-bottom:3px}
.vmethod span{font-size:11.5px;color:var(--ink3);line-height:1.4;display:block}
.code{background:linear-gradient(160deg,#131b17,#0c1210);color:#dfe8e3;border-radius:var(--r-md);padding:18px 20px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;line-height:1.65;overflow-x:auto;position:relative;white-space:pre-wrap;word-break:break-all}
.duck{animation:floatY 7s ease-in-out infinite}
@media (max-width:1040px){
.auth{grid-template-columns:1fr}
.shell{grid-template-columns:minmax(0,1fr);gap:18px}
/* tablets: the dashboard links wrap into rows — nothing scrolls sideways; phones get them in the menu instead */
.shell .lk-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;padding-bottom:4px;align-items:center;max-width:100%;min-width:0}
.shell .lk-link{white-space:nowrap;flex:none;width:auto;padding:9px 13px;border:1px solid var(--line2);background:#fff}
.lk-link.out{margin-top:0}
}
@media (max-width:640px){
.set-row .k{width:100%}
}
/* ---------- recently added ---------- */
.new-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.new-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line2);
border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-s);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.new-card:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:rgba(10,138,95,.28)}
/* ---------- footer platform row ---------- */
.f-plats{position:relative;display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;
padding:22px 0;border-top:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.f-plats-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.f-plats a{font-size:13px;color:rgba(255,255,255,.6);transition:color .2s}
.f-plats a:hover{color:#2ecf8f}
@media (max-width:1040px){
.new-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.new-grid{grid-template-columns:1fr}
}
/* ---------- badges: dark variant used by the TrustPanel mark ---------- */
.badge.b-dark{background:linear-gradient(160deg,#1d2723,#0c1210);color:#fff;border:0;
box-shadow:0 2px 6px -1px rgba(12,18,16,.4)}
.badge.b-dark svg{color:#2ecf8f}
.rank-name .nm .badge{flex:none}
.rank-name .nm{row-gap:6px}
/* ---------- styles that did not survive the move from the old theme ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-section{position:relative}
.btn.w{width:100%}
.hint{font-size:11.5px;color:var(--ink3);margin-top:6px}
.email-link{cursor:pointer;font-weight:640}
.email-link:hover{text-decoration:underline;text-underline-offset:3px}
.card h2 .q{font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0;margin-left:6px}
/* ---------- logo: the tile is the shape, no extra frame ---------- */
.logo .mark-img{width:34px;height:34px;border-radius:10px;background:none;padding:0;
box-shadow:0 6px 14px -4px rgba(10,138,95,.45)}
.site-foot .logo .mark-img{box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
/* ---------- compact badges inside table rows: both marks fit on one line ---------- */
.rank-name .nm{flex-wrap:nowrap;overflow:hidden}
.rank-name .nm .badge{font-size:10.5px;padding:3px 8px;border-radius:7px;gap:4px;flex:none}
.rank-name .nm .badge svg{width:10px;height:10px}
@media (max-width:1040px){
.rank-name .nm{flex-wrap:wrap}
}
@media (min-width:1041px){
/* ---------- rank row: name shrinks, badges never push into the rating column ---------- */
/* desktop only — below 1040px the row becomes a card and must stay single-column */
.rank-head,.rank-row{grid-template-columns:48px minmax(0,2.4fr) minmax(0,1.35fr) .62fr .7fr .7fr .62fr}
}
.rank-name{min-width:0}
.rank-name>span:last-child{min-width:0;flex:1}
.rank-name .nm{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0;overflow:visible}
.rank-name .nm .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rank-name .nm .badge{flex:none}
.rank-cells>span{min-width:0}
@media (max-width:1040px){
.rank-name .nm{flex-wrap:wrap}
.rank-name .nm .pn{overflow:visible;white-space:normal}
}
@media (max-width:1100px){
/* ---------- tablet: the top bar must never outgrow the screen ---------- */
.nav{gap:22px}
.nav-links a{padding:7px 10px}
}
@media (max-width:999px){
.nav-links{display:none}
.burger{display:grid}
.nav{gap:14px}
/* with the links gone nothing pushed the buttons right: on tablets they huddled next to the logo */
.nav-cta{margin-left:auto}
}
@media (max-width:999px) and (min-width:641px){
.m-menu.open{display:block;position:fixed;inset:64px 0 0 0;background:rgba(255,255,255,.97);
backdrop-filter:blur(20px);z-index:99;padding:24px;overflow-y:auto}
}
@media (max-width:820px){
.nav-cta .btn-ghost{display:none}
}
/* ---------- services & prices ---------- */
/* flat spreadsheet-style filter bar — rectangular cells, no pills */
.filter-bar{border:1px solid var(--line2);border-radius:var(--r-md);background:var(--bg);margin:0 0 18px;box-shadow:var(--sh-s);overflow:hidden}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 12px}
.filter-row + .filter-row{border-top:1px solid var(--line2)}
.filter-row .fl{font-size:10.5px;font-weight:750;letter-spacing:.07em;color:var(--ink3);text-transform:uppercase;margin-right:8px;flex:none;min-width:64px}
.filter-row.pf-chips,.filter-bar .pf-chips{margin:0}
.pf-chips .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line2);border-radius:6px;background:var(--bg);font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none;line-height:1.35;transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease)}
.pf-chips .chip .num{font-size:11px;color:var(--ink3);font-weight:550}
.pf-chips a.chip:hover{background:var(--bg2);border-color:var(--line);color:var(--ink)}
.pf-chips .chip.on{border-color:var(--em);background:var(--em-soft);color:var(--em-ink)}
.pf-chips .chip.on .num{color:var(--em-ink)}
/* Tools catalog: the category bar hugs its content instead of spanning the page */
.tools-fbar{width:fit-content;max-width:100%;background:var(--bg2);border-color:var(--line2);border-radius:16px;box-shadow:none}
.tools-fbar .filter-row{padding:7px 8px;gap:7px}
.tools-fbar .chip{border-radius:var(--pill);padding:5.5px 13px;font-size:13px;background:var(--bg)}
.tools-fbar .chip .num{font-size:11.5px}
.tools-fbar a.chip:hover{background:var(--bg);border-color:var(--em2);color:var(--em-ink)}
.tools-fbar .chip.on{background:var(--em);border-color:var(--em);color:#fff}
.tools-fbar .chip.on .num{color:rgba(255,255,255,.82)}
.rank .price-from{display:block;margin-top:2px;color:var(--em-ink);font-weight:600}
.pnl-trow .from{color:var(--em-ink);font-weight:700}
.svc-page-head .sub{font-size:14.5px;max-width:780px}
/* compact chips on the price page — 40+ platforms must not become a wall */
.svc-filters .filter-row{gap:5px;padding:8px 10px}
.svc-filters .chip{padding:3.5px 9px;font-size:12px;border-radius:7px}
.svc-filters .chip .num{font-size:10.5px}
.price-search input[type="search"]{flex:1;min-width:0;height:42px;padding:0 14px 0 39px;border:1.5px solid var(--line);border-radius:11px;background:var(--bg);font:inherit;font-size:14px;color:var(--ink)}
.price-search .btn{height:42px;flex:none}
@media (max-width:520px){
/* on phones the keyboard's own submit does the job — the button only crowds the row */
.price-search .btn{display:none}
}
.svc-line .id{color:var(--ink3);font-size:12.5px}
.svc-line .rate{color:var(--em-ink);font-weight:700}
@media (max-width:720px){
.svc-line .rate{grid-column:2;grid-row:1;font-size:14px;white-space:nowrap}
/* by name, not by position from the end: an offer's row now ends with its controls and the history box */
.svc-line>.qmin,.svc-line>.qmax{grid-row:2;font-size:12px;color:var(--ink3);white-space:nowrap}
.svc-title .btn{width:100%;justify-content:center;flex:none}
}
.vote-btn.v-on{color:var(--em-ink);border-color:var(--em);background:var(--em-soft)}
.vote-btn.v-on-down{color:var(--bad);border-color:var(--bad);background:#fdecec}
/* reviews found across the web */
/* the sentiment summary above the list: a stacked strip plus a dot legend —
these classes shipped in the template but their styles never did */
.wr-mood{margin:2px 0 14px}
.wr-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;background:#edf1ef;
box-shadow:inset 0 1px 2px rgba(16,22,19,.06)}
.wr-bar i{display:block;height:100%}
.wr-bar i+i{margin-left:2px}
.m-positive{background:linear-gradient(90deg,#0ea86e,#14c084)}
.m-mixed{background:#eab308}
.m-negative{background:#e0654f}
.wr-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:9px;
font-size:12.5px;font-weight:620;color:var(--ink2)}
.wr-legend span{display:inline-flex;align-items:center;gap:7px}
.wr-legend b{width:9px;height:9px;border-radius:50%;flex:none}
.wr-legend .wr-srccount{color:var(--ink3);font-weight:560;margin-left:auto}
.wr-filter{margin-bottom:14px}
.wr-filter .chip{cursor:pointer;padding:6px 12px;border-radius:999px}
.wr-filter .chip.on{background:var(--em-ink);border-color:var(--em-ink);color:#fff;
box-shadow:0 4px 10px -4px rgba(10,138,95,.55)}
.wr-filter .chip.on .num{color:rgba(255,255,255,.75)}
.webrev{display:flex;flex-direction:column;gap:0;border:1px solid var(--line2);border-radius:var(--r-md);overflow:hidden}
.webrev-item{padding:10px 14px;border-top:1px solid var(--line2);cursor:pointer;transition:background .12s var(--ease)}
.webrev-item:hover{background:var(--bg3)}
.webrev-item:first-child{border-top:0}
.wr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.wr-src{font-weight:750;font-size:13.5px}
.wr-rating{font-size:12.5px;font-weight:700;color:var(--em-ink);background:var(--em-soft);padding:2px 8px;border-radius:6px}
.wr-sent{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:6px}
.wr-sent.s-positive{color:var(--em-ink);background:var(--em-soft)}
.wr-sent.s-negative{color:#b91c1c;background:#fdecec}
.wr-sent.s-mixed{color:#92600a;background:#fdf3e0}
.wr-date{font-size:12px;color:var(--ink3)}
.wr-unv{font-size:11px;color:var(--ink3);border:1px dashed var(--line);padding:2px 8px;border-radius:6px}
.wr-sum{font-size:13px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.webrev-item.open .wr-sum{display:block;overflow:visible}
.webrev-item .wr-quote{display:none}
.webrev-item.open .wr-quote{display:block;margin-top:6px}
.wr-filter{margin-bottom:12px}
.wr-head .wr-link{margin-left:auto}
.wr-quote{font-size:13px;color:var(--ink2);font-style:italic;margin:0 0 6px;padding-left:10px;border-left:2px solid var(--em-soft2)}
.wr-note{margin:10px 0 0;font-size:12px;color:var(--ink3)}
.plat .p-meta{display:block;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--ink3);line-height:1.5}
@media (max-width:720px){
/* phones: no strip scrolls sideways — every filter is a select (see .sel below) */
/* touch targets: a chip must be comfortable to hit with a thumb, not a mouse */
.pf-chips .chip{min-height:38px;padding:8px 12px;font-size:13px;border-radius:8px}
.pf-chips .chip .num{font-size:11.5px}
.pagination a,.pagination span{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.price-search input[type="search"],.price-search .btn{min-height:44px}
}
/* ---------- section item: the measured headline figure ---------- */
.usage-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.usage-num{font-size:44px;font-weight:780;letter-spacing:-.035em;line-height:1;color:var(--em-ink);flex:none}
.usage-txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.usage-txt b{font-size:15.5px;font-weight:700}
.usage-txt span{font-size:13px;color:var(--ink2)}
.usage-txt .wr-link{margin-top:3px}
@media (max-width:640px){
.usage-card{gap:14px}
.usage-num{font-size:36px}
}
@media (max-width:1040px){
/* ---------- catalog card on narrow screens: one proportional scale ----------
Must stay last in the file — earlier sections re-declare .rank-name .nm and
.badge at the same specificity, so anything set before them loses. */
.rank-name .nm{font-size:15px;gap:6px;row-gap:5px;flex-wrap:wrap;line-height:1.25}
.rank-name .nm .badge{font-size:9.5px;padding:2.5px 7px;border-radius:6px;gap:3.5px}
.rank-name .nm .badge svg{width:9px;height:9px}
}
@media (max-width:400px){
/* smallest phones: tighten the frame, never the reading size */
.rank-row{grid-template-columns:26px minmax(0,1fr);padding:13px 13px 14px;gap:0 10px}
.rank-pos .medal{width:25px;height:25px;border-radius:8px;font-size:12px}
.rank-name{gap:9px}
.rank-name .plogo{width:37px;height:37px;border-radius:10px}
.rank-name .nm{font-size:14.5px}
.rank-cells{gap:6px 10px}
.rank-cells>span{font-size:13px}
.cell-label{font-size:12px}
}
@media (min-width:1041px){
/* the Status column already carries this — under the name it would read twice */
.rank-name .dm .b-online{display:none}
}
/* ---------- price column in the tools table ---------- */
.cell-price .pf-amt{display:block;font-size:16px;font-weight:760;color:var(--em-ink);line-height:1.1;letter-spacing:-.02em}
/* ---------- trust score ---------- */
.trust-top{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.trust-num{flex:none;display:flex;align-items:baseline;gap:7px;padding:14px 20px;border-radius:var(--r-md);
background:var(--bg2);border:1px solid var(--line2)}
.trust-num b{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1}
.trust-num span{font-size:12.5px;color:var(--ink3);font-weight:600}
.trust-num.t-high b,.trust-num.t-ok b{color:var(--em-ink)}
.trust-num.t-mixed b{color:#b45309}
.trust-num.t-low b,.trust-num.t-bad b{color:var(--bad)}
.trust-lead{flex:1;min-width:250px}
.trust-lead p{font-size:13.5px;color:var(--ink2);line-height:1.6;margin-top:8px}
.trust-band{display:inline-block;font-size:11.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
padding:5px 11px;border-radius:7px}
.trust-band.b-high,.trust-band.b-ok{background:var(--em-soft);color:var(--em-ink)}
.trust-band.b-mixed{background:#fef3e2;color:#b45309}
.trust-band.b-low,.trust-band.b-bad{background:#fdeaea;color:#b91c1c}
.trust-band.b-unknown{background:var(--bg2);color:var(--ink3)}
.trust-parts{display:grid;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line2)}
.tp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tp-n{font-size:13.5px;font-weight:650}
.tp-v{font-size:13.5px;font-weight:750;color:var(--ink2)}
.tp-bar{display:block;height:7px;border-radius:5px;background:var(--bg2);overflow:hidden;margin:7px 0 5px}
.tp-bar i{display:block;height:100%;border-radius:5px}
.tp-bar i.w-good{background:linear-gradient(90deg,#12a771,#0a8a5f)}
.tp-bar i.w-mid{background:linear-gradient(90deg,#f0b429,#d97706)}
.tp-bar i.w-low{background:linear-gradient(90deg,#f87171,#dc2626)}
.tp-d{display:block;font-size:12px;color:var(--ink3);line-height:1.5}
@media (max-width:640px){
.trust-num b{font-size:34px}
.trust-top{gap:16px}
}
/* ---------- paid badges: two tiers, both must stay visible ---------- */
.badge .bt{font-style:normal}
@media (max-width:560px){
/* Keep the words. These were collapsed to bare icons to hold the name on one
line, which left two unexplained squares next to the domain — a paid mark
nobody can read is worth nothing. The name wraps instead. */
.rank-name .nm .badge{padding:2.5px 7px;border-radius:6px;gap:3.5px;font-size:9.5px}
.rank-name .nm .badge svg{width:9px;height:9px}
}
/* ---------- dashboard switcher: personal vs business ---------- */
.lk-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:14px;
background:var(--bg2);border:1px solid var(--line2);border-radius:11px}
.lk-sw{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:8px;
font-size:12.5px;font-weight:680;color:var(--ink3);transition:background .15s var(--ease),color .15s var(--ease)}
.lk-sw svg{width:14px;height:14px;flex:none}
.lk-sw:hover{color:var(--ink)}
.lk-sw.on{background:#fff;color:var(--em-ink);box-shadow:var(--sh-s)}
.lk-claim .duck{width:150px;margin-bottom:6px}
@media (max-width:640px){
.lk-claim .duck{width:110px}
}
/* ---------- top-bar dashboard switch ---------- */
.top-switch{display:inline-flex;padding:3px;gap:2px;background:var(--bg2);border:1px solid var(--line2);border-radius:9px}
.top-switch .ts{padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:680;color:var(--ink3);white-space:nowrap;
transition:background .15s var(--ease),color .15s var(--ease)}
.top-switch .ts:hover{color:var(--ink)}
.top-switch .ts.on{background:#fff;color:var(--em-ink);box-shadow:var(--sh-s)}
.top-switch .ts-s{display:none}
.site-head .logo{flex-shrink:0}
@media (max-width:1199px){
/* a crowded bar squeezes the links, never the name */
/* 1000–1199px: a business account's bar also carries the switch — short labels, the links drawn tighter */
.top-switch .ts{padding:6px 10px}
.top-switch .ts-l{display:none}
.top-switch .ts-s{display:inline}
.nav:has(.top-switch){gap:22px}
.nav:has(.top-switch) .nav-links a{padding:7px 10px}
}
@media (max-width:1099px){
.nav:has(.top-switch) .nav-links a{padding:7px 8px}
.nav:has(.top-switch) .nav-cta{gap:8px}
}
@media (max-width:999px){
.top-switch{display:none}
}
/* ---------- business dashboard ---------- */
.biz-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.biz-kpis.in-card{margin:8px 0 0;gap:12px}
.kpi{border:1px solid var(--line2);border-radius:var(--r-md);background:#fff;padding:16px 18px;box-shadow:var(--sh-s)}
.biz-kpis.in-card .kpi{box-shadow:none;background:var(--bg3)}
.kpi-k{display:block;font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.kpi-v{display:block;font-size:27px;font-weight:790;letter-spacing:-.03em;line-height:1.15;margin-top:7px}
.kpi-d{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}
.biz-p{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-md);
transition:background .15s var(--ease),border-color .15s var(--ease)}
.biz-p:hover{background:var(--em-soft);border-color:var(--em-soft2)}
.biz-p-n{flex:1;min-width:0}
.biz-p-n b{display:block;font-size:14.5px}
.biz-p-s{font-size:13px;font-weight:700;color:var(--ink2);flex:none}
@media (max-width:640px){
.kpi-v{font-size:23px}
.biz-kpis{grid-template-columns:1fr 1fr;gap:10px}
}
/* ---------- dashboard depth: cards lift off the page instead of sitting flat ---------- */
.shell{--lk-surface:#fff}
.lk-nav{background:var(--lk-surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:12px 10px;
box-shadow:0 1px 2px rgba(16,22,19,.04),0 8px 24px -10px rgba(16,22,19,.10)}
.lk-nav .who{border-bottom:1px solid var(--line2);margin-bottom:8px}
.lk-link{position:relative}
.lk-link.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--em)}
.kpi{position:relative}
.kpi::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(120% 90% at 100% 0%,rgba(16,176,119,.07),transparent 60%)}
.kpi:hover{box-shadow:0 2px 4px rgba(16,22,19,.05),0 12px 28px -12px rgba(16,22,19,.18)}
.biz-kpis .kpi{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.biz-kpis .kpi:hover{transform:translateY(-2px)}
/* ---------- add funds ---------- */
.fund-now{display:flex;align-items:baseline;gap:9px;margin:4px 0 18px}
.fund-now b{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1}
.fund-now span{font-size:13px;color:var(--ink3);font-weight:600}
/* ---------- promotion packages ---------- */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.promo-card{position:relative;border:1px solid var(--line2);border-radius:var(--r-lg);background:#fff;padding:26px 24px;
box-shadow:0 1px 2px rgba(16,22,19,.04),0 10px 26px -12px rgba(16,22,19,.12);display:flex;flex-direction:column}
.promo-card.feature{border-color:var(--em-soft2);box-shadow:0 2px 4px rgba(10,138,95,.08),0 16px 40px -14px rgba(10,138,95,.30)}
.promo-list{list-style:none;display:grid;gap:9px;margin:0 0 20px;flex:1}
.promo-list li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.promo-list li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
background:var(--em-soft) no-repeat center/9px url('data:image/svg+xml;utf8,')}
@media (max-width:640px){
.fund-now b{font-size:31px}
}
.pay-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pay-head b{display:block;font-size:15.5px;margin-bottom:3px}
.pay-head > div{flex:1;min-width:220px}
.pay-facts{list-style:none;display:grid;gap:8px;margin:16px 0 18px}
.pay-facts li{position:relative;padding-left:23px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.pay-facts li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
background:var(--em-soft) no-repeat center/8px url('data:image/svg+xml;utf8,')}
.pay-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pay-actions .btn:disabled{opacity:.5;cursor:not-allowed}
/* empty states across the dashboard */
.empty-state{text-align:center;padding:34px 24px}
.empty-state .duck{width:140px;margin:0 auto 6px}
.empty-state h2{justify-content:center;margin-bottom:8px}
.empty-state .small{max-width:430px;margin:0 auto 18px;line-height:1.6}
@media (max-width:640px){
.own-actions .btn{flex:1}
}
/* .claim-search already works: it positions the icon and button absolutely
inside a relative pill. Do not re-layout it here — only bound its width. */
.lk-claim .claim-search{max-width:520px;margin:22px auto 0}
.lk-claim .claim-hit{max-width:520px;margin:12px auto 0}
.rv-who .small{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cnt.hot{background:#f0b429;color:#3a2a05}
.ava.sm{width:38px;height:38px;flex:none}
/* ---------- review proof: required screenshots ---------- */
.proof{margin-top:18px;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--bg3);transition:border-color .2s var(--ease),background .2s var(--ease)}
.proof.has-shots{border-style:solid;border-color:var(--em-soft2);background:#fbfefc}
.proof-label{display:block;font-size:13px;font-weight:660;margin-bottom:5px}
.proof-label b{color:var(--em-ink);font-weight:700}
.proof-why{font-size:12.5px;color:var(--ink2);line-height:1.55;margin-bottom:12px}
.proof-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.proof-list:empty{margin-bottom:0}
.proof-thumb{position:relative;width:112px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2);box-shadow:var(--sh-s)}
.proof-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.proof-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;
background:rgba(12,18,16,.72);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center}
.proof-del:hover{background:var(--bad)}
.proof-add{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--pill);cursor:pointer;
border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:640;transition:border-color .18s var(--ease),color .18s var(--ease)}
.proof-add:hover{border-color:var(--em);color:var(--em-ink)}
.proof-add svg{width:15px;height:15px}
.proof-note{display:block;font-size:12px;color:var(--ink3);margin-top:9px}
.proof-note.ok{color:var(--em-ink)}
.proof-note.bad{color:var(--bad);font-weight:600}
.proof-note.busy{color:var(--ink2)}
.proof-thumb{animation:proof-in .28s var(--ease) both}
@keyframes proof-in{from{opacity:0;transform:scale(.92) translateY(4px)}to{opacity:1;transform:none}}
.proof.is-busy .proof-add{pointer-events:none;color:var(--ink2);border-color:var(--line)}
.proof-spin{width:15px;height:15px;animation:proof-spin .8s linear infinite}
@keyframes proof-spin{to{transform:rotate(360deg)}}
.proof.is-drop{border-color:var(--em);border-style:solid;background:var(--em-soft)}
.proof-add.is-full{opacity:.5;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.proof-thumb{animation:none}
.proof-spin{animation-duration:2s}
}
/* screenshots under a published review */
.proof-shots{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 0 4px}
/* order screenshots are wide; a square crop lands on empty page and shows nothing.
Keep a 4:3 tile and fit the whole shot inside it. */
.proof-shot{width:132px;height:99px;border-radius:9px;overflow:hidden;border:1px solid var(--line2);
background:var(--bg2);display:block;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.proof-shot img{width:100%;height:100%;object-fit:contain;display:block}
.proof-shot:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.proof-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:680;color:var(--em-ink);
background:var(--em-soft);padding:6px 11px;border-radius:8px}
.proof-badge svg{width:12px;height:12px}
@media (max-width:640px){
.proof{padding:14px}
.proof-thumb{width:96px;height:72px}
.proof-shot{width:112px;height:84px}
}
.cnt.ok{background:var(--em-soft);color:var(--em-ink)}
.fund-entry{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.fund-entry input{width:150px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);
font:inherit;font-size:18px;font-weight:700;background:#fff;color:var(--ink)}
.fund-entry input:focus{outline:2px solid var(--em-soft2);border-color:var(--em)}
.fund-entry .btn{flex:none}
.tp-tx{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink3)}
.tp-open .tp-note{flex-basis:100%;color:var(--ink3)}
.pay-card h2{margin:0 0 4px}
/* counters inside buttons are round, not the sidebar pill */
.btn .cnt,.btn .cnt.hot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
margin-left:6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1;vertical-align:1px}
@media (max-width:640px){
.fund-entry input{flex:1;min-width:110px;width:auto}
.fund-entry .btn{width:100%}
}
/* ---------- explainer tooltips ----------
A catalog full of numbers needs to say what each number means, at the moment
the reader looks at it. CSS-only: no script, works before hydration, and the
text stays in the markup so screen readers and search engines see it too. */
.tip{position:relative;display:inline-flex;align-items:center;gap:5px;vertical-align:baseline}
.tip-btn{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;flex:none;
border:1px solid var(--line);background:var(--bg2);color:var(--ink3);cursor:help;
font-size:10.5px;font-weight:750;line-height:1;transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}
.tip-btn::after{content:"i";font-family:Georgia,serif;font-style:italic}
.tip:hover .tip-btn,.tip:focus-within .tip-btn{border-color:var(--em);color:var(--em-ink);background:var(--em-soft)}
.tip-body{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
width:max-content;max-width:290px;padding:13px 15px;border-radius:var(--r-md);z-index:60;
background:#fff;border:1px solid var(--line2);color:var(--ink2);
box-shadow:0 2px 6px rgba(16,22,19,.06),0 16px 40px -12px rgba(16,22,19,.28);
font-size:12.5px;font-weight:450;line-height:1.55;letter-spacing:0;text-transform:none;text-align:left;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.tip-body b{color:var(--ink);font-weight:680}
.tip-body::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
border:7px solid transparent;border-top-color:#fff;filter:drop-shadow(0 1px 0 var(--line2))}
.tip:hover .tip-body,.tip:focus-within .tip-body{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* near the right edge the bubble would clip: anchor it to the icon instead */
.tip.tip-end .tip-body{left:auto;right:-6px;transform:translateY(4px)}
.tip.tip-end:hover .tip-body,.tip.tip-end:focus-within .tip-body{transform:translateY(0)}
.tip.tip-end .tip-body::after{left:auto;right:12px;transform:none}
@media (max-width:900px){
/* Anchoring to the icon pushes the bubble off a narrow screen (and past the
right edge of a tablet). Pin it to the viewport instead: full width minus a
margin, always readable, never clipped, never widening the page. */
.tip-body{position:fixed;left:12px;right:12px;bottom:auto;top:auto;width:auto;max-width:none;
transform:translateY(4px);font-size:12.5px;padding:13px 15px}
.tip:hover .tip-body,.tip:focus-within .tip-body{transform:translateY(0)}
.tip-body::after{display:none}
/* no tail when it is not attached to the icon */
.tip.tip-end .tip-body{left:12px;right:12px;transform:translateY(4px)}
.tip.tip-end:hover .tip-body,.tip.tip-end:focus-within .tip-body{transform:translateY(0)}
/* touch has no hover: tapping focuses the button, which reveals the text */
.tip-btn{width:20px;height:20px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
.tip-body{transition:none}
}
/* ---------- depth pass: surfaces read as physical, not as flat boxes ---------- */
/* one honest light source: shadows sit below the element and soften with distance */
.card{transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
.rank{box-shadow:0 1px 2px rgba(16,22,19,.04),0 10px 30px -14px rgba(16,22,19,.16)}
.rank-row{transition:background .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover) and (min-width:1041px){
/* a row lifts slightly under the pointer so the click target is obvious */
.rank-row:hover{box-shadow:inset 3px 0 0 var(--em)}
}
/* logos get a real edge instead of floating on white */
.plogo.frame{box-shadow:0 1px 2px rgba(16,22,19,.05),0 4px 12px -4px rgba(16,22,19,.10)}
.plogo.hero{box-shadow:0 4px 10px -4px rgba(16,22,19,.12),0 20px 50px -18px rgba(16,22,19,.30)}
/* primary buttons: pressed state that actually feels pressed */
.btn-primary{box-shadow:var(--sh-em)}
.btn-primary:active,.btn-dark:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--em);outline-offset:2px}
/* score ring reads as an instrument, not a circle */
.mini-ring{filter:drop-shadow(0 1px 2px rgba(16,22,19,.10))}
/* empty states: the duck sits on a soft halo instead of raw white */
.empty-state{position:relative;overflow:hidden}
.empty-state::before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);
width:320px;height:220px;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(16,176,119,.10),transparent 72%)}
.empty-state .duck{position:relative;filter:drop-shadow(0 12px 22px rgba(16,22,19,.16))}
/* sidebar: active item is unmistakable */
.lk-link{transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.lk-link:hover{background:var(--bg2)}
.lk-link.on{box-shadow:inset 0 0 0 1px var(--em-soft2),0 1px 2px rgba(16,22,19,.04)}
.seo-head .small{color:var(--ink3)}
.fld label .q{font-weight:450;color:var(--ink3);font-size:12.5px;margin-left:2px}
.counter{font-size:11.5px;color:var(--ink3);font-weight:650;flex:none;font-variant-numeric:tabular-nums}
.counter.ok{color:var(--em-ink)}
.counter.over{color:#b45309}
.kw-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--line2);
border-radius:8px;padding:5px 7px 5px 10px;font-size:12.5px;font-weight:620;line-height:1}
.kw-chip button{border:0;background:none;color:var(--ink3);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.kw-chip button:hover{color:var(--bad)}
.ad-card .btn{margin-top:auto}
.claim-how{max-width:640px;margin:26px auto 0;font-size:13.5px;line-height:1.65;color:var(--ink3)}
.hiw-pad .demo-row .btn{margin-left:auto;flex:none;pointer-events:none}
.hiw-pad .code{font-size:10.5px;padding:12px 14px;border-radius:10px;line-height:1.6}
/* ---------- blog grid: cards of one height ----------
Headlines here run from four words to twenty-two, so rows used to step up and
down by fifty pixels. Clamping the title and the excerpt to a fixed number of
lines makes every card the same height without truncating anything a reader
needs — the full headline is one click away. */
.post-card h2,.post-card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
min-height:calc(3 * 1.55em)}
/* the cover carries the article now, so give it a touch more presence */
.post-card .thumb{border-bottom:1px solid var(--line2)}
.post-card .thumb img{transition:transform .4s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.03)}
/* ---------- wide content inside an article scrolls itself, not the page ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0;
border:1px solid var(--line2);border-radius:var(--r-md);background:#fff}
.table-scroll table{margin:0;border:0;min-width:560px}
.prose img,.article-body img{max-width:100%;height:auto}
.prose pre,.article-body pre{overflow-x:auto;max-width:100%}
.prose iframe,.article-body iframe{max-width:100%}
/* a long unbroken URL in body copy is the other classic way a page grows sideways */
.prose a,.article-body a{overflow-wrap:anywhere}
.svc-search .btn{position:absolute;right:7px;top:7px;height:48px;padding:0 26px}
/* platform page */
.crumbs.on-light a{color:var(--ink3)}
.crumbs.on-light .here{color:var(--ink)}
.crumbs.on-light svg{color:var(--line)}
.svc-plat-head .sub{margin-top:5px}
.stab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--pill);
border:1px solid var(--line2);background:#fff;font-size:13.5px;font-weight:640;color:var(--ink2);text-decoration:none;white-space:nowrap;
transition:all .16s var(--ease)}
.stab .num{font-size:11.5px;color:var(--ink3);font-weight:600}
.stab:hover{border-color:var(--line);background:var(--bg2)}
.stab.on{background:var(--em-ink);border-color:var(--em-ink);color:#fff;box-shadow:0 6px 14px -5px rgba(10,138,95,.5)}
.stab.on .num{color:rgba(255,255,255,.72)}
.fbar{display:flex;align-items:center;gap:12px;min-width:0}
.fttl{flex:none;width:56px;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.fchips{display:flex;gap:6px;flex-wrap:wrap;min-width:0;flex:1}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);
border:1px solid var(--line2);background:#fff;font-size:12.5px;font-weight:640;color:var(--ink2);
text-decoration:none;white-space:nowrap;transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.fchip .num{font-size:10.5px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
.fchip:hover{border-color:var(--line);background:var(--bg2);color:var(--ink)}
.fchip.on{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.fchip.on .num{color:rgba(255,255,255,.7)}
.fclear{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--pill);
font-size:12px;font-weight:680;color:var(--ink3);text-decoration:none;transition:color .15s var(--ease),background .15s var(--ease)}
.fclear svg{width:12px;height:12px}
.fclear:hover{color:var(--ink);background:var(--bg2)}
@media (max-width:720px){
.stab{padding:8px 13px;font-size:13px;scroll-snap-align:start}
.fbar{gap:9px;align-items:center}
.fttl{width:auto;min-width:44px;font-size:10px}
.fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:6px;
/* a chip cut dead at the container edge reads as a rendering bug; fading
the last few pixels makes it read as "there is more, swipe" */
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.fchips::-webkit-scrollbar{display:none}
.fchip{padding:7px 12px;font-size:12.5px}
.fclear{margin-right:10px;padding:6px 8px 6px 12px;border-left:1px solid var(--line2)}
/* same treatment for the kind tabs above */
.svc-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}
.seg-sort{display:inline-flex;background:#fff;border:1px solid var(--line2);border-radius:var(--pill);padding:3px;
box-shadow:0 1px 2px rgba(16,22,19,.05),0 4px 12px -6px rgba(16,22,19,.12)}
.seg-sort a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--pill);
font-size:12.5px;font-weight:680;color:var(--ink3);text-decoration:none;white-space:nowrap;transition:all .15s var(--ease)}
.seg-sort a svg{width:13px;height:13px}
@media (max-width:359px){
.seg-sort a{padding:7px 11px}
.seg-sort a svg{display:none}
}
.seg-sort a:hover{color:var(--ink)}
.seg-sort a.on{background:var(--em-ink);color:#fff;box-shadow:0 4px 10px -3px rgba(10,138,95,.45)}
.svc-kind{display:inline-flex;align-items:center;font-style:normal;background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:3px 7px;
line-height:1;font-size:10.5px;font-weight:650;color:var(--ink2);white-space:nowrap;width:fit-content}
.svc-side .card{padding:18px}
.stp-n .small{color:var(--ink3)}
.side-cta{background:linear-gradient(160deg,#0f1d17,#0a1611);color:#fff;border-color:transparent}
.side-cta h3{color:#fff}
.side-cta .small{color:#a9c4ba;margin-bottom:12px}
.btn.w{width:100%}
@media (max-width:640px){
.svc-search .btn{position:static;width:100%;margin-top:10px;height:46px}
.price-search input[type="search"],.sel-search input{font-size:16px}
.svc-plat-head .sub{font-size:13.5px;line-height:1.45;margin-top:4px}
.svc-tr .d,.svc-visit{display:none}
}
/* ==================== LIVE ACTIVITY ==================== */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12b076;position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(18,176,118,.4);animation:pulse 1.8s ease-out infinite}
.pulse.sm{width:7px;height:7px}
.pulse.xs{width:6px;height:6px;margin-right:5px;vertical-align:0}
@media (prefers-reduced-motion:reduce){
.pulse::after{animation:none}
}
/* the site's own "live" mark: three thin signal bars that breathe — used identically in the menu,
the hero eyebrow, the 24h tile and the refresh chip, so "live" always looks like one thing */
.sig{display:inline-flex;align-items:flex-end;gap:2px;width:12px;height:11px;flex:none;color:var(--em2)}
.sig i{display:block;width:2px;height:100%;border-radius:1px;background:currentColor;transform-origin:50% 100%;animation:sig 1.5s cubic-bezier(.45,0,.55,1) infinite}
.sig i:nth-child(1){transform:scaleY(.45)}
.sig i:nth-child(2){animation-delay:.25s}
.sig i:nth-child(3){transform:scaleY(.65);animation-delay:.5s}
@keyframes sig{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.sig.sm{width:10px;height:9px}
.sig.sm i{width:1.5px}
@media (prefers-reduced-motion:reduce){
.sig i{animation:none}
.sig i:nth-child(2){transform:scaleY(1)}
}
.nav-links .nav-live{display:inline-flex;align-items:center;gap:6px}
.nav-links .nav-live .sig{color:var(--em)}
.lb-head .sub{display:block;margin-top:3px;font-size:13.5px;color:var(--ink3)}
.lb-seg button.on{color:var(--ink);font-weight:650}
.lb-n .small{display:block;color:var(--ink3);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-delta.total{color:var(--ink)}
.lh-ico{font-size:22px;display:block;margin-bottom:8px}
@media (max-width:560px){
.bar-col{min-width:44px}
.bar-col:nth-child(even) .bar-t{visibility:hidden}
}
.la-head .sub{margin-top:6px}
.la-rank.top{color:var(--em-ink);font-size:15px}
@media (max-width:640px){
.la-th .la-total{display:none}
.la6 .la-total{display:revert;font-size:12.5px}
.la-th.la6 .la-total{display:revert}
}
/* full-ranking: counters that held still show a muted dash, not fake growth */
.la-grow.still{color:var(--ink3);font-weight:500}
.term{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;
border:1.5px solid var(--line2);border-radius:var(--r-md);background:var(--bg);cursor:pointer;
transition:border-color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease)}
.term input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.term .t-mo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.term .t-pr{font-size:15px;font-weight:800;color:var(--ink);line-height:1.1}
.term .t-pm{font-size:10px;font-weight:650;color:var(--ink3);letter-spacing:.01em}
.term.on .t-pm{color:var(--em-ink)}
.term .t-off{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
font-size:9.5px;font-weight:800;letter-spacing:.02em;padding:2.5px 7px;border-radius:var(--pill);
background:var(--em);color:#fff;box-shadow:0 3px 10px -3px rgba(10,138,95,.55)}
.term:hover{border-color:var(--em2);transform:translateY(-1px)}
.term.on{border-color:var(--em);background:var(--em-soft);box-shadow:0 10px 22px -16px var(--em)}
.term.on .t-mo{color:var(--em-ink)}
.term.on .t-pr{color:var(--em-dark)}
.term:focus-within{outline:2px solid var(--em2);outline-offset:2px}
@media (max-width:420px){
.term{padding:9px 3px 7px}
.term .t-mo{font-size:10px}
.term .t-pr{font-size:13.5px}
.term .t-off{font-size:9px;padding:2px 5px}
}
/* sponsor strip on section hubs (live / tools / services) */
.sp-strip{margin:18px 0 22px}
.sp-strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sp-strip-head b{font-size:14.5px;letter-spacing:-.01em}
.sp-tag{font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
border:1px solid var(--line2);border-radius:999px;padding:3.5px 10px;white-space:nowrap}
@media (max-width:359px){
.sp-tag{font-size:9.5px;letter-spacing:.06em;padding:3px 8px}
}
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sp-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);padding:14px 16px;text-decoration:none;color:inherit;
transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.sp-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(16,22,19,.28)}
.sp-card .sp-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-card .sp-n b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-open{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--line2);
border-radius:var(--r-lg);padding:14px 16px;font-size:13px;color:var(--ink3);text-decoration:none;
transition:border-color .16s var(--ease),color .16s var(--ease)}
.sp-open:hover{border-color:#12b076;color:var(--em-ink)}
.sp-strip.on-dark .sp-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#e8f5ee}
.sp-strip.on-dark .sp-tag{color:#a9c4ba;border-color:rgba(255,255,255,.18)}
.sp-strip.on-dark .sp-strip-head b{color:#fff}
.sp-strip.on-dark .sp-open{border-color:rgba(255,255,255,.2);color:#a9c4ba}
@media (max-width:760px){
.sp-cards{grid-template-columns:1fr}
}
.stab{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 16px;font-size:13.5px;
font-weight:650;color:var(--ink2);text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
.stab:hover{color:var(--ink)}
.stab.on{background:#0f1d17;color:#fff;box-shadow:0 6px 16px -8px rgba(15,29,23,.5)}
.stab .cnt{background:rgba(18,176,118,.9);color:#fff;font-size:11px;font-weight:750;border-radius:999px;
padding:1.5px 7px}
.stab.on .cnt{background:rgba(255,255,255,.22)}
@media (max-width:560px){
.stab{padding:8px 10px;font-size:12.5px}
.stab{white-space:nowrap;flex:1 1 auto;justify-content:center;padding:8px 8px}
}
/* achievements: Reddit-style collectible badges (dashboard board + listing sidebar) */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:14px 10px;margin-top:16px}
.ach{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0}
.ach img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(16,22,19,.14));
transition:transform .18s ease,filter .18s ease}
.ach:hover img{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 9px 16px rgba(16,22,19,.2))}
.ach.locked img{filter:grayscale(1);opacity:.28}
.ach.locked:hover img{transform:none;filter:grayscale(1)}
.ach.locked .ach-t{color:var(--ink3)}
.ach-t{font-size:11px;font-weight:650;color:var(--ink2);line-height:1.3}
.ach-n{position:absolute;top:-5px;right:14%;background:var(--em-ink);color:#fff;font-size:10.5px;font-weight:760;
padding:1px 6px;border-radius:99px;box-shadow:0 3px 8px -2px rgba(10,138,95,.55)}
.ach-grid.side{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px 6px;margin-top:12px}
.ach-grid.side img{width:44px;height:44px}
.ach-grid.side .ach-n{right:2%}
.ach:focus{outline:none}
.ach-grid.side .ach-t{font-size:10px}
.aw-row .aw-t .small{color:var(--ink3)}
.aw-w-info .small{color:var(--ink3);line-height:1.5}
.tk-sub .small{color:var(--ink3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* catalog filter bar: a soft elevated deck of tactile pill controls —
gradient-filled when active, lifted on hover, teasing when locked,
struck through and inert when a combination holds nothing */
.filter-bar{background:linear-gradient(180deg,#fff, #fbfcfb);border:1px solid var(--line2);border-radius:18px;
box-shadow:0 1px 2px rgba(16,22,19,.04),0 14px 34px -22px rgba(16,22,19,.25);overflow:hidden}
.filter-bar .filter-row{border-top:1px solid var(--line2);padding:11px 16px}
.filter-bar .filter-row:first-child{border-top:0}
.filter-bar .fl{min-width:64px;font-size:10.5px;font-weight:760;letter-spacing:.09em;color:var(--ink3)}
.filter-bar .chip .num{display:inline-block;margin-left:5px;padding:0 7px;border-radius:99px;font-size:11px;
background:rgba(16,22,19,.055);color:var(--ink3)}
.filter-bar a.chip:hover{transform:translateY(-1px);border-color:var(--em-ink);color:var(--em-dark);
box-shadow:0 6px 16px -7px rgba(10,138,95,.4)}
.chip.lock{opacity:.6;position:relative}
.chip.lock svg{margin-right:4px;vertical-align:-1px;opacity:.8}
.chip.lock:hover{opacity:1;border-color:var(--em-ink);color:var(--em-ink)}
.chip.dead{opacity:.3;cursor:not-allowed;text-decoration:line-through;text-decoration-color:rgba(16,22,19,.35)}
.chip.dead .num{background:transparent}
.filter-note{margin:0;padding:10px 16px 12px;color:var(--ink3);border-top:1px solid var(--line2);
background:linear-gradient(180deg,transparent,rgba(10,138,95,.04))}
.filter-note a{color:var(--em-ink);font-weight:650}
.pagination .page-numbers{transition:transform .14s ease,box-shadow .14s ease}
.pagination a.page-numbers:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(16,22,19,.4)}
.rank-head span[title]{cursor:help;text-decoration:underline dotted rgba(16,22,19,.28);text-underline-offset:3px}
.cat-networks{margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line2)}
.cat-networks h2{font-size:17px;margin-bottom:6px}
.cat-networks .small{color:var(--ink3);margin-bottom:12px;max-width:640px}
.cat-networks .small a{color:var(--em-ink)}
.mirror-row .mr-n .small{color:var(--ink3)}
.api-how .small{line-height:1.6;margin-top:6px}
/* ---------- QA pass 03.09: no sideways page, honest scroll hints, finger-sized links ---------- */
/* A hidden bubble or a wide row may still stick out of the layout; the page
itself never slides sideways. clip keeps sticky headers working (hidden would
turn the root into a scroll container). */
html{overflow-x:hidden;overflow-x:clip}
/* The header sticks: what an in-page link or a script scrolls to stops below it, not under it. Article headings,
the services rows and the API page sections carry offsets of their own. */
#reviews,#try,.cw-popular,[data-readmore]{scroll-margin-top:84px}
/* Chip rows that scroll sideways fade at the edge that still has more — the
class is toggled by main.js from the real scroll position, so the last chip
is never cut when the row is scrolled to its end. */
.scroll-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.15))}
.scroll-more-l{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 40px);mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 40px)}
.scroll-more-l.scroll-more-r{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 40px,#000 calc(100% - 40px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 40px,#000 calc(100% - 40px),rgba(0,0,0,.15))}
@media (max-width:900px){
/* text links in the footer and breadcrumbs get a tap area a thumb can hit
without the layout changing visibly */
.f-cols a,.f-plats a,.f-bottom-links a,.crumbs a,.crumbs-light a{display:inline-block;padding:7px 0;margin:-3px 0}
.pagination .page-numbers{min-width:40px;min-height:40px}
}
/* services filters on a phone: one line that opens on tap, so the offers start
above the fold; an active filter keeps its row visible so it can be reset */
.ffold{display:none}
@media (max-width:640px){
.ffold{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:8px 12px 8px 0;font:inherit;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;text-align:left}
.ffold .num{font-weight:600;color:var(--em-ink)}
.ffold svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.svc-filters.open .ffold svg,.svc-filters.has-on .ffold svg{transform:rotate(180deg)}
.svc-filters:not(.open):not(.has-on) .fbar{display:none}
}
/* the fold button sits first in the bar, so the first row keeps its border-less top */
.filter-bar .ffold + .filter-row{border-top:0}
@media (max-width:640px){
.filter-bar .ffold{padding:8px 12px}
.filter-bar:not(.open):not(.has-on) .filter-row,.filter-bar:not(.open):not(.has-on) .filter-note{display:none}
.filter-bar.open .ffold svg,.filter-bar.has-on .ffold svg{transform:rotate(180deg)}
}
/* the platforms behind the stars */
.rank .sub-src{display:block;font-size:11px;color:var(--ink3);font-weight:450;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.p-hero-side .rv-src{font-size:12.5px;color:var(--ink3);margin-top:2px}
.p-hero-side .rv-src a{color:inherit;text-decoration:underline dotted}
/* /trust-score/ */
.ts-table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 14px}
.ts-table th,.ts-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ts-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
/* the ten review platforms on a listing */
.pl-sum{font-size:14px;color:var(--ink2);margin:2px 0 14px}
.pl-sum b{color:var(--ink);font-weight:750}
.pl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pl-card{padding:12px 13px 11px;border:1px solid var(--line2);border-radius:12px;background:#fff;min-height:74px}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:750}
.pl-link{display:inline-flex;color:var(--ink3)}
.pl-link svg{width:15px;height:15px}
.pl-link:hover{color:var(--em-ink)}
.pl-rate{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:14px}
.pl-rate b{font-weight:780}
.pl-n{font-size:12px;color:var(--ink3)}
.pl-state{margin-top:8px;font-size:12px;color:var(--ink3);line-height:1.35}
.pl-state.warn{color:#b3261e}
.pl-card.s-none,.pl-card.s-pending{background:var(--bg3);border-style:dashed}
.pl-card.s-none .pl-head b,.pl-card.s-pending .pl-head b{color:var(--ink3);font-weight:650}
@media (max-width:900px){
.pl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.prof-found{flex:1;display:flex;align-items:center;gap:8px;padding-top:8px;font-size:13.5px;color:var(--ink2);flex-wrap:wrap}
.prof-found .prof-st{display:inline;margin:0}
.prof-open{font-size:12.5px;color:var(--em-ink);text-decoration:underline dotted}
/* review platforms on a listing: icon · name · figure · arrow */
.pl-verdict{display:flex;align-items:center;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.pl-big{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1}
.pl-sub{font-size:13.5px;color:var(--ink3)}
.pl-sub b{color:var(--ink);font-weight:750}
.pl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.pl-row{display:grid;grid-template-columns:20px 108px minmax(0,1fr) 16px;align-items:center;gap:0 10px;min-height:46px;padding:6px 0;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none}
a.pl-row:hover .pl-name{color:var(--em-ink)}
a.pl-row:hover .pl-arrow{color:var(--em-ink)}
.pl-row.s-none .pl-ico,.pl-row.s-pending .pl-ico{opacity:.45;filter:grayscale(1)}
.pl-name{font-weight:750;font-size:14px;color:var(--ink);line-height:1.15}
.pl-row.s-none .pl-name,.pl-row.s-pending .pl-name{color:var(--ink3);font-weight:620}
.pl-val{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.3;color:var(--ink3)}
.pl-val b{color:var(--ink);font-weight:780;font-size:14px}
.pl-val .pl-n{font-size:12.5px}
.pl-val.warn{color:#b3261e;font-weight:600}
.pl-val .stars{vertical-align:middle}
.pl-val.rated{flex-wrap:nowrap;white-space:nowrap}
.pl-val .stars i{width:11px;height:11px;border-radius:2.5px}
.pl-val .stars i svg{width:7px;height:7px}
.pl-val .stars .lay{gap:2px}
.pl-arrow{display:inline-flex;color:var(--ink3);justify-self:end}
.pl-arrow svg{width:15px;height:15px}
@media (max-width:1100px){
.pl-row{grid-template-columns:20px 100px minmax(0,1fr) 16px}
}
@media (max-width:700px){
.pl-list{grid-template-columns:1fr}
.pl-row{grid-template-columns:20px 112px minmax(0,1fr) 16px}
}
.tsv-how{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--em-ink)}
.tsv-how svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.tsv-how:hover svg{transform:translateX(2px)}
.tsv-g.full .tsv-g-v{color:var(--em-ink)}
.tsv-g.zero .tsv-g-v{color:var(--ink3)}
.tsv-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;
background:linear-gradient(160deg,#17b077 0%,#0a7a53 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 3px 8px -2px rgba(7,89,64,.45)}
.tsv-ico svg{width:17px;height:17px}
.tsv-tile.s-full .tsv-tile-pts{color:var(--em-ink)}
.tsv-tile.s-zero .tsv-tile-pts{color:var(--ink3)}
.tsv-tile.s-neg .tsv-tile-pts{color:#a3321f}
/* ---------- /trust-score/ page ---------- */
.tsp{padding-bottom:70px}
.tsp-top{display:flex;align-items:center;gap:14px;padding:26px 0 0}
.tsp-hero{display:flex;align-items:center;gap:28px;padding:26px 0 8px}
.tsp-hero-text{flex:1;min-width:0}
.tsp-hero h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;margin:0 0 12px}
.tsp-hero .sub{max-width:660px;font-size:17px;color:var(--ink2);margin:0 0 18px}
.tsp-duck{width:180px;height:180px;flex:none;filter:drop-shadow(0 14px 24px rgba(16,22,19,.16))}
.tsp-facts{display:flex;flex-wrap:wrap;gap:10px}
.tsp-facts span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid var(--line2);box-shadow:var(--sh-s);font-size:13.5px;color:var(--ink2)}
.tsp-facts b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.tsp-sec{margin-top:40px}
.tsp-sec-h{max-width:760px;margin-bottom:16px}
.tsp-sec-h h2{font-size:24px;letter-spacing:-.02em;margin:0 0 8px}
.tsp-sec-h p{font-size:15.5px;line-height:1.65;color:var(--ink2);margin:0}
.tsp-sec-h a{color:var(--em-ink);font-weight:650;text-decoration:underline;text-decoration-color:rgba(11,107,74,.35);text-underline-offset:3px}
.tsp-note{max-width:760px;font-size:14px;line-height:1.6;color:var(--ink2);margin:16px 0 0}
.tsp-formula{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.tsp-fgroup{padding:14px 14px 6px;border-radius:14px;background:linear-gradient(180deg,#fff,#f9fcfa);border:1px solid rgba(16,22,19,.09);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,22,19,.05),0 12px 24px -16px rgba(16,22,19,.3)}
.tsp-fgroup h3{font-size:14px;font-weight:750;color:var(--ink3);margin:0 0 6px}
.tsp-bands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tsp-band{padding:12px 14px;border-radius:12px;border:1px solid rgba(16,22,19,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.tsp-band b{display:block;font-size:15px;font-weight:780}
.tsp-band span{font-size:12.5px;color:var(--ink3)}
.tsp-band.b-bad{background:linear-gradient(180deg,#fdecea,#f9dcd8)}
.tsp-band.b-bad b{color:#8f1d1d}
.tsp-band.b-low{background:linear-gradient(180deg,#fdefe3,#f8dfc7)}
.tsp-band.b-low b{color:#a3321f}
.tsp-band.b-mixed{background:linear-gradient(180deg,#fdf6e3,#f6e7b9)}
.tsp-band.b-mixed b{color:#8a5a00}
.tsp-band.b-ok{background:linear-gradient(180deg,#e9f1fc,#d6e4f7)}
.tsp-band.b-ok b{color:#1d4ed8}
.tsp-band.b-high{background:linear-gradient(180deg,#e6f6ee,#cdeddc)}
.tsp-band.b-high b{color:var(--em-dark)}
.tsp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#0d2b1c 0%,#0f4a32 100%);color:#fff;box-shadow:0 20px 50px -20px rgba(7,89,64,.6)}
.tsp-cta h2{font-size:22px;letter-spacing:-.02em;margin:0 0 6px;color:#fff}
.tsp-cta p{margin:0;max-width:560px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.tsp-cta-b{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.tsp-cta .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
@media (max-width:1000px){
.tsp-formula{grid-template-columns:1fr}
.tsp-bands{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
.tsp-hero{flex-direction:column-reverse;align-items:flex-start;gap:12px}
.tsp-duck{width:120px;height:120px}
.tsp-bands{grid-template-columns:repeat(2,minmax(0,1fr))}
.tsp-cta{flex-direction:column;align-items:flex-start;padding:22px}
}
/* ---------- referral program ---------- */
.ref-table{width:100%;border-collapse:collapse;font-size:14px}
.ref-table th,.ref-table td{padding:10px 10px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
.ref-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:700;white-space:nowrap}
.ref-table tbody tr:last-child td{border-bottom:0}
.ref-table th.num,.ref-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-none td{color:var(--ink3);font-size:13.5px;padding:16px 10px 8px}
@media (max-width:900px){
.ref-terms{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.ref-link-card{flex-direction:column;align-items:stretch}
.ref-duck{display:none}
.ref-table{font-size:13px}
.ref-table th,.ref-table td{padding:8px 8px}
}
.wl-locked{display:flex;gap:16px;align-items:center}
.wl-locked img{width:84px;height:84px;flex:none;filter:drop-shadow(0 8px 14px rgba(16,22,19,.12))}
.wl-locked b{display:block;font-size:15px;margin-bottom:3px}
.wl-locked span{font-size:13.5px;line-height:1.5;color:var(--ink2)}
.wl-locked a{color:var(--em-ink);font-weight:600}
/* drawn icon set: the tile is part of the picture, so the box behind it goes */
.tsv-ico.pic{width:34px;height:34px;background:none!important;box-shadow:none!important;border-radius:0;filter:drop-shadow(0 3px 5px rgba(7,89,64,.22))}
.tsv-ico.pic img{width:34px;height:34px;display:block}
/* a contact address is as long as it is: it must never decide how wide the page is */
.ct-list{display:flex;flex-direction:column;min-width:0;contain:inline-size}
@supports not (contain:inline-size){
.ct-t span{white-space:normal;overflow-wrap:anywhere}
}
.ct-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none;min-width:0}
.ct-item:last-child{border-bottom:0}
.ct-item img{width:20px;height:20px;border-radius:6px;flex:none}
.ct-t{display:flex;flex-direction:column;min-width:0;flex:1}
.ct-t b{font-size:13px}
.ct-t span{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-arrow{width:14px;height:14px;color:var(--ink3);flex:none}
a.ct-item:hover .ct-t b,a.ct-item:hover .ct-arrow{color:var(--em-ink)}
/* ---------- trust checklist & getting started ---------- */
.tcl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tcl-head h2{margin-bottom:14px}
.tcl .btn{flex:none;white-space:nowrap}
.gs .btn{flex:none;white-space:nowrap}
.img-actions .btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line2);margin-bottom:10px}
.tiers{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tier{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:5px 6px 5px 10px}
.tier input{width:84px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;background:#fff}
.tier input:focus{outline:0;border-color:var(--em);box-shadow:0 0 0 3px var(--em-soft)}
@media (max-width:760px){
.tier{flex-wrap:wrap}
.tier input{width:72px}
}
/* ---------- avatars: ducks on coloured discs, or a photo ---------- */
.ava,.rev-ava{background:#d7f0e4}
.ava.t-green,.rev-ava.t-green{background:#d7f0e4}
.ava.t-blue,.rev-ava.t-blue{background:#dbe8fb}
.ava.t-rose,.rev-ava.t-rose{background:#fbe1e6}
.ava.t-gold,.rev-ava.t-gold{background:#fbeecb}
.ava.t-violet,.rev-ava.t-violet{background:#e8e0fb}
.ava.t-slate,.rev-ava.t-slate{background:#e3e7ea}
.ava.t-blue img,.ava.t-rose img,.ava.t-gold img,.ava.t-violet img,.ava.t-slate img,.rev-ava.t-blue img,.rev-ava.t-rose img,.rev-ava.t-gold img,.rev-ava.t-violet img,.rev-ava.t-slate img{filter:none}
.card h3 .q{font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0;margin-left:6px}
.plogo.hero{width:112px;height:112px;padding:0;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(16,22,19,.08),0 18px 40px -16px rgba(16,22,19,.45)}
.plogo.hero img{width:100%;height:100%;border-radius:26px;object-fit:cover;background:#fff;border:2px solid #fff;box-sizing:border-box;box-shadow:none}
.rv-none{margin:0 0 14px;color:var(--ink2)}
.p-hero-side .big-rate{font-size:50px;line-height:1}
.p-hero-side .rv{margin:0;font-size:13.5px}
@media (max-width:760px){
.plogo.hero{width:88px;height:88px;border-radius:22px;padding:0}
.plogo.hero img{border-radius:22px}
.p-hero-side .big-rate{font-size:42px}
}
/* ---------- hidden means hidden: class rules with display kept beating the attribute (tier rows, password hint, listing footer) ---------- */
[hidden]{display:none!important}
@media (max-width:760px){
.tier{flex-wrap:nowrap}
.tier input{width:58px;padding:6px 6px}
}
.dw-card h2,.dw-card .dw-facts{padding-right:110px}
@media (max-width:760px){
.dw-card h2,.dw-card .dw-facts{padding-right:0}
}
/* ---------- services explorer: chips under a row, reasons on the panel page ---------- */
.svc-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:650;line-height:1;padding:3px 7px;border-radius:6px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.svc-chip.geo{background:#eef4ff;border-color:#d8e3ff;color:#2b4f9e}
.svc-chip.real{background:var(--em-soft);border-color:var(--em-soft2);color:var(--em-ink)}
.svc-chip.bot{background:#fff1ee;border-color:#ffd9d1;color:#a3321f}
.svc-chip.norefill{color:var(--ink3)}
.svc-chip.cur{background:#fff8e6;border-color:#f5e6b8;color:#7a5a00}
.svc-chip.lang{background:#f4f0ff;border-color:#e3daff;color:#5b3fa8}
.rf-link .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cf-search .btn{position:absolute;right:7px;top:7px;height:46px;padding:0 22px}
/* ---------- /trust-score/ v2: no lonely paragraphs, one scale, equal columns, raised surfaces ---------- */
/* the global section padding (84px top and bottom) is what made this page look empty — sections here space themselves */
.tsp .tsp-sec:not(.tsp-cta){padding:0;margin-top:34px}
.tsp-sec-h{margin-bottom:14px}
.tsp-card{background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);border:1px solid rgba(16,22,19,.075);border-radius:20px;padding:22px 24px;
box-shadow:0 1px 1px rgba(16,22,19,.03),0 2px 6px rgba(16,22,19,.04),0 22px 44px -26px rgba(16,22,19,.22),inset 0 1px 0 #fff}
.tsp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tsp-checks li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.tsp-checks li b{color:var(--ink)}
.tsp-checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--em) no-repeat center/10px url('data:image/svg+xml;utf8,');box-shadow:0 2px 6px -2px rgba(10,138,95,.6)}
.tsp-two .tsp-plat-s{font-size:12px}
.tsp-note{max-width:none;font-size:13px;margin-top:12px}
/* the formula card */
.tsp-fcard{padding:20px 22px 18px}
/* the scale */
.tsp-scale-card{padding:26px 24px 22px}
@media (max-width:760px){
.tsp-card,.tsp-fcard,.tsp-scale-card{padding:16px 14px}
}
/* the panel's own service ID next to the panel name in explorer rows */
.svc-id{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;line-height:1;padding:3px 7px;border-radius:6px;background:#fff;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.01em;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(16,22,19,.04)}
.svc-id i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--ink3);letter-spacing:.06em}
@media (max-width:640px){
/* ---------- phone header: two equal buttons, the burger folds into a cross ---------- */
.nav{gap:14px}
.nav-cta{gap:8px}
.hd-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:#fff;color:var(--ink);
box-shadow:0 1px 2px rgba(16,22,19,.04);transition:background .18s var(--ease),border-color .18s var(--ease)}
.hd-btn:hover,.hd-btn:active{background:var(--bg2)}
.hd-btn svg{width:18px;height:18px}
}
.bg-lines{display:grid;gap:4.5px;width:18px}
.bg-lines i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .22s var(--ease),opacity .16s var(--ease)}
.burger[aria-expanded="true"] .bg-lines i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] .bg-lines i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bg-lines i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* ---------- the phone menu: a sheet under the header over a dimmed page ---------- */
.m-menu{display:none}
.m-menu.open{display:block;position:fixed;inset:0;z-index:99;background:rgba(12,18,16,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:0;overflow:visible}
.m-menu .m-sheet{position:absolute;top:64px;left:0;right:0;max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;
background:#fff;border-radius:0 0 24px 24px;box-shadow:0 34px 60px -24px rgba(12,18,16,.45);
padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(-10px);opacity:0;transition:transform .22s var(--ease),opacity .18s var(--ease)}
.m-menu.open .m-sheet{transform:none;opacity:1}
.m-menu .m-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.m-menu .m-auth .btn{display:flex;justify-content:center;align-items:center;height:46px;border-radius:12px;font-size:14.5px;padding:0 12px;width:auto;text-align:center;border-bottom:0}
.m-menu .m-acct{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--bg3);margin-bottom:14px}
.m-menu .m-acct .ava{width:38px;height:38px;flex:none}
.m-menu .m-acct-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.m-menu .m-acct-t b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-menu .m-acct-t span{font-size:12px;color:var(--ink3)}
/* the three dashboards get a row of their own under the name: the whole name shows, each part is a thumb-sized tap */
.m-menu .m-acct:has(.m-switch){flex-wrap:wrap}
.m-menu .m-switch{display:flex;flex:1 1 100%;padding:3px;gap:2px;background:#fff;border:1px solid var(--line2);border-radius:10px}
.m-menu .m-switch a{display:block;flex:1;width:auto;padding:9px 6px;border-radius:8px;font-size:13px;font-weight:680;color:var(--ink3);border-bottom:0;text-align:center}
.m-menu .m-switch a.on{background:var(--ink);color:#fff}
.m-menu .m-nav{display:grid;gap:2px}
.m-menu .m-nav a{display:flex;align-items:center;gap:13px;width:auto;height:52px;padding:0 12px;border-radius:12px;border-bottom:0;text-align:left;
font-size:16.5px;font-weight:640;letter-spacing:-.01em;color:var(--ink);transition:background .16s var(--ease)}
.m-menu .m-nav a svg{width:20px;height:20px;color:var(--ink3);flex:none}
.m-menu .m-nav a:hover,.m-menu .m-nav a:active{background:var(--bg2)}
.m-menu .m-nav a[aria-current="page"]{background:var(--em-soft);color:var(--em-ink)}
.m-menu .m-nav a[aria-current="page"] svg{color:var(--em-ink)}
.m-menu .m-h{font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:16px 12px 6px}
.m-menu .m-nav .sig{width:20px;height:13px;gap:3px;justify-content:center;color:var(--em)}
.m-menu .m-nav .sig i{width:3px}
/* the name opens the account, as the avatar does in the header */
.m-menu .m-acct-me{display:flex;align-items:center;gap:12px;flex:1;min-width:0;width:auto;padding:0;border-bottom:0;font-size:inherit;font-weight:inherit;color:inherit}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.m-menu .m-sheet,.bg-lines i{transition:none}
}
@media (max-width:1040px){
/* ---------- catalog card on phones and tablets: one fixed skeleton for every panel ----------
Position box, logo, a one-line name, the badges row, the domain and status row, the rating
with the ring, then a three-cell stats strip with captions — the same slots on every card and
an em dash where a value is missing, so cards line up whatever the name or the data. */
.rank .rank-row{grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:15px 16px 16px;align-items:start}
.rank .rank-pos{align-self:start;padding-top:8px}
.rank .rank-pos .medal{width:28px;height:28px;border-radius:9px;font-size:12.5px}
.rank .rank-pos .medal.plain{background:var(--bg2);color:var(--ink3);border:1px solid var(--line2);box-shadow:none}
.rank .rank-name{align-items:flex-start;gap:12px}
.rank .rank-name .plogo{width:44px;height:44px;border-radius:12px;margin-top:0}
.rank .rank-name .plogo.frame{padding:6px}
.rank .rank-name .nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;row-gap:7px;font-size:16px;line-height:1.2;overflow:visible}
.rank .rank-name .nm .pn{flex:1 1 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .rank-name .nm .badge{font-size:10.5px;padding:3px 8px;border-radius:7px;gap:4px;line-height:1.2}
.rank .rank-name .nm .badge svg{width:10px;height:10px}
.rank .rank-name .dm{margin-top:7px;gap:8px;font-size:12.5px}
.rank .rank-name .dm .b-online{display:inline-flex;font-size:11.5px}
.rank .rank-name .dm .b-online.off{color:var(--ink3)}
.rank .rank-name .dm .b-online.off::before{background:#c9d1cc;box-shadow:none}
.rank .rank-cells{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line2)}
.rank .c-rating{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;font-size:13.5px;line-height:1.25}
.rank .c-rating .cell-label,.rank .c-score .cell-label{display:none}
.rank .c-score{justify-self:end;margin-left:0}
.rank .c-meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;margin-top:4px;padding-top:11px;border-top:1px dashed var(--line2)}
.rank .c-meta>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;min-height:50px;font-size:15px;line-height:1.2}
.rank .c-meta .cell-label{display:block;order:-1;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 1px}
.rank .c-meta .price-from{order:3;font-size:12px;font-weight:650;color:var(--em-ink);margin-top:1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .numv{font-size:15px}
.rank .stars i{width:13px;height:13px;border-radius:2.5px}
.rank .stars i svg{width:8px;height:8px}
.rank .mini-ring{--rz:36px}
.rank .mini-ring b{font-size:11.5px}
.rank .sub-n{font-size:12px}
}
@media (max-width:400px){
.rank .rank-row{grid-template-columns:28px minmax(0,1fr);padding:13px 13px 15px;gap:0 10px}
.rank .rank-pos{padding-top:7px}
.rank .rank-pos .medal{width:26px;height:26px;border-radius:8px;font-size:12px}
.rank .rank-name{gap:10px}
.rank .rank-name .plogo{width:40px;height:40px;border-radius:11px}
.rank .rank-name .nm{font-size:15px}
.rank .c-meta{gap:0 8px}
.rank .c-meta>span{font-size:14px;min-height:48px}
}
/* the plain position number stays a number on wide screens; the box is a phone thing */
.rank-pos .medal.plain{display:inline;width:auto;height:auto;padding:0;background:none;border:0;box-shadow:none;color:inherit;font-size:inherit;border-radius:0}
@media (max-width:1040px){
.rank .rank-pos .medal.plain{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;font-size:12.5px;background:var(--bg2);color:var(--ink3);border:1px solid var(--line2);box-shadow:none}
/* the sources always take their own line: every rating block is the same two lines tall */
.rank .c-rating .sub-src{flex-basis:100%;font-size:12px;color:var(--ink3);line-height:1.3;margin-top:1px}
}
@media (max-width:400px){
.rank .rank-pos .medal.plain{width:26px;height:26px;border-radius:8px;font-size:12px}
}
@media (max-width:640px){
/* phone header: the logo on the left, search and menu flush right (the desktop nav that used to push them is hidden here) */
.nav-cta{margin-left:auto}
/* the breadcrumb sits inside the same gutter as everything else */
.crumbs{left:24px;right:24px}
}
/* the "i" tooltips are 16px dots; the finger gets a 32px target without the dot growing */
.tip-btn{position:relative}
.tip-btn::before{content:"";position:absolute;inset:-8px;border-radius:50%}
/* ---------- the phone menu is a full-screen layer with its own bar (the close never leaves the screen) ---------- */
.m-menu.open{position:fixed;inset:0;z-index:120;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.m-menu .m-sheet{position:absolute;inset:0;display:flex;flex-direction:column;max-height:none;overflow:hidden;
border-radius:0;box-shadow:none;padding:0;transform:none;opacity:1;transition:none}
.m-menu .m-bar{flex:none;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;border-bottom:1px solid var(--line2);
padding-top:env(safe-area-inset-top,0px);box-sizing:content-box}
.m-menu .m-bar .logo{display:flex;align-items:center;gap:10px;width:auto;padding:0;border-bottom:0;font-size:20.5px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.m-menu .m-bar-btns{display:flex;gap:8px}
.m-menu .m-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));animation:m-in .22s var(--ease) both}
@keyframes m-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the page behind stays exactly where it was: fixed at its offset, width kept, no scroll */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@media (prefers-reduced-motion:reduce){
.m-menu .m-body{animation:none}
}
.pfaq .faq-a p{margin:0}
@media (max-width:640px){
.tsp-cta .tsp-cta-b .btn{flex:1 1 auto;text-align:center}
}
.cat-networks + .cat-networks{margin-top:28px}
.api-key{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;padding:10px 12px;background:#fff;border:1px dashed var(--em-ink);border-radius:10px;word-break:break-all;user-select:all;-webkit-user-select:all}
.dev-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dev-step code,.dev-table code,.tsp-sec-h code,.tsp-note code,.tsp-checks code,.dev-p code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--bg2);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;white-space:nowrap}
.dev-table td{font-size:13.5px;line-height:1.55;vertical-align:top}
.dev-table td:first-child{white-space:nowrap}
.dev-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start}
@media (max-width:900px){
.dev-steps,.dev-two{grid-template-columns:1fr}
}
@media (max-width:640px){
.dev-table td{padding:3px 0;border:0}
.dev-table td:first-child{white-space:normal;padding-bottom:6px}
.dev-step code,.dev-p code,.tsp-sec-h code,.tsp-note code,.tsp-checks code{white-space:normal;word-break:break-all}
}
.cmp-card{padding:6px 20px 16px}
.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,2fr) minmax(0,2fr);gap:10px 18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line2)}
.cmp-head{padding:16px 0 12px}
.cmp-row:last-of-type{border-bottom:0}
.cmp-k{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.cmp-v{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.cmp-v.win{color:var(--em-dark)}
.cmp-v.win::before,.cmp-legend i{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--em);margin-right:7px;vertical-align:middle}
.cmp-p{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.cmp-p>span{display:flex;flex-direction:column;min-width:0}
.cmp-p b{font-size:15.5px;letter-spacing:-.01em;overflow-wrap:anywhere}
.cmp-p i{font-style:normal;font-size:12.5px;color:var(--ink3)}
.cmp-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:14px}
.cmp-legend{font-size:12.5px;color:var(--ink3);margin-left:auto}
.cmp-verdict{font-size:15.5px;line-height:1.65;color:var(--ink2);margin:0}
@media (max-width:640px){
.cmp-head,.cmp-row{grid-template-columns:1fr 1fr;gap:6px 10px}
.cmp-row .cmp-k{grid-column:1/-1;padding-top:2px}
.cmp-head .cmp-k:first-child{display:none}
/* logo above the name: two names side by side no longer break mid-word ("autosmo.co / m") */
.cmp-head .cmp-p{flex-direction:column;align-items:flex-start;gap:8px}
.cmp-head .cmp-p b{font-size:14.5px}
.cmp-head-s .cmp-k:first-child{display:none}
.cmp-legend{margin-left:0;width:100%}
}
/* ---------- select controls: one component for every filter ----------
A summary button (label · value) and a menu of real links. Without JS it still opens and closes; JS adds search,
one-open-at-a-time, arrow keys and the phone sheet. Nothing scrolls sideways. */
.sel{position:relative;display:inline-block}
.sel>summary{list-style:none}
.sel>summary::-webkit-details-marker{display:none}
.sel-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 11px 0 13px;border-radius:12px;border:1px solid var(--line2);background:#fff;cursor:pointer;user-select:none;
font-size:13.5px;color:var(--ink);box-shadow:0 1px 2px rgba(16,22,19,.04);transition:border-color .15s,box-shadow .15s,background .15s;white-space:nowrap}
.sel-btn:hover{border-color:var(--line);background:var(--bg2)}
.sel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--em-soft),0 0 0 1.5px var(--em-ink)}
.sel-l{font-size:10.5px;font-weight:760;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sel-v{font-weight:700;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.sel-c{width:15px;height:15px;color:var(--ink3);flex:none;transition:transform .2s var(--ease)}
.sel[open] .sel-c{transform:rotate(180deg)}
.sel[open] .sel-btn{border-color:var(--line);box-shadow:0 0 0 3px var(--em-soft)}
.sel.on .sel-btn{border-color:var(--em);background:var(--em-soft)}
.sel.on .sel-v{color:var(--em-ink)}
.sel.on .sel-l{color:var(--em-dark)}
.sel-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:270px;max-width:min(380px,calc(100vw - 32px));background:#fff;border:1px solid var(--line2);border-radius:14px;
box-shadow:0 2px 4px rgba(16,22,19,.06),0 24px 48px -20px rgba(16,22,19,.35);padding:6px;animation:sel-in .14s var(--ease) both}
@keyframes sel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sel-head{display:none}
.sel-search{display:flex;align-items:center;gap:8px;margin:2px 2px 6px;padding:0 10px;height:36px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2)}
.sel-search:focus-within{border-color:var(--em);background:#fff;box-shadow:0 0 0 3px var(--em-soft)}
.sel-search svg{width:15px;height:15px;color:var(--ink3);flex:none}
.sel-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;outline:none;color:var(--ink)}
.sel-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px}
.sel-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:none;line-height:1.3}
.sel-opt>span{flex:1;min-width:0;overflow-wrap:anywhere}
.sel-opt .num{font-size:11.5px;font-weight:600;color:var(--ink3);padding:1px 7px;border-radius:99px;background:rgba(16,22,19,.055);flex:none}
.sel-opt:hover,.sel-opt:focus-visible{background:var(--bg2);color:var(--ink);outline:none}
.sel-opt.on{background:var(--em-soft);color:var(--em-ink)}
.sel-opt.on .num{background:rgba(10,138,95,.12);color:var(--em-ink)}
.sel-ck{width:15px;height:15px;color:var(--em-ink);flex:none}
.sel-opt.lock{opacity:.6}
.sel-opt.lock:hover{opacity:1}
.sel-opt .lk{width:12px;height:12px;flex:none;opacity:.8}
.sel-opt.dead{opacity:.35;cursor:not-allowed;text-decoration:line-through;text-decoration-color:rgba(16,22,19,.35)}
.sel-opt.hide{display:none}
.sel-empty{margin:0;padding:10px;font-size:13px;color:var(--ink3)}
.sel-note{margin:6px 4px 2px;padding-top:8px;border-top:1px solid var(--line2);font-size:12px;line-height:1.5;color:var(--ink3)}
.sel-note a{color:var(--em-ink);font-weight:600}
/* the bar that holds them: it must not clip the menus that drop out of it */
.filter-bar.fsel-bar{overflow:visible}
.fsel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fsel-bar .fsel{padding:12px 14px}
.fsel-plain{margin-top:12px}
.freset{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 8px;font-size:13px;font-weight:650;color:var(--ink2);text-decoration:none;border-radius:10px}
.freset svg{width:14px;height:14px}
.freset:hover{color:var(--em-ink);background:var(--bg2)}
.fsel-bar.tools-fbar{width:fit-content;max-width:100%}
@media (max-width:640px){
.fsel-bar .fsel{padding:10px 12px}
.fsel .sel{flex:1 1 calc(50% - 4px);min-width:0}
/* on a phone the button is a two-line field — the label small above, the value on its own line below — so
"QUALITY Non-drop + real" never fights for one line and never shrinks to "A…" */
.fsel .sel-btn{width:100%;height:auto;min-height:48px;padding:6px 10px 7px 12px;display:grid;grid-template-columns:minmax(0,1fr) 15px;
grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:center;text-align:left}
.fsel .sel-l{grid-column:1;grid-row:1;font-size:9.5px;letter-spacing:.09em;white-space:nowrap}
.fsel .sel-v{grid-column:1;grid-row:2;max-width:none;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel .sel-c{grid-column:2;grid-row:1/span 2}
.freset{margin-left:0;width:100%;justify-content:center;border:1px solid var(--line2);background:#fff}
/* on a phone the menu is a sheet from the bottom with its own head and a backdrop */
.sel[open]::before{content:"";position:fixed;inset:0;background:rgba(16,22,19,.42);z-index:39;animation:sel-fade .15s both}
@keyframes sel-fade{from{opacity:0}to{opacity:1}}
.sel-menu{position:fixed;left:10px;right:10px;bottom:10px;top:auto;max-width:none;min-width:0;max-height:min(78vh,620px);display:flex;flex-direction:column;border-radius:18px;
padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));animation:sheet-in .2s var(--ease) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sel-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px 10px;font-size:15.5px}
.sel-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.sel-x svg{width:16px;height:16px}
.sel-search{flex:none;height:40px}
.sel-list{max-height:none;flex:1;min-height:0}
.sel-opt{padding:12px 10px;font-size:15px}
.sel-note{flex:none}
}
@media (prefers-reduced-motion:reduce){
.sel-menu,.sel[open]::before{animation:none}
}
@media (max-width:640px){
.fprice .btn{flex:none}
}
/* ---------- engine reviews in the owner dashboard: both engines, one block ---------- */
.eng-block{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 0%,#f3faf6 100%);border:1px solid rgba(10,138,95,.18)}
.eng-block::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(10,138,95,.12),rgba(10,138,95,0) 70%);pointer-events:none}
.eng-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.eng-head h2{margin:0 0 4px}
.eng-head p{margin:0;max-width:62ch}
@media (max-width:720px){
.eng-head{align-items:flex-start}
}
/* ---------- the dashboard links live in the phone menu ---------- */
.m-menu .lk-nav{position:static;display:grid;gap:2px;padding:0;margin:0;top:auto}
.m-menu .lk-nav .who{display:none}
.m-menu .lk-nav form{display:contents}
.m-menu .lk-link{display:flex;align-items:center;height:48px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);width:auto;box-shadow:none;border:0;background:none;gap:13px;text-align:left}
.m-menu .lk-link svg{width:20px;height:20px;color:var(--ink3)}
.m-menu .lk-link:hover,.m-menu .lk-link:active{background:var(--bg2);box-shadow:none;color:var(--ink)}
.m-menu .lk-link.on{background:var(--em-soft);color:var(--em-ink)}
.m-menu .lk-link.on svg{color:var(--em-ink)}
.m-menu .lk-link.on::before{display:none}
.m-menu .lk-link.out{margin-top:0;color:var(--ink2)}
.m-menu .lk-link .cnt{margin-left:auto}
/* ---------- payments & perks on a panel page: one compact strip of plain text, no pills ---------- */
.card.pay{padding:22px 26px}
.pay-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pay-head h2{margin:0;font-size:17px;letter-spacing:-.012em}
@media (max-width:640px){
.card.pay{padding:18px}
}
.an-svg{width:100%;height:auto;display:block}
.an-svg .grid{stroke:#eef1ef;stroke-width:1}
.an-svg .axis{stroke:#dfe4e1;stroke-width:1}
.an-svg .yl,.an-svg .xl{fill:#7a8480;font-size:10.5px;font-family:inherit}
.an-svg .hit{fill:transparent}
.an-svg .bar{fill:#12b076;opacity:.85}
.an-svg .bar.clk{fill:#0f5c40}
.an-svg .bar.cur{opacity:.5}
.an-svg .an-b:hover .bar{opacity:1}
.an-svg .an-b:hover .hit{fill:rgba(18,176,118,.07)}
.an-svg .ln{fill:none;stroke:#0f1d17;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.an-svg .dot{fill:#0f1d17}
.an-svg .empty{fill:#7a8480;font-size:12.5px;font-family:inherit}
/* one chart, two sizes: the dense one takes over on phones so labels stay readable */
.an-svg.sm{display:none}
@media (max-width:640px){
.an-svg.lg{display:none}
.an-svg.sm{display:block}
}
.cw-add .filter-note{margin:12px -16px -14px;padding:12px 16px 14px;border-radius:0 0 20px 20px;line-height:1.55}
.cw-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;box-shadow:0 1px 1px rgba(16,22,19,.03);-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease),box-shadow .18s}
.cw-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 30px;gap:10px;align-items:center;flex:none;width:224px;padding:9px 9px 9px 10px;border-radius:14px;background:#fff;border:1px solid rgba(16,22,19,.09);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,22,19,.05),0 10px 22px -16px rgba(16,22,19,.3);cursor:grab;scroll-snap-align:start;user-select:none;-webkit-user-drag:element;transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s,border-color .2s,background .2s}
.cw-plus{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(16,22,19,.06);-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease)}
.cw-board{position:relative;margin-top:18px;min-height:200px;border-radius:20px;transition:opacity .18s}
.cb-h{min-width:172px;max-width:224px;padding:14px 12px 12px;text-align:left;vertical-align:top;transition:opacity .16s,transform .16s var(--ease),box-shadow .16s}
.hide-same tr.same{display:none}
.cb-h-s .plogo.xs{width:28px;height:28px;border-radius:8px;padding:4px}
.cw-toast{position:fixed;left:50%;bottom:24px;z-index:100;padding:10px 16px;border-radius:999px;background:rgba(12,18,16,.92);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:transform .25s var(--ease),opacity .25s}
.cw-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:768px){
.cw-actions .btn{flex:1}
}
@media (max-width:640px){
.cw-add .filter-note{margin:10px -10px -10px;padding:10px 12px 12px;border-radius:0 0 16px 16px}
}
@media (prefers-reduced-motion:reduce){
.cw-card,.cw-chip,.cw-plus,.cb-h,.cw-toast,.cw-board,.cw-switch span::after{transition:none}
}
/* pick panels for a comparison from the catalog rows; the bar at the foot carries the count and the link */
.cmp-pick{display:inline-flex;align-items:center;gap:5px;flex:none;height:24px;margin-left:2px;padding:0 9px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:11.5px;font-weight:650;color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s,color .16s,border-color .16s,transform .16s var(--ease)}
.cmp-pick svg{width:12px;height:12px}
.cmp-pick:hover{border-color:rgba(10,138,95,.4);color:var(--em-ink);background:var(--em-soft)}
.cmp-pick:active{transform:scale(.97)}
.cmp-pick.on{background:var(--em);border-color:var(--em);color:#fff}
.cmp-pick.on:hover{background:var(--em-dark);border-color:var(--em-dark);color:#fff}
.cmp-pick:focus-visible{outline:2px solid var(--em2);outline-offset:2px}
.cmp-bar{position:fixed;left:50%;bottom:22px;z-index:90;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:rgba(12,18,16,.94);color:#fff;font-size:13.5px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:transform .25s var(--ease),opacity .25s}
.cmp-bar.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.cmp-bar-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-bar-n b{font-size:14.5px;font-weight:800}
.cmp-bar-go{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 14px 0 16px;border-radius:999px;background:linear-gradient(180deg,#11a874,#0a8a5f 78%);color:#fff;font-weight:700;text-decoration:none;box-shadow:var(--sh-em);transition:filter .2s,transform .2s var(--ease)}
.cmp-bar-go:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cmp-bar-go svg{width:14px;height:14px}
.cmp-bar-x{width:32px;height:32px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.cmp-bar-x:hover{background:rgba(255,255,255,.2)}
@media (max-width:640px){
.cmp-bar{bottom:14px;gap:8px;padding:6px 6px 6px 12px;font-size:12.5px}
.cmp-bar-go{height:34px;padding:0 12px 0 14px}
}
/* ==================== SERVICES: price note, history, thumbs, report ==================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sa:focus-visible,.svc-move:focus-visible,.sd-x:focus-visible,.ph-retry:focus-visible{outline:2px solid var(--em2);outline-offset:2px}
.svc-chip.warn{background:#fff4e5;border-color:#ffe0b3;color:#9a5b00}
.ph{background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px 12px;box-shadow:0 1px 2px rgba(16,22,19,.04)}
.ph-fail{margin:0;padding:12px 14px;font-size:12.5px;color:var(--ink2);background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r-md)}
/* report dialog */
.svc-dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:#fff;color:var(--ink);
box-shadow:var(--sh-l);overflow:auto;overscroll-behavior:contain}
.svc-dlg::backdrop{background:rgba(12,18,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.svc-dlg form,.sd-done{padding:20px 22px 22px}
.sd-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sd-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.sd-x{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--bg2);color:var(--ink2);cursor:pointer}
.sd-x:hover{background:#e9eeeb;color:var(--ink)}
.sd-x svg{width:15px;height:15px}
.svc-dlg .proof{margin-top:0}
.sd-foot{margin-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sd-foot .small{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink3);max-width:330px}
.sd-btns{display:flex;gap:8px;flex:none}
.sd-done{text-align:center;padding:34px 26px 28px}
/* owner dashboard: what a moderator decided about this account's offers */
.svc-notices h3{display:flex;align-items:center;gap:8px}
.svc-notice{border:1px solid var(--line2);border-radius:12px;padding:12px 14px;margin-top:8px;background:var(--bg3)}
@media (max-width:640px){
.svc-dlg{width:100vw;max-width:100vw;max-height:calc(100dvh - 40px);margin:auto 0 0;border-radius:20px 20px 0 0}
.svc-dlg form,.sd-done{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.sd-foot{flex-direction:column;align-items:stretch;gap:12px}
.sd-foot .small{max-width:none}
.sd-btns{justify-content:flex-end}
.sd-btns .btn{min-height:42px;flex:1}
}
@media (max-width:359px){
/* the narrowest phones (Galaxy Fold cover, 280px): the signed-in header (search, avatar, menu) needs 3px */
.nav-cta{gap:5px}
.sp-tag-x{display:none}
}
@media (max-width:760px){
/* the sub-line chips of an offer (refill, currency, ID, kind link) step down together on phones */
.svc-chip,.svc-kind,.svc-id{font-size:10px;padding:2.5px 6px}
}
@media (max-width:359px){
/* the narrowest phones: a long-labelled button inside a card wraps its words instead of running past the card's edge;
the review invitation keeps a phone-sized padding */
.card .btn{max-width:100%;white-space:normal;text-align:center}
}
@media (max-width:640px){
.write{padding:22px 16px}
}
/* ==================== ORDERS DESK ==================== */
/* Only what pages outside the desk need: the heading of its group in the cabinet menu, Buy and Save
in the services explorer. The desk's own styles are /assets/css/desk.css, linked by its pages. */
.an2-t th,.an2-t td{padding:7px 10px;font-size:13.5px}
.an2-g th{background:var(--bg2);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:6px 10px}
.an2-days td{padding-top:5px;padding-bottom:5px}
@media (max-width:640px){
.an2-t th,.an2-t td{padding:7px 8px;font-size:13px}
}
/* a section keeps its padding and headings, and loses the box */
.lk-sheet>.card,.lk-sheet>.ov-grid>.card{border-left:0;border-right:0;border-bottom:0;box-shadow:none;background:transparent;transform:none}
@media (hover:none) and (pointer:coarse){
/* ---------- touch screens: the same controls, a finger's worth of room ----------
Desktop keeps its density; a phone or tablet (no hover, coarse pointer) gets every control the
25.09 sweep found under 36 px lifted to a comfortable tap size — by padding where the layout has
the room, by an invisible halo (::before) where a link sits inside a tight row and must not move. */
.cmp-pick{height:32px;padding:0 12px;font-size:12px}
.cmp-bar-x{width:36px;height:36px}
.seg-sort a{padding:9px 14px}
.f-plats a,.f-bottom-links a{padding:6px 2px}
.tip-btn{width:22px;height:22px}
.tip-btn::before{content:"";position:absolute;inset:-9px}
.dm-link,.rs-write,.tsv-how,.p-shot-meta a,.rev-panel,.sim-foot .visit,.sim-foot .cmp-link{position:relative}
.dm-link::before,.rs-write::before,.tsv-how::before,.p-shot-meta a::before,.rev-panel::before,.sim-foot .visit::before,.sim-foot .cmp-link::before{content:"";position:absolute;inset:-9px -6px}
}
@media (max-width:420px){
.ref-table th,.ref-table td{padding:9px 6px}
.ref-table td.num{white-space:normal}
}
@media (hover:none) and (pointer:coarse){
#mCloseBtn{min-width:40px;min-height:40px}
}
/* ---------- the facts a Tools listing is compared on (src/tool-facts.js): the list line, the card, the form ---------- */
.fct-ic{width:14px;height:14px;flex:none}
.fct-chip-ic .fct-ic{width:16px;height:16px;color:var(--em)}
/* ---------- "run one of these? list it" at the foot of every Tools page — the dark card of the tool page's "Is this yours?" ---------- */
.vend-cta{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;margin:28px 0 0;padding:22px 26px;border-radius:var(--r-lg);color:#fff;
background:radial-gradient(130% 140% at 80% 0%,#16221d,#0c1210 62%);box-shadow:0 24px 56px -22px rgba(12,18,16,.55)}
.vend-cta::after{content:"";position:absolute;bottom:-120px;right:-60px;width:320px;height:260px;pointer-events:none;
background:radial-gradient(closest-side,rgba(46,207,143,.26),transparent 70%)}
.vend-cta-art{position:relative;z-index:1;flex:none;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.vend-cta-t{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.vend-cta-t b{font-size:16px;color:#fff;letter-spacing:-.01em}
.vend-cta-t span{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.66)}
.vend-cta .btn{position:relative;z-index:1;flex:none}
@media (max-width:760px){
.vend-cta{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
.vend-cta-art{width:60px;height:60px}
}
.tl-tab:focus-visible,.tl-chip:focus-visible,.tl-pick:focus-visible,.tl-add:focus-visible,.tl-tok:focus-visible,.tl-rv:focus-visible{outline:2px solid var(--em2);outline-offset:2px}
.tl-k{flex:none;width:148px;padding-top:10px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);line-height:1.3}
.tl-k small{display:block;margin-top:3px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3);opacity:.85}
.tl-picks{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.tl-rail{display:flex;flex-wrap:wrap;gap:8px;min-width:0;flex:1}
.tl-pick .fct-ic{width:17px;height:17px;color:var(--em)}
.tl-fac{display:flex;gap:12px;align-items:flex-start}
.tl-chips{display:flex;flex-wrap:wrap;gap:7px;min-width:0;flex:1}
.tl-chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px 0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);
font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease),box-shadow .18s,opacity .18s}
.tl-chip .fct-ic{width:16px;height:16px;color:var(--em)}
.tl-chip i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
.tl-chip:hover{border-color:rgba(10,138,95,.5);transform:translateY(-1px);box-shadow:0 5px 14px -8px rgba(16,22,19,.3)}
.tl-chip:active{transform:none}
.tl-chip.on{background:var(--em-soft);border-color:var(--em);color:var(--em-dark);box-shadow:inset 0 0 0 1px var(--em)}
.tl-chip.on .fct-ic,.tl-chip.on i{display:none}
.tl-chip.dis{opacity:.4;cursor:default;box-shadow:none;transform:none;border-style:dashed}
.tl-chip.code{height:32px;padding:0 10px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.tl-tok{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:650;white-space:nowrap;transition:background .18s}
.tl-tok svg{width:12px;height:12px;opacity:.7}
.tl-tok:hover{background:#9f1c1c}
.tl-tray-it{flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 5px 0 6px;border-radius:12px;background:rgba(255,255,255,.09);animation:tlPop .28s var(--ease)}
@keyframes tlPop{from{opacity:0;transform:scale(.85)}}
.tl-tray-it .plogo.xs{width:30px;height:30px;border-radius:8px;padding:3px;box-shadow:none}
.tl-tray-nm{max-width:118px;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-tray-rm{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:rgba(255,255,255,.6);transition:background .18s,color .18s}
.tl-tray-rm:hover{background:rgba(255,255,255,.14);color:#fff}
.tl-tray-rm svg{width:11px;height:11px}
.tl-tray-slot{flex:none;width:42px;height:42px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.22)}
body.tl-tray-on{padding-bottom:84px}
.tl-toast{position:fixed;left:50%;bottom:96px;z-index:71;padding:10px 16px;border-radius:999px;background:rgba(12,18,16,.94);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;
box-shadow:0 12px 30px -10px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .25s,transform .25s var(--ease)}
.tl-toast.on{opacity:1;transform:translate(-50%,0)}
/* the site's sections carry 84px of air (section{padding}); these blocks set their own spacing */
.tl-rivals,.tlc-board,.tlc-near,.tlc-faq,.tlc-ix{padding:0}
.tl-rivals-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tl-rv{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line2);box-shadow:var(--sh-s);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.tl-rv:hover{transform:translateY(-2px);box-shadow:var(--sh-m);border-color:rgba(10,138,95,.3)}
.tl-rv-logos{display:flex;flex:none}
.tl-rv-logos .plogo.xs+.plogo.xs{margin-left:-10px}
.tl-rv-t{min-width:0;font-size:14px;line-height:1.35;color:var(--ink)}
.tl-rv-t i{font-style:normal;font-size:12px;color:var(--ink3);margin:0 3px}
@media (max-width:700px){
.tl-picks,.tl-fac{flex-direction:column;gap:7px}
.tl-k{width:auto;padding-top:0}
.tl-k small{display:inline;margin-left:6px}
.tl-rail,.tl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px;width:calc(100% + 14px);-webkit-overflow-scrolling:touch}
.tl-rail::-webkit-scrollbar,.tl-chips::-webkit-scrollbar{display:none}
.tl-chip,.tl-pick{flex:none}
.tl-tray-nm{display:none}
body.tl-tray-on{padding-bottom:128px}
.tl-toast{bottom:136px}
.tl-rivals-l{grid-template-columns:1fr}
}
.rp-min{display:flex;align-items:flex-start;gap:14px;padding:16px 20px}
.rp-min-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--bg2);color:var(--ink3)}
.rp-min-ic svg{width:18px;height:18px}
.rp-min p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.rp-min b{color:var(--ink)}
.rp-min a{color:var(--em-ink);font-weight:650}
@media (max-width:700px){
.rp-min{padding:14px 16px}
}
.of :is(input,select,textarea){width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;font-weight:500;background:#fff;color:var(--ink)}
.of :is(input,select,textarea):focus{outline:0;border-color:rgba(10,138,95,.55);box-shadow:0 0 0 4px rgba(16,176,119,.12)}
.of input[type=checkbox],.of input[type=radio]{width:auto;padding:0;border:0;box-shadow:none;accent-color:var(--em);flex:none;margin:2px 0 0}
.of textarea{resize:vertical;min-height:62px}
/* a block is a : the site gives every section 84px of air (section{padding}), a block wants none */
.ws-block{position:relative;padding:0;background:#fff;border:1px solid var(--line2);border-radius:20px;
box-shadow:0 1px 2px rgba(16,22,19,.04),0 12px 30px -22px rgba(16,22,19,.28);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.ws-block:hover{border-color:var(--line)}
.ws-bb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s var(--ease)}
.js .ws-block[data-ws-folded]{box-shadow:0 1px 2px rgba(16,22,19,.05)}
/* carried: the head alone, lifted and tilted; the place it will land is marked */
.ws-block.ws-lift{position:fixed;z-index:80;margin:0;border-color:transparent;transform:rotate(-.6deg) scale(1.012);
box-shadow:0 34px 70px -24px rgba(12,18,16,.45),0 0 0 2px rgba(16,176,119,.4)}
.ws-ph{flex:none;border-radius:20px;border:2px dashed rgba(16,176,119,.5);
background:repeating-linear-gradient(-45deg,rgba(16,176,119,.07) 0 10px,rgba(16,176,119,.02) 10px 20px);animation:wsPh 1.4s ease-in-out infinite}
@keyframes wsPh{50%{border-color:rgba(16,176,119,.22)}}
.ws-landed{animation:wsLand .7s var(--ease)}
@keyframes wsLand{0%{box-shadow:0 0 0 3px rgba(16,176,119,.5),0 12px 30px -22px rgba(16,22,19,.28)}}
html.ws-grabbing,html.ws-grabbing *{cursor:grabbing!important;user-select:none}
/* the drawer: from the right on a computer, from the bottom on a phone (pulled down by its handle to close) */
.ws-dr{position:fixed;inset:0;z-index:120}
.ws-dr[hidden]{display:none}
.ws-dr-bg{position:absolute;inset:0;background:rgba(10,16,14,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)}
.ws-dr.on .ws-dr-bg{opacity:1}
.ws-dr-p{position:absolute;top:10px;right:10px;bottom:10px;width:min(640px,calc(100vw - 20px));display:flex;flex-direction:column;overflow:hidden;outline:none;
background:#fff;border-radius:24px;box-shadow:0 40px 90px -30px rgba(10,16,14,.55),0 0 0 1px rgba(16,22,19,.06);
transform:translateX(calc(100% + 28px));transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.ws-dr.on .ws-dr-p{transform:none}
.ws-dr-grab{display:none}
.ws-dr-in{flex:1;min-height:0;display:flex;flex-direction:column}
html.ws-dr-open body{overflow:hidden}
@media (max-width:640px){
.ws-dr-p{top:auto;left:0;right:0;bottom:0;width:auto;height:min(92dvh,calc(100dvh - 36px));border-radius:24px 24px 0 0;transform:translateY(105%)}
.ws-dr-grab{display:flex;justify-content:center;padding:8px 0 0;touch-action:none;cursor:grab}
.ws-dr-grab i{width:42px;height:5px;border-radius:3px;background:rgba(16,22,19,.18)}
}
@media (prefers-reduced-motion:reduce){
.ws-dr-p,.ws-dr-bg,.ws-bb,.ws-fold svg{transition:none}
.ws-ph,.ws-landed{animation:none}
}
/* a card carried to a place */
.ws-ghost{position:fixed;left:0;top:0;z-index:300;margin:0;pointer-events:none;opacity:.97;background:#fff;
box-shadow:0 26px 50px -18px rgba(12,18,16,.45),0 0 0 2px rgba(16,176,119,.45)}
html.ws-carrying,html.ws-carrying *{cursor:grabbing!important;user-select:none}
.ws-carried{opacity:.35}
/* toasts */
.ws-toasts{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:400;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.ws-toast{display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 32px));padding:11px 18px 11px 15px;border-radius:999px;background:#0f1d17;color:#fff;
font-size:13.5px;font-weight:600;box-shadow:0 18px 40px -16px rgba(12,18,16,.6);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .25s,transform .25s var(--ease);pointer-events:auto}
.ws-toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.ws-toast.bad::before{background:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.22)}
.ws-toast.on{opacity:1;transform:none}
.ws-x{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink2);text-decoration:none;transition:background .15s,color .15s}
.ws-x:hover{background:var(--bg2);color:var(--ink)}
.ws-x svg{width:18px;height:18px}
@media (max-width:640px){
.ws-dr-head{touch-action:none}
}
.site-alert{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-radius:var(--r-md);
background:linear-gradient(180deg,#fff5f3,#ffefec);border:1px solid #ffcfc5;color:#8a1f13;font-size:14px;line-height:1.55;box-shadow:0 12px 26px -20px rgba(180,35,24,.55)}
.site-alert svg{flex:none;margin-top:1px;color:#c2321f}
.site-alert b{color:#7a1a0f}
/* the report form in the drawer: its head, a body that scrolls, a foot that stays */
.rp{flex:1;min-height:0;display:flex;flex-direction:column}
.rp-reasons{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.rp-reasons legend{padding:0;margin:0 0 10px;font-size:13px;font-weight:650;color:var(--ink)}
.rp-r{position:relative;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;
font-size:13.5px;line-height:1.35;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.rp-r:hover{border-color:rgba(10,138,95,.4)}
.rp-r input{flex:none;margin:0;width:17px;height:17px;accent-color:var(--em)}
.rp-r:has(input:checked){border-color:var(--em);background:var(--em-soft);box-shadow:0 0 0 3px rgba(16,176,119,.12)}
.rp-r:has(input:focus-visible){outline:2px solid var(--em);outline-offset:2px}
@media (max-width:640px){
.rp-reasons{grid-template-columns:1fr}
}