/* ============================================================
   spy.css — spyonthem.com theme tokens + animations
   Black / cinematic / surveillance-green premium aesthetic.
   ============================================================ */

:root{
  --black:#000000;
  --panel:#0a0a0a;
  --panel-2:#101012;
  --panel-3:#161618;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#f4f4f5;        /* primary */
  --muted:#c9ced9;       /* secondary (silver) */
  --muted-2:#9aa2b1;     /* muted (gray) — never dimmer than this for text */
  --nav-link:#e6e9f0;    /* nav default */
  --accent:#9dff3c;        /* surveillance green */
  --accent-dim:rgba(157,255,60,.14);
  --accent-glow:rgba(157,255,60,.35);
  --alert:#ff4d4d;         /* flagged / alert */
  --alert-dim:rgba(255,77,77,.14);
  --radius:14px;
  --radius-sm:10px;
  --maxw:1180px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--accent);color:#000}

h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.5vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-body);font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- grain + scanline overlays ---------- */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-3%,4%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,transparent 55%,rgba(0,0,0,.75) 100%)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.55));
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  font-size:18px;letter-spacing:.05em}
.logo .eye{width:22px;height:22px;flex-shrink:0}
.logo b{color:var(--text)}.logo i{color:var(--accent);font-style:normal}
.nav .spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;color:var(--nav-link);transition:color .2s}
.nav-links a:hover{color:#ffffff}
.logo img{height:28px;width:auto;display:block}
@media(max-width:720px){.nav-links a.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s;
  white-space:nowrap;text-decoration:none}
/* primary CTA: pure black text on the green accent for max contrast (all landing + app CTAs) */
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}
/* nav CTA lives inside .nav-links a (color:var(--nav-link)) which out-specifies .btn-primary → force black */
.nav-links a.btn-primary,.nav a.btn-primary,a.btn-primary,a.btn-primary:hover{color:#000}
.btn-primary:hover{box-shadow:0 0 0 4px var(--accent-dim),0 12px 40px -8px var(--accent-glow);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-block{width:100%}
/* prominent upgrade CTA (settings / plans): bright green, black text, larger & bolder */
.btn-upgrade{background:var(--accent);border-color:var(--accent);color:#000!important;
  font-weight:700;font-size:16px;padding:15px 28px;letter-spacing:.01em}
.btn-upgrade:hover{box-shadow:0 0 0 4px var(--accent-dim),0 14px 44px -8px var(--accent-glow);transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(90px,16vh,180px) 0 clamp(60px,9vh,120px)}
/* cinematic surveillance photo backdrop + slow ken-burns */
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/hero-bg.png") center 30%/cover no-repeat;
  transform-origin:60% 40%;animation:kenburns 32s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0)}
  100%{transform:scale(1.2) translate(-2.5%,-2%)}}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.62) 70%,rgba(0,0,0,.8) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.9) 100%)}
/* faint moving scanlines over the photo */
.hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(157,255,60,.05) 0 1px,transparent 1px 4px);
  animation:heroLines 8s linear infinite}
@keyframes heroLines{from{background-position:0 0}to{background-position:0 120px}}
.hero.has-photo .hero-grid{opacity:.35}
/* Task 2: hero primary CTA → pure black text for contrast on green */
.hero-cta .btn-primary{color:#000}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,transparent 78%);
  animation:gridpan 24s linear infinite}
@keyframes gridpan{from{background-position:0 0}to{background-position:56px 56px}}
.hero-scan{position:absolute;left:0;right:0;top:0;height:180px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent-dim),transparent);opacity:.6;
  animation:scan 7s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(-180px)}100%{transform:translateY(90vh)}}
.hero-in{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center;padding:0 24px}
.hero h1{margin:22px 0 0}
.hero h1 .g{color:var(--accent)}
.hero .lede{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);max-width:640px;margin:24px auto 0}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.trust{margin-top:46px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;color:var(--muted-2);font-size:13px}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{width:15px;height:15px;color:var(--accent)}

/* ---------- section ---------- */
.section{padding:clamp(64px,10vh,120px) 0;position:relative}
.section-head{max-width:720px;margin:0 0 54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:14px 0 0}
.section-head p{color:var(--muted);margin-top:16px;font-size:1.05rem}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;background:var(--panel);
  position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--line-2);transform:translateY(-4px)}
.step .num{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.step h3{margin:18px 0 10px;font-size:1.35rem}
.step p{color:var(--muted);font-size:.98rem;margin:0}
.step .ic{width:38px;height:38px;color:var(--accent);margin-bottom:6px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- graph teaser ---------- */
.teaser{border:1px solid var(--line);border-radius:var(--radius);background:
  radial-gradient(120% 120% at 50% 0%,rgba(157,255,60,.06),transparent 60%),var(--panel);
  overflow:hidden;position:relative}
.teaser svg{width:100%;height:auto;display:block}
.teaser .cap{position:absolute;left:18px;bottom:16px;font-size:12px;color:var(--muted);
  font-family:var(--font-body);letter-spacing:.04em}
.dash{stroke-dasharray:5 7;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:32px 28px;
  display:flex;flex-direction:column;position:relative;transition:border-color .3s,transform .3s,box-shadow .3s}
.plan:hover{border-color:var(--line-2);transform:translateY(-4px)}
.plan.feat{border-color:var(--accent);background:linear-gradient(180deg,rgba(157,255,60,.05),transparent 40%),var(--panel);
  box-shadow:0 0 0 1px var(--accent),0 30px 80px -30px var(--accent-glow)}
.plan .badge{position:absolute;top:-11px;left:28px;background:var(--accent);color:#04120a;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan .pname{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.plan .price{font-family:var(--font-display);font-weight:700;font-size:3rem;margin:14px 0 2px;line-height:1}
.plan .price small{font-size:1rem;color:var(--muted);font-weight:500}
.plan .searches{color:var(--accent);font-weight:600;font-size:.95rem;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:3px}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- FCRA band ---------- */
.fcra{border:1px solid var(--alert);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--alert-dim),transparent);padding:28px 30px;
  display:flex;gap:18px;align-items:flex-start}
.fcra svg{width:26px;height:26px;color:var(--alert);flex-shrink:0}
.fcra h4{font-family:var(--font-display);font-size:1.05rem;color:var(--alert);margin:0 0 8px;letter-spacing:.02em}
.fcra p{color:var(--muted);font-size:.92rem;margin:0}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.footer-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer .logo{margin-bottom:14px}
.footer p{color:var(--muted-2);font-size:.86rem;max-width:360px}
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
.footer-col h5{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.footer-col a{display:block;color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted-2);font-size:.8rem}

/* ---------- prose (compliance pages) ---------- */
.prose{max-width:760px;margin:0 auto;padding:clamp(60px,10vh,110px) 24px}
.prose h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:8px}
.prose .updated{color:var(--muted-2);font-size:.85rem;margin-bottom:40px}
.prose h1,.prose h2,.prose h3{color:#ffffff}
.prose h2{font-size:1.5rem;margin:44px 0 14px}
.prose h3{font-size:1.15rem;margin:28px 0 10px}
.prose p,.prose li{color:#dfe3ea;font-size:1rem}
.prose .updated{color:var(--muted-2)}
.prose ul{padding-left:22px}.prose li{margin:8px 0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text)}
.callout{border:1px solid var(--alert);border-radius:var(--radius-sm);background:var(--alert-dim);
  padding:18px 22px;margin:24px 0}
.callout p{color:var(--text);margin:0;font-size:.95rem}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.input,.textarea{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  padding:14px 16px;border-radius:var(--radius-sm);font:inherit;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.textarea{resize:vertical;min-height:120px}
.checkrow{display:flex;gap:12px;align-items:flex-start;margin:18px 0;color:var(--muted);font-size:.92rem}
.checkrow input{width:20px;height:20px;accent-color:var(--accent);margin-top:2px;flex-shrink:0}
.form-msg{min-height:20px;font-size:.9rem;margin-top:6px}
.form-msg.err{color:var(--alert)}.form-msg.ok{color:var(--accent)}
.form-card{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:34px 32px}

/* ---------- modal ---------- */
.modal-ov{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);padding:20px}
.modal-ov.open{display:flex}
.modal{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:34px 30px;position:relative;animation:modalin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes modalin{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.modal .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer}.modal .x:hover{color:var(--text)}
.modal h3{font-size:1.5rem;margin-bottom:6px}
.modal .sub{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.modal .alt{text-align:center;margin-top:16px;font-size:.9rem;color:var(--muted)}
.modal .alt a{color:var(--accent);cursor:pointer}

/* ---------- app: top bar ---------- */
.appbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:16px;
  padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.82);backdrop-filter:blur(14px)}
.appbar .spacer{flex:1}
.credit{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:999px;
  padding:8px 16px;font-size:13px;background:var(--panel-2)}
.credit .meter{width:80px;height:6px;border-radius:999px;background:var(--panel-3);overflow:hidden}
.credit .meter i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .5s}
.credit.low .meter i{background:var(--alert)}
.credit b{color:var(--text);font-variant-numeric:tabular-nums}
.credit .lbl{color:var(--muted)}
.acct{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer}
.acct .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#4a7d1a);
  color:#04120a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--font-display)}

/* ---------- app: search panel ---------- */
.searchwrap{max-width:720px;margin:0 auto;padding:clamp(40px,8vh,90px) 24px}
.searchwrap .h{text-align:center;margin-bottom:38px}
.searchwrap .h h1{font-size:clamp(2rem,5vw,3.2rem)}
.searchwrap .h p{color:var(--muted);margin-top:12px}
.searchcard{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);
  padding:26px;box-shadow:0 40px 100px -40px rgba(157,255,60,.12)}
/* category selector — wrapping chip bar (holds all 8 search modes cleanly at any width) */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:0;border:none;background:none}
.tab{flex:0 0 auto;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;
  transition:all .18s;white-space:nowrap;display:inline-flex;align-items:center}
.tab.active{background:var(--accent);color:#04120a;border-color:var(--accent)}
.tab:not(.active):hover{color:var(--text);border-color:var(--line-2)}
.tabpane{display:none}.tabpane.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* ---------- app: scanning state ---------- */
.scanning{max-width:520px;margin:0 auto;padding:80px 24px;text-align:center}
.scan-ring{width:120px;height:120px;margin:0 auto 30px;position:relative}
.scan-ring svg{width:100%;height:100%;animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-ring .dot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.scanning h2{font-size:1.6rem}
.scan-log{margin-top:20px;font-family:var(--font-body);font-size:13px;color:var(--muted);min-height:22px;
  font-variant-numeric:tabular-nums}
.scan-log .ok{color:var(--accent)}

/* ---------- app: React Flow graph area ---------- */
#graph-root{width:100%;flex:1;min-height:0;height:calc(100vh - 61px);position:relative}
.rf-toolbar{position:absolute;top:16px;left:16px;z-index:10;display:flex;gap:10px;align-items:center}
.rf-toolbar .who{border:1px solid var(--line-2);background:rgba(0,0,0,.7);backdrop-filter:blur(10px);
  border-radius:999px;padding:8px 16px;font-size:13px;color:var(--text)}
.rf-toolbar .who b{color:var(--accent)}

/* React Flow node cards */
.node{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;
  min-width:180px;max-width:230px;color:var(--text);font-family:var(--font-body);cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 10px 30px -14px rgba(0,0,0,.9)}
.node:hover{transform:translateY(-2px)}
.node.sel{box-shadow:0 0 0 2px var(--accent),0 14px 40px -12px var(--accent-glow)}
.node .cat{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.node .cat::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--nc,var(--accent))}
.node.sel{border-color:var(--nc,var(--accent))}
.node .title{font-family:var(--font-display);font-weight:700;font-size:15px;margin-top:8px;line-height:1.2}
.node .lines{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.5}
.node .lines .empty{color:var(--muted-2);font-style:italic}
.node .count{font-size:11px;color:var(--nc,var(--accent));font-weight:600;margin-top:8px}
/* person (central) node */
.pnode{background:linear-gradient(180deg,rgba(157,255,60,.08),transparent),var(--panel);
  border:1px solid var(--accent);border-radius:16px;padding:18px;min-width:220px;max-width:260px;
  box-shadow:0 0 0 1px var(--accent),0 20px 60px -20px var(--accent-glow);color:var(--text);cursor:default}
.pnode .row{display:flex;gap:14px;align-items:center}
.pnode .ph{width:58px;height:58px;border-radius:12px;object-fit:cover;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#3d6a15);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:22px;color:#04120a;overflow:hidden}
.pnode .nm{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.05}
.pnode .hd{font-size:12px;color:var(--muted);margin-top:4px}
.pnode .meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.pnode .chip{font-size:11px;border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;color:var(--muted)}

/* side panel */
.sidepanel{position:absolute;top:0;right:0;height:100%;width:min(420px,90vw);z-index:20;
  background:var(--panel);border-left:1px solid var(--line-2);transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto;box-shadow:-30px 0 80px -30px rgba(0,0,0,.9)}
.sidepanel.open{transform:none}
.sp-head{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);
  padding:22px 24px;display:flex;align-items:flex-start;gap:12px}
.sp-head .cat{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sc,var(--accent))}
.sp-head h3{font-size:1.5rem;margin-top:6px}
.sp-head .x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.sp-head .x:hover{color:var(--text)}
.sp-body{padding:8px 24px 40px}
.rec{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin:12px 0;background:var(--panel-2)}
.rec .rt{font-family:var(--font-display);font-weight:700;font-size:15px}
.rec .rl{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:13px;border-top:1px solid var(--line)}
.rec .rl:first-of-type{border-top:0}
.rec .rl .k{color:var(--muted-2)}.rec .rl .v{color:var(--text);text-align:right;word-break:break-word}
.rec .rl .v a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.rec .badge-now{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#04120a;background:var(--accent);padding:2px 8px;border-radius:999px;margin-left:8px}
.sp-empty{color:var(--muted-2);font-style:italic;padding:30px 0;text-align:center}

@media(max-width:640px){
  .node{min-width:150px;max-width:190px}
  .pnode{min-width:190px}
}

/* ============================================================
   Additions: app shell + history sidebar, locked teaser,
   trial banner, node icons + entrance animation, trial badges
   ============================================================ */

/* ---- app shell (sidebar + stage) ---- */
.appmain{display:flex;flex:1;min-height:0;position:relative}
.appstage{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}

/* ---- history sidebar ---- */
.histbar{width:288px;flex-shrink:0;border-right:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;overflow:hidden;z-index:60}
.histbar .hb-head{padding:18px 18px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.histbar .hb-head h4{font-family:var(--font-display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.histbar .hb-head .cls{display:none;margin-left:auto;background:none;border:none;color:var(--muted);
  font-size:24px;line-height:1;cursor:pointer}
.histbar .hb-head .cls:hover{color:#fff}
.hb-list{overflow-y:auto;flex:1;padding:8px 10px 24px;display:flex;flex-direction:column;gap:6px}
.hb-empty{color:var(--muted-2);font-size:.86rem;text-align:center;padding:34px 12px;line-height:1.6}
.hitem{width:100%;text-align:left;border:1px solid var(--line);background:var(--panel-2);
  border-radius:var(--radius-sm);padding:11px 13px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;
  display:flex;flex-direction:column;gap:6px;font:inherit}
.hitem:hover{border-color:var(--line-2);background:var(--panel-3);transform:translateX(2px)}
.hitem .hn{color:var(--text);font-size:14px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hitem .hmeta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.hbadge{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.hbadge.name{color:#9dff3c;border-color:rgba(157,255,60,.4)}
.hbadge.email{color:#3cc8ff;border-color:rgba(60,200,255,.4)}
.hbadge.phone{color:#c08cff;border-color:rgba(192,140,255,.4)}
.hbadge.url,.hbadge.social{color:#ff9d3c;border-color:rgba(255,157,60,.4)}
.hmb{display:none;background:none;border:1px solid var(--line-2);color:var(--text);
  border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  align-items:center;gap:8px}
.hmb svg{width:16px;height:16px}
.hb-backdrop{display:none}
@media(max-width:900px){
  .histbar{position:absolute;top:0;left:0;height:100%;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:20px 0 60px -20px rgba(0,0,0,.9)}
  .histbar.open{transform:none}
  .histbar .hb-head .cls{display:block}
  .hmb{display:inline-flex}
  .hb-backdrop.open{display:block;position:absolute;inset:0;z-index:55;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
}

/* ---- node icon + value summary + entrance ---- */
@keyframes nodein{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.node,.pnode{animation:nodein .5s cubic-bezier(.2,.9,.25,1) both}
.node .cat{gap:8px}
.node .cat .ci{width:14px;height:14px;flex-shrink:0;color:var(--nc,var(--accent))}
.node .cat::before{display:none}
.node .val{margin-top:8px;font-size:12.5px;color:var(--text);font-weight:600;line-height:1.35}
.node .lines{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.5}
.node .lines>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node.locked{position:relative;overflow:hidden}
.node.locked .lines{filter:blur(4px);opacity:.5;user-select:none;pointer-events:none}
.node.locked::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 8px,transparent 8px 16px)}
.node .lockrow{margin-top:10px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;
  color:var(--muted);background:rgba(157,255,60,.08);border:1px solid rgba(157,255,60,.22);
  border-radius:8px;padding:6px 9px;line-height:1.3}
.node .lockrow svg{width:13px;height:13px;color:var(--accent);flex-shrink:0}
.node .lockrow b{color:var(--accent);font-weight:700}

/* ---- trial upsell banner ---- */
.trialbar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;
  width:min(680px,calc(100% - 32px));border:1px solid var(--accent);border-radius:14px;
  background:linear-gradient(180deg,rgba(157,255,60,.12),rgba(10,10,10,.96));
  backdrop-filter:blur(14px);box-shadow:0 24px 70px -24px var(--accent-glow),0 0 0 1px var(--accent);
  padding:16px 18px;display:flex;align-items:center;gap:16px;
  animation:trialin .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes trialin{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translateX(-50%)}}
.trialbar .tb-ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(157,255,60,.14);color:var(--accent)}
.trialbar .tb-ic svg{width:20px;height:20px}
.trialbar .tb-txt{flex:1;min-width:0}
.trialbar .tb-txt h4{font-family:var(--font-display);font-size:1rem;color:#fff;margin:0 0 3px;font-weight:700}
.trialbar .tb-txt p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.4}
.trialbar .btn{flex-shrink:0}
.trialbar .tb-x{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer}.trialbar .tb-x:hover{color:#fff}
@media(max-width:640px){
  .trialbar{flex-direction:column;align-items:stretch;text-align:center;padding:16px 16px 18px}
  .trialbar .tb-ic{margin:0 auto}
  .trialbar .btn{width:100%}
}

/* side-panel locked footer */
.sp-locked{border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:rgba(157,255,60,.07);padding:18px;margin:14px 0;text-align:center}
.sp-locked h4{font-family:var(--font-display);color:#fff;font-size:1.05rem;margin:0 0 6px}
.sp-locked p{color:var(--muted);font-size:.88rem;margin:0 0 14px}

/* ---- pricing: trial badge ---- */
.plan .trial{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:rgba(157,255,60,.1);border:1px solid rgba(157,255,60,.3);border-radius:999px;
  padding:5px 11px;margin-bottom:14px}
.plan .trial svg{width:13px;height:13px}

/* ============================================================
   React Flow dark theme (shared by app.html + landing preview)
   ============================================================ */
.react-flow{background:#000!important}
.react-flow__attribution{display:none!important}
.react-flow__controls{background:var(--panel);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:none}
.react-flow__controls-button{background:var(--panel);border-bottom:1px solid var(--line);color:var(--text);fill:var(--text)}
.react-flow__controls-button:hover{background:var(--panel-3)}
.react-flow__controls-button svg{fill:var(--text)}
.react-flow__edge-path{stroke:var(--nc,#9dff3c)}
.react-flow__handle{opacity:0;pointer-events:none}
.react-flow__background{color:rgba(255,255,255,.12)}

/* ============================================================
   Account dropdown menu (app top bar)
   ============================================================ */
.acct-wrap{position:relative}
.acct .cv{width:15px;height:15px;color:var(--muted);margin-left:2px}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:200;min-width:210px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);animation:modalin .18s cubic-bezier(.2,.8,.2,1)}
.acct-menu .acct-em{padding:12px 16px;font-size:12px;color:var(--muted-2);border-bottom:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:14px;color:var(--text);padding:12px 16px;cursor:pointer;transition:background .15s}
.acct-menu a:hover,.acct-menu button:hover{background:var(--panel-3);color:var(--accent)}

/* ============================================================
   Node buttons (pull-live-social) + live-social results panel
   ============================================================ */
.node-btn{margin-top:10px;width:100%;background:rgba(92,255,157,.12);border:1px solid rgba(92,255,157,.4);
  color:#5cff9d;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;
  padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s,transform .1s}
.node-btn:hover{background:rgba(92,255,157,.22)}
.rec-btn{float:right;background:rgba(92,255,157,.12);border:1px solid rgba(92,255,157,.4);color:#5cff9d;
  font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.03em;
  padding:4px 9px;border-radius:7px;cursor:pointer}
.rec-btn:hover{background:rgba(92,255,157,.22)}

.soc-live{border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel-2);
  padding:16px;margin:14px 0}
.soc-live.loading{display:flex;align-items:center;gap:14px;color:var(--muted)}
.soc-live.loading span{color:var(--muted-2);font-size:.82rem}
.soc-spin{width:26px;height:26px;flex-shrink:0;border:3px solid rgba(92,255,157,.22);border-top-color:#5cff9d;
  border-radius:50%;animation:spin .8s linear infinite}
.soc-empty{color:var(--muted-2);font-style:italic;text-align:center;padding:14px 0}
.soc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.soc-av{width:46px;height:46px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--panel-3);
  display:flex;align-items:center;justify-content:center;color:#5cff9d;font-weight:700}
.soc-nm{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff}
.soc-vf{color:#3cc8ff;font-size:13px}
.soc-h{font-size:12px;color:var(--muted-2)}
.soc-stats{display:flex;gap:22px;margin-bottom:12px}
.soc-stat b{display:block;font-family:var(--font-display);font-size:20px;color:#fff;line-height:1.1}
.soc-stat span{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.soc-bio{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:12px;
  border-left:2px solid rgba(92,255,157,.5);padding-left:12px}
.soc-pl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:8px 0}
.soc-post{display:block;border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin:8px 0;
  background:var(--panel);transition:border-color .15s,transform .15s}
.soc-post:hover{border-color:var(--line-2);transform:translateX(2px)}
.soc-ptext{font-size:13px;color:var(--text);line-height:1.5}
.soc-pdate{font-size:11px;color:var(--muted-2);margin-top:6px}
.soc-sub{font-size:12px;color:var(--muted);margin-top:3px}
.soc-unsup{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.soc-openlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:.03em;color:#5cff9d;border:1px solid rgba(92,255,157,.4);
  background:rgba(92,255,157,.12);padding:8px 14px;border-radius:8px;text-decoration:none;transition:background .15s}
.soc-openlink:hover{background:rgba(92,255,157,.22)}

/* select fields (social handle network picker) */
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
select.input option{background:var(--panel-2);color:var(--text)}

/* ============================================================
   Landing: live report preview graph
   ============================================================ */
.preview{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 50% 0%,rgba(157,255,60,.06),transparent 60%),var(--panel);
  box-shadow:0 50px 120px -50px rgba(157,255,60,.16)}
.preview-host{position:relative;height:clamp(360px,56vh,560px);width:100%}
.preview-host .react-flow{background:transparent!important}
.preview-skel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.preview-rf{position:absolute;inset:0}
.preview-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.5)}
.preview-cta .cap{font-size:12px;color:var(--muted);letter-spacing:.03em}
/* keep preview graph feeling like a showcase — block pointer interaction */
.preview-rf .react-flow__pane{cursor:default}
.preview-rf .node,.preview-rf .pnode{pointer-events:none}

/* ============================================================
   Settings / account page
   ============================================================ */
.set-wrap{max-width:760px;margin:0 auto;padding:clamp(32px,7vh,72px) 20px 90px}
.set-head{margin-bottom:30px}
.set-head h1{font-size:clamp(2rem,5vw,3rem)}
.set-head p{color:var(--muted);margin-top:8px}
.set-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:26px 26px;margin-bottom:22px}
.set-card h2{font-size:1.3rem;margin-bottom:6px}
.set-card .desc{color:var(--muted-2);font-size:.9rem;margin-bottom:18px}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;
  border-top:1px solid var(--line);font-size:.95rem}
.set-row:first-of-type{border-top:0}
.set-row .k{color:var(--muted)}
.set-row .v{color:var(--text);font-weight:600;text-align:right}
.set-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.set-badge.ok{color:var(--accent);border-color:rgba(157,255,60,.4);background:rgba(157,255,60,.08)}
.set-badge.trial{color:#3cc8ff;border-color:rgba(60,200,255,.4);background:rgba(60,200,255,.08)}
.set-discount{margin-top:14px;border:1px solid rgba(157,255,60,.4);background:rgba(157,255,60,.08);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--accent);font-size:.9rem;font-weight:600}
.set-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* in-account plans grid (kept inside settings — no bounce to public pricing) */
.acct-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;align-items:stretch}
.acct-plan{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);
  padding:22px 18px 20px;display:flex;flex-direction:column}
.acct-plan.feat{border-color:rgba(157,255,60,.5)}
.acct-plan.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px -28px var(--accent-glow);
  background:linear-gradient(180deg,rgba(157,255,60,.06),transparent 45%),var(--panel-2)}
.acct-plan .ap-badge{position:absolute;top:-10px;left:16px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--accent);color:#000}
.acct-plan .ap-badge.pop{background:var(--panel-3);color:var(--accent);border:1px solid rgba(157,255,60,.4)}
.acct-plan .ap-trial{font-size:11px;font-weight:600;letter-spacing:.04em;color:#3cc8ff;margin-bottom:8px}
.acct-plan .ap-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.acct-plan .ap-price{font-family:var(--font-display);font-weight:700;font-size:2rem;margin:8px 0 2px;line-height:1}
.acct-plan .ap-price small{font-size:.85rem;color:var(--muted);font-weight:500}
.acct-plan .ap-searches{color:var(--accent);font-weight:600;font-size:.85rem;margin-bottom:16px}
.acct-plan .btn{margin-top:auto}
@media(max-width:720px){.acct-plans{grid-template-columns:1fr}}

.danger{border-color:rgba(255,77,77,.35)}
.danger h2{color:var(--alert)}
.link-danger{background:none;border:0;color:var(--muted-2);font:inherit;font-size:.85rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}
.link-danger:hover{color:var(--alert)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:11000;
  background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:14px 22px;
  color:#fff;font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  box-shadow:0 20px 60px -20px var(--accent-glow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--alert);box-shadow:0 20px 60px -20px rgba(255,77,77,.5)}
/* retention gauntlet modal */
.gaunt h3{font-size:1.5rem;margin-bottom:10px}
.gaunt .lose{list-style:none;padding:0;margin:0 0 20px}
.gaunt .lose li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;color:var(--muted);font-size:.93rem;
  border-top:1px solid var(--line)}
.gaunt .lose li:first-child{border-top:0}
.gaunt .lose li svg{width:16px;height:16px;color:var(--alert);flex-shrink:0;margin-top:3px}
.gaunt .offer{text-align:center;border:1px solid var(--accent);border-radius:var(--radius);
  background:radial-gradient(120% 120% at 50% 0%,rgba(157,255,60,.14),transparent),var(--panel-2);
  padding:24px 20px;margin-bottom:18px}
.gaunt .offer .big{font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--accent);line-height:1}
.gaunt .offer .sub{color:var(--muted);font-size:.95rem;margin-top:8px}
.gaunt .keep{width:100%;margin-bottom:10px}
.gaunt .bail{display:block;width:100%;text-align:center;background:none;border:0;color:var(--muted-2);
  font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0}
.gaunt .bail:hover{color:var(--alert)}

/* ============================================================
   Mobile optimisation (≤640px)
   ============================================================ */
.hide-xs{display:inline}
@media(max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  .nav-in{padding:12px 16px;gap:10px}
  .nav-links{gap:14px}
  .btn{padding:13px 20px;font-size:14px}
  .btn-sm{padding:10px 14px}
  .hero{padding:clamp(64px,12vh,110px) 0 clamp(44px,7vh,80px)}
  .hero-cta{gap:10px;margin-top:28px}
  .hero-cta .btn{flex:1 1 auto;min-width:0}
  .trust{gap:14px 20px;margin-top:30px}
  .section{padding:clamp(48px,8vh,80px) 0}
  .section-head{margin-bottom:34px}
  .steps{gap:14px}
  .plans{gap:16px}
  .fcra{flex-direction:column;gap:12px;padding:22px 20px}
  .footer-in{flex-direction:column;gap:24px}
  .footer-links{gap:26px}
  /* preview */
  .preview-host{height:clamp(300px,60vh,440px)}
  .preview-cta{flex-direction:column;align-items:stretch;text-align:center}
  .preview-cta .btn{width:100%}
  /* app top bar */
  .appbar{padding:11px 14px;gap:10px}
  .credit{padding:6px 10px;font-size:12px}
  .credit .meter{width:52px}
  .hide-xs{display:none}
  .acct{gap:6px}
  .acct .av{width:34px;height:34px}
  /* graph height accounts for shorter bar */
  #graph-root{height:calc(100vh - 57px)}
  /* settings */
  .set-row{flex-direction:column;align-items:flex-start;gap:4px}
  .set-row .v{text-align:left}
  .set-actions{flex-direction:column}
  .set-actions .btn{width:100%}
}
/* tap targets on coarse pointers */
@media(pointer:coarse){
  .nav-links a,.footer-col a,.tab,.hitem,.acct-menu a,.acct-menu button{min-height:44px;display:flex;align-items:center}
  .footer-col a{padding:8px 0}
}

/* ============================================================
   Search: optional "+ Add details" collapsible (Age / Gender)
   ============================================================ */
.more{margin-top:6px}
.more-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--accent);padding:6px 2px;letter-spacing:.01em;
  transition:color .15s}
.more-btn:hover{color:#b6ff6a}
.more-btn .mplus{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:6px;border:1px solid rgba(157,255,60,.4);background:rgba(157,255,60,.1);
  font-size:14px;line-height:1;color:var(--accent)}
.more-btn .mopt{color:var(--muted-2);font-weight:500}
.more-body{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
  animation:morein .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes morein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.more-hint{color:var(--muted-2);font-size:.82rem;margin:0 2px 12px;line-height:1.5}

/* ============================================================
   Identity: highlighted "Est. income" stat (node chip + panel row)
   ============================================================ */
.income-chip{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--accent);background:rgba(157,255,60,.12);border:1px solid rgba(157,255,60,.45);
  border-radius:8px;padding:6px 10px;line-height:1.2;letter-spacing:.01em;
  box-shadow:0 0 18px -6px var(--accent-glow)}
.income-chip.locked{color:var(--muted);background:rgba(157,255,60,.06);border-color:rgba(157,255,60,.28)}
.income-row{display:flex;align-items:center;gap:14px;margin:12px 0;padding:16px 18px;
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(157,255,60,.12),rgba(157,255,60,.04));
  box-shadow:0 0 0 1px rgba(157,255,60,.15),0 18px 44px -26px var(--accent-glow)}
.income-row.locked{border-color:rgba(157,255,60,.4);
  background:linear-gradient(180deg,rgba(157,255,60,.07),transparent)}
.income-row .ir-icon{font-size:22px;line-height:1;flex-shrink:0}
.income-row .ir-body{min-width:0}
.income-row .ir-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.income-row .ir-v{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:#fff;margin-top:3px;line-height:1.1}
.income-row.locked .ir-v{font-size:1rem;color:var(--muted)}

/* ============================================================
   Social: "Recent photos" thumbnail grid (last 10)
   ============================================================ */
.soc-photos{margin-top:14px}
.soc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.soc-thumb{position:relative;display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-3);transition:transform .15s,border-color .15s,box-shadow .15s}
.soc-thumb:hover{transform:translateY(-2px);border-color:rgba(92,255,157,.6);
  box-shadow:0 10px 24px -12px rgba(92,255,157,.5)}
.soc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:520px){.soc-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:380px){.soc-grid{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   Court & civil records  (⚖️ toolbar CTA + slide-in panel)
   ============================================================ */
.cr-cta{border:1px solid rgba(157,255,60,.45);background:rgba(157,255,60,.12);color:var(--accent);
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  padding:8px 12px;border-radius:999px;line-height:1;white-space:nowrap;
  backdrop-filter:blur(10px);transition:background .15s,box-shadow .15s,transform .1s}
.cr-cta:hover{background:rgba(157,255,60,.22);box-shadow:0 0 22px -8px var(--accent-glow);transform:translateY(-1px)}
.cr-loading{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem;padding:20px 2px}
.cr-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.cr-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);
  padding:14px 16px;transition:border-color .15s,transform .12s}
.cr-item:hover{border-color:var(--line-2);transform:translateY(-1px)}
.cr-title{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--text);text-decoration:none;line-height:1.25}
a.cr-title:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.cr-ct{color:var(--muted);font-size:.82rem}
.cr-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  background:rgba(157,255,60,.12);border:1px solid rgba(157,255,60,.4);border-radius:6px;padding:3px 7px;line-height:1}
/* criminal matches get a red badge + left accent so they stand out */
.cr-badge-crim{color:#ff6b6b;background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.45)}
.cr-item-crim{border-color:rgba(255,107,107,.35);box-shadow:inset 3px 0 0 #ff6b6b}
.cr-crimsum{color:#ff6b6b;font-size:.82rem;font-weight:600;margin-top:6px}
.cr-docket{color:var(--muted-2);font-size:.76rem;margin-top:5px;font-family:var(--font-body)}
.cr-snip{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:8px}
.cr-disc{color:var(--muted-2);font-size:.74rem;line-height:1.5;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line);font-style:italic}

/* ============================================================
   VIN decoder spec card
   ============================================================ */
.vin-input{letter-spacing:.14em;font-family:var(--font-display);text-transform:uppercase}
.vin-result{margin-top:14px}
.vin-loading{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem;padding:14px 2px}
.vin-card{border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(157,255,60,.08),transparent 60%),var(--panel-2);
  padding:18px 18px 16px;box-shadow:0 0 0 1px rgba(157,255,60,.15),0 24px 60px -34px var(--accent-glow)}
.vin-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:#fff;line-height:1.2}
.vin-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;margin-top:14px}
.vin-spec{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:rgba(0,0,0,.35);min-width:0}
.vin-spec .vk{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.vin-spec .vv{font-size:.9rem;color:var(--text);font-weight:600;word-break:break-word}
.vin-note{color:var(--muted-2);font-size:.76rem;line-height:1.5;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-style:italic}
@media(max-width:560px){
  .vin-specs{grid-template-columns:1fr}
  .rf-toolbar{flex-wrap:wrap;max-width:calc(100% - 32px)}
  .cr-cta{font-size:11px;padding:7px 10px}
}

/* ============================================================
   Photo / Face — reverse-image search (shared PhotoSearch)
   ============================================================ */
.tab .tab-ic{width:14px;height:14px;flex-shrink:0;vertical-align:-2px;margin-right:5px}
.ph-search{display:block}
.ph-copy{color:var(--muted);font-size:.95rem;margin:0 0 14px;line-height:1.5}
.ph-drop{display:flex;align-items:center;justify-content:center;min-height:190px;cursor:pointer;
  border:2px dashed var(--line-2);border-radius:var(--radius-sm);background:var(--panel-2);
  padding:18px;text-align:center;transition:border-color .18s,background .18s,box-shadow .18s;overflow:hidden}
.ph-drop:hover{border-color:var(--accent);background:rgba(157,255,60,.04)}
.ph-drop.over{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-dim)}
.ph-drop.has{border-style:solid;border-color:var(--line-2);padding:0;min-height:0}
.ph-drop-in{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.ph-drop-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(60,200,255,.12);color:#3cc8ff}
.ph-drop-ic svg{width:24px;height:24px}
.ph-drop-t{color:var(--text);font-weight:600;font-size:.95rem}
.ph-drop-s{color:var(--muted-2);font-size:.8rem}
.ph-preview{display:block;width:100%;max-height:320px;object-fit:contain;background:#000}
.ph-change{display:block;width:100%;margin-top:10px;background:none;border:1px solid var(--line-2);
  color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px;
  cursor:pointer;transition:border-color .15s,color .15s}
.ph-change:hover{border-color:var(--text);color:var(--text)}
.ph-legal{color:var(--muted-2);font-size:.78rem;line-height:1.5;margin:14px 2px;font-style:italic}
.ph-loading{display:flex;align-items:center;gap:14px;margin-top:16px;padding:18px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--panel-2);color:var(--muted);font-size:.92rem;line-height:1.45}
.ph-loading span{color:var(--muted-2);font-size:.82rem}
.ph-results{margin-top:18px}
.ph-count{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:12px}
.ph-count b{color:var(--accent)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ph-match{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .12s,box-shadow .15s}
.ph-match:hover{border-color:rgba(60,200,255,.6);transform:translateY(-2px);
  box-shadow:0 12px 30px -14px rgba(60,200,255,.5)}
.ph-match-img{aspect-ratio:1/1;background:var(--panel-3);overflow:hidden}
.ph-match-img img{width:100%;height:100%;object-fit:cover;display:block}
.ph-match-body{padding:10px 11px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ph-match-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ph-match-site{color:var(--text);font-weight:600;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#3cc8ff;background:rgba(60,200,255,.12);border:1px solid rgba(60,200,255,.4);
  border-radius:6px;padding:2px 6px;line-height:1.3;white-space:nowrap}
.ph-badge.kg{color:#c08cff;background:rgba(192,140,255,.12);border-color:rgba(192,140,255,.4)}
.ph-match-ctx{color:var(--muted);font-size:.78rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:520px){.ph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media(max-width:380px){.ph-grid{grid-template-columns:1fr 1fr}}

/* ---------- candidate picker (common-name disambiguation) ---------- */
.cand-warn{max-width:640px;margin:0 auto 18px;border:1px solid rgba(157,255,60,.35);
  background:rgba(157,255,60,.06);border-radius:14px;padding:16px 18px;font-size:.92rem;color:var(--text);line-height:1.55}
.cand-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.cand-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);border-radius:14px;
  background:var(--panel);padding:14px 16px;transition:border-color .18s,transform .18s}
.cand-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.cand-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:20px;color:#04120a;
  background:linear-gradient(135deg,var(--accent),#5fbf1f)}
.cand-main{flex:1;min-width:0}
.cand-name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text)}
.cand-sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.cand-head{color:var(--muted-2);font-size:.8rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-go{flex:0 0 auto}
.cand-foot{max-width:640px;margin:16px auto 0;text-align:center;color:var(--muted-2);font-size:.78rem}
@media(max-width:520px){
  .cand-card{flex-wrap:wrap}
  .cand-go{width:100%;margin-top:4px}
}

/* ---------- onboarding / how-to tour ---------- */
.tour-ov{backdrop-filter:blur(6px)}
.modal.tour{text-align:center;max-width:440px}
.tour-ic{font-size:44px;line-height:1;margin:4px 0 14px}
.modal.tour h3{font-size:1.5rem}
.modal.tour .sub{margin-top:10px;line-height:1.6}
.tour-dots{display:flex;justify-content:center;gap:7px;margin:22px 0 20px}
.tour-dots .td{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all .2s}
.tour-dots .td.on{background:var(--accent);width:20px;border-radius:999px}
.tour-nav{display:flex;justify-content:space-between;gap:12px}
.tour-nav .btn{flex:1}