:root{
  --blue:#2563eb; --blue-700:#1d4ed8; --blue-50:#eff4ff; --cyan:#22d3ee; --ink:#0f172a; --muted:#5b6577;
  --bg:#ffffff; --soft:#f5f8fc; --soft2:#eef3fa; --line:rgba(15,23,42,.09);
  --emerald:#10b981; --emerald-bg:#ecfdf5; --emerald-line:#bbf7d6; --amber:#f59e0b;
  --violet:#7c3aed; --rose:#e11d48;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --s1:0 1px 2px rgba(15,23,42,.05);
  --s2:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.07);
  --s3:0 2px 4px rgba(15,23,42,.04),0 18px 44px rgba(15,23,42,.10);
  --r:14px; --r-lg:18px; --r-xl:24px;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}section[id],[id].strip{scroll-margin-top:82px}body{overflow-x:hidden}
html{scroll-behavior:smooth}
section[id],[id].strip{scroll-margin-top:82px}
body{background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-700);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-50);border:1px solid rgba(37,99,235,.16);
  border-radius:99px;padding:5px 12px 5px 10px;line-height:1.4}
.eyebrow:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.eyebrow.em{color:#059669;background:var(--emerald-bg);border-color:var(--emerald-line)}
.eyebrow.vi{color:var(--violet);background:#f5f1ff;border-color:rgba(124,58,237,.16)}
.eyebrow.dk{color:#8ec5ff;background:rgba(96,165,250,.12);border-color:rgba(147,197,253,.25)}
h2.sec{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:14px;text-wrap:balance}
.sec-lead{color:var(--muted);font-size:17px;margin-top:10px;max-width:640px;text-wrap:pretty}
section{padding:70px 0}
.center{text-align:center}
.center .sec-lead{margin-left:auto;margin-right:auto}

/* ---------- logo ---------- */
.logo-mark{width:34px;height:34px;flex:none;color:var(--ink)}
.logo-word{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.logo-word b{color:var(--blue);font-weight:800}
.site-logo{display:inline-flex;align-items:center;gap:9px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:20px;height:66px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:26px}
nav.main a{font-size:14.5px;color:var(--muted);font-weight:500}
nav.main a:hover{color:var(--ink)}
nav.main .btn{margin-left:4px}
.menu-ic{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 60px;
  background:radial-gradient(120% 90% at 50% -10%,#e8f0ff 0%,#f4f8ff 42%,#ffffff 78%)}
.hero:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 55% at 50% 30%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 55% at 50% 30%,#000 0%,transparent 75%);opacity:.5}
.hero .wrap{position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--shadow)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald)}
h1.hero-h{font-size:clamp(34px,5.4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:20px auto 0;max-width:min(100%,24ch);text-wrap:balance}
h1.hero-h .g{background:linear-gradient(92deg,#1d4ed8 0%,#2563eb 42%,#0e9bbd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:19px;color:var(--muted);max-width:640px;margin:18px auto 0;text-wrap:balance}
.hero.center h1.hero-h,.hero.center .hero-sub{margin-left:auto;margin-right:auto}
.searchbox{margin:30px auto 0;max-width:660px;display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--blue);border-radius:16px;padding:8px 8px 8px 16px;
  box-shadow:0 10px 30px rgba(37,99,235,.14);transition:box-shadow .22s,transform .22s}
.searchbox:focus-within{box-shadow:0 0 0 5px rgba(37,99,235,.13),0 14px 38px rgba(37,99,235,.20);transform:translateY(-1px)}
.searchbox svg{width:20px;height:20px;color:var(--blue);flex:none}
.searchbox input{flex:1;border:none;outline:none;font-size:16px;color:var(--ink);background:transparent;min-width:0}
.searchbox input::placeholder{color:#9aa7bb}
.searchbox .kbd{display:flex;gap:3px;flex:none;margin-right:2px}
.searchbox .kbd i{font-style:normal;font-size:11px;font-weight:700;color:#94a3b8;background:var(--soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 6px;line-height:1.35}
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:16px auto 0;align-items:center}
.chips .cl{font-size:12.5px;color:#94a3b8;font-weight:600}
.chip{font-size:13px;color:var(--blue);background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);border-radius:99px;padding:5px 13px;cursor:pointer;transition:.16s;font-weight:600}
.chip:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.24)}
.hero-trust{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#3f5063;
  background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 10px;box-shadow:var(--s1)}
.hero-trust svg{width:14px;height:14px;color:var(--emerald);flex:none}

/* ---------- provenance strip ---------- */
.strip{background:linear-gradient(180deg,#f0fdf6,#ecfdf5);border-top:1px solid #c7f0dd;border-bottom:1px solid #c7f0dd}
.strip .wrap{display:flex;align-items:center;gap:14px;padding:15px 24px;flex-wrap:wrap}
.strip .st-copy{flex:1 1 0;min-width:0}
.seal{width:36px;height:36px;border-radius:50%;background:var(--emerald);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  box-shadow:0 0 0 4px rgba(16,185,129,.14)}
.seal svg{width:19px;height:19px}
.strip b{font-size:14.5px;display:block;line-height:1.35}
.strip .st-txt{font-size:13px;color:#3f6b57;text-wrap:balance}
.strip .st-pills{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center;flex:0 1 auto;min-width:0}
.strip .st-pills>span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#0b7a5c;white-space:nowrap;
  background:rgba(255,255,255,.85);border:1px solid var(--emerald-line);border-radius:99px;padding:5px 11px}
.strip .st-pills span i{font-style:normal;color:#3f6b57;font-weight:600}
.strip .btn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;gap:5px;
  background:#fff;border-color:var(--emerald-line);color:#0b7a5c}
.strip .btn:hover{border-color:var(--emerald);color:#059669;gap:8px}

/* ---------- preview ---------- */
.preview-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--s3);max-width:940px;margin:34px auto 0;overflow:hidden;text-align:left}
.pv-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#f6f9fd)}
.tabs{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px;gap:2px;box-shadow:var(--s1)}
.tab{border:none;background:transparent;font-size:13.5px;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.30)}
.pv-meta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);font-weight:600}
.pv-live{display:inline-flex;align-items:center;gap:6px;color:#059669}
.pv-live i{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pv-main{display:grid;grid-template-columns:1fr 246px}
.pv-chart{padding:22px 22px 18px;min-width:0}
.pv-ttl{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pv-ttl span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:2px}
.plot{position:relative;height:200px;margin:26px 0 48px;padding-left:44px}
.gridl{position:absolute;left:44px;right:0;top:0;bottom:0}
.gridl i{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.gridl i:last-child{background:rgba(15,23,42,.22)}
.gridl i b{position:absolute;left:-44px;top:-8px;width:38px;text-align:right;font-size:11px;font-weight:600;color:#9aa7bb;font-style:normal}
.bars{position:relative;display:flex;align-items:flex-end;gap:min(3.2vw,26px);height:100%}
.bar{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.bar .col{width:100%;max-width:62px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);position:relative;
  transition:height .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 -1px 0 rgba(255,255,255,.5) inset}
.bar:first-child .col{background:linear-gradient(180deg,#38bdf8,#0ea5e9)}
.bar .val{position:absolute;top:-21px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap}
.bar .lab{position:absolute;left:0;right:0;top:calc(100% + 9px);font-size:11.5px;color:var(--muted);text-align:center;
  line-height:1.3;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .dl{position:absolute;left:0;right:0;top:calc(100% + 28px);text-align:center;font-size:10.5px;font-weight:800;letter-spacing:-.01em}
.dl.up{color:#059669}.dl.down{color:var(--rose)}
.pv-rail{border-left:1px solid var(--line);background:var(--soft);padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.rstat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--s1)}
.rstat .rk{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#94a3b8}
.rstat .rv{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:3px;line-height:1.2}
.rstat .rs{font-size:12px;color:var(--muted);margin-top:2px}
.rstat.hi{border-color:rgba(16,185,129,.35);background:linear-gradient(180deg,#fff,#f2fdf8)}
.rstat.hi .rv{color:#059669}
.pv-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);background:#fbfcfe;flex-wrap:wrap;gap:10px}
.pv-foot .cap{font-size:12.5px;color:var(--muted)}
.pv-foot .cap b{color:var(--ink);font-weight:700}

/* ---------- stats ---------- */
.stats{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:56px 0}
.stats:before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 120% at 20% 0%,rgba(37,99,235,.38),transparent 60%),
  radial-gradient(50% 120% at 82% 110%,rgba(34,211,238,.22),transparent 62%)}
.stats:after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent 78%)}
.stats .wrap{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:4px 22px;position:relative}
.stat+.stat:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.20),transparent)}
.stat .si{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat .si svg{width:16px;height:16px;color:#8ec5ff}
.stat b{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.03em;display:block;line-height:1.05;
  background:linear-gradient(90deg,#fff,#bcd3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b.word{font-size:clamp(24px,2.9vw,33px);letter-spacing:-.02em;line-height:1.4}
.stat span{font-size:13.5px;color:#9db0cc;display:block;margin-top:4px}
.stat em{font-style:normal;font-size:12px;color:#7189ae;display:block;margin-top:2px}

/* ---------- value cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;align-items:stretch}
.vcard{--a:#2563eb;--a2:#22d3ee;--ag:var(--a);position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px 20px;transition:.22s;display:flex;flex-direction:column;height:100%}
.vcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--a),var(--a2));opacity:0;transition:.22s}
.vcard:hover{border-color:color-mix(in srgb,var(--a) 34%,transparent);box-shadow:var(--s2);transform:translateY(-3px)}
.vcard:hover:before{opacity:1}
.vic{width:44px;height:44px;border-radius:13px;background:linear-gradient(140deg,var(--a),var(--a2));display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;box-shadow:0 6px 16px color-mix(in srgb,var(--a) 30%,transparent);flex:none}
.vic svg{width:21px;height:21px;color:#fff}
.vcard h3{font-size:16.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em;text-wrap:balance;min-height:2.5em;line-height:1.25}
.vcard p{font-size:14px;color:var(--muted);line-height:1.55;min-height:4.7em}
.vcard .eg{margin-top:12px;font-size:12.5px;color:#475569;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:7px 10px;line-height:1.45}
.vcard .eg b{color:var(--ink);font-weight:700}
.vcard .go{font-size:13.5px;color:var(--ag);font-weight:700;margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.vcard:hover .go{gap:10px}

/* ---------- problem (shared shell, also used by honesty router) ---------- */
.prob{background:var(--soft)}

/* ---------- problem / why now (redesigned) ---------- */
.probx{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcfe 0%,#eff4fb 100%)}
.probx:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 45%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 70% at 78% 45%,#000 0%,transparent 72%);opacity:.7}
.probx .wrap{position:relative;z-index:1}
.prob-split{display:grid;grid-template-columns:.88fr 1.12fr;gap:58px;align-items:center}
.prob-split>*{min-width:0}
.prob-split .sec-lead{margin-top:12px}

/* left: pressure timeline */
.plist{margin-top:30px;position:relative;padding-left:30px}
.plist:before{content:"";position:absolute;left:7px;top:10px;bottom:12px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#f87171 0%,#fbbf24 52%,var(--emerald) 100%)}
.pitem{position:relative;padding-bottom:22px}
.pitem:last-child{padding-bottom:0}
.pitem:after{content:"";position:absolute;left:-30px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid #f87171;box-shadow:0 0 0 4px rgba(248,113,113,.13)}
.pitem.mid:after{border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.pitem.win:after{border-color:var(--emerald);box-shadow:0 0 0 5px rgba(16,185,129,.16)}
.pitem .k{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#b91c1c}
.pitem.mid .k{color:#b45309}
.pitem.win .k{color:#047857}
.pitem p{font-size:15.5px;color:var(--ink);margin-top:4px;line-height:1.5}
.pitem.win p{font-weight:600}
.pitem.win p b{color:#047857}

/* right: gated vs free panels */
.gatewrap{position:relative}
.gpanel{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.07)}
.gpanel .gh{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700}
.gpanel .gh svg{width:17px;height:17px;flex:none}
.gh .pill{margin-left:auto;flex:none;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:99px;text-transform:uppercase}
.gpanel.locked{border-color:#fecaca}
.gpanel.locked .gh{background:#fef2f2;color:#991b1b;border-bottom-color:#fecaca}
.gpanel.locked .pill{background:#fee2e2;color:#b91c1c}
.gpanel.free{border-color:#a7e9c8}
.gpanel.free .gh{background:var(--emerald-bg);color:#065f46;border-bottom-color:#bbf7d6}
.gpanel.free .pill{background:#d1fae5;color:#047857}
.gbody{position:relative}
.grow{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:14px;border-top:1px solid rgba(15,23,42,.05)}
.gbody .grow:first-child{border-top:none}
.grow .gl{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gv{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grow .gd{font-size:12px;font-weight:800;padding:2px 7px;border-radius:6px;min-width:56px;text-align:center}
.gd.up{background:#ecfdf5;color:#047857}
.gd.down{background:#fef2f2;color:#b91c1c}
.gpanel.locked .gv,.gpanel.locked .gd{filter:blur(6px);user-select:none}
.gveil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.86))}
.lockbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #fecaca;color:#b91c1c;
  font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;box-shadow:0 8px 20px rgba(185,28,28,.14)}
.lockbtn svg{width:14px;height:14px}
.gfoot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid rgba(15,23,42,.06);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.gfoot .src{display:inline-flex;align-items:center;gap:6px}
.gfoot .src i{width:6px;height:6px;border-radius:50%;background:var(--emerald);display:inline-block}
.gfoot .exp{margin-left:auto;color:var(--blue);font-weight:700}
.gvs{display:flex;align-items:center;gap:14px;padding:14px 0}
.gvs i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.22) 35%,rgba(15,23,42,.22) 65%,transparent)}
.gvs span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 13px;box-shadow:var(--shadow)}

/* ---------- how it works (redesigned) ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;text-align:left;align-items:stretch}
.fstep{position:relative;display:flex;flex-direction:column}
.fstep>.fnum{flex:none;align-self:flex-start}
.fstep>.fcard{flex:1}
.fnum{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:#fff;position:relative;z-index:2;
  background:linear-gradient(135deg,var(--blue) 0%,#3b82f6 60%,var(--cyan) 160%);
  box-shadow:0 6px 16px rgba(37,99,235,.30)}
.fstep:after{content:"";position:absolute;top:21px;left:58px;right:-24px;height:2px;z-index:1;
  background:repeating-linear-gradient(90deg,rgba(37,99,235,.34) 0 7px,transparent 7px 14px)}
.fstep:last-child:after{display:none}
.fcard{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px 20px;
  box-shadow:var(--shadow);transition:.2s}
.fcard:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.32);box-shadow:0 12px 30px rgba(15,23,42,.10)}
.fcard h3{font-size:16.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.fcard p{font-size:14px;color:var(--muted)}
.mock{height:118px;background:linear-gradient(180deg,#f8fafd,#f1f5fb);border:1px solid var(--line);border-radius:11px;
  padding:13px;margin-bottom:15px;overflow:hidden;position:relative}
/* mock 1 — search */
.mk-in{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--blue);border-radius:9px;padding:7px 10px;box-shadow:0 4px 12px rgba(37,99,235,.10)}
.mk-in svg{width:14px;height:14px;color:var(--blue);flex:none}
.mk-in span{font-size:12.5px;color:var(--ink);font-weight:600}
.caret{width:1.5px;height:13px;background:var(--ink);display:inline-block;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.mk-chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.mk-chips b{font-size:10.5px;font-weight:600;color:var(--blue);background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.2);border-radius:99px;padding:3px 9px}
/* mock 2 — chart */
.mk-bars{display:flex;align-items:flex-end;gap:7px;height:66px;border-bottom:1px solid var(--line);padding-bottom:1px}
.mk-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);height:var(--h);
  transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.mk-bars i:nth-child(1){animation-delay:.05s}.mk-bars i:nth-child(2){animation-delay:.13s}
.mk-bars i:nth-child(3){animation-delay:.21s}.mk-bars i:nth-child(4){animation-delay:.29s}
.mk-bars i:nth-child(5){background:linear-gradient(180deg,#67e8f9,#22d3ee);animation-delay:.37s}
@keyframes grow{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}
.mk-cap{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:7px;font-weight:600}
.mk-cap b{color:#047857}
/* mock 3 — export */
.mk-rows{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mk-rows u{display:flex;align-items:center;gap:9px;text-decoration:none;padding:6px 9px;border-top:1px solid rgba(15,23,42,.06)}
.mk-rows u:first-child{border-top:none;background:#f8fafd}
.mk-rows u s{text-decoration:none;height:6px;border-radius:99px;background:rgba(15,23,42,.13);flex:1}
.mk-rows u em{height:6px;width:30px;border-radius:99px;background:rgba(37,99,235,.42);flex:none}
.mk-rows u b{height:6px;width:26px;border-radius:99px;background:rgba(15,23,42,.34);flex:none}
.mk-rows u:first-child s,.mk-rows u:first-child em,.mk-rows u:first-child b{background:rgba(15,23,42,.16);height:5px}
.mk-dl{position:absolute;right:13px;bottom:13px;display:inline-flex;align-items:center;gap:7px;background:var(--emerald);
  color:#fff;font-size:11.5px;font-weight:700;border-radius:8px;padding:6px 11px;
  box-shadow:0 6px 16px rgba(16,185,129,.34),0 0 0 3px rgba(248,250,253,.9)}
.mk-dl svg{width:12px;height:12px}
.flow-foot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.flow-foot span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#065f46;
  background:var(--emerald-bg);border:1px solid #bbf7d6;border-radius:99px;padding:7px 15px}
.flow-foot span svg{width:13px;height:13px}
@media(prefers-reduced-motion:reduce){
  .mk-bars i{animation:none}
  .caret{animation:none}
  .fcard:hover{transform:none}
}

/* ---------- seo hub ---------- */
.seohub{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;align-items:stretch}
.hub{--a:#2563eb;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--s1);
  display:flex;flex-direction:column;height:100%;overflow:hidden;transition:.2s}
.hub:hover{box-shadow:var(--s2)}
.hub h3{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  text-transform:none;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#f7fafd)}
.hub h3 .hi{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--a) 12%,#fff);border:1px solid color-mix(in srgb,var(--a) 22%,transparent);
  display:flex;align-items:center;justify-content:center;flex:none}
.hub h3 .hi svg{width:15px;height:15px;color:var(--a)}
.hub h3 .hc{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.hub .hl{padding:6px 10px 8px;flex:1}
.hub a{display:grid;grid-template-columns:18px 1fr 62px;align-items:start;gap:10px;padding:9px 8px;border-radius:9px;
  font-size:14px;font-weight:600;line-height:1.45;color:var(--ink);transition:.14s}
.hub a:hover{background:var(--soft);color:var(--a)}
.hub a .rk{font-size:11.5px;font-weight:800;color:#b3bfd0;text-align:right}
.hub a:hover .rk{color:var(--a)}
.hub a .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub a .nm i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--a) 22%,transparent);margin-top:5px;position:relative;overflow:hidden}
.hub a .nm i:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,50%);border-radius:2px;background:var(--a)}
.hub a .n{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;text-align:right}
.hub .hf{border-top:1px solid var(--line);padding:12px 18px;font-size:13px;font-weight:700;color:var(--a);
  display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fdfefe;transition:.16s}
.hub .hf:hover{background:color-mix(in srgb,var(--a) 5%,#fff)}
.hub-note{text-align:center;font-size:13px;color:var(--muted);margin-top:22px}

/* ---------- comparison ---------- */
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);margin-top:34px;box-shadow:var(--s2);background:#fff}
table.compare{width:100%;border-collapse:collapse;font-size:14.5px;min-width:700px}
table.compare th,table.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.compare thead th{font-size:13px;color:var(--muted);font-weight:700;background:linear-gradient(180deg,#fbfcfe,#f5f8fc);padding-top:16px;padding-bottom:16px}
table.compare thead th.you{color:#fff;background:linear-gradient(135deg,var(--blue),#1e40af);font-size:14px;position:relative}
table.compare thead th.you .yb{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.01em}
table.compare thead th.you .yt{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a8c6ff;margin-top:3px}
table.compare th:first-child{width:30%}
table.compare td.you{background:rgba(37,99,235,.045);box-shadow:inset 1px 0 0 rgba(37,99,235,.14),inset -1px 0 0 rgba(37,99,235,.14);font-weight:700;color:var(--ink)}
table.compare tbody tr:last-child td.you{box-shadow:inset 1px 0 0 rgba(37,99,235,.14),inset -1px 0 0 rgba(37,99,235,.14),inset 0 -1px 0 rgba(37,99,235,.14)}
table.compare tbody tr:hover td{background:#fafcff}
table.compare tbody tr:hover td.you{background:rgba(37,99,235,.075)}
table.compare td:first-child{font-weight:600;color:var(--ink)}
table.compare tr:last-child td{border-bottom:none}
table.compare td.other{color:var(--muted)}
.mk{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.mk svg{width:15px;height:15px;flex:none}
.mk.yes{color:#059669}.mk.no{color:var(--rose)}.mk.mid{color:#b1780b}
.mk.mid svg{color:var(--amber)}
.price-free{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:800;color:#059669}
.price-free em{font-style:normal;font-size:11.5px;font-weight:700;color:#0b7a5c;background:var(--emerald-bg);border:1px solid var(--emerald-line);border-radius:99px;padding:2px 8px}
.cmp-note{font-size:13.5px;color:var(--muted);margin-top:14px;text-align:center}
.cmp-hint{display:none;font-size:12px;color:#94a3b8;text-align:center;margin-top:10px}

/* ---------- router ---------- */
.router{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;align-items:stretch}
.rcard{position:relative;border-radius:var(--r-lg);padding:24px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;height:100%;box-shadow:var(--s1)}
.rcard.good{background:linear-gradient(180deg,#f6fefa,#ecfdf5);border-color:var(--emerald-line)}
.rcard h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.rcard h3 .hb{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.rcard h3 .hb svg{width:15px;height:15px;color:#fff}
.rcard.good h3{color:#047857}
.rcard.good h3 .hb{background:var(--emerald);box-shadow:0 3px 10px rgba(16,185,129,.34)}
.rcard.gap h3 .hb{background:#94a3b8;box-shadow:0 3px 10px rgba(148,163,184,.34)}
.rcard ul{list-style:none;font-size:14.5px;color:#334;display:grid;gap:2px}
.rcard li{padding:7px 0 7px 30px;position:relative;line-height:1.5}
.rcard li:before{content:"";position:absolute;left:0;top:9px;width:19px;height:19px;border-radius:50%}
.rcard.good li:before{background:rgba(16,185,129,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.rcard.gap li:before{background:rgba(148,163,184,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.rcard .rbox{margin-top:auto;padding-top:16px}
.rcard .rbox .rb{background:var(--blue-50);border:1px solid rgba(37,99,235,.16);border-radius:12px;padding:14px 16px;
  min-height:88px;box-sizing:border-box;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rcard .rbox .rb p{font-size:13.5px;color:#3f5063;flex:1;min-width:180px;line-height:1.45}
.rcard .rbox .rb p b{color:var(--ink)}
.rcard .go{font-size:13.5px;color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.16s}
.rcard .go:hover{gap:10px}
.rcard.good .rbox .rb{background:rgba(255,255,255,.75);border-color:var(--emerald-line)}
.rcard.good .rbox .rb p{color:#3f6b57}
.rcard .rtag{position:absolute;top:20px;right:22px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#64748b;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.rcard.good .rtag{color:#0b7a5c;background:rgba(255,255,255,.8);border-color:var(--emerald-line)}

/* ---------- trends + email ---------- */
.trends{background:var(--soft);position:relative;overflow:hidden}
.trends>*{position:relative}
.trends:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 70%)}
.trends-all{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:700;
  color:var(--blue);border:1px solid rgba(37,99,235,.22);background:#fff;border-radius:99px;padding:9px 17px;
  box-shadow:var(--s1);transition:.18s}
.trends-all:hover{border-color:var(--blue);box-shadow:var(--s2);transform:translateY(-1px)}
.trends-all span{transition:.2s}.trends-all:hover span{transform:translateX(3px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;align-items:stretch}
.tcard{--a:#2563eb;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:.22s;display:flex;flex-direction:column;height:100%;box-shadow:var(--s1)}
.tcard:hover{box-shadow:var(--s3);transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 30%,transparent)}
.tcard .thumb{position:relative;height:122px;padding:14px 16px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);
  border-bottom:1px solid var(--line);overflow:hidden}
.tcard .thumb:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(15,23,42,.055) 1px,transparent 1px);background-size:100% 26px}
.tcard .thumb svg{position:relative;width:100%;height:100%;display:block;overflow:visible}
.tcard .tb{padding:15px 18px 17px;display:flex;flex-direction:column;flex:1}
.tcard .tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--a);background:color-mix(in srgb,var(--a) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--a) 20%,transparent);border-radius:99px;padding:3px 9px}
.tcard h3{font-size:16px;font-weight:750;line-height:1.32;letter-spacing:-.011em;margin:10px 0 5px;min-height:2.64em}
.tcard p{font-size:13.5px;color:var(--muted);line-height:1.55}
.tcard .tmeta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  border-top:1px dashed var(--line);font-size:11.5px;color:#94a3b8;font-weight:600}
.tcard .tmeta em{font-style:normal;margin-left:auto;color:var(--a);font-weight:750;display:inline-flex;align-items:center;gap:4px}
.tcard:hover .tmeta em span{transform:translateX(3px)}
.tcard .tmeta em span{display:inline-block;transition:.2s}
/* thumb primitives */
.tk{font:700 9.5px/1 system-ui,sans-serif;fill:#94a3b8;letter-spacing:.02em}
.tk.b{fill:var(--a)}
.chip-d{font:800 9.5px/1 system-ui,sans-serif}
.emailbar{margin-top:26px;position:relative;overflow:hidden;background:linear-gradient(120deg,#0f172a,#132a52 60%,#0b2540);
  color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:26px 28px;text-align:left;
  display:flex;align-items:center;gap:26px;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--s3)}
.emailbar:before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.24),transparent 66%)}
.emailbar .et{position:relative;max-width:430px}
.emailbar .et h3{font-size:19px;font-weight:800;letter-spacing:-.015em;display:flex;align-items:center;gap:9px}
.emailbar .et h3 svg{width:18px;height:18px;color:#67e8f9;flex:none}
.emailbar .et p{font-size:14px;color:#a9bdd8;margin-top:7px;line-height:1.55}
.emailform{position:relative;display:flex;gap:8px;flex:1;min-width:0;max-width:440px;flex-wrap:wrap}
.emailform input{flex:1;min-width:190px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  color:#fff;border-radius:11px;padding:13px 15px;font-size:15px;outline:none;transition:.18s}
.emailform input::placeholder{color:#8399b8}
.emailform input:focus{border-color:#22d3ee;background:rgba(255,255,255,.11);box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.emailform .btn.primary{background:#fff;color:#0f172a;border-color:#fff}
.emailform .btn.primary:hover{background:#e6f6ff}
.emailbar .fine{position:relative;flex-basis:100%;font-size:11.5px;color:#7e93b3;margin-top:-8px;line-height:1.55}
.emailbar .fine b{color:#a9bdd8;font-weight:650}

/* ---------- faq ---------- */
.faq-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start;text-align:left}
.faq-aside{position:sticky;top:86px}
.faq-help{margin-top:26px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.faq-help h4{font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.faq-help p{font-size:13.5px;color:var(--muted);margin:6px 0 12px;line-height:1.55}
.faq-help a.ask{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--blue)}
.faq-help a.ask span{transition:.2s}
.faq-help a.ask:hover span{transform:translateX(3px)}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--s2);overflow:hidden}
details.qa{border-bottom:1px solid var(--line);background:#fff;transition:background .18s}
details.qa:last-child{border-bottom:none}
details.qa[open]{background:linear-gradient(180deg,var(--blue-50),#fff 62%)}
details.qa summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:650;font-size:15.5px;letter-spacing:-.008em;
  line-height:1.45;display:flex;justify-content:space-between;align-items:center;gap:14px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:hover{color:var(--blue)}
details.qa summary .pm{flex:none;width:25px;height:25px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:transparent;font-size:0;transition:.22s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
details.qa summary:hover .pm{border-color:rgba(37,99,235,.35);background-color:var(--blue-50)}
details.qa[open] summary .pm{transform:rotate(180deg);background-color:#fff;border-color:rgba(37,99,235,.4)}
details.qa[open] summary{color:var(--blue)}
details.qa .ans{padding:0 56px 18px 20px;color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:-2px}
details.qa .ans b{color:var(--ink);font-weight:650}

/* ---------- final cta ---------- */
.finalcta{position:relative;overflow:hidden;background:linear-gradient(140deg,#1e3a8a,#2563eb 46%,#0e7490);
  color:#fff;border-radius:var(--r-xl);padding:58px 30px 46px;text-align:center;margin:12px 0;
  box-shadow:0 24px 60px rgba(30,58,138,.28)}
.finalcta:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 42%,#000 0%,transparent 74%);
  mask-image:radial-gradient(70% 62% at 50% 42%,#000 0%,transparent 74%)}
.finalcta:after{content:"";position:absolute;width:520px;height:520px;left:50%;top:-320px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(103,232,249,.30),transparent 62%)}
.finalcta>*{position:relative}
.finalcta .eyebrow{color:#a5f3fc;background:rgba(8,145,178,.28);border-color:rgba(165,243,252,.3)}
.finalcta h2{font-size:clamp(27px,3.7vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  margin:16px auto 0;max-width:19ch;text-wrap:balance}
.finalcta p{color:#cfe3ff;font-size:16.5px;margin:13px auto 26px;max-width:52ch;text-wrap:pretty}
.ctabox{max-width:560px;margin:0 auto;display:flex;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:9px;backdrop-filter:blur(6px);
  box-shadow:0 12px 34px rgba(8,25,60,.3)}
.ctabox .fld{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding-left:12px}
.ctabox .fld svg{width:18px;height:18px;color:#a5f3fc;flex:none}
.ctabox input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-size:16px;font-weight:500}
.ctabox input::placeholder{color:#a8c4e8}
.ctabox .btn{background:#fff;color:#12306e;border-color:#fff;font-weight:750;white-space:nowrap}
.ctabox .btn:hover{background:#e8f4ff;transform:translateY(-1px)}
.cta-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:13px;color:#bcd6f7}
.cta-chips a{color:#e2eeff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:5px 11px;font-weight:600;transition:.18s}
.cta-chips a:hover{background:rgba(255,255,255,.2);color:#fff}
.cta-trust{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  font-size:13px;color:#bcd6f7;font-weight:600}
.cta-trust i{display:inline-flex;align-items:flex-start;gap:7px;font-style:normal;text-align:left}
.cta-trust i:before{content:"";width:15px;height:15px;margin-top:2px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5f3fc' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}

/* ---------- footer ---------- */
footer.site{position:relative;background:var(--ink);color:#c7d2e0;padding:48px 0 28px}
footer.site:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 52%,var(--violet))}

/* Footer search bar */
.foot-search{margin-bottom:36px}
.foot-search-form{display:flex;gap:0;max-width:520px;margin:0 auto}
.foot-search-form input{flex:1;padding:13px 18px;font-size:15px;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-right:none;
  border-radius:12px 0 0 12px;color:#fff;outline:none;transition:.16s}
.foot-search-form input::placeholder{color:#7189ae}
.foot-search-form input:focus{border-color:var(--blue);background:rgba(37,99,235,.1)}
.foot-search-form button{padding:13px 24px;font-size:14px;font-weight:600;font-family:inherit;
  background:var(--blue);color:#fff;border:none;border-radius:0 12px 12px 0;cursor:pointer;
  transition:.16s;white-space:nowrap}
.foot-search-form button:hover{background:var(--blue-700)}

.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer.site .logo-word{color:#fff}
footer.site .logo-word b{color:#60a5fa}
.foot-about{font-size:13.5px;color:#8fa1bd;margin-top:12px;max-width:238px;line-height:1.6}
.foot-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.foot-badges span{font-size:10px;font-weight:700;letter-spacing:.01em;color:#a5f3fc;background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.2);border-radius:99px;padding:4px 7px;white-space:nowrap}
.foot-col h4{display:flex;align-items:center;gap:7px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:800;color:#94a3b8;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-col h4 b{font-weight:700;color:#64748b;letter-spacing:0;text-transform:none;font-size:11px}
.foot-col a{display:block;width:max-content;max-width:100%;font-size:13.5px;color:#c7d2e0;padding:5px 0;
  border-bottom:1px solid transparent;transition:.16s}
.foot-col a:hover{color:#fff;border-bottom-color:rgba(96,165,250,.8)}
.foot-col a.all{color:#7fb1ff;font-weight:650;margin-top:3px}
.foot-link-static{display:block;font-size:13.5px;color:#64748b;padding:5px 0}
.foot-pop{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.foot-pop h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:#94a3b8;margin-bottom:12px}
.fp-links{display:flex;flex-wrap:wrap;gap:7px}
.fp-links a{font-size:12.5px;color:#a8bad6;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:99px;padding:6px 12px;transition:.16s;white-space:nowrap}
.fp-links a:hover{color:#fff;background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.4)}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:18px;text-align:center;
  font-size:12.5px;color:#8fa1bd}

@media(max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr;row-gap:30px}
  .stat:nth-child(3):before{display:none}
  .stat:nth-child(n+3){padding-top:30px}
  .stat:nth-child(n+3):after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.16),rgba(255,255,255,.05))}
  .hub-grid,.grid-3,.router{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .prob-split{grid-template-columns:1fr;gap:36px}
  .probx:before{-webkit-mask-image:radial-gradient(80% 40% at 50% 78%,#000 0%,transparent 72%);
    mask-image:radial-gradient(80% 40% at 50% 78%,#000 0%,transparent 72%)}
  /* how: vertical rail, number beside the card */
  .flow{grid-template-columns:1fr;gap:0;text-align:left}
  .fstep{display:grid;grid-template-columns:44px 1fr;gap:16px;padding-bottom:20px}
  .fstep:last-child{padding-bottom:0}
  .fstep:after{display:none}
  .fstep:not(:last-child):before{content:"";position:absolute;left:21px;top:52px;bottom:8px;width:2px;
    background:repeating-linear-gradient(180deg,rgba(37,99,235,.34) 0 7px,transparent 7px 14px)}
  .fcard{margin-top:0}
  .mock{height:auto;min-height:100px}
  /* preview: chart on top, rail becomes a 3-across strip */
  .pv-main{grid-template-columns:1fr}
  .pv-rail{border-left:none;border-top:1px solid var(--line);flex-direction:row;padding:16px}
  .pv-rail .rstat{flex:1;min-width:0}
  /* comparison: show the swipe affordance */
  .cmp-hint{display:flex!important;align-items:center;justify-content:center;gap:7px;font-size:12.5px;
    color:#94a3b8;font-weight:600;margin-top:12px}
  /* faq: stack, un-stick the aside */
  .faq-split{grid-template-columns:1fr;gap:26px}
  .faq-aside{position:static}
  .faq-help{display:none}
  /* trends: keep the mini-charts from stranding in a wide card */
  .tcard .thumb{height:132px}
  .emailbar{padding:22px 20px}
}
@media(max-width:640px){
  /* let the panel row labels wrap instead of truncating */
  .grow{align-items:flex-start}
  .grow .gl{white-space:normal;line-height:1.35;padding-top:1px}
  .grow .gd{min-width:52px}
  /* paywall veil: full-width bar so no label fragment peeks beside it */
  .gveil{padding:0 12px}
  .lockbtn{width:100%;justify-content:center}
  .gpanel .gh{font-size:12.5px;padding:11px 14px;gap:8px}
  .gh .pill{font-size:10px;padding:4px 8px;letter-spacing:.03em}
  /* header: drop the text links, keep the search action */
  nav.main a:not(.btn){display:none}
  nav.main{gap:8px}
  .grid-4{grid-template-columns:1fr}
  .strip .wrap{gap:11px;padding:15px 20px;align-items:flex-start}
  .strip .seal{margin-top:2px}
  .strip .st-pills{margin-left:0;flex:1 1 100%;gap:5px}
  .strip .st-pills>span,.strip .btn{font-size:11.5px;padding:5px 10px}
  .pv-head{padding:14px 14px;gap:10px}
  .bar .lab{font-size:10px}
  .bar .dl{font-size:9.5px}
  .bar .val{font-size:11px}
  .pv-foot{padding:14px}
  .pv-foot .btn{width:100%;justify-content:center}
  .tabs{padding:3px;width:100%;justify-content:space-between}
  .tab{font-size:12.5px;padding:7px 9px}
  .pv-meta{font-size:11.5px;gap:11px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .foot-grid>*{min-width:0}
  .foot-grid>*:first-child{grid-column:1/-1}
  .foot-about{max-width:none}
  .foot-col a{font-size:13px}
  .foot-col a.all{font-size:12.5px}
  section{padding:52px 0}
  .bars{gap:8px}
  .plot{padding-left:40px;height:170px;margin:22px 0 44px}
  .gridl{left:40px}
  .gridl i b{left:-40px;width:36px;font-size:9.5px}
  .bar .val{font-size:10.5px}
  .bar .lab{font-size:10px}
  .bar .dl{font-size:9.5px}
  .pv-chart{padding:18px 16px 14px}
  .pv-rail{flex-direction:column;gap:10px}
  .searchbox .kbd{display:none}
  /* trends + email */
  .grid-3{gap:14px;margin-top:26px}
  .tcard .thumb{height:118px;padding:12px 13px}
  .tcard .tb{padding:14px 15px 15px}
  .emailbar{padding:20px 18px;gap:16px;border-radius:var(--r-lg)}
  .emailbar .et h3{font-size:17px}
  .emailform{max-width:none}
  .emailform input,.emailform .btn{width:100%;min-width:0}
  .emailbar .fine{margin-top:0}
  /* faq */
  details.qa summary{padding:15px 16px;font-size:15px}
  details.qa .ans{padding:0 16px 16px;font-size:14px}
  /* final cta */
  .finalcta{padding:42px 18px 34px;border-radius:var(--r-lg)}
  .finalcta p{font-size:15.5px}
  .ctabox{flex-direction:column;padding:8px;gap:8px}
  .ctabox .fld{padding:6px 4px 6px 10px}
  .ctabox .btn{width:100%;justify-content:center}
  .cta-trust{flex-direction:column;gap:10px;align-items:flex-start;margin-top:22px;
    width:max-content;max-width:100%;margin-left:auto;margin-right:auto;font-size:12.5px}
  /* footer */
  .foot-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-bar .fl{flex-wrap:wrap;gap:6px 18px}
  .foot-bar .fl span:before{display:none}
}