/* PropFirm Shield - merged stylesheet (Stage A).
   Was three duplicated <style> blocks; shared rules now appear once.
   Order: core -> home -> compare -> community -> responsive. */

/* ==================================================================
   CORE - reset, tokens, nav, buttons, background FX, type
   ================================================================== */
/* ============ RESET & TOKENS (shared with index) ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* The app hides things by setting the `hidden` property from JS in 15 places
   — the Admin link, the moderator panel and its gate, the auth form fields.
   `hidden` only works because of a UA-stylesheet rule, and ANY author
   `display` on the same element silently beats it: the element keeps its
   `hidden` attribute, reports as hidden to script, and renders anyway. That
   is how the Admin button came to show for signed-out visitors the moment it
   was given `display:inline-flex`. This makes `hidden` mean hidden, so
   styling an element can never again leak it to the wrong audience. */
[hidden]{display:none !important}
:root{
  --bg:#080808; --bg2:#0b0b0b; --panel:#101010;
  --card:rgba(239,35,60,.045); --card-hi:rgba(239,35,60,.09);
  --line:rgba(239,35,60,.14); --line2:rgba(239,35,60,.3);
  --text:#ffffff; --muted:#a49c8c; --dim:#6d675c;
  --brand:#ef233c; --brand2:#ff7a8d; --deep:#c81e3c;
  --red:#ff4160; --green:#2fe6a7; --amber:#ffb648;
  --grad:linear-gradient(135deg,#ff7a8d 0%,#ef233c 45%,#c81e3c 100%);
  --grad-red:linear-gradient(135deg,#ff7a8d 0%,#ff4160 55%,#c81e3c 100%);
  --font-d:'Manrope',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'Inter',system-ui,sans-serif;
  --font-s:'Inter',system-ui,sans-serif;
  --r:18px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(239,35,60,.4);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font-b);color:var(--text)}
:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:0}
.wrap{width:min(1180px,92%);margin-inline:auto}
section{position:relative;padding:110px 0}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:900;box-shadow:0 0 12px rgba(239,35,60,.8)}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:800;transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent;padding:18px 0}
nav.scrolled{background:rgba(5,5,5,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line);padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;filter:drop-shadow(0 0 12px rgba(239,35,60,.55));transition:transform .4s}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-top{font-family:var(--font-d);font-weight:600;font-size:10px;letter-spacing:.5em;color:var(--brand2)}
.brand-main{font-family:var(--font-d);font-weight:800;font-size:21px;letter-spacing:.14em;color:#fff}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--muted);position:relative;transition:color .3s;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad);border-radius:0;transition:width .35s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
#burger{display:none;flex-direction:column;gap:5px;padding:8px}
#burger span{width:24px;height:2px;background:#fff;border-radius:0;transition:.35s}
#burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobileMenu{position:fixed;inset:0;z-index:790;background:rgba(5,5,5,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:90px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:.4s}
#mobileMenu.open{opacity:1;visibility:visible}
#mobileMenu a{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--muted);transition:color .3s}
#mobileMenu a:hover,#mobileMenu a.active{color:#fff}
#mobileMenu a.btn{font-size:16px;color:#fff;letter-spacing:.04em}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:14.5px;letter-spacing:.04em;padding:15px 30px;border-radius:0;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s,background .3s;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(200,30,60,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(200,30,60,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{border:1px solid var(--line2);color:var(--text);background:rgba(239,35,60,.05)}
.btn-ghost:hover{border-color:var(--brand);background:rgba(239,35,60,.12);transform:translateY(-3px);box-shadow:0 10px 30px rgba(200,30,60,.25)}
.btn-sm{padding:11px 22px;font-size:13px;border-radius:0}

/* ============ BACKGROUND FX ============ */
.page-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(239,35,60,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(239,35,60,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);animation:gridDrift 24s linear infinite}
@keyframes gridDrift{to{background-position:56px 56px}}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(200,30,60,.5),transparent 65%);top:-160px;left:-140px;animation:orbFloat 11s ease-in-out infinite}
.orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,65,96,.14),transparent 65%);top:10%;right:-120px;animation:orbFloat 14s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-36px) scale(1.08)}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}

/* ============ TYPE ============ */
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--font-m);font-size:11.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--brand2);margin-bottom:18px}
.kicker::before{content:"";width:36px;height:1px;background:var(--grad)}
h1{font-family:var(--font-d);font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin-bottom:16px}
h2{font-family:var(--font-d);font-weight:800;font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:.01em;text-transform:uppercase;margin-bottom:16px}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.accent-red{background:var(--grad-red);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{color:var(--muted);font-size:16.5px;max-width:640px}
.redacted{position:relative;color:transparent;user-select:none;border-radius:0;background:repeating-linear-gradient(135deg,rgba(239,35,60,.35) 0 8px,rgba(239,35,60,.18) 8px 16px)}

/* view switching (hash router) */
.view{display:none}
.view.active{display:block}

/* primary button shimmer */
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s;
}
.btn-primary:hover::after{left:130%}

/* status pills */
/* ============ STATUS PILLS ============ */
.status{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:0;display:inline-flex;align-items:center;gap:7px}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status-scam{color:#ff8296;background:rgba(255,65,96,.1);border:1px solid rgba(255,65,96,.35)}
.status-invest{color:#ffd28a;background:rgba(255,182,72,.09);border:1px solid rgba(255,182,72,.32)}
.status-invest::before{animation:blink 1.4s infinite}
.status-clear{color:#7dffd4;background:rgba(47,230,167,.09);border:1px solid rgba(47,230,167,.32)}
.status-un{color:var(--dim);background:rgba(239,35,60,.06);border:1px solid var(--line)}

.case-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--brand2);transition:gap .3s,color .3s}
.case-link:hover{gap:14px;color:#fff}

/* ============ FOOTER / TOTOP / REVEAL ============ */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:70px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:52px}
.foot-brand p{color:var(--muted);font-size:14px;margin:18px 0 22px;max-width:300px}
.socials{display:flex;gap:12px}
.soc{
  width:40px;height:40px;border-radius:0;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;transition:.3s;background:rgba(239,35,60,.05);
}
.soc:hover{background:var(--grad);border-color:transparent;transform:translateY(-4px);box-shadow:0 10px 26px rgba(200,30,60,.4)}
.soc svg{width:17px;height:17px;fill:var(--text)}
.foot-col h4{font-family:var(--font-d);font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--brand2);margin-bottom:20px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-col a{color:var(--muted);font-size:14.5px;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:#fff;padding-left:6px}
.foot-bottom{border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.foot-bottom .legal{display:flex;gap:24px}
.foot-bottom a:hover{color:#fff}
.disclaimer{margin-top:20px;font-size:12px;color:var(--dim);line-height:1.7;font-family:var(--font-m)}
#toTop{position:fixed;right:26px;bottom:26px;z-index:850;width:48px;height:48px;border-radius:0;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(200,30,60,.5);opacity:0;visibility:hidden;transform:translateY(20px);transition:.4s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{transform:translateY(-4px)}
#toTop svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.reveal-r.in{opacity:1;transform:none}

/* ============ ASYNC STATES (loading / error) ============ */
.skel-wrap{display:grid;gap:16px}
.skel{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:0;
  background:var(--card);min-height:96px;
}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(239,35,60,.10) 50%,transparent 80%);
  transform:translateX(-100%);animation:skelSweep 1.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .12s);
}
@keyframes skelSweep{to{transform:translateX(100%)}}
.skel-thread{min-height:150px}
.skel-card{min-height:250px}
.skel-row{min-height:74px}
/* same min() guard as .cases-grid — the skeleton has to fit the phone the
   real cards will land on, or the page overflows for as long as it loads */
.skel-wrap:has(.skel-card){grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
@media (prefers-reduced-motion:reduce){ .skel::after{animation:none;opacity:.5;transform:none} }

.load-error{
  text-align:center;padding:54px 24px;border:1px dashed rgba(255,65,96,.4);
  border-radius:0;background:rgba(255,65,96,.04);
}
.load-error .le-icon{font-size:24px;display:block;margin-bottom:12px}
.load-error p{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.form-err{
  margin-top:12px;font-family:var(--font-m);font-size:12px;color:#ff8296;
  background:rgba(255,65,96,.08);border:1px solid rgba(255,65,96,.3);
  border-radius:0;padding:10px 14px;
}
.side-none,.cases-none{color:var(--dim);font-family:var(--font-m);font-size:13px;line-height:1.7}
/* reference shown beside the redaction bar for a firm whose name is withheld */
.firm-ref{font-family:var(--font-m);font-size:.92em;letter-spacing:.08em;color:var(--muted)}
.cases-none{text-align:center;padding:54px 24px;border:1px dashed var(--line2);border-radius:0}
/* error variant for both toasts */
#toast.err,#toastCom.err{border-color:rgba(255,65,96,.45);color:#ff8296}
.vote[disabled]{opacity:.55;cursor:progress}

/* ==================================================================
   HOME  (#view-home)
   ================================================================== */
/* ============ PRELOADER ============ */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .6s ease,visibility .6s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-logo{width:88px;height:88px;border-radius:50%;position:relative;animation:loaderPulse 1.6s ease-in-out infinite}
.loader-logo img{width:100%;height:100%}
.loader-logo::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--brand);border-right-color:rgba(239,35,60,.25);
  animation:spin 1s linear infinite;
}
.loader-txt{font-family:var(--font-m);font-size:11px;letter-spacing:.45em;color:var(--muted);text-transform:uppercase;animation:blink 1.4s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(239,35,60,.5))}50%{transform:scale(1.06);filter:drop-shadow(0 0 34px rgba(239,35,60,.9))}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ HERO ============ */
#hero{
  min-height:100vh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
#view-home .grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(239,35,60,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(239,35,60,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%);
  animation:gridDrift 24s linear infinite;
}
#view-home .orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(200,30,60,.5),transparent 65%);top:-140px;left:-120px;animation:orbFloat 11s ease-in-out infinite}
#view-home .orb-2{width:460px;height:460px;background:radial-gradient(circle,rgba(200,30,60,.38),transparent 65%);bottom:-100px;right:-80px;animation:orbFloat 13s ease-in-out infinite reverse}
#view-home .orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(255,65,96,.16),transparent 65%);top:30%;right:30%;animation:orbFloat 16s ease-in-out infinite 2s}
#candles{position:absolute;left:0;right:0;bottom:0;width:100%;height:240px;opacity:.5;mask-image:linear-gradient(to top,#000 20%,transparent);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center;position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand2);border:1px solid var(--line2);border-radius:0;padding:10px 20px;
  background:rgba(239,35,60,.07);box-shadow:0 0 24px rgba(239,35,60,.15) inset;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.6s infinite}
#view-home h1{
  font-family:var(--font-d);font-weight:800;
  font-size:clamp(38px,5.6vw,72px);line-height:1.06;letter-spacing:.01em;
  margin:26px 0 24px;text-transform:uppercase;
}
#view-home h1 .thin{color:var(--muted);font-weight:600}
.glitch{
  position:relative;display:inline-block;
  background:var(--grad-red);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,65,96,.45));
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  clip-path:inset(0 0 100% 0);
}
.glitch::before{color:var(--brand);animation:glitchA 3.8s infinite steps(1)}
.glitch::after{color:#fff;animation:glitchB 3.8s infinite steps(1)}
@keyframes glitchA{
  0%,86%,100%{clip-path:inset(0 0 100% 0);transform:none}
  87%{clip-path:inset(12% 0 58% 0);transform:translate(-5px,-2px)}
  89%{clip-path:inset(60% 0 8% 0);transform:translate(5px,2px)}
  91%{clip-path:inset(30% 0 42% 0);transform:translate(-3px,1px)}
  93%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes glitchB{
  0%,86%,100%{clip-path:inset(0 0 100% 0);transform:none}
  88%{clip-path:inset(70% 0 4% 0);transform:translate(4px,1px)}
  90%{clip-path:inset(8% 0 72% 0);transform:translate(-4px,-1px)}
  92%{clip-path:inset(45% 0 28% 0);transform:translate(3px,2px)}
  94%{clip-path:inset(0 0 100% 0);transform:none}
}
.hero-sub{color:var(--muted);font-size:17.5px;max-width:520px;margin-bottom:36px}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:46px}
.hero-stats{display:flex;gap:0;border:1px solid var(--line);border-radius:0;background:rgba(10,10,10,.55);backdrop-filter:blur(8px);overflow:hidden;max-width:560px}
.hstat{flex:1;padding:18px 8px;text-align:center;position:relative}
.hstat+.hstat::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--line)}
.hstat b{display:block;font-family:var(--font-d);font-weight:800;font-size:24px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hstat span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
/* hero visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.shield-glow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(239,35,60,.4),rgba(239,35,60,.08) 55%,transparent 70%);animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
.shield-img{width:min(430px,100%);position:relative;z-index:2;animation:shieldFloat 6s ease-in-out infinite;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@keyframes shieldFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-22px) rotate(1.2deg)}}
.ring{position:absolute;border:1px dashed rgba(239,35,60,.28);border-radius:50%;z-index:1}
.ring-1{width:470px;height:470px;animation:ringSpin 30s linear infinite}
.ring-2{width:580px;height:580px;border-color:rgba(239,35,60,.14);animation:ringSpin 46s linear infinite reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.08em;
  padding:10px 16px;border-radius:0;border:1px solid var(--line2);
  background:rgba(8,8,8,.88);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;
}
.chip i{font-style:normal}
.chip-red{color:#ff8296;border-color:rgba(255,65,96,.4)}
.chip-green{color:#7dffd4;border-color:rgba(47,230,167,.35)}
.chip-purple{color:var(--brand2)}
.chip-1{top:8%;left:-2%;animation:chipBob 5s ease-in-out infinite}
.chip-2{top:32%;right:-4%;animation:chipBob 6s ease-in-out infinite 1.2s}
.chip-3{bottom:16%;left:2%;animation:chipBob 5.5s ease-in-out infinite .6s}
.chip-4{bottom:2%;right:6%;animation:chipBob 6.5s ease-in-out infinite 1.8s}
@keyframes chipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ============ TICKER ============ */
.ticker-band{border-block:1px solid var(--line);background:rgba(8,8,8,.7);padding:15px 0;overflow:hidden;position:relative}
.ticker-band::before,.ticker-band::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ticker-band::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker-band::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.ticker-track{display:flex;gap:56px;width:max-content;animation:ticker 36s linear infinite}
.ticker-band:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:10px;font-family:var(--font-m);font-size:12.5px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tick b{color:var(--text);font-weight:600}
.tick .warn{color:var(--red)}
.tick .ok{color:var(--green)}

.section-head{margin-bottom:56px}
.section-head.center{text-align:center}
.section-head.center .kicker{justify-content:center}
.section-head.center .kicker::before{display:none}
.section-head.center .section-sub{margin-inline:auto}
/* ============ RED FLAGS ============ */
#flags{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%)}
.flags-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.flag-card{
  position:relative;border:1px solid var(--line);border-radius:0;
  background:var(--card);padding:34px 26px;overflow:hidden;
  transition:transform .4s,border-color .4s,background .4s,box-shadow .4s;
  transform-style:preserve-3d;
}
.flag-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(239,35,60,.14),transparent 65%);
}
.flag-card:hover{border-color:var(--line2);background:var(--card-hi);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.flag-card:hover::before{opacity:1}
.flag-num{position:absolute;top:18px;right:22px;font-family:var(--font-m);font-size:12px;color:var(--dim);letter-spacing:.1em}
.flag-icon{
  width:58px;height:58px;border-radius:0;display:flex;align-items:center;justify-content:center;
  background:rgba(239,35,60,.1);border:1px solid var(--line2);margin-bottom:22px;
  box-shadow:0 0 24px rgba(239,35,60,.2) inset;transition:transform .4s;
}
.flag-card:hover .flag-icon{transform:scale(1.1) rotate(-6deg)}
.flag-icon svg{width:26px;height:26px;stroke:var(--brand2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flag-card h3{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.flag-card p{color:var(--muted);font-size:14px;line-height:1.65}

/* ============ EXPOSE FILES ============ */
#view-home .tabs{display:inline-flex;gap:6px;border:1px solid var(--line);background:rgba(10,10,10,.6);padding:6px;border-radius:0;margin-bottom:40px;flex-wrap:wrap}
#view-home .tab{
  font-family:var(--font-d);font-weight:600;font-size:13.5px;letter-spacing:.05em;
  padding:11px 22px;border-radius:0;color:var(--muted);transition:.3s;
}
#view-home .tab:hover{color:#fff}
#view-home .tab.active{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(200,30,60,.4)}
/* min() so the 330px floor cannot exceed the container: on a 320px phone a
   bare minmax(330px,1fr) forces a column wider than the screen, and the card
   (or the empty state) hangs off the right edge. */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:20px}
.case-card{
  position:relative;border:1px solid var(--line);border-radius:0;
  background:var(--card);padding:28px;overflow:hidden;
  transition:transform .45s,border-color .45s,box-shadow .45s,opacity .4s;
}
.case-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(239,35,60,.12),transparent 65%);
}
.case-card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.case-card:hover::before{opacity:1}
.case-card.hide{display:none}
.case-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.case-id{font-family:var(--font-m);font-size:11.5px;letter-spacing:.18em;color:var(--dim)}
.case-name{font-family:var(--font-d);font-weight:700;font-size:20px;letter-spacing:.06em;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.case-reports{font-size:12.5px;color:var(--dim);font-family:var(--font-m);margin-bottom:20px}
.score-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:8px}
#view-home .score-val{font-family:var(--font-m);font-size:15px;font-weight:700}
#view-home .score-bar{height:7px;border-radius:0;background:rgba(239,35,60,.1);overflow:hidden;margin-bottom:20px}
#view-home .score-fill{height:100%;width:0;border-radius:0;transition:width 1.4s cubic-bezier(.22,1,.36,1)}
#view-home .fill-red{background:var(--grad-red);box-shadow:0 0 12px rgba(255,65,96,.6)}
#view-home .fill-amber{background:linear-gradient(90deg,#ffd28a,#ffb648);box-shadow:0 0 12px rgba(255,182,72,.5)}
#view-home .fill-green{background:linear-gradient(90deg,#7dffd4,#2fe6a7);box-shadow:0 0 12px rgba(47,230,167,.5)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;padding:6px 11px;border-radius:0;background:rgba(239,35,60,.08);border:1px solid var(--line);color:var(--muted)}
.stamp{
  position:absolute;top:92px;right:-40px;transform:rotate(24deg);
  font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:.3em;
  color:rgba(255,65,96,.85);border:2px dashed rgba(255,65,96,.5);border-radius:0;
  padding:6px 38px;pointer-events:none;
}
.cases-note{margin-top:34px;font-size:13px;color:var(--dim);font-family:var(--font-m);display:flex;gap:10px;align-items:flex-start}
/* ============ HOW IT WORKS ============ */
#how{background:linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;counter-reset:step}
.steps::before{
  content:"";position:absolute;top:44px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent);
  transform:scaleX(0);transition:transform 1.4s ease .3s;transform-origin:left;
}
.steps.inview::before{transform:scaleX(1)}
.step{position:relative;text-align:center;padding:0 18px}
.step-dot{
  width:88px;height:88px;margin:0 auto 26px;border-radius:0;position:relative;
  background:rgba(10,10,10,.9);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px rgba(239,35,60,.18),0 0 20px rgba(239,35,60,.25) inset;
  transition:transform .4s,box-shadow .4s;
}
.step:hover .step-dot{transform:translateY(-6px) scale(1.05);box-shadow:0 14px 46px rgba(239,35,60,.35),0 0 20px rgba(239,35,60,.3) inset}
.step-dot svg{width:34px;height:34px;stroke:var(--brand2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step-num{
  position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;
  background:var(--grad);font-family:var(--font-m);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 4px 14px rgba(200,30,60,.5);
}
.step h3{font-family:var(--font-d);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.step p{color:var(--muted);font-size:14.5px;max-width:300px;margin-inline:auto}

/* ============ REPORTS MARQUEE ============ */
#reports{overflow:hidden}
.rep-band{display:flex;gap:20px;width:max-content;margin-bottom:20px}
.rep-band.rev{animation:ticker 52s linear infinite reverse}
.rep-band.fwd{animation:ticker 58s linear infinite}
.rep-band:hover{animation-play-state:paused}
.rep-card{
  width:380px;border:1px solid var(--line);border-radius:0;background:var(--card);
  padding:26px;flex-shrink:0;transition:border-color .3s,background .3s;
}
.rep-card:hover{border-color:var(--line2);background:var(--card-hi)}
.rep-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rep-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:15px;color:#fff;
}
.rep-av.r2{background:var(--grad-red)}
.rep-av.r3{background:linear-gradient(135deg,#7dffd4,#159d6e)}
.rep-who b{display:block;font-family:var(--font-m);font-size:13px;letter-spacing:.04em}
.rep-who span{font-size:11.5px;color:var(--dim);font-family:var(--font-m)}
.rep-flag{margin-left:auto;font-family:var(--font-m);font-size:10px;letter-spacing:.1em;color:#ff8296;background:rgba(255,65,96,.1);border:1px solid rgba(255,65,96,.3);border-radius:0;padding:5px 10px}
.rep-flag.g{color:#7dffd4;background:rgba(47,230,167,.08);border-color:rgba(47,230,167,.3)}
.rep-card p{font-size:14px;color:var(--muted);line-height:1.65}
.rep-card p b{color:var(--text)}
.reports-fade{position:relative}
.reports-fade::before,.reports-fade::after{content:"";position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none}
.reports-fade::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reports-fade::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}

/* ============ TRUST ============ */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.trust-card{
  border:1px solid var(--line);border-radius:0;background:var(--card);
  padding:32px 28px;transition:transform .4s,border-color .4s,box-shadow .4s;position:relative;overflow:hidden;
}
.trust-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s;
}
.trust-card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 22px 54px rgba(0,0,0,.45)}
.trust-card:hover::after{transform:scaleX(1)}
.trust-card .flag-icon{margin-bottom:20px}
.trust-card h3{font-family:var(--font-d);font-weight:700;font-size:16.5px;letter-spacing:.04em;margin-bottom:10px}
.trust-card p{color:var(--muted);font-size:14px}

/* ============ FAQ ============ */
#faq .wrap{max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:0;background:var(--card);margin-bottom:14px;overflow:hidden;transition:border-color .3s,background .3s}
.faq-item.open{border-color:var(--line2);background:var(--card-hi)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:24px 28px;text-align:left;font-family:var(--font-d);font-weight:600;font-size:16.5px;color:var(--text);
}
.faq-q .fx{
  width:30px;height:30px;border-radius:0;border:1px solid var(--line2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;transition:.4s;
}
.faq-q .fx::before,.faq-q .fx::after{content:"";position:absolute;background:var(--brand2);border-radius:0;transition:.4s}
.faq-q .fx::before{width:12px;height:2px}
.faq-q .fx::after{width:2px;height:12px}
.faq-item.open .fx{transform:rotate(90deg);background:rgba(239,35,60,.15)}
.faq-item.open .fx::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.faq-a p{padding:0 28px 26px;color:var(--muted);font-size:15px}

/* ============ CTA / NEWSLETTER ============ */
#join .cta-box{
  position:relative;border:1px solid var(--line2);border-radius:0;overflow:hidden;
  background:linear-gradient(160deg,rgba(26,26,26,.55),rgba(10,10,10,.9));
  padding:clamp(40px,6vw,80px);text-align:center;
}
.cta-box::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px circle at 50% -10%,rgba(239,35,60,.28),transparent 60%);
  pointer-events:none;
}
.cta-box .grid-bg{opacity:.6}
.cta-logo{width:74px;height:74px;margin:0 auto 24px;filter:drop-shadow(0 0 24px rgba(239,35,60,.7));animation:shieldFloat 5s ease-in-out infinite}
.sub-form{display:flex;gap:12px;max-width:520px;margin:36px auto 0;position:relative;z-index:2}
.sub-form input{
  flex:1;background:rgba(5,5,5,.8);border:1px solid var(--line2);border-radius:0;
  padding:16px 22px;color:var(--text);font-family:var(--font-b);font-size:15px;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.sub-form input::placeholder{color:var(--dim)}
.sub-form input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(239,35,60,.18)}
.form-note{position:relative;z-index:2;margin-top:16px;font-size:12.5px;color:var(--dim);font-family:var(--font-m)}
#toast{
  position:fixed;bottom:30px;left:50%;transform:translate(-50%,80px);z-index:950;
  background:rgba(8,8,8,.95);border:1px solid rgba(47,230,167,.4);color:#7dffd4;
  font-family:var(--font-m);font-size:13px;letter-spacing:.05em;
  padding:14px 26px;border-radius:0;opacity:0;transition:.5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 16px 50px rgba(0,0,0,.6);
}
#toast.show{transform:translate(-50%,0);opacity:1}

/* ==================================================================
   COMPARE  (#view-compare)
   ================================================================== */
/* ============ COMPARE HERO ============ */
#cmpHero{padding:170px 0 40px}
.vs-row{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.vs-pill{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--dim);border:1px dashed var(--line2);border-radius:0;padding:8px 16px}
.vs-pill b{color:var(--brand2)}
/* ============ FIRM LOGO BADGE ============ */
.firm-logo{width:30px;height:30px;border-radius:0;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.firm-logo .mono{font-family:var(--font-m);font-weight:800;font-size:10px;letter-spacing:.02em}
.firm-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0d0d}
.firm-logo.lg{width:38px;height:38px;border-radius:0}
.firm-logo.lg .mono{font-size:12px}
/* ============ COMPARE CONTROLS ============ */
#compare{padding:40px 0 90px}
.cmp-panel{position:relative;border:1px solid var(--line);border-radius:0;background:linear-gradient(170deg,rgba(16,16,16,.5),rgba(8,8,8,.85));padding:clamp(20px,3.4vw,38px)}
.slots{display:grid;grid-template-columns:1fr 72px 1fr;gap:14px;align-items:end;margin-bottom:26px}
.slot-label{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.vs-badge{
  justify-self:center;align-self:center;width:52px;height:52px;border-radius:50%;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:14px;letter-spacing:.08em;color:#fff;
  box-shadow:0 10px 30px rgba(200,30,60,.5),0 0 0 6px rgba(239,35,60,.1);
}
/* min-width:0 because a grid item defaults to min-width:auto, which is
   min-content — so at 320px the picker refused to shrink below the width of
   "Goat Funded Trader" plus its badge, clear button and caret, and pushed the
   page 5px wider than the viewport. The name inside already ellipsises; it
   just never got the chance. */
.slot{position:relative;min-width:0}
.slot-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  border:1px solid var(--line2);border-radius:0;background:rgba(10,10,10,.75);
  padding:14px 16px;transition:border-color .3s,background .3s;min-height:70px;
}
.slot-btn:hover{border-color:var(--brand);background:rgba(239,35,60,.08)}
.slot-btn.empty{border-style:dashed;color:var(--dim);justify-content:center;font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.slot-btn.empty:hover{color:var(--brand2)}
.slot-firm{display:flex;align-items:center;gap:12px;min-width:0}
.slot-name{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-sub{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.14em;color:var(--dim);margin-top:3px;text-transform:uppercase}
.slot-x{flex-shrink:0;width:30px;height:30px;border-radius:0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:15px;line-height:1;transition:color .3s,border-color .3s,background .3s}
.slot-x:hover{color:#ff8296;border-color:rgba(255,65,96,.45);background:rgba(255,65,96,.08)}
.slot-caret{color:var(--dim);font-size:11px;flex-shrink:0;transition:transform .3s}
.slot.open .slot-caret{transform:rotate(180deg)}

/* dropdown — matches the firm-list mock: logo + name rows, check on selected */
.drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  background:#0a0a0a;border:1px solid var(--line2);border-radius:0;
  box-shadow:0 24px 60px rgba(0,0,0,.65);overflow:hidden auto;max-height:346px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.drop::-webkit-scrollbar{width:8px}
.drop::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0}
.slot.open .drop{opacity:1;visibility:visible;transform:none}
.drop-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:11px 15px;border-bottom:1px solid rgba(239,35,60,.08);transition:background .25s;
}
.drop-item:last-child{border-bottom:0}
.drop-item:hover:not(:disabled){background:rgba(239,35,60,.09)}
.drop-item:disabled{opacity:.32;cursor:not-allowed}
.drop-name{font-size:14px;font-weight:500;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check{color:#7dffd4;font-weight:700;font-size:14px;opacity:0;flex-shrink:0}
.drop-item.sel .check{opacity:1}

/* ============ COMPARE TABLE ============ */
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:0;background:rgba(6,6,20,.6);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cmp-scroll::-webkit-scrollbar{height:8px}
.cmp-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0}
table.cmp{border-collapse:separate;border-spacing:0;width:100%}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);min-width:250px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{background:rgba(13,13,36,.96);border-bottom:1px solid var(--line2);vertical-align:middle}
.cmp th[scope="row"]{
  position:sticky;left:0;z-index:2;background:var(--panel);
  font-family:var(--font-m);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  min-width:200px;max-width:200px;border-right:1px solid var(--line);
  box-shadow:6px 0 14px -8px rgba(0,0,0,.7);
}
.cmp thead th:first-child{position:sticky;left:0;z-index:3;background:rgba(13,13,36,.98);border-right:1px solid var(--line);box-shadow:6px 0 14px -8px rgba(0,0,0,.7)}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.col-firm{display:flex;align-items:center;gap:12px;min-width:0}
.col-name{font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp td .num{font-family:var(--font-m);font-weight:700;font-size:15px;color:var(--text)}
.cmp td .sub{display:block;font-size:12px;color:var(--dim);margin-top:3px}
.pend{font-family:var(--font-m);font-weight:700;font-size:15px;color:var(--dim)}
.score-wrap{min-width:150px}
.score-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.score-val{font-family:var(--font-m);font-size:16px;font-weight:700}
.score-bar{height:7px;border-radius:0;background:rgba(239,35,60,.1);overflow:hidden}
.score-fill{height:100%;width:0;border-radius:0;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.fill-red{background:var(--grad-red);box-shadow:0 0 12px rgba(255,65,96,.6)}
.fill-amber{background:linear-gradient(90deg,#ffd28a,#ffb648);box-shadow:0 0 12px rgba(255,182,72,.5)}
.fill-green{background:linear-gradient(90deg,#7dffd4,#2fe6a7);box-shadow:0 0 12px rgba(47,230,167,.5)}
.grade{font-family:var(--font-m);font-weight:700;font-size:15px;padding:5px 12px;border-radius:0;display:inline-block}
.sc-red{color:#ff8296;background:rgba(255,65,96,.1)}
.sc-amber{color:#ffd28a;background:rgba(255,182,72,.1)}
.sc-green{color:#7dffd4;background:rgba(47,230,167,.1)}
td.best{background:rgba(47,230,167,.055);box-shadow:inset 3px 0 0 var(--green)}
.best-mark{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.18em;color:#7dffd4}
.best-mark::before{content:"▲";font-size:8px}
.add-col{display:flex;align-items:center;gap:10px;font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.add-col:hover{color:var(--brand2)}
.cmp-empty{text-align:center;padding:70px 24px;border:1px dashed var(--line2);border-radius:0;color:var(--dim);font-family:var(--font-m);font-size:13px;letter-spacing:.1em}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-family:var(--font-m);font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.legend b{color:var(--muted);font-weight:600}
.legend .lg-best{color:#7dffd4}
/* ============ CTA ============ */
#joinCmp .cta-box{position:relative;border:1px solid var(--line2);border-radius:0;overflow:hidden;background:linear-gradient(160deg,rgba(26,26,26,.55),rgba(10,10,10,.9));padding:clamp(40px,6vw,80px);text-align:center}
.cta-box .section-sub{margin:14px auto 0;position:relative;z-index:2}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px;position:relative;z-index:2}

/* ==================================================================
   COMMUNITY  (#view-community)
   ================================================================== */
/* ============ COMMUNITY HERO ============ */
#comHero{padding:170px 0 34px}
/* ============ FEED LAYOUT ============ */
#feedSec{padding:34px 0 90px}
.feed-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}

/* toolbar */
.toolbar{border:1px solid var(--line);border-radius:0;background:linear-gradient(170deg,rgba(16,16,16,.5),rgba(8,8,8,.85));padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px;position:sticky;top:74px;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#view-community .tabs{display:inline-flex;gap:6px;border:1px solid var(--line);background:rgba(10,10,10,.6);padding:5px;border-radius:0;flex-wrap:wrap}
#view-community .tab{font-family:var(--font-d);font-weight:600;font-size:13px;letter-spacing:.05em;padding:9px 16px;border-radius:0;color:var(--muted);transition:.3s;display:inline-flex;align-items:center;gap:8px}
#view-community .tab:hover{color:#fff}
#view-community .tab.active{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(200,30,60,.4)}
#view-community .tab .n{font-family:var(--font-m);font-size:10px;font-weight:700;padding:2px 7px;border-radius:0;background:rgba(255,255,255,.14)}
#view-community .tab:not(.active) .n{background:rgba(239,35,60,.12);color:var(--dim)}
.tb-right{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.field{position:relative}
.field select,.field input{appearance:none;-webkit-appearance:none;background:rgba(5,5,5,.8);border:1px solid var(--line2);border-radius:0;padding:11px 16px;font-size:16px;outline:none;transition:border-color .3s,box-shadow .3s}
.field select{padding-right:38px;font-family:var(--font-m);font-size:12px;letter-spacing:.06em;color:var(--muted);cursor:pointer}
.field select:focus,.field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(239,35,60,.18)}
.field.sel::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none;font-size:12px}
.search{min-width:190px}
.search input{width:100%}
.search input::placeholder{color:var(--dim);font-size:14px}

/* thread cards */
.thread{position:relative;border:1px solid var(--line);border-radius:0;background:var(--card);padding:22px 24px;margin-bottom:14px;transition:transform .35s,border-color .35s,background .35s,box-shadow .35s,opacity .35s;overflow:hidden}
.thread:hover{border-color:var(--line2);background:var(--card-hi);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.th-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.av{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:800;font-size:14px;color:#fff}
.av.r2{background:var(--grad-red)}
.av.r3{background:linear-gradient(135deg,#7dffd4,#159d6e)}
.th-who b{display:block;font-family:var(--font-m);font-size:12.5px;letter-spacing:.04em}
.th-who span{font-size:11px;color:var(--dim);font-family:var(--font-m)}
.th-badges{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.type-badge{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:0;display:inline-flex;align-items:center;gap:6px}
.type-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tb-complaint{color:#ff8296;background:rgba(255,65,96,.1);border:1px solid rgba(255,65,96,.35)}
.tb-review{color:#7dffd4;background:rgba(47,230,167,.09);border:1px solid rgba(47,230,167,.32)}
.tb-pending{color:var(--brand2);background:rgba(239,35,60,.1);border:1px solid var(--line2)}
.tb-pending::before{animation:blink 1.4s infinite}
.st-chip{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.14em;padding:5px 11px;border-radius:0;border:1px solid var(--line);color:var(--dim)}
.st-open{color:#ffd28a;border-color:rgba(255,182,72,.32)}
.st-review{color:var(--brand2);border-color:var(--line2)}
.st-resolved{color:#7dffd4;border-color:rgba(47,230,167,.32)}
.firm-tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;padding:5px 11px;border-radius:0;background:rgba(239,35,60,.08);border:1px solid var(--line);color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.stars{font-size:13px;letter-spacing:2px;color:var(--amber);filter:drop-shadow(0 0 6px rgba(255,182,72,.4))}
.stars .off{color:rgba(255,182,72,.22);filter:none}
.th-title{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:.02em;margin-bottom:8px;line-height:1.35}
.th-body{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:16px}
.th-body b{color:var(--text)}
.th-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vote{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line2);border-radius:0;padding:8px 14px;transition:.3s}
.vote:hover{color:#fff;border-color:var(--brand);background:rgba(239,35,60,.1)}
.vote.on{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 6px 18px rgba(200,30,60,.4)}
.meta{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:11.5px;color:var(--dim)}
.amount{margin-left:auto;font-family:var(--font-m);font-size:12px;font-weight:700;color:#ff8296}
.feed-empty{text-align:center;padding:64px 24px;border:1px dashed var(--line2);border-radius:0;color:var(--dim);font-family:var(--font-m);font-size:13px;letter-spacing:.1em}
.load-wrap{text-align:center;margin-top:26px}

/* sidebar */
.side-card{border:1px solid var(--line);border-radius:0;background:linear-gradient(170deg,rgba(16,16,16,.5),rgba(8,8,8,.85));padding:26px;margin-bottom:18px}
.side-card h3{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.side-card>p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.side-actions{display:flex;flex-direction:column;gap:10px}
.rank-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rank-row:last-child{border-bottom:0}
.rank-n{font-family:var(--font-m);font-weight:700;font-size:12px;color:var(--dim);width:22px}
.rank-firm{font-family:var(--font-d);font-weight:600;font-size:13px;letter-spacing:.04em;flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.rank-ct{font-family:var(--font-m);font-size:11px;color:#ff8296}
.rules-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.rules-list li{display:flex;gap:11px;font-size:13.5px;color:var(--muted)}
.rules-list li::before{content:"▍";color:var(--brand2);flex-shrink:0}

/* ============ MODAL ============ */
#modalBack,#authBack{position:fixed;inset:0;z-index:920;background:rgba(3,3,10,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.35s;overflow-y:auto}
#modalBack.open,#authBack.open{opacity:1;visibility:visible}
.modal{width:min(560px,100%);max-height:90vh;overflow-y:auto;border:1px solid var(--line2);border-radius:0;background:linear-gradient(165deg,rgba(22,22,22,.75),rgba(8,8,8,.97));padding:clamp(24px,4vw,38px);position:relative;transform:translateY(18px) scale(.98);transition:.35s}
#modalBack.open .modal,#authBack.open .modal{transform:none}
.modal-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:0;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.3s}
.modal-x:hover{color:#ff8296;border-color:rgba(255,65,96,.45)}
.modal h3{font-family:var(--font-d);font-weight:800;font-size:21px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.modal .hint{font-size:13px;color:var(--dim);margin-bottom:22px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);background:rgba(10,10,10,.6);padding:5px;border-radius:0;margin-bottom:18px}
.seg button{font-family:var(--font-d);font-weight:600;font-size:13px;padding:11px;border-radius:0;color:var(--muted);transition:.3s}
.seg button.active{background:var(--grad);color:#fff}
.f-label{display:block;font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
/* every text-like input in a modal gets the same box. Listing types one
   by one is how the email field ended up unstyled — :not() on the two
   types that must stay native (checkbox, radio) cannot miss a new one. */
.modal select,.modal textarea,
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]){width:100%;background:rgba(5,5,5,.8);border:1px solid var(--line2);border-radius:0;padding:13px 16px;font-size:16px;outline:none;transition:border-color .3s,box-shadow .3s}
.modal select:focus,.modal input:focus,.modal textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(239,35,60,.18)}
.modal textarea{min-height:110px;resize:vertical}
.star-in{display:flex;gap:6px}
.star-in button{font-size:24px;color:rgba(255,182,72,.22);transition:.2s;padding:2px}
.star-in button.on{color:var(--amber);filter:drop-shadow(0 0 8px rgba(255,182,72,.5))}
.modal .note{font-family:var(--font-m);font-size:11px;color:var(--dim);margin-top:14px}
.modal .btn{width:100%;margin-top:20px}
#toastCom{position:fixed;bottom:30px;left:50%;transform:translate(-50%,80px);z-index:950;background:rgba(8,8,8,.95);border:1px solid rgba(47,230,167,.4);color:#7dffd4;font-family:var(--font-m);font-size:13px;letter-spacing:.05em;padding:14px 26px;border-radius:0;opacity:0;transition:.5s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 50px rgba(0,0,0,.6);max-width:92vw;text-align:center}
#toastCom.show{transform:translate(-50%,0);opacity:1}

/* ==================================================================
   RESPONSIVE  (merged from all three views)
   ================================================================== */
@media (max-width:1020px){
  .nav-links,.nav-cta .btn{display:none}
  #burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  /* home */
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-visual{min-height:440px;order:-1;margin-top:-30px}
  .shield-img{width:min(340px,86%)}
  .ring-1{width:380px;height:380px}.ring-2{width:470px;height:470px}
  #hero{padding-top:120px}
  #view-home h1{font-size:clamp(34px,7.4vw,54px)}
  .steps{grid-template-columns:1fr;gap:44px}
  .steps::before{display:none}
  /* community */
  .feed-grid{grid-template-columns:1fr}
  .sidebar{order:-1}
  .side-card.rules{display:none}
}
@media (max-width:760px){
  section{padding:80px 0}
  .foot-grid{grid-template-columns:1fr}
  /* home */
  .hero-stats{flex-wrap:wrap}
  .hstat{flex:1 1 40%;border-top:1px solid var(--line)}
  .hstat:nth-child(-n+2){border-top:none}
  .hstat+.hstat::before{display:none}
  /* the old .chip sizing and edge offsets lived here; below 1280px the chips
     are static items in .chip-rail, so left/right were no-ops and the size is
     set alongside the rail instead */
  .sub-form{flex-direction:column}
  .rep-card{width:300px}
  /* compare */
  #cmpHero{padding:130px 0 26px}
  #compare{padding:26px 0 70px}
  .slots{grid-template-columns:1fr;gap:10px}
  .vs-badge{width:44px;height:44px;font-size:12px;margin:2px 0}
  .cmp th,.cmp td{min-width:224px;padding:14px 15px}
  .cmp th[scope="row"]{min-width:148px;max-width:148px;font-size:10px}
  .drop{max-height:280px}
  /* community */
  #comHero{padding:130px 0 22px}
  #feedSec{padding:22px 0 70px}
  .toolbar{position:static;padding:14px}
  .tb-right{margin-left:0;width:100%}
  .search{flex:1;min-width:0}
  .thread{padding:18px}
  .th-badges{margin-left:0;width:100%}
  .amount{margin-left:0;width:100%}
}
@media (max-width:480px){
  #toTop{right:16px;bottom:16px}
  /* compare */
  .cmp th,.cmp td{min-width:206px}
  .cmp th[scope="row"]{min-width:124px;max-width:124px}
  .col-name{font-size:14px}
  /* community */
  #view-community .tabs{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
  #view-community .tab{justify-content:center;padding:9px 6px;font-size:12px}
  #view-community .tab .n{display:none}
  .tb-right .field.sel{flex:1}
  .tb-right select{width:100%}
  .th-foot{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important}
  html{scroll-behavior:auto}
}

/* ==================================================================
   PREMIUM GLASS SKIN — deliberate override layer.
   Deep black-violet base, glass surfaces (translucency + backdrop
   blur), and gradient "premium edge" borders via the two-layer
   background trick: a glass gradient fills padding-box while an
   iridescent gradient paints the transparent 1px border-box.
   Appended last so it wins the cascade without rewriting the rules
   above; delete this block to fall back to the flat skin.
   ================================================================== */
:root{
  --bg:#080808; --bg2:#0b0b0b; --panel:#101010;
  --line:rgba(239,35,60,.16); --line2:rgba(239,35,60,.34);
  --glass:linear-gradient(165deg,rgba(24,24,24,.55),rgba(8,8,8,.78));
  --glass-hi:linear-gradient(165deg,rgba(34,34,34,.62),rgba(10,10,10,.82));
  --edge:linear-gradient(150deg,rgba(255,255,255,.20),rgba(239,35,60,.45) 26%,rgba(200,30,60,.10) 55%,rgba(255,122,141,.38) 100%);
  --edge-soft:linear-gradient(150deg,rgba(255,255,255,.11),rgba(239,35,60,.26) 28%,rgba(200,30,60,.06) 58%,rgba(255,122,141,.20) 100%);
}

/* layered black-purple depth instead of a flat fill */
body{
  background:
    radial-gradient(1100px 720px at 85% -12%,rgba(239,35,60,.16),transparent 60%),
    radial-gradient(880px 640px at -12% 28%,rgba(200,30,60,.10),transparent 55%),
    radial-gradient(1250px 820px at 50% 112%,rgba(120,88,20,.15),transparent 62%),
    var(--bg);
}
/* premium edge vignette: a violet breath around the viewport rim */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 150px rgba(200,30,60,.12),inset 0 0 34px rgba(3,3,3,.55);
}

/* ---- glass cards (static surfaces get real backdrop blur) ---- */
.flag-card,.case-card,.trust-card,.thread,.faq-item{
  border:1px solid transparent;
  background:var(--glass) padding-box,var(--edge-soft) border-box;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.flag-card:hover,.case-card:hover,.trust-card:hover,.thread:hover,.faq-item.open{
  border-color:transparent;
  background:var(--glass-hi) padding-box,var(--edge) border-box;
}
.case-card:hover,.trust-card:hover{box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 44px rgba(239,35,60,.16)}
.flag-card:hover{box-shadow:0 20px 52px rgba(0,0,0,.5),0 0 40px rgba(239,35,60,.14)}
.thread:hover{box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 36px rgba(239,35,60,.13)}

/* marquee cards scroll forever — translucent glass WITHOUT backdrop
   blur, which would be repainted every frame */
.rep-card{border:1px solid transparent;background:var(--glass) padding-box,var(--edge-soft) border-box}
.rep-card:hover{border-color:transparent;background:var(--glass-hi) padding-box,var(--edge) border-box}

/* ---- glass panels ---- */
.cmp-panel,.toolbar,.side-card,.hero-stats,.drop,
#join .cta-box,#joinCmp .cta-box,.modal{
  border:1px solid transparent;
  background:var(--glass) padding-box,var(--edge) border-box;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
#join .cta-box,#joinCmp .cta-box{
  background:
    radial-gradient(640px circle at 50% -12%,rgba(239,35,60,.30),transparent 60%),
    var(--glass) padding-box,
    var(--edge) border-box;
}
.modal{box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 60px rgba(239,35,60,.14)}
.drop{box-shadow:0 24px 60px rgba(0,0,0,.68),0 0 34px rgba(239,35,60,.12)}
.hero-stats{box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.toolbar{box-shadow:0 14px 40px rgba(0,0,0,.35)}

/* step medallions + firm slots pick up the edge treatment too */
.step-dot,.slot-btn{
  border:1px solid transparent;
  background:var(--glass) padding-box,var(--edge-soft) border-box;
}
.slot-btn:hover{border-color:transparent;background:var(--glass-hi) padding-box,var(--edge) border-box}
.step-dot{background:var(--glass) padding-box,var(--edge) border-box}

/* inputs sit ON glass, so they go a shade darker for contrast */
.modal select,.modal textarea,
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,.field input,.sub-form input{background:rgba(5,5,5,.82)}

/* nav + footer join the same material */
nav.scrolled{background:rgba(8,8,8,.68);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
footer{background:linear-gradient(180deg,var(--bg2),#050505)}

/* section washes follow the deeper base */
#flags{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%)}
#how{background:linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg))}
.ticker-band::before{background:linear-gradient(90deg,var(--bg),transparent)}
.ticker-band::after{background:linear-gradient(-90deg,var(--bg),transparent)}
.reports-fade::before{background:linear-gradient(90deg,var(--bg),transparent)}
.reports-fade::after{background:linear-gradient(-90deg,var(--bg),transparent)}

/* richer violet orbs on the deeper base */
#view-home .orb-1{background:radial-gradient(circle,rgba(200,30,60,.55),transparent 65%)}
#view-home .orb-2{background:radial-gradient(circle,rgba(239,35,60,.40),transparent 65%)}
.orb-1{background:radial-gradient(circle,rgba(200,30,60,.52),transparent 65%)}

/* skeletons match the glass they stand in for */
.skel{border:1px solid transparent;background:var(--glass) padding-box,var(--edge-soft) border-box}

@media (prefers-reduced-motion:no-preference){
  /* a slow iridescent shimmer along panel edges — subtle, premium */
  #join .cta-box,#joinCmp .cta-box{transition:box-shadow .6s}
  #join .cta-box:hover,#joinCmp .cta-box:hover{box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 70px rgba(239,35,60,.20)}
}

/* ==================================================================
   HERO 3D MODEL — Aegis Prism (locked in). CSS only: pure transforms
   + opacity, GPU-friendly, gold·black·purple palette.
   ================================================================== */
.hero-visual{perspective:1150px}
.hv-stage{
  position:relative;width:min(460px,100%);height:460px;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  transform:scale(var(--s,1)) rotateY(calc(var(--hx,0)*9deg)) rotateX(calc(var(--hy,0)*-7deg));
  transition:transform .3s ease-out;
}
/* The wrapper is deliberately layout-inert (no size, no positioning): every
   visible part of a model is an absolutely-positioned box against the
   stage, so the wrapper cannot collapse anything. */
.hv{display:none;transform-style:preserve-3d}
.hv-stage[data-hv="a"] .hv-a{display:block}
.hv-stage[data-hv="b"] .hv-b{display:block}
.hv-stage[data-hv="c"] .hv-c{display:block}
.hv-stage[data-hv="d"] .hv-d{display:block}

/* ---------- Aegis Prism (locked in) — gold · black · purple ---------- */
.hva{
  --edge-gold:linear-gradient(150deg,rgba(255,233,170,.62),rgba(212,164,60,.5) 26%,rgba(200,30,60,.18) 54%,rgba(255,214,120,.44) 80%,rgba(255,122,141,.38) 100%);
  --glass-noir:linear-gradient(165deg,rgba(24,24,24,.78),rgba(6,6,6,.92));
  position:absolute;left:calc(50% - 165px);top:calc(50% - 198px);
  width:330px;height:396px;transform-style:preserve-3d;
  animation:hvaSway 8s ease-in-out infinite;
}
@keyframes hvaSway{0%,100%{transform:rotateY(-9deg) translateY(0)}50%{transform:rotateY(9deg) translateY(-16px)}}
.hva-glow{
  position:absolute;inset:-70px;border-radius:50%;
  background:
    radial-gradient(circle at 62% 30%,rgba(222,172,64,.20),transparent 52%),
    radial-gradient(circle,rgba(239,35,60,.38),transparent 65%);
  animation:glowPulse 4.5s ease-in-out infinite;
}
.hva-layer{
  position:absolute;inset:0;
  clip-path:polygon(50% 0%,96% 12%,100% 46%,78% 86%,50% 100%,22% 86%,0% 46%,4% 12%);
  background:var(--edge-gold);
}
.hva-layer::after{
  content:"";position:absolute;inset:2px;
  clip-path:polygon(50% 0%,96% 12%,100% 46%,78% 86%,50% 100%,22% 86%,0% 46%,4% 12%);
  background:var(--glass-noir);
}
.hva-layer.l1{transform:translateZ(-70px) scale(1.13);opacity:.42;filter:blur(1px)}
.hva-layer.l2{transform:translateZ(-24px);opacity:.85}
.hva-layer.l3{transform:translateZ(42px) scale(.72);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 44px rgba(212,164,60,.14)}
.hva-layer.l3::after{background:linear-gradient(165deg,rgba(34,34,34,.8),rgba(8,8,8,.94))}
.hva-layer.l3 img{position:relative;z-index:2;width:46%;filter:drop-shadow(0 0 22px rgba(239,35,60,.7)) drop-shadow(0 0 40px rgba(222,172,64,.35))}
.hva-sheen{
  position:absolute;inset:0;z-index:3;overflow:hidden;
  clip-path:polygon(50% 0%,96% 12%,100% 46%,78% 86%,50% 100%,22% 86%,0% 46%,4% 12%);
}
.hva-sheen::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-80%;width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,229,160,.20),transparent);
  transform:skewX(-18deg);animation:hvaSheen 5.2s ease-in-out infinite;
}
@keyframes hvaSheen{0%,55%{left:-80%}85%,100%{left:160%}}
.hva-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffd98a;box-shadow:0 0 14px rgba(232,182,80,.95)}
.hva-spark.s1{top:12%;right:2%;animation:chipBob 5s ease-in-out infinite}
.hva-spark.s2{bottom:20%;left:-4%;background:#ff7a8d;box-shadow:0 0 14px rgba(239,35,60,.9);animation:chipBob 6.4s ease-in-out infinite 1s}
.hva-spark.s3{top:44%;right:-7%;width:5px;height:5px;animation:chipBob 7s ease-in-out infinite 2s}


@media (max-width:1020px){ .hv-stage{--s:.86;height:420px} }
@media (max-width:760px){ .hv-stage{--s:.7;height:340px} }

/* ==================================================================
   FIRM DIRECTORY (#view-firms) — named firms, published rules
   ================================================================== */
#dirHero{padding:170px 0 40px}
#dirSec{padding:40px 0 90px}
.dir-panel{
  position:relative;border:1px solid transparent;border-radius:0;
  background:var(--glass) padding-box,var(--edge) border-box;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  padding:clamp(20px,3.4vw,38px);
}
.dir-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dir-toolbar .search{flex:1;min-width:220px;max-width:420px}
.dir-toolbar .search input{width:100%}
/* sort control (replaces the old table headers) */
.dir-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.dir-sort>span{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--dim);padding-right:2px}
.dir-sort button{font-family:var(--font-d);font-weight:600;font-size:12px;padding:8px 14px;border-radius:0;color:var(--muted);border:1px solid var(--line);transition:.25s}
.dir-sort button:hover{color:#fff;border-color:var(--brand)}
.dir-sort button.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(200,30,60,.4)}

/* ---------- firm cards ---------- */
#dirList{display:grid;gap:14px}
.firm-card{
  /* A grid item defaults to min-width:auto, which refuses to shrink below its
     min-content width. .fc-rating is flex-shrink:0 and goes width:100% on
     mobile, so that floor was 326px — wider than a 320px phone, and the whole
     card hung off the screen. The contents already handle being narrow: the
     name ellipsises and the rating row wraps. */
  min-width:0;
  position:relative;border:1px solid transparent;border-radius:0;
  background:var(--glass) padding-box,var(--edge-soft) border-box;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:22px 24px;transition:transform .35s,box-shadow .35s,background .35s;
}
.firm-card:hover{transform:translateY(-4px);background:var(--glass-hi) padding-box,var(--edge) border-box;box-shadow:0 22px 54px rgba(0,0,0,.5),0 0 40px rgba(239,35,60,.14)}
.fc-top{display:flex;align-items:center;gap:16px}
.fc-rank{flex-shrink:0;width:34px;text-align:center;font-family:var(--font-m);font-weight:700;font-size:13px;color:var(--dim)}
.fc-crown{display:block;font-size:15px;line-height:1;margin-bottom:2px}
.fc-crown.g1{color:#ffd76a;filter:drop-shadow(0 0 7px rgba(255,200,80,.7))}
.fc-crown.g2{color:#e8e2d6}
.fc-crown.g3{color:#e0a06a}
.fc-logo{
  position:relative;overflow:hidden;
  flex-shrink:0;width:54px;height:54px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:18px;letter-spacing:.02em;color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(0,0,0,.42);
}
/* the real logo sits on a dark plate above the monogram; if it fails to
   load, firms.js removes it and the monogram takes over */
.fc-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px;background:#0d0d0d}
.fc-id{flex:1;min-width:0}
.fc-id h3{font-family:var(--font-d);font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-meta{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;color:var(--dim);margin-top:5px;text-transform:uppercase}
.fc-rating{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:96px}
.fc-stars{font-size:12px;letter-spacing:1px;color:var(--amber);filter:drop-shadow(0 0 6px rgba(255,182,72,.4))}
.fc-stars .off{color:rgba(255,182,72,.22);filter:none}
.fc-rating>b{font-family:var(--font-m);font-weight:700;font-size:15px;color:var(--text)}
.fc-rating span{font-family:var(--font-m);font-size:10px;color:var(--dim)}
.fc-norate{font-family:var(--font-m);font-size:11px;color:var(--dim)}
.fc-tp{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:0;padding:3px 9px;margin-top:2px;white-space:nowrap}
/* Trustpilot pulled the rating for a guidelines breach — amber, not red:
   it is a fact worth seeing, not our verdict on the firm */
.fc-tp.warn,.fd-tp.warn{color:#ffd28a;border-color:rgba(255,182,72,.42);background:rgba(255,182,72,.09)}
.fc-fund{margin:18px 0 4px}
.fc-fund-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.fc-fund-top span{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fc-fund-top b{font-family:var(--font-m);font-weight:700;font-size:15px;color:var(--brand2)}
.fc-fund-bar{height:8px;border-radius:0;background:rgba(239,35,60,.1);overflow:hidden}
.fc-fund-fill{height:100%;border-radius:0;background:linear-gradient(90deg,#d4a43c,#ef233c 58%,#ef233c);box-shadow:0 0 14px rgba(239,35,60,.45)}
.fc-rules{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fc-stat{min-width:0}
.fc-stat span{display:block;font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fc-stat b{font-family:var(--font-d);font-weight:700;font-size:13.5px;color:var(--text);line-height:1.35}
.fc-tags{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:16px}
.fc-tg{display:flex;align-items:flex-start;gap:10px;min-width:0}
.fc-tl{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:7px;flex-shrink:0}
.fc-tw{display:flex;flex-wrap:wrap;gap:6px}

/* card links through to the detail page */
.firm-card.linked{cursor:default}
.fc-id h3 a{color:inherit;transition:color .25s}
.fc-id h3 a:hover{color:var(--brand2)}
.fc-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--brand2);
  transition:gap .3s,color .3s;
}
.fc-more:hover{gap:14px;color:#fff}

/* ==================================================================
   FIRM DETAIL (#view-firm)
   ================================================================== */
#firmDetail{padding:150px 0 90px}
.fd-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  transition:color .3s,gap .3s;
}
.fd-back:hover{color:var(--brand2);gap:13px}
.fd-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.fd-logo{
  position:relative;overflow:hidden;flex-shrink:0;width:86px;height:86px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:28px;color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 32px rgba(0,0,0,.5);
}
.fd-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;background:#0d0d0d}
.fd-id{flex:1;min-width:220px}
.fd-id h1{font-size:clamp(28px,3.6vw,44px);margin-bottom:8px;text-transform:none;letter-spacing:.01em}
.fd-meta{font-family:var(--font-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fd-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.fd-rate{display:inline-flex;align-items:center;gap:8px}
.fd-rate b{font-family:var(--font-m);font-weight:700;font-size:15px;color:var(--text)}
.fd-tp{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:0;padding:5px 12px}
.fd-visit{flex-shrink:0}
.fd-warn{
  border:1px solid rgba(255,182,72,.35);background:rgba(255,182,72,.07);color:#ffd28a;
  border-radius:0;padding:14px 18px;font-size:13.5px;line-height:1.6;margin-bottom:22px;
}
.fd-summary{color:var(--muted);font-size:16.5px;line-height:1.75;max-width:820px;margin-bottom:28px}
.fd-metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  border:1px solid transparent;border-radius:0;overflow:hidden;margin-bottom:30px;
  background:var(--edge) border-box;
}
.fd-metric{background:linear-gradient(165deg,rgba(24,24,24,.75),rgba(8,8,8,.9));padding:20px 18px}
.fd-metric span{display:block;font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fd-metric b{font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--text);line-height:1.35}
.fd-sec{
  border:1px solid transparent;border-radius:0;
  background:var(--glass) padding-box,var(--edge-soft) border-box;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:26px 28px;margin-bottom:16px;
}
.fd-sec h2{
  font-family:var(--font-d);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand2);margin-bottom:18px;
}
.fd-row{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.fd-row:last-child{border-bottom:0;padding-bottom:0}
.fd-row>span{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.fd-row p{color:var(--muted);font-size:14.5px;line-height:1.7}
.fd-empty{color:var(--dim);font-family:var(--font-m);font-size:13px;line-height:1.8;padding:30px 0}
.fd-cta{
  margin-top:30px;text-align:center;border:1px solid transparent;border-radius:0;
  background:radial-gradient(600px circle at 50% -20%,rgba(239,35,60,.26),transparent 60%),
             var(--glass) padding-box,var(--edge) border-box;
  padding:clamp(28px,4vw,48px);
}
.fd-cta h3{font-family:var(--font-d);font-weight:800;font-size:22px;letter-spacing:.02em;margin-bottom:10px}
.fd-cta p{color:var(--muted);font-size:15px;max-width:520px;margin:0 auto 24px}
@media (max-width:760px){
  #firmDetail{padding:120px 0 70px}
  .fd-logo{width:64px;height:64px;border-radius:0;font-size:21px}
  .fd-row{grid-template-columns:1fr;gap:6px}
  .fd-sec{padding:20px}
}

/* ==================================================================
   FIRMS PAGES — bluish-purple skin + smoother motion.
   Scoped to #view-firms / #view-firm so the rest of the site keeps its
   violet-gold identity: the directory is the neutral, data side of the
   product and reads cooler on purpose.
   ================================================================== */
#view-firms, #view-firm{
  --brand:#ef233c; --brand2:#ff7a8d; --deep:#c81e3c;
  --grad:linear-gradient(135deg,#ff7a8d 0%,#ef233c 45%,#c81e3c 100%);
  --line:rgba(239,35,60,.16); --line2:rgba(239,35,60,.34);
  --glass:linear-gradient(165deg,rgba(24,24,24,.58),rgba(8,8,8,.80));
  --glass-hi:linear-gradient(165deg,rgba(34,34,34,.66),rgba(10,10,10,.84));
  --edge:linear-gradient(150deg,rgba(255,255,255,.20),rgba(239,35,60,.46) 26%,rgba(200,30,60,.10) 55%,rgba(255,122,141,.40) 100%);
  --edge-soft:linear-gradient(150deg,rgba(255,255,255,.11),rgba(239,35,60,.26) 28%,rgba(200,30,60,.06) 58%,rgba(255,122,141,.20) 100%);
}
/* cool the page background and orbs to match */
#view-firms .orb-1,#view-firm .orb-1{background:radial-gradient(circle,rgba(200,30,60,.50),transparent 65%)}
#view-firms .orb-2,#view-firm .orb-2{background:radial-gradient(circle,rgba(239,35,60,.34),transparent 65%)}
#view-firms .grid-bg,#view-firm .grid-bg{
  background-image:linear-gradient(rgba(239,35,60,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(239,35,60,.06) 1px,transparent 1px);
}
#dirSec,#firmDetail{
  background:
    radial-gradient(900px 600px at 88% -6%,rgba(200,30,60,.13),transparent 60%),
    radial-gradient(760px 520px at -8% 40%,rgba(200,30,60,.09),transparent 58%);
}
/* the funding bar picks up the blue end of the scale */
#view-firms .fc-fund-fill{background:linear-gradient(90deg,#ff7a8d,#ef233c 55%,#c81e3c);box-shadow:0 0 14px rgba(239,35,60,.5)}

/* ---------- smoother motion ---------- */
/* one easing curve for the whole page so nothing feels out of step */
#view-firms .firm-card,#view-firm .fd-sec{
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1),
             background .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#view-firms .firm-card:hover{transform:translateY(-5px) scale(1.006)}
#view-firm .fd-sec:hover{background:var(--glass-hi) padding-box,var(--edge) border-box}
#dirSort button,.fc-more,.fd-back,.fc-logo,.fd-logo{
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
#view-firms .fc-logo{will-change:transform}
#view-firms .firm-card:hover .fc-logo{transform:scale(1.06) rotate(-3deg)}
/* the bar fills rather than snapping when a sort re-renders */
#view-firms .fc-fund-fill{transition:width .8s cubic-bezier(.22,1,.36,1)}

/* cards fade up in sequence on first paint and on every re-sort —
   short and staggered so a 32-row list still feels instant */
@media (prefers-reduced-motion:no-preference){
  #dirList .firm-card{animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
  #dirList .firm-card:nth-child(1){animation-delay:.02s}
  #dirList .firm-card:nth-child(2){animation-delay:.05s}
  #dirList .firm-card:nth-child(3){animation-delay:.08s}
  #dirList .firm-card:nth-child(4){animation-delay:.11s}
  #dirList .firm-card:nth-child(5){animation-delay:.14s}
  #dirList .firm-card:nth-child(6){animation-delay:.17s}
  #dirList .firm-card:nth-child(n+7){animation-delay:.2s}
  #fdBody > *{animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
  #fdBody > *:nth-child(2){animation-delay:.04s}
  #fdBody > *:nth-child(3){animation-delay:.08s}
  #fdBody > *:nth-child(n+4){animation-delay:.12s}
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==================================================================
   AUTH MODAL — charcoal + gold.

   This block used to be black + red, and its own comment described the
   site as violet. That dates it: the Lumina pass retinted 184 colour
   literals violet→gold, but this scope reassigns --brand/--brand2/
   --deep/--grad locally, so every one of those overrides shadowed the
   new palette and the dialog kept the old skin.

   Red is not a spare accent on this site — it is the risk colour. High
   Risk badges, PAYOUT DENIED, .accent-red. Spending it on "create your
   account" told a new trader something had gone wrong at the one moment
   nothing had. The dialog still sits a shade deeper than the page behind
   it; it just does that with depth now instead of hue.
   ================================================================== */
#authBack{
  /* restated rather than left to inherit, so nothing inside this scope
     can pick up a stale token if the block is ever moved */
  --brand:#ef233c; --brand2:#ff7a8d; --deep:#c81e3c;
  --grad:linear-gradient(135deg,#ff7a8d 0%,#ef233c 46%,#c81e3c 100%);
  --line:rgba(239,35,60,.16); --line2:rgba(239,35,60,.36);
  /* near-black so the gold edge is the only colour with weight */
  background:radial-gradient(700px circle at 50% 40%,rgba(46,34,12,.58),rgba(2,2,2,.92) 70%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#authBack .modal{
  border:1px solid transparent;
  background:
    radial-gradient(520px circle at 50% -18%,rgba(239,35,60,.14),transparent 62%),
    linear-gradient(168deg,rgba(24,20,14,.94),rgba(6,5,4,.98)) padding-box,
    linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,122,141,.46) 26%,rgba(200,30,60,.12) 56%,rgba(255,122,141,.34) 100%) border-box;
  box-shadow:0 40px 110px rgba(0,0,0,.78),0 0 70px rgba(239,35,60,.12);
}
#authBack .modal h3{color:#fff}
#authBack .hint,#authBack .note{color:rgba(255,255,255,.68)}
#authBack .f-label{color:var(--brand2)}
/* segmented control: inactive on near-black, active on the gold gradient */
#authBack .seg{background:rgba(8,7,5,.75);border-color:var(--line)}
#authBack .seg button{color:rgba(255,255,255,.62)}
/* black on gold, like every other primary on the site — white would be
   2.5:1 against #ef233c and fail outright */
#authBack .seg button.active{background:var(--grad);color:#0a0a0a;box-shadow:0 6px 18px rgba(200,30,60,.34)}
#authBack .modal input{
  background:rgba(5,4,3,.86);border-color:var(--line2);color:#fff;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
#authBack .modal input::placeholder{color:rgba(255,255,255,.38)}
#authBack .modal input:focus{
  border-color:var(--brand);background:rgba(10,8,5,.92);
  box-shadow:0 0 0 4px rgba(239,35,60,.16);
}
#authBack .btn-primary{
  background:var(--grad);
  box-shadow:0 8px 30px rgba(200,30,60,.34),inset 0 1px 0 rgba(255,255,255,.28);
}
#authBack .btn-primary:hover{box-shadow:0 14px 44px rgba(200,30,60,.48),inset 0 1px 0 rgba(255,255,255,.28)}
#authBack .modal-x{border-color:var(--line2);color:rgba(255,255,255,.55)}
#authBack .modal-x:hover{color:#fff;border-color:var(--brand);background:rgba(239,35,60,.12)}
/* Errors keep the red, and are now the only red in the dialog — which is
   the point. A warning that matches the panel it sits in is not a warning. */
#authBack .form-err{
  color:#ffb3be;background:rgba(255,65,96,.12);border-color:rgba(255,65,96,.42);
}
/* the resend link inherits --brand2, gold inside this scope */

/* The .dv data-status badges lived here — VERIFIED green, UNVERIFIED amber,
   with a glowing dot. Removed along with the markup that emitted them on the
   directory cards, in the compare table and on the firm page. f.verified is
   still on the entity and still returned by the API; nothing displays it. */
@media (max-width:900px){
  .fc-rules{grid-template-columns:repeat(3,1fr);row-gap:16px}
}
@media (max-width:760px){
  #dirHero{padding:130px 0 26px}
  #dirSec{padding:26px 0 70px}
  .firm-card{padding:18px}
  .fc-top{flex-wrap:wrap}
  .fc-id{flex-basis:calc(100% - 130px)}
  .fc-rating{order:4;align-items:flex-start;min-width:0;flex-direction:row;align-items:center;gap:8px;width:100%;margin-top:6px}
  .fc-rules{grid-template-columns:repeat(2,1fr)}
  .fc-tags{flex-direction:column;gap:12px}
}

/* ==================================================================
   LUMINA — the original luxury skin. Deep charcoal + metallic gold, set
   in Space Grotesk / Crimson Pro / Public Sans. Both the palette and the
   typefaces have since been replaced with the design reference's red and
   its Manrope / Inter pairing; this block is kept because its structure,
   spacing and reveal timing are all still live. 1.2s (.19,1,.22,1),
   high-blur glass and sharp rectangular CTAs.
   Appended last so it wins the cascade; delete this block to fall
   back to the violet skin above.
   ================================================================== */
:root{
  --gold:#ef233c; --gold-dark:#c81e3c; --gold-soft:#ff7a8d;
  --muted:rgba(255,255,255,.68); --dim:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.06); --line2:rgba(239,35,60,.34);
  --card:rgba(255,255,255,.02); --card-hi:rgba(255,255,255,.04);
  --glass:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  --edge:linear-gradient(150deg,rgba(255,255,255,.14),rgba(239,35,60,.42) 30%,rgba(255,255,255,.04) 62%,rgba(255,122,141,.30) 100%);
  --edge-soft:linear-gradient(150deg,rgba(255,255,255,.07),rgba(239,35,60,.18) 30%,rgba(255,255,255,.02) 62%,rgba(255,122,141,.13) 100%);
  --grad:linear-gradient(135deg,#ff7a8d 0%,#ef233c 46%,#c81e3c 100%);
  --ease:cubic-bezier(.19,1,.22,1);
  --r:0;
}
/* the directory now shares the one palette */
#view-firms,#view-firm{
  --brand:#ef233c; --brand2:#ff7a8d; --deep:#c81e3c;
  --grad:linear-gradient(135deg,#ff7a8d 0%,#ef233c 46%,#c81e3c 100%);
  --line:rgba(255,255,255,.06); --line2:rgba(239,35,60,.34);
  --glass:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  --edge:linear-gradient(150deg,rgba(255,255,255,.14),rgba(239,35,60,.42) 30%,rgba(255,255,255,.04) 62%,rgba(255,122,141,.30) 100%);
  --edge-soft:linear-gradient(150deg,rgba(255,255,255,.07),rgba(239,35,60,.18) 30%,rgba(255,255,255,.02) 62%,rgba(255,122,141,.13) 100%);
}
#view-firms .orb-1,#view-firm .orb-1{background:radial-gradient(circle,rgba(239,35,60,.20),transparent 65%)}
#view-firms .orb-2,#view-firm .orb-2{background:radial-gradient(circle,rgba(200,30,60,.16),transparent 65%)}
#view-firms .grid-bg,#view-firm .grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
#dirSec,#firmDetail{background:radial-gradient(900px 600px at 88% -6%,rgba(239,35,60,.07),transparent 60%),radial-gradient(760px 520px at -8% 40%,rgba(200,30,60,.05),transparent 58%)}
#view-firms .fc-fund-fill{background:linear-gradient(90deg,#ff7a8d,#ef233c 55%,#c81e3c);box-shadow:0 0 14px rgba(239,35,60,.4)}

/* ---------- base ---------- */
body{
  font-family:var(--font-b);font-size:15px;letter-spacing:.01em;
  background:
    radial-gradient(1100px 720px at 84% -14%,rgba(239,35,60,.07),transparent 58%),
    radial-gradient(900px 640px at -12% 30%,rgba(200,30,60,.05),transparent 55%),
    #080808;
}
body::after{box-shadow:inset 0 0 170px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.5)}
::selection{background:rgba(239,35,60,.32);color:#fff}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.view,footer{position:relative;z-index:1}
#progress{background:var(--grad);box-shadow:0 0 12px rgba(239,35,60,.7)}

/* the interactive tube lattice sits behind everything */
#tubes{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;filter:brightness(.6);
}
#view-home .grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
#view-home .orb-1{background:radial-gradient(circle,rgba(239,35,60,.22),transparent 65%)}
#view-home .orb-2{background:radial-gradient(circle,rgba(200,30,60,.18),transparent 65%)}
#view-home .orb-3{background:radial-gradient(circle,rgba(255,65,96,.10),transparent 65%)}
#candles{opacity:.26}

/* ---------- typography ---------- */
h1,h2,h3,.brand-main,.step h3,.flag-card h3,.trust-card h3,.case-name{
  font-family:var(--font-d);text-transform:none;
}
h1,h2{font-weight:300;letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(30px,3.9vw,54px);margin-bottom:20px}
h3{font-weight:400;letter-spacing:-.01em}
em,.serif{font-family:var(--font-s);font-style:italic;font-weight:200}
strong,b{font-weight:600}
.kicker,.hero-badge,.loader-txt,.vs-pill,.status,.tag,.tick,.rep-flag,
.case-id,.flag-num,.hstat span,.foot-col h4,.score-row,.stamp{
  font-family:var(--font-b);
}
.kicker{
  font-size:10px;font-weight:600;letter-spacing:.3em;color:var(--gold);
  gap:16px;margin-bottom:22px;
}
.kicker::before{width:32px;background:linear-gradient(90deg,var(--gold),transparent)}
.section-sub{font-family:var(--font-s);font-style:italic;font-weight:400;font-size:19px;line-height:1.6;color:rgba(255,255,255,.72);max-width:44rem}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head{margin-bottom:60px}
.tick,.score-val,.cmp-val,.case-id,.fc-rule b,.hstat b,td,th{font-variant-numeric:tabular-nums}
.status,.tag,.vs-pill,.rep-flag,.flag-num,.case-id{letter-spacing:.22em;font-weight:600}
.status{font-size:9.5px;padding:6px 13px}
.status::before{border-radius:50%}
.foot-col h4{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:600}
.disclaimer,.form-note,.cases-note,.side-none,.cases-none{font-family:var(--font-b);color:var(--dim)}

/* ---------- motion: one curve for the whole site ---------- */
.reveal,.reveal-l,.reveal-r{
  opacity:0;transform:translateY(20px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.in,.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
.btn,.nav-links a,.soc,.flag-card,.case-card,.trust-card,.rep-card,.thread,
.faq-item,.step-dot,.firm-card,.fd-sec,.tab,.fc-logo,.foot-col a,.case-link{
  transition-timing-function:var(--ease);
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- glass ---------- */
.flag-card,.case-card,.trust-card,.thread,.faq-item,.rep-card,
.cmp-panel,.toolbar,.side-card,.drop,.modal,.dir-panel,.firm-card,.fd-sec,.skel{
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
}
.case-card:hover,.trust-card:hover{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 44px rgba(239,35,60,.10)}
.flag-card:hover{box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 40px rgba(239,35,60,.09)}
.thread:hover{box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 36px rgba(239,35,60,.08)}
nav.scrolled{background:rgba(8,8,8,.62);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-bottom-color:rgba(255,255,255,.05)}
footer{background:linear-gradient(180deg,#0a0a0a,#050505);border-top-color:rgba(255,255,255,.06)}
#flags,#how{background:linear-gradient(180deg,transparent,rgba(255,255,255,.012) 50%,transparent)}
.ticker-band{background:rgba(255,255,255,.014);border-color:rgba(255,255,255,.06)}
.ticker-band::before,.reports-fade::before{background:linear-gradient(90deg,#080808,transparent)}
.ticker-band::after,.reports-fade::after{background:linear-gradient(-90deg,#080808,transparent)}

/* ---------- buttons: sharp, metallic, no radius ---------- */
.btn{
  font-family:var(--font-b);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:17px 34px;border-radius:0;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
             background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.btn-sm{padding:13px 24px;font-size:10px;letter-spacing:.2em}
.btn-primary{
  background:linear-gradient(135deg,#ef233c 0%,#c81e3c 100%);
  color:#000;box-shadow:none;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(239,35,60,.3);
}
.btn-ghost{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.86);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.04);border-color:rgba(239,35,60,.5);
  color:#fff;transform:translateY(-2px);box-shadow:0 0 40px rgba(239,35,60,.14);
}
.btn-primary::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}
#view-home .tabs,.seg{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.06)}
#view-home .tab,.seg button{font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
#view-home .tab.active{background:var(--grad);color:#000;box-shadow:none}
#toTop{background:var(--grad);box-shadow:0 0 30px rgba(239,35,60,.28)}
#toTop svg{stroke:#000}
.soc:hover{background:var(--grad);box-shadow:0 0 26px rgba(239,35,60,.3)}
.soc:hover svg{fill:#000}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  font-family:var(--font-b);font-size:13px;letter-spacing:.04em;
}
.sub-form input:focus,.modal input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(239,35,60,.14)}

/* ---------- header ---------- */
nav{padding:26px 0}
nav.scrolled{padding:14px 0}
nav .wrap{width:100%;max-width:none;padding-inline:clamp(20px,3.4vw,48px)}
.brand{gap:16px;animation:revealUp 1.2s var(--ease) both}
.brand-mark{
  width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid rgba(239,35,60,.55);transform:rotate(45deg);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.brand:hover .brand-mark{border-color:var(--gold);box-shadow:0 0 24px rgba(239,35,60,.28)}
.brand-mark img{width:17px;height:17px;transform:rotate(-45deg);filter:none}
.brand:hover img{transform:rotate(-45deg)}
.brand-text{gap:5px}
.brand-top{font-family:var(--font-b);font-weight:600;font-size:9px;letter-spacing:.42em;color:var(--gold)}
.brand-main{font-family:var(--font-d);font-weight:400;font-size:14px;letter-spacing:.34em;color:#fff}
.nav-links{gap:44px;animation:revealUp 1.2s var(--ease) .1s both}
.nav-links a{
  font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.25em;
  text-transform:uppercase;color:rgba(255,255,255,.7);
}
.nav-links a::after{height:1px;background:var(--gold);bottom:-6px}
.nav-cta{gap:26px;animation:revealUp 1.2s var(--ease) .2s both}
#authBtn.btn,#authBtnM{
  background:none;border:none;padding:0 0 5px;color:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;
}
#authBtn.btn:hover{color:var(--gold);border-bottom-color:var(--gold);transform:none;box-shadow:none;background:none}
#mobileMenu{background:rgba(6,6,6,.97)}
#mobileMenu a{font-family:var(--font-d);font-weight:300;font-size:24px;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.75)}
#mobileMenu a.btn{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#000}
#burger span{background:var(--gold)}
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- hero core ---------- */
#hero{min-height:100svh;padding:118px 0 98px}
#hero .wrap{width:min(1152px,90%)}
.hero-grid{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.hero-copy{display:flex;flex-direction:column;align-items:center;max-width:100%}
.hero-visual{order:-1;min-height:0;width:100%;margin-bottom:clamp(4px,1.6vw,20px)}
.hero-badge{
  border:none;background:none;box-shadow:none;padding:0;
  font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);gap:12px;
}
.hero-badge .dot{width:5px;height:5px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
#view-home h1{
  font-family:var(--font-d);font-weight:300;
  font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.04em;
  text-transform:none;margin:26px 0 0;
}
#view-home h1 em{
  display:block;font-family:var(--font-s);font-style:italic;font-weight:200;
  letter-spacing:-.02em;color:var(--gold-soft);
}
#view-home h1 .thin{color:var(--gold);font-weight:200}
.hero-sub{
  font-family:var(--font-s);font-style:italic;font-weight:200;
  font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.75);
  max-width:42rem;margin:30px 0 40px;
}
.hero-sub strong{color:var(--gold-soft);font-weight:400;font-style:italic}
.hero-ctas{justify-content:center;gap:22px;margin-bottom:0}
.btn-play{
  display:inline-flex;align-items:center;gap:16px;background:none;border:none;padding:15px 4px;
  color:rgba(255,255,255,.82);font-family:var(--font-b);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  transition:color .5s var(--ease);
}
.btn-play .pl{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.btn-play .pl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn-play:hover{color:#fff}
.btn-play:hover .pl{border-color:rgba(239,35,60,.55);box-shadow:0 0 30px rgba(239,35,60,.18);transform:scale(1.06)}
#hero .chip{
  position:absolute;z-index:4;border-radius:0;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-family:var(--font-b);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  padding:11px 16px;box-shadow:none;
}
.chip-1{top:24%;left:2.5%}
.chip-2{top:36%;right:2.5%;left:auto}
.chip-3{bottom:26%;left:4%}
.chip-4{bottom:19%;right:4%}
/* ---------- live case chips ---------- */
/* Wide screens: an inert full-bleed layer. inset:0 makes the rail's padding
   box identical to #hero's, so the chips' percentage offsets resolve exactly
   as they did before the rail existed. pointer-events:none because the chips
   are decorative and were otherwise eating clicks over the hero. */
.chip-rail{position:absolute;inset:0;z-index:4;pointer-events:none}

/* Below 1280px the corners the chips live in belong to the headline. They
   used to be display:none here, which meant every tablet and phone visitor
   lost the live-case signal entirely — the one thing on the page that shows
   the site is actively being used. They become one scrollable strip instead. */
/* Below 1360 the four corner positions above collide with the centred copy —
   chip-4 lands on .hero-sub, measured at both 1300 and 1280. They keep
   floating anyway, by moving instead of stacking.

   The hero's free space is not at the sides, where the text column is; it is
   in the bands above the visual and below the CTAs. So the chips migrate
   there: two along the top edge, two along the bottom, still absolute, still
   bobbing. They also stop being single-line strips — nowrap is what made
   them too wide to fit beside anything — and shrink on a fluid ramp. */
@media (max-width:1360px){
  #hero .chip{
    white-space:normal;
    /* 205 rather than 230: the copy column starts at x297 on a 1280 viewport
       and the chips now begin at the content gutter, so this is what leaves a
       real gap between chip and headline instead of a 4px near-miss */
    max-width:min(16vw,205px);
    font-size:clamp(8px,.72vw,9.5px);
    letter-spacing:.13em;
    padding:9px 12px;
    line-height:1.5;
    /* Equal boxes. "ACCOUNT BANNED — NO REASON" needs three lines where the
       others need two, and a chip anchored by `bottom` grows upward — so the
       pair shared a baseline but sat at different heights, which is what read
       as crooked. .chip already centres its content, so the shorter ones just
       gain padding. */
    min-height:48px;
  }
  /* Line the chips up with the content column rather than the viewport edge,
     by restating the gutter that #hero .wrap{width:min(1152px,90%)} produces
     when centred. Below 1280 the 90% branch wins and the gutter is 5%; above
     it the 1152px cap takes over and the gutter grows — a flat 5% was 30px
     short at 1360. max() switches between the two at exactly the same point
     the wrap does, so the chips track the headline at every width. */
  #hero{--chip-gutter:max(5%,calc((100% - 1152px) / 2))}
  .chip-1{top:13%;left:var(--chip-gutter);bottom:auto;right:auto}
  .chip-2{top:13%;right:var(--chip-gutter);left:auto;bottom:auto}
  .chip-3{bottom:20%;left:var(--chip-gutter);top:auto;right:auto}
  .chip-4{bottom:20%;right:var(--chip-gutter);top:auto;left:auto}
}

/* Phones: the same four corners, but the top band sits either side of the
   prism rather than above it, and the bottom pair drops into the gap between
   the CTAs and the technical strip. Both are empty by measurement, not by
   eye. Sized back up because 8px on a phone is decoration, not information. */
/* Phones. Two hard constraints, both measured rather than eyeballed at 375:
   the prism occupies x 110–265, so a chip flanking it gets ~104px before it
   touches; and the only free vertical bands are 149–239 (beside the prism)
   and 705–830 (between the CTAs and the technical strip). The percentages
   below put one chip in each corner of those two bands. */
@media (max-width:760px){
  #hero .chip{
    max-width:min(27vw,104px);
    font-size:8.5px;
    letter-spacing:.08em;
    padding:7px 9px;
    line-height:1.45;
    gap:5px;
  }
  /* Taking the rail out of the flow shortened the hero and closed the band
     the bottom pair needs — 52px of gap against a 53px chip. The strip is
     pushed down to reopen it rather than the chips being shrunk further;
     8.5px is already the floor for something meant to be read. */
  .chip-1{top:15%;left:1.5%}
  .chip-2{top:15%;right:1.5%;left:auto}
  .chip-3{bottom:22%;left:1.5%}
  .chip-4{bottom:22%;right:1.5%;left:auto}
}

/* 900 is where .hero-tech leaves absolute positioning and joins the flow,
   which is also where the band the bottom chips sit in collapses — taking
   the rail out of the flow shortened the hero by exactly the rail's height.
   The strip is pushed down to reopen it rather than the chips being shrunk
   further; 8.5px is already the floor for something meant to be read.

   #hero-qualified on purpose: the 900px block below sets margin-top:52px on
   the bare selector and would otherwise win on source order. */
@media (max-width:900px){
  #hero .hero-tech{margin-top:112px}
}

/* ---------- technical strip ---------- */
.hero-tech{
  position:absolute;left:0;right:0;bottom:34px;z-index:5;
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding-inline:clamp(20px,3.4vw,48px);
  font-family:var(--font-b);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
}
.ht-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ht-line{width:28px;height:1px;background:var(--gold);flex-shrink:0}
.ht-label{color:rgba(255,255,255,.78);font-weight:600}
.ht-note{color:rgba(255,255,255,.6);letter-spacing:.16em;font-weight:400;text-transform:none;font-size:10px}
.ht-right{display:flex;align-items:center;gap:20px}
.ht-right a{color:rgba(255,255,255,.7);font-weight:600;transition:color .5s var(--ease)}
.ht-right a:hover{color:var(--gold)}
.ht-rule{width:48px;height:1px;background:rgba(255,255,255,.12)}
.ht-arrow{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  /* #hero is a flex row; once the strip leaves absolute positioning it
     becomes a flex item, so the hero has to stack instead */
  #hero{flex-direction:column;align-items:stretch;justify-content:center}
  .hero-tech{position:static;flex-direction:column;align-items:flex-start;gap:18px;margin-top:52px}
  .ht-rule{width:24px}
}

/* ---------- Aegis Prism: gold on charcoal ---------- */
.hv-stage{height:250px;--s:.56;transition:transform .5s var(--ease)}
.hva{
  --edge-gold:linear-gradient(150deg,rgba(255,246,222,.72),rgba(239,35,60,.66) 26%,rgba(255,255,255,.05) 54%,rgba(255,122,141,.58) 80%,rgba(200,30,60,.5) 100%);
  --glass-noir:linear-gradient(165deg,rgba(24,21,16,.86),rgba(6,6,6,.96));
}
.hva-glow{background:radial-gradient(circle at 60% 30%,rgba(255,122,141,.22),transparent 50%),radial-gradient(circle,rgba(239,35,60,.26),transparent 64%)}
.hva-layer.l3{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 50px rgba(239,35,60,.12)}
.hva-layer.l3::after{background:linear-gradient(165deg,rgba(30,26,20,.85),rgba(6,6,6,.96))}
.hva-layer.l3 img{filter:drop-shadow(0 0 20px rgba(239,35,60,.55)) drop-shadow(0 0 44px rgba(255,122,141,.3))}
.hva-sheen::after{background:linear-gradient(100deg,transparent,rgba(255,244,214,.26),transparent)}
.hva-spark{background:var(--gold-soft);box-shadow:0 0 14px rgba(239,35,60,.9)}
.hva-spark.s2{background:var(--gold);box-shadow:0 0 14px rgba(200,30,60,.9)}
@media (max-width:1020px){ .hv-stage{--s:.5;height:220px} }
@media (max-width:760px){ .hv-stage{--s:.42;height:190px} }

/* ---------- preloader ---------- */
#loader{background:#080808}
.loader-logo::after{border-top-color:var(--gold);border-right-color:rgba(239,35,60,.25)}
.loader-txt{font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.3em;color:rgba(255,255,255,.7)}

/* ---------- section detail ---------- */
.flag-card h3,.trust-card h3,.step h3{font-weight:400;font-size:17px;letter-spacing:-.01em;text-transform:none}
.flag-card p,.trust-card p,.step p,.case-card p,.rep-card p{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.78)}
.flag-icon,.step-dot{border-radius:0;background:rgba(255,255,255,.02);box-shadow:none}
.flag-icon svg,.step-dot svg{stroke:var(--gold)}
.step-num{border-radius:50%;background:var(--grad);color:#000;box-shadow:0 0 18px rgba(239,35,60,.3);font-family:var(--font-b);font-weight:700}
.case-name{font-weight:400;font-size:19px;letter-spacing:-.01em;text-transform:none}
.rep-av{border-radius:50%;color:#000}
.foot-col a,.foot-bottom{font-family:var(--font-b);font-size:12.5px;letter-spacing:.03em;color:var(--muted)}
.foot-brand p{font-family:var(--font-s);font-style:italic;font-weight:400;font-size:15.5px;color:rgba(255,255,255,.72)}
#join .cta-box,#joinCmp .cta-box{border-radius:0;background:radial-gradient(640px circle at 50% -12%,rgba(239,35,60,.14),transparent 60%),var(--glass) padding-box,var(--edge) border-box}
.stamp{font-family:var(--font-b);letter-spacing:.3em}

/* the login gate sits deeper than the page behind it, but in the same
   palette — see the AUTH MODAL block above for why it stopped being red */
#authBack .modal h3{font-family:var(--font-d);font-weight:300;letter-spacing:-.02em}
/* black, not white: white on #ef233c measures 2.5:1 and fails AA outright.
   This rule is why the button stayed illegible after the block above was
   retinted — it lands later and won on source order. */
#authBack .btn-primary{color:#0a0a0a}

/* the hero core is a single-screen composition: its rhythm tracks the
   viewport height so the prism, the headline and the technical strip all
   stay above the fold on short laptop screens */
.hv-stage{height:226px}
@media (max-height:820px){
  #hero{padding:106px 0 92px}
  .hv-stage{--s:.46;height:196px}
  #view-home h1{font-size:clamp(36px,6vw,74px);margin-top:22px}
  .hero-sub{margin:22px 0 30px;font-size:clamp(16px,1.4vw,19px)}
  .hero-visual{margin-bottom:8px}
}
@media (max-height:780px){
  #hero{padding:98px 0 86px}
  .hv-stage{--s:.38;height:164px}
  #view-home h1{font-size:clamp(32px,5.2vw,62px)}
  .hero-sub{margin:18px 0 26px}
  .hero-tech{bottom:24px}
}


/* ==================================================================
   EVIDENCE — screenshot proof on a complaint.
   Upload UI inside the report modal, a thumbnail strip on the card,
   and a lightbox. Lumina rules apply: square corners, gold accent,
   one easing curve.
   ================================================================== */
.f-opt{color:rgba(255,255,255,.55);font-weight:400;letter-spacing:.18em}

.ev-drop{
  border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.014);
  padding:16px;margin-bottom:18px;transition:border-color .5s var(--ease),background .5s var(--ease);
}
.ev-drop.over{border-color:var(--gold);background:rgba(239,35,60,.06)}
.ev-pick{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.72);padding:11px 18px;
  font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .5s var(--ease),color .5s var(--ease),background .5s var(--ease);
}
.ev-pick:hover:not(:disabled){border-color:rgba(239,35,60,.55);color:#fff;background:rgba(239,35,60,.06)}
.ev-pick:disabled{opacity:.45;cursor:not-allowed}
.ev-pick svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ev-hint{margin-top:11px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.6)}
.ev-hint b{color:var(--gold-soft);font-weight:600}

.ev-list{list-style:none;display:grid;gap:8px;margin-top:14px}
.ev-item{
  display:flex;align-items:center;gap:12px;padding:8px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);
}
.ev-item img{width:44px;height:44px;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.ev-name{
  flex:1;min-width:0;font-size:12.5px;color:rgba(255,255,255,.82);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-name em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.58);margin-top:3px}
.ev-drop-x{
  width:28px;height:28px;flex-shrink:0;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);font-size:12px;transition:all .5s var(--ease);
}
.ev-drop-x:hover{border-color:var(--red);color:#ff8296;background:rgba(255,65,96,.08)}

/* ---- on the thread card ---- */
.th-ev{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px}
.th-ev-tag{
  flex-shrink:0;padding-top:6px;
  font-family:var(--font-b);font-size:9.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.th-ev-row{display:flex;gap:8px;flex-wrap:wrap}
.ev-thumb{
  width:82px;height:56px;overflow:hidden;padding:0;position:relative;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ev-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ev-thumb:hover{border-color:rgba(239,35,60,.5);transform:translateY(-2px);box-shadow:0 0 26px rgba(239,35,60,.14)}
.ev-thumb:hover img{transform:scale(1.06)}

/* ---- lightbox ---- */
#evBox{
  position:fixed;inset:0;z-index:960;display:none;
  align-items:center;justify-content:center;gap:clamp(8px,2vw,26px);
  padding:clamp(48px,6vw,72px) clamp(12px,4vw,56px);
  background:rgba(4,4,4,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
#evBox.open{display:flex}
.evb-stage{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:100%;max-height:100%;min-width:0;
}
.evb-stage img{
  max-width:100%;max-height:76vh;object-fit:contain;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 110px rgba(0,0,0,.7);
}
#evbCap{
  font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.7);text-align:center;
}
.evb-x{
  position:absolute;top:24px;right:clamp(16px,4vw,42px);width:40px;height:40px;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);font-size:15px;
  transition:all .5s var(--ease);
}
.evb-x:hover{border-color:var(--gold);color:var(--gold)}
.evb-nav{
  width:46px;height:46px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);
  font-size:24px;line-height:1;transition:all .5s var(--ease);
}
.evb-nav:hover{border-color:var(--gold);color:var(--gold)}
#evBox.single .evb-nav{visibility:hidden}
@media (max-width:640px){
  #evBox{padding:56px 10px}
  .evb-nav{position:absolute;bottom:18px}
  .evb-prev{left:calc(50% - 56px)} .evb-next{left:calc(50% + 10px)}
  .th-ev{flex-direction:column;gap:8px}
  .ev-thumb{width:72px;height:50px}
}


/* ==================================================================
   FIRM PICKER — a listbox with logos, replacing the native <select>
   in the report modal. The <select> stays in the DOM off-screen as the
   value holder, so submit and validation are unchanged.
   ================================================================== */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.firm-pick{position:relative;margin-bottom:18px}
.fp-btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 16px;text-align:left;
  border:1px solid rgba(255,255,255,.10);background:rgba(6,2,5,.86);
  color:rgba(255,255,255,.6);font-family:var(--font-b);font-size:13px;letter-spacing:.04em;
  transition:border-color .5s var(--ease),background .5s var(--ease),color .5s var(--ease);
}
.fp-btn.has{color:#fff}
.fp-btn:hover,.fp-btn[aria-expanded="true"]{border-color:var(--gold);background:rgba(12,3,7,.92)}
.fp-btn svg{width:15px;height:15px;margin-left:auto;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.fp-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.fp-cur{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fp-mark{
  width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
}
.fp-mark img{width:100%;height:100%;object-fit:contain}
.fp-mark span{font-family:var(--font-b);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--gold-soft)}

.fp-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,4,6,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.72);
}
.fp-search{
  width:100%;padding:12px 16px;border:none;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);color:#fff;
  font-family:var(--font-b);font-size:12px;letter-spacing:.06em;outline:none;
}
.fp-search::placeholder{color:rgba(255,255,255,.5)}
.fp-search:focus{border-bottom-color:var(--gold);background:rgba(239,35,60,.05)}
.fp-list{list-style:none;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.fp-list li{
  display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;
  font-size:13px;color:rgba(255,255,255,.85);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.fp-list li:hover,.fp-list li.at{background:rgba(239,35,60,.10);color:#fff}
.fp-list li.at{box-shadow:inset 2px 0 0 var(--gold)}
.fp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-case{
  flex-shrink:0;font-family:var(--font-b);font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.58);
}
.fp-none{padding:18px 16px;font-size:12.5px;color:rgba(255,255,255,.6)}
/* the modal scrolls, so the open panel must not be clipped by a short dialog */
#modalBack .modal{overflow:visible}
@media (max-height:760px){
  #modalBack .modal{overflow-y:auto}
  .fp-list{max-height:200px}
}


/* ==================================================================
   MODERATION (#view-admin) — the panel moved in from admin.html and
   picks up the Lumina skin here instead of carrying its own violet
   stylesheet. Prefixed .ad-* so nothing collides with the public views.
   ================================================================== */
.ad-wrap{padding:150px 0 110px;min-height:100svh}
.ad-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px}
.ad-head h2{margin-bottom:10px}
.ad-sub{font-family:var(--font-s);font-style:italic;font-weight:400;font-size:18px;color:rgba(255,255,255,.62)}

/* ---- the gate ---- */
.ad-gate{
  border:1px solid transparent;padding:clamp(28px,4vw,44px);
  background:var(--glass) padding-box,var(--edge) border-box;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-width:620px;
}
.ad-gate h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.ad-gate p{font-family:var(--font-s);font-style:italic;font-weight:400;font-size:17px;
  color:rgba(255,255,255,.62);margin-bottom:26px;line-height:1.6}
.ad-gate b{color:var(--gold-soft);font-style:normal;font-weight:400}

/* ---- tabs ---- */
.ad-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);padding:6px}
.ad-tab{
  padding:11px 20px;font-family:var(--font-b);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.68);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.ad-tab:hover{color:#fff}
.ad-tab[aria-pressed="true"]{background:var(--grad);color:#000}
.ad-tab .n{font-variant-numeric:tabular-nums;opacity:.7;margin-left:4px}

/* ---- cards, tables, states ---- */
.ad-card{
  border:1px solid transparent;padding:26px;margin-bottom:16px;
  background:var(--glass) padding-box,var(--edge-soft) border-box;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.ad-card h3{font-family:var(--font-d);font-weight:400;font-size:19px;letter-spacing:-.01em;margin:14px 0 10px}
.ad-card p{color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.75;white-space:pre-wrap}
.ad-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ad-pill{
  font-family:var(--font-b);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 11px;border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
}
.ad-pill.complaint{color:#ff8296;border-color:rgba(255,65,96,.35)}
.ad-pill.review{color:#7dffd4;border-color:rgba(47,230,167,.32)}
.ad-pill.firm{color:var(--gold-soft);border-color:rgba(239,35,60,.34)}
.ad-when{margin-left:auto;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55);white-space:nowrap}
.ad-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ad-note{font-size:12px;color:rgba(255,255,255,.55);margin:6px 0 18px;line-height:1.65}

.act,.mini{
  font-family:var(--font-b);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:rgba(255,255,255,.85);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.act{font-size:10px;padding:12px 20px}
.mini{font-size:9px;padding:8px 12px}
.act:hover:not(:disabled),.mini:hover:not(:disabled){border-color:var(--gold);color:#fff;background:rgba(239,35,60,.08)}
.act.ok{background:var(--grad);border-color:transparent;color:#000}
.act.ok:hover:not(:disabled){box-shadow:0 0 30px rgba(239,35,60,.3);color:#000}
.act.no:hover:not(:disabled),.mini.no:hover:not(:disabled){border-color:var(--red);color:#ff8296;background:rgba(255,65,96,.08)}

/* Delete sits on every card including the two where it is the only button, so
   it is pushed to the far edge and left quiet until you reach for it: a
   takedown should never be the thing your eye lands on while deciding whether
   to approve, and it must not read as a third, equal-weight verdict. The
   general .act:hover above turns things gold, which is the site's "yes" —
   this overrides it to red. */
.act.del{margin-left:auto;border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.45)}
.act.del:hover:not(:disabled),.act.del:focus-visible:not(:disabled){
  border-color:var(--red);color:#ff8296;background:rgba(255,65,96,.08);
}
.act:disabled,.mini:disabled{opacity:.45;cursor:not-allowed}

.ad-table{width:100%;border-collapse:collapse;font-size:13px}
.ad-table th{
  text-align:left;padding:12px 14px;font-family:var(--font-b);font-size:9.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ad-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;color:rgba(255,255,255,.88)}
.ad-table tr:hover td{background:rgba(255,255,255,.02)}
.ad-table .mono{font-family:var(--font-b);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.ad-firm{display:flex;align-items:center;gap:12px}
.ad-logo{width:34px;height:34px;object-fit:contain;background:#0d0d0d;border:1px solid rgba(255,255,255,.08);padding:4px;flex-shrink:0}
.ad-rowact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ad-badge{
  font-family:var(--font-b);font-size:9px;font-weight:600;letter-spacing:.18em;
  padding:4px 9px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);
}
.ad-badge.ok{color:#7dffd4;border-color:rgba(47,230,167,.32)}
.ad-badge.warn{color:#ffd28a;border-color:rgba(255,182,72,.3)}
.ad-badge.off{color:rgba(255,255,255,.5)}

.ad-empty,.ad-err,.ad-warn,.ad-tool{
  padding:24px;border:1px dashed rgba(255,255,255,.12);color:rgba(255,255,255,.66);font-size:14px;line-height:1.7;
}
.ad-err{border-color:rgba(255,65,96,.4);color:#ff8296;background:rgba(255,65,96,.05)}
.ad-warn{border-color:rgba(255,182,72,.3);color:#ffd28a;background:rgba(255,182,72,.05);margin-bottom:18px}
.ad-tool{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;border-style:solid}
.ad-tool .mono{font-size:12px;color:rgba(255,255,255,.55)}

/* ---- the directory form ---- */
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ad-grid .df{display:flex;flex-direction:column;gap:7px}
.ad-grid .df.full{grid-column:1/-1}
.ad-grid label{font-family:var(--font-b);font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.ad-grid input,.ad-grid textarea{
  background:rgba(5,5,5,.7);border:1px solid rgba(255,255,255,.1);color:#fff;
  padding:12px 14px;font-family:var(--font-b);font-size:13px;outline:none;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.ad-grid input:focus,.ad-grid textarea:focus{border-color:var(--gold);background:rgba(12,10,6,.8)}
.ad-grid textarea{resize:vertical;line-height:1.6}
.ad-check{grid-column:1/-1;display:flex;align-items:center;gap:11px;font-size:13.5px;color:rgba(255,255,255,.85);
  text-transform:none;letter-spacing:.01em;font-weight:400}
.ad-check input{width:16px;height:16px;accent-color:#ef233c}
.ad-actions{display:flex;gap:10px;margin-top:24px}

/* the evidence a moderator is deciding on */
.ad-ev{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.ad-ev-tag{font-family:var(--font-b);font-size:9px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold)}
.ad-shot{width:92px;height:62px;overflow:hidden;border:1px solid rgba(255,255,255,.1);display:block;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.ad-shot img{width:100%;height:100%;object-fit:cover}
.ad-shot:hover{border-color:var(--gold);transform:translateY(-2px)}

#adToast{
  position:fixed;bottom:30px;left:50%;transform:translate(-50%,80px);z-index:950;
  background:rgba(8,8,8,.96);border:1px solid rgba(239,35,60,.4);color:var(--gold-soft);
  font-family:var(--font-b);font-size:12px;letter-spacing:.06em;padding:14px 26px;
  opacity:0;transition:.5s var(--ease);box-shadow:0 20px 60px rgba(0,0,0,.7);
}
#adToast.show{transform:translate(-50%,0);opacity:1}
#adToast.err{border-color:rgba(255,65,96,.45);color:#ff8296}

/* The moderator entry point. This was a hairline text link at the same
   size and weight as the nav items, sitting immediately left of the
   "<handle> · log out" control — so once the first moderator signed in
   with an email, the bar read as one run of text, "ADMIN
   ADMIN@PROPFIRMSHIELD.COM · LOG OUT", and the link stopped being
   findable at all. It is a button now: enclosed, tinted, with a live dot,
   so it cannot be mistaken for the label next to it. */
.nav-admin{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#ff8296;white-space:nowrap;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(239,35,60,.55);background:rgba(239,35,60,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:color .35s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.nav-admin::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--gold);box-shadow:0 0 8px var(--gold);
}
.nav-admin:hover{
  color:#fff;background:rgba(239,35,60,.28);border-color:rgba(239,35,60,.9);
  box-shadow:0 0 18px -4px rgba(239,35,60,.7);
}
/* the mobile menu is plain text links, so red alone is enough to separate it */
#mobileMenu [data-adminlink]{color:#ff8296}
#mobileMenu [data-adminlink]:hover{color:#fff}

@media (max-width:860px){
  .ad-wrap{padding:120px 0 80px}
  .ad-grid{grid-template-columns:1fr}
  .ad-table{font-size:12px}
  .ad-table td,.ad-table th{padding:10px 8px}
  .ad-rowact{justify-content:flex-start}
}


/* ==================================================================
   MOBILE LEGIBILITY
   Contrast is the same everywhere, but size is not: the ultra-tracked
   10px labels that read as precise on a desktop are simply small on a
   375px screen, and several of them are things you tap. Decorative
   marks — kickers, flag numbers, status pills — keep their character;
   anything you read or press gets lifted.
   ================================================================== */
@media (max-width:760px){
  .btn{font-size:12px;padding:16px 28px}
  .btn-sm{font-size:11.5px;padding:12px 20px}
  .btn-play{font-size:12px}
  #view-home .tab,.seg button{font-size:11.5px;padding:12px 18px}
  .ad-tab{font-size:11.5px;padding:12px 16px}
  .loader-txt{font-size:11px}
  .ht-label,.ht-note,.ht-right a{font-size:11.5px}
  /* card metadata people actually read */
  .case-id,.flag-num{font-size:12px}
  .case-reports,.tick{font-size:13px}
  .tag,.rep-flag{font-size:11.5px}
  .fp-case,.ev-name em{font-size:11px}
  .foot-col a,.foot-bottom{font-size:13.5px}
  .disclaimer{font-size:12.5px;line-height:1.75}
  /* the firm directory is a table of numbers read on a phone: the rule
     labels ship at 9px, which is a squint on a 375px screen */
  .fc-stat span,.fc-tl{font-size:10.5px}
  .fc-stat b{font-size:14.5px}
  .fc-meta,.fc-norate{font-size:11.5px}
  .fc-tp{font-size:10.5px}
  .fc-tg .fc-tw span{font-size:11px}
}

/* Placed here, after .fc-rating and .fc-tp are defined above, because these
   carry the same specificity and source order is what decides. An identical
   block sitting earlier in the file lost silently and the overflow stayed. */
@media (max-width:480px){
  /* The Trustpilot chip is nowrap so it reads as one unit, but "Trustpilot
     suspended" cannot fit one line on a 320px phone: it measured 140px inside
     a 201px rating column and pushed the card off the screen. Below 480 it
     wraps, and the rating column shrinks with everything else. */
  .fc-tp{white-space:normal}
  .fc-rating{flex-shrink:1;min-width:0}
}

/* ===================================================================
   LEGAL — privacy policy and terms

   Long-form prose, which nothing else on this site is. The global h1/h2
   are uppercase display type sized for landing sections and are far too
   loud at document length, so headings are re-scaled here rather than
   fought with inline styles.

   Measure is capped at 74ch. Legal text is the one thing on the site
   people actually have to read start to finish.
   =================================================================== */
.legal-hero{padding:150px 0 60px;position:relative}
.legal-hero h1{font-size:clamp(30px,4vw,50px)}
.legal-body{padding:20px 0 120px;position:relative}
.legal-doc{max-width:74ch}

.legal-doc h2{
  font-family:var(--font-d);font-size:17px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand2);
  margin:52px 0 18px;padding-top:22px;border-top:1px solid var(--line);
}
.legal-doc > h2:first-of-type{margin-top:34px}
.legal-doc h3{
  font-family:var(--font-d);font-size:15px;font-weight:600;
  letter-spacing:.05em;color:#fff;margin:28px 0 10px;
}
.legal-doc p{color:var(--muted);font-size:15.5px;line-height:1.78;margin-bottom:16px}
.legal-doc ul{list-style:none;margin:0 0 18px;padding:0}
.legal-doc li{
  color:var(--muted);font-size:15.5px;line-height:1.72;
  padding-left:22px;margin-bottom:11px;position:relative;
}
.legal-doc li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--brand);
}
.legal-doc b{color:var(--text);font-weight:600}
.legal-doc a{color:var(--brand2);text-decoration:underline;text-underline-offset:3px}
.legal-doc a:hover{color:#fff}
.legal-doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--brand2);background:rgba(239,35,60,.09);padding:1px 6px;
}

/* Unfinished passages. Deliberately NOT gold — gold is the brand colour
   and a placeholder rendered in it disappears into the page. These have
   to be impossible to publish by accident. */
.legal-todo{
  color:#ffb4a8;background:rgba(255,90,70,.12);
  border-bottom:1px dashed rgba(255,90,70,.55);
  padding:1px 6px;font-style:normal;
}
.legal-draft{
  border:1px solid rgba(255,90,70,.4);background:rgba(255,90,70,.08);
  padding:18px 20px;margin-bottom:8px;
}
.legal-draft,.legal-draft b{color:#ffc9c0}
.legal-warn{
  border-left:2px solid var(--brand);background:rgba(239,35,60,.07);
  padding:16px 20px;margin:4px 0 18px;
}
.legal-warn,.legal-warn b{color:var(--brand2)}

@media (max-width:760px){
  .legal-hero{padding:120px 0 40px}
  .legal-doc h2{font-size:15px;margin-top:42px}
  .legal-doc p,.legal-doc li{font-size:15px}
}

/* ===================================================================
   PASSWORD REVEAL

   The button sits inside the field's border rather than beside it, so
   the input keeps its full width and the control cannot be mistaken
   for a second field. Icon swap is driven off aria-pressed, which means
   the accessible state and the visual state cannot drift apart.
   =================================================================== */
.pass-wrap{position:relative;display:block}
/* .modal's input rule is `.modal input:not(…):not(…):not(…)` with a padding
   shorthand, which outweighs a plain `.pass-wrap input` and resets the right
   padding to 16px — long passwords then run under the button. Carrying the
   same :not() chain plus one more beats it outright instead of relying on
   source order, and works outside .modal too. */
.pass-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){
  width:100%;padding-right:48px;
}
.pass-eye{
  position:absolute;right:1px;top:1px;bottom:1px;width:46px;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--dim);transition:color .3s;
}
.pass-eye:hover{color:var(--brand2)}
.pass-eye svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.pass-eye .i-hide{display:none}
.pass-eye[aria-pressed="true"]{color:var(--brand2)}
.pass-eye[aria-pressed="true"] .i-show{display:none}
.pass-eye[aria-pressed="true"] .i-hide{display:block}

/* ---------- moderator search ----------
   The one place the panel takes typed input rather than showing a table.
   Wraps on narrow screens so the button never gets pushed off the card. */
.ad-search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ad-search input{
  flex:1 1 260px;min-width:0;
  background:rgba(5,5,5,.8);border:1px solid var(--line2);border-radius:0;
  padding:12px 14px;font-size:14px;color:var(--text);
}
.ad-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(239,35,60,.14);outline:none}
.ad-search .act{flex:0 0 auto}

/* ═══════════════════════════════════════════════════════════════════════
   NOIR LAYER

   Ported from a red-on-black reference landing page. Two things were
   carried over deliberately and one was not:

     * KEPT — the structure and the treatments: a floating pill navbar,
       the badge / headline / two-button hero stack, a conic-gradient
       border that rotates on the primary CTA, a bento feature grid, a
       full-bleed accent band, and an outlined wordmark the width of the
       footer.
     * KEPT — rounded geometry. The rest of this stylesheet is square
       (--r:0) and this layer is not, because the pill nav and the pill
       badge are most of what makes the reference read the way it does.
       It is scoped to the elements below rather than done by changing
       --r, which would silently reshape the admin panel, the directory
       table and every modal.
     * NOT KEPT — the colour. #ef233c is replaced by the existing gold
       throughout; red survives only where this site already used it, as
       the warning colour. The logo is untouched.

   This layer is last in the file on purpose: it overrides by source
   order, so nothing above it had to be edited or deleted.
   ═══════════════════════════════════════════════════════════════════════ */

@property --ga { syntax:"<angle>"; initial-value:0deg; inherits:false }

@keyframes noir-spin  { to { --ga:360deg } }
@keyframes noir-drift { from { transform:translateY(0) } to { transform:translateY(-2000px) } }
@keyframes noir-ping  { 75%,100% { transform:scale(2.4); opacity:0 } }

/* ---------- background ------------------------------------------------
   Four painted layers replacing the tube canvas. All are static; the only
   thing that moves is the star drift, which is a transform, so the page
   composites without a per-frame repaint. */
.noir-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nb-wash{position:absolute;inset:0;background:linear-gradient(180deg,#150f04 0%,#080808 42%,#050505 100%)}
.nb-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 38%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 32%,#000 38%,transparent 78%);
}
.nb-glow{
  position:absolute;top:46%;left:50%;width:860px;height:860px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(239,35,60,.075),transparent 68%);filter:blur(90px);
}
.nb-stars{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;border-radius:50%}
.nb-stars.s1{
  animation:noir-drift 90s linear infinite;
  box-shadow:234px 124px rgba(255,255,255,.5),654px 345px rgba(255,122,141,.42),876px 12px rgba(255,255,255,.35),
             1200px 800px rgba(255,255,255,.4),400px 1500px rgba(255,122,141,.3),1800px 200px rgba(255,255,255,.3),
             100px 1000px rgba(255,255,255,.45),900px 1900px rgba(255,122,141,.35),500px 600px rgba(255,255,255,.3),
             1400px 100px rgba(255,255,255,.4),300px 400px rgba(255,122,141,.3),1600px 1200px rgba(255,255,255,.35);
}
.nb-stars.s2{
  width:2px;height:2px;animation:noir-drift 140s linear infinite;
  box-shadow:123px 456px rgba(239,35,60,.32),789px 234px rgba(255,255,255,.28),456px 890px rgba(255,122,141,.3),
             1100px 300px rgba(255,255,255,.22),200px 1200px rgba(239,35,60,.26),1500px 500px rgba(255,255,255,.24),
             600px 1700px rgba(255,122,141,.28),1300px 900px rgba(255,255,255,.2);
}
.nb-topfade{
  position:fixed;inset:0 0 auto 0;height:130px;z-index:40;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
          mask-image:linear-gradient(to bottom,#000,transparent);
}
@media (prefers-reduced-motion:reduce){ .nb-stars{animation:none} }

/* ---------- floating pill navbar --------------------------------------
   The bar is no longer full-bleed; it is a capsule with its own border,
   so nav's job shrinks to positioning it. The scrolled state now changes
   the capsule, not the strip behind it. */
nav{background:transparent;border-bottom-color:transparent;padding:22px 16px}
nav.scrolled{background:transparent;border-bottom-color:transparent}
.nav-inner{
  width:min(1120px,100%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  background:rgba(6,6,6,.62);border:1px solid rgba(255,255,255,.09);border-radius:999px;
  padding:11px 12px 11px 22px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.9);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
nav.scrolled .nav-inner{background:rgba(4,4,4,.86);border-color:rgba(239,35,60,.24)}
.nav-links{gap:30px}
.nav-cta{gap:14px}

/* Nav CTA: a conic sweep that only exists on hover, over a black core. */
.btn-sheen{
  --ga:0deg;position:relative;display:inline-flex;isolation:isolate;
  border-radius:999px;padding:1px;overflow:hidden;text-decoration:none;
  background:rgba(255,255,255,.07);
  transition:transform .3s var(--ease);
}
.btn-sheen::before{
  content:"";position:absolute;inset:-120%;opacity:0;
  background:conic-gradient(from var(--ga),transparent 0 72%,var(--gold) 88%,var(--gold-soft) 100%);
  transition:opacity .45s var(--ease);
}
.btn-sheen:hover::before,.btn-sheen:focus-visible::before{opacity:1;animation:noir-spin 2.6s linear infinite}
.btn-sheen>span{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  background:#070707;border-radius:999px;padding:10px 20px;
  font-family:var(--font-b);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
.btn-sheen svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease)}
.btn-sheen:hover svg{transform:translateX(3px)}
.btn-sheen:active{transform:scale(.97)}

/* The pill hides .nav-links and .nav-cta .btn below 1020, but the Submit CTA
   is .btn-sheen — not .btn — so it was never hidden. On a phone the pill's
   contents measured 503px inside a 271px capsule, and Submit hung off the
   right edge with body{overflow-x:hidden} making it unreachable rather than
   scrollable. Exactly the class-name gap that once kept the Admin link
   visible to everyone.
   Placed after the rule above on purpose: both are one class deep, so source
   order decides and an earlier block would lose silently. */
@media (max-width:640px){
  .nav-cta .btn-sheen{display:none}
}
/* Below 400 the capsule's 22px left inset is the difference between the
   moderator bar fitting comfortably and fitting by exactly nothing. */
@media (max-width:400px){
  .nav-inner{padding-left:14px;gap:14px}
}
/* At 320 even that is not enough: brand + Admin pill + burger wants 324px in
   a 288px capsule, so the pill hangs off the edge for signed-in moderators
   (a visitor's bar fits at every width). The Admin link is in the burger menu
   too, so what is lost here is the shortcut, not the route. */
@media (max-width:359px){
  .nav-cta .nav-admin{display:none}
}

/* ---------- hero ------------------------------------------------------ */
#hero .hero-bg .grid-bg,#hero .orb{display:none}   /* the page background owns this now */

.hero-badge{
  border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  gap:9px;padding:7px 15px;
}
.hero-badge .dot{position:relative;background:var(--gold);box-shadow:none;animation:none}
.hero-badge .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold-soft);
  animation:noir-ping 1.9s cubic-bezier(0,0,.2,1) infinite;
}
.hero-badge .hb-arrow{width:12px;height:12px;fill:none;stroke:var(--gold);stroke-width:2;opacity:.8}

/* Headline: white fading to translucent the way the reference does it,
   with the operative phrase held at full gold so it survives the fade. */
#hero h1{letter-spacing:-.03em}
#hero h1 .h1-line{
  display:block;
  background:linear-gradient(180deg,#fff 0%,#fff 52%,rgba(255,255,255,.42) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#hero h1 .h1-mark{
  position:relative;display:inline-block;
  -webkit-text-fill-color:var(--gold);color:var(--gold);
}
.h1-swoosh{
  position:absolute;left:0;bottom:-.1em;width:100%;height:.14em;
  color:var(--gold);opacity:.55;overflow:visible;
}

.cta-shiny{
  --ga:0deg;position:relative;display:inline-flex;isolation:isolate;
  border-radius:999px;padding:2px;overflow:hidden;text-decoration:none;
  background:conic-gradient(from var(--ga),transparent 0 4%,var(--gold-dark) 10%,var(--gold) 22%,var(--gold-soft) 30%,transparent 42%,transparent 100%);
  animation:noir-spin 3s linear infinite;
  transition:transform .3s var(--ease),filter .4s var(--ease);
}
.cta-shiny>span{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  background:#060606;border-radius:999px;padding:16px 34px;
  font-family:var(--font-b);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.cta-shiny>span::before{
  content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) .5px,transparent 0);
  background-size:4px 4px;opacity:.09;
}
.cta-shiny svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease)}
.cta-shiny:hover{filter:drop-shadow(0 0 22px rgba(239,35,60,.35))}
.cta-shiny:hover svg{transform:translateX(4px)}
.cta-shiny:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .cta-shiny{animation:none;background:var(--grad)} }

.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  padding:16px 30px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-b);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.cta-ghost svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.cta-ghost:hover{color:#fff;border-color:var(--line2);background:rgba(239,35,60,.07)}

/* Fact strip — the reference's logo wall, carrying numbers instead of logos. */
.hero-strip{
  width:100%;margin-top:76px;padding:22px 0;
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.014);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:.72;transition:opacity .5s var(--ease);
}
.hero-strip:hover{opacity:1}
.hs-label{
  width:min(1180px,92%);margin:0 auto 14px;
  font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
}
.hs-items{width:min(1180px,92%);margin-inline:auto;display:flex;flex-wrap:wrap;gap:16px 46px}
.hs-item{
  display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;
  font-family:var(--font-b);font-size:13.5px;color:var(--muted);
  transition:color .4s var(--ease);
}
.hs-item b{font-family:var(--font-d);font-size:21px;font-weight:700;color:var(--gold-soft);letter-spacing:-.02em}
.hs-item:hover{color:#fff}

/* ---------- bento ----------------------------------------------------- */
@media (min-width:900px){
  .flags-grid.bento{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(178px,auto);
    gap:16px;
  }
  .flags-grid.bento .b-lg{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
  .flags-grid.bento .b-lg h3{font-size:29px}
  .flags-grid.bento .b-lg p{font-size:16.5px;line-height:1.7;max-width:46ch}
  .flags-grid.bento .b-wide{grid-column:span 2}
  .flags-grid.bento .b-full{grid-column:1 / -1}
}
.flags-grid.bento .flag-card{border-radius:14px;overflow:hidden;position:relative}
.flags-grid.bento .flag-card::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at top right,rgba(239,35,60,.5),transparent 68%);
  transition:opacity .5s var(--ease);
}
.flags-grid.bento .flag-card:hover::after{opacity:.1}
.flags-grid.bento .flag-icon{border-radius:10px}

/* ---------- statement band ------------------------------------------- */
.statement-band{position:relative;z-index:1;background:var(--grad);padding:88px 24px}
.sb-inner{max-width:900px;margin-inline:auto;text-align:center}
.sb-mark{
  width:52px;height:52px;margin:0 auto 26px;border-radius:50%;background:#070707;
  display:grid;place-items:center;
}
.sb-mark img{width:26px;height:26px;object-fit:contain}
.statement-band blockquote{
  margin:0 0 26px;font-family:var(--font-d);font-weight:700;
  font-size:clamp(26px,3.6vw,46px);line-height:1.22;letter-spacing:-.025em;color:#0a0a0a;
}
.sb-by{display:flex;align-items:center;justify-content:center;gap:14px}
.sb-line{width:44px;height:1px;background:rgba(0,0,0,.4)}
.sb-by span:last-child{
  font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(0,0,0,.66);
}

/* ---------- footer wordmark ------------------------------------------ */
.foot-wordmark{
  display:flex;justify-content:center;padding:44px 0 30px;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);
          mask-image:linear-gradient(to bottom,#000 30%,transparent);
}
.foot-wordmark span{
  font-family:var(--font-d);font-weight:700;font-size:12.4vw;line-height:.86;letter-spacing:-.045em;
  white-space:nowrap;color:transparent;
  -webkit-text-stroke:1px rgba(239,35,60,.22);
}

@media (max-width:760px){
  .nav-inner{padding:10px 10px 10px 16px}
  .hero-strip{margin-top:52px}
  .hs-items{gap:14px 26px}
  .hs-item b{font-size:18px}
  .statement-band{padding:60px 20px}
  .foot-wordmark{padding:26px 0 18px}
  .foot-wordmark span{font-size:15vw;-webkit-text-stroke-width:.75px}
}

/* #hero is a row flexbox, so a block-level child of it becomes a sibling
   COLUMN rather than a band underneath — the strip took half the hero's
   width and squeezed .wrap from 1164px to 599px. The old chip rail escaped
   this by being absolutely positioned; the strip is in flow on purpose, so
   it has to claim a row of its own instead. */
#hero{flex-direction:column;justify-content:center;flex-wrap:nowrap}
#hero>.wrap{flex:0 0 auto;width:min(1180px,92%)}
#hero .hero-strip{flex:0 0 auto;align-self:stretch}

/* The anchor tile spans two rows, so its height is set by the two cards
   stacked beside it — not by its own content. Ported straight, it held
   208px of content in a 543px box and read as broken. The reference fills
   the same shape two ways and both are needed: a paragraph long enough to
   occupy the width, and a link pinned to the bottom with margin-top:auto.
   With something anchoring the floor, the space between becomes deliberate
   breathing room instead of a void. */
.flags-grid.bento .b-lg{padding:38px;justify-content:flex-start}
.flags-grid.bento .b-lg h3{margin-bottom:14px}
.flags-grid.bento .b-lg>p{margin-bottom:26px}
.b-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--font-b);font-weight:700;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-soft);text-decoration:none;
  padding-top:20px;border-top:1px solid rgba(239,35,60,.16);width:100%;
  transition:color .4s var(--ease);
}
.b-more svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ease)}
.flags-grid.bento .b-lg:hover .b-more{color:#fff}
.flags-grid.bento .b-lg:hover .b-more svg{transform:translateX(4px)}

/* ── HERO CORRECTIONS ─────────────────────────────────────────────────
   Three faults visible only once the page was actually rendered rather
   than measured:

   1. The Aegis shield sat ABOVE the headline as a tall stacked block,
      pushing the badge and type down and reading as a logo floating in
      the void. The reference hero is type-only, and the same mark is
      already in the navbar directly above it, so it is hidden here
      rather than shrunk — a smaller version of a redundant thing is
      still redundant. It still renders everywhere else it is used.

   2. The white-to-translucent headline fade ran per line, and at ~100px
      a line that is 42% opaque at its baseline loses its bottom half
      against black. "before you" was barely legible. The floor moves to
      62% and the fade starts later, which keeps the effect and returns
      the text.

   3. The rotating conic ring on the primary CTA showed one thin arc at
      any given frame, so a still frame read as a stray line rather than
      a border. A permanent dim ring now sits under the sweep, so the
      edge is always complete and the sweep is a highlight travelling
      around it.
   ─────────────────────────────────────────────────────────────────── */

#view-home .hero-visual{display:none}
#view-home .hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
#view-home .hero-copy{max-width:900px}

#hero h1{font-size:clamp(38px,6.4vw,84px);line-height:1.06}
#hero h1 .h1-line{
  background:linear-gradient(180deg,#fff 0%,#fff 68%,rgba(255,255,255,.62) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.h1-swoosh{bottom:-.06em;opacity:.7}

.cta-shiny{
  background:
    conic-gradient(from var(--ga),transparent 0 6%,var(--gold-dark) 12%,var(--gold) 24%,var(--gold-soft) 32%,transparent 46%,transparent 100%),
    linear-gradient(rgba(239,35,60,.34),rgba(239,35,60,.34));
}

/* ── BACKGROUND: match the reference's numbers ────────────────────────
   The first pass kept the reference's four layers but not its values,
   and the differences all pushed the same way — toward flat black. The
   wash reached near-black by 42% so the tint never showed, the grid was
   44px at .028 instead of 40px at .03, and the glow was blurred less
   over a wider area, which spreads it too thin to read.

   These are the reference's own numbers, with #1a0505 swapped for its
   gold equivalent: one wash running the full height, a 40px lattice
   masked from 40% to 80%, and an 800px glow at 120px blur dead centre. */
.nb-wash{background:linear-gradient(180deg,#1a1205 0%,#0a0803 38%,#000 100%)}
.nb-grid{
  background-size:40px 40px;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(circle at center,#000 40%,transparent 80%);
          mask-image:radial-gradient(circle at center,#000 40%,transparent 80%);
}
.nb-glow{
  top:50%;width:800px;height:800px;
  background:radial-gradient(circle,rgba(239,35,60,.09),transparent 70%);
  filter:blur(120px);
}

/* ── THE MARK IS BACK, AS A CREST ─────────────────────────────────────
   Hiding it was too blunt. The problem was never that it existed, it
   was that at 520px of stacked height it pushed the badge and headline
   down the viewport and read as a logo adrift. Restored above the badge
   at crest scale: present, clearly the site's mark, and not competing
   with the type for the first thing you look at. */
#view-home .hero-visual{
  display:flex;order:-1;min-height:0;width:100%;
  margin:0 0 clamp(14px,2vw,26px);
}
#view-home .hv-stage{height:clamp(96px,11vw,150px);--s:.34}

/* ── RISK FILES: the empty state, and the filter tabs ─────────────────
   .cases-grid is repeat(auto-fill,minmax(330px,1fr)), so the empty-state
   paragraph was laid out as a single 330px grid cell — a small dashed box
   pinned to the left under a full-width heading. With no case files
   published, that empty state IS the section, so it has to span. */
.cases-none{
  grid-column:1 / -1;
  padding:72px 28px;border-radius:14px;
  border:1px dashed rgba(239,35,60,.24);
  background:rgba(255,255,255,.015);
  font-size:15px;color:var(--muted);
}

/* Tabs read as loose text next to the pill language everywhere else. */
#view-home .tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#view-home .tab{
  border-radius:999px;padding:9px 20px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);
  font-family:var(--font-b);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
#view-home .tab:hover{color:#fff;border-color:var(--line2)}
#view-home .tab.active{
  color:#0a0a0a;background:var(--grad);border-color:transparent;
}

/* The section head is left-aligned but its own grid is centred content,
   so centre the head too — otherwise the heading and the panel below it
   sit on two different axes. */
#cases .section-head{text-align:center}
#cases .section-head .section-sub{margin-inline:auto}

/* The tab rules above share specificity with the originals at #view-home
   .tabs and won only on source order — which held in one browser and not
   in a clean profile. Restated with the section id so they cannot lose a
   tie, and repeated in full so this block alone is sufficient. */
#view-home #cases .tabs{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  border:0;background:none;padding:0;margin:0 0 40px;
}
#view-home #cases .tab{
  border-radius:999px;padding:10px 22px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
  font-family:var(--font-b);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.62);box-shadow:none;
}
#view-home #cases .tab:hover{color:#fff;border-color:var(--line2);background:rgba(239,35,60,.08)}
#view-home #cases .tab.active{
  color:#0a0a0a;background:var(--grad);border-color:transparent;box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════════════════
   RED NOIR — the reference's own background, verbatim

   The accent swap above is mechanical: every gold literal in this file
   became its red counterpart, so the three brand stops keep their
   relationship instead of flattening to one colour.
       #e8d0a3 -> #ff7a8d   light
       #c5a059 -> #ef233c   accent  (the reference's own value)
       #b8860b -> #c81e3c   deep
   The --gold* variable NAMES are left alone deliberately: renaming them
   would touch several hundred call sites for no rendered difference, and
   a rename is a worse diff to review than a value change.

   Below are the four background layers set to the reference's literal
   values rather than approximations of them.
   ═══════════════════════════════════════════════════════════════════════ */

/* from-[#1a0505] to-black */
.nb-wash{background:linear-gradient(to bottom,#1a0505,#000)}

/* w-[800px] h-[800px] bg-red-600/5 blur-[120px], centred */
.nb-glow{
  top:50%;left:50%;width:800px;height:800px;
  background:rgba(220,38,38,.05);border-radius:50%;filter:blur(120px);
}

/* The reference's two star layers, box-shadow for box-shadow: white, full
   opacity, 1px and 2px, drifting -2000px over 50s and 80s. */
.nb-stars.s1{
  width:1px;height:1px;animation:noir-drift 50s linear infinite;
  box-shadow:234px 124px #fff, 654px 345px #fff, 876px 12px #fff, 1200px 800px #fff,
             400px 1500px #fff, 1800px 200px #fff, 100px 1000px #fff, 900px 1900px #fff,
             500px 600px #fff, 1400px 100px #fff, 300px 400px #fff, 1600px 1200px #fff;
}
.nb-stars.s2{
  width:2px;height:2px;animation:noir-drift 80s linear infinite;
  box-shadow:123px 456px #fff, 789px 234px #fff, 456px 890px #fff, 1100px 300px #fff,
             200px 1200px #fff, 1500px 500px #fff, 600px 1700px #fff, 1300px 900px #fff;
}

/* bg-[linear-gradient(rgba(255,255,255,0.03)...)] bg-[size:40px_40px]
   [mask-image:radial-gradient(circle_at_center,black_40%,transparent_80%)] */
.nb-grid{
  background-size:40px 40px;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(circle at center,#000 40%,transparent 80%);
          mask-image:radial-gradient(circle at center,#000 40%,transparent 80%);
}

/* The reference's banner is a flat fill, not a gradient. */
.statement-band{background:#ef233c}
.statement-band blockquote,.sb-by span:last-child{color:#0a0a0a}
.sb-by span:last-child{color:rgba(0,0,0,.66)}

/* ::selection is red in the reference too. */
::selection{background:#ef233c;color:#fff}

/* ── CARD SURFACES STAY NEUTRAL ───────────────────────────────────────
   The accent swap turned --card from rgba(197,160,89,.045) into the red
   equivalent, so every card surface picked up a red wash. The reference
   does the opposite: its tiles are neutral (from-zinc-900/50 to-black,
   or flat black) and red appears only on the icon, the border on hover,
   and the corner glow. A red fill on every card flattens that contrast
   and makes the section read as one muddy block instead of tiles.

   Surfaces go back to neutral. The accent stays where the reference puts
   it — icons, hover borders, the corner wash. */
.flags-grid.bento .flag-card{
  background:linear-gradient(180deg,rgba(24,24,27,.5),#000);
  border-color:rgba(255,255,255,.1);
}
.flags-grid.bento .flag-card:not(.b-lg){background:#050505}
.flags-grid.bento .flag-card:hover{border-color:rgba(255,255,255,.2)}
.flags-grid.bento .flag-card::before{opacity:.28}
.flags-grid.bento .flag-card::after{
  background:radial-gradient(circle at top right,#ef233c,transparent 70%);
}
.flags-grid.bento .flag-icon{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.trust-card{background:#050505;border-color:rgba(255,255,255,.09)}

/* ── FOOTER WORDMARK: SIZED TO FIT, NOT GUESSED ───────────────────────
   12.4vw was carried over from the reference, whose wordmark is eleven
   characters. "PROPFIRM SHIELD" is fifteen, so at 1440 it rendered
   1370px wide inside an 1180px container and got clipped at both ends.

   Measured rather than eyeballed: at font-size 100px the string is 714px
   across at this weight and letter-spacing, so it fits when

       font-size = container / 8.151

   measured off the real element, not a probe: letter-spacing is -.045em,
   so it scales with the font size and an absolute value copied from a
   different size gives the wrong ratio (that mistake produced 7.14 and
   still overflowed by 48px).

   THE RATIO IS FONT-SPECIFIC. 7.675 was Space Grotesk 700; Manrope 800
   is 8.151, and switching the typeface re-broke this by 67px. If the
   display face changes again, re-measure: render the element, divide its
   width by its computed font-size, and put the result here.

   The container is min(1180px, 92vw), so that is 144px at wide widths and
   11.28vw below 1283px. Used at full value rather than backed off, so the
   wordmark's edges line up with the footer columns above it instead of
   floating 18px inside them. overflow:hidden absorbs the few pixels a
   fallback font would add.

   overflow:hidden is the backstop, not the fix — it stops a missing font
   from producing a horizontal scrollbar on the whole page. */
.foot-wordmark{overflow:hidden}
.foot-wordmark span{font-size:min(11.28vw,144px)}
@media (max-width:760px){
  /* the formula above is already fluid, so the old 15vw override only
     reintroduced the overflow on the narrowest screens */
  .foot-wordmark span{font-size:11.28vw;-webkit-text-stroke-width:.75px}
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPE — the reference's pairing

   Space Grotesk Light and an italic Crimson Pro subtitle are why the
   hero read thin and literary beside the reference. The reference sets
   its headline in Manrope at 600 with tracking-tighter, and every line
   of body copy in Inter — no serif and no italic anywhere.

       --font-d  Space Grotesk -> Manrope
       --font-b  Public Sans   -> Inter
       --font-m  Public Sans   -> Inter
       --font-s  Crimson Pro   -> Inter      (the serif slot is retired;
                                              the token stays so the ~40
                                              call sites keep resolving)

   The rules below carry the weights and tracking, which the token swap
   alone does not: a family change with the old weights still renders
   light text.
   ═══════════════════════════════════════════════════════════════════════ */

/* text-6xl md:text-8xl font-semibold tracking-tighter leading-[1.1] */
#hero h1{font-weight:600;letter-spacing:-.045em;line-height:1.1}

/* text-xl md:text-2xl text-zinc-400 leading-relaxed — upright, not italic */
.hero-sub,#view-home .hero-sub{
  font-family:var(--font-b);font-style:normal;font-weight:400;
  font-size:clamp(17px,1.55vw,22px);line-height:1.62;
  color:rgba(161,161,170,1);          /* zinc-400 */
  max-width:42rem;margin:26px auto 40px;
}
.hero-sub strong{color:#fff;font-weight:600;font-style:normal}

/* text-lg text-zinc-400 font-light */
.section-sub{
  font-family:var(--font-b);font-style:normal;font-weight:300;
  font-size:18px;line-height:1.65;color:rgba(161,161,170,1);
}

/* Manrope carries headings at 600-700; the old skin leaned on 200-300,
   which Manrope renders as a hairline. */
h1,h2,h3{font-family:var(--font-d);letter-spacing:-.03em}
#flags h2,#cases h2,#how h2,#trust h2,#faq h2,#join h2,.section-head h2{
  font-weight:600;letter-spacing:-.032em;
}
.flag-card h3,.trust-card h3,.step h3{font-weight:600;letter-spacing:-.015em}
.statement-band blockquote{font-weight:700;letter-spacing:-.03em}
.foot-wordmark span{font-weight:800}

/* Opening a case is a publishing act, not a moderation verdict, so it reads
   as its own thing rather than a third option beside Approve and Reject. */
.act.case{border-color:rgba(239,35,60,.34);color:#ff8296}
.act.case:hover:not(:disabled){border-color:var(--red);color:#fff;background:rgba(239,35,60,.12)}
.ad-table .mini{margin-left:8px}


/* ═══════════════════════════════════════════════════════════════════════
   HERO SPLASH — the Synapse hero effect, in red

   Ported from the Synapse spec: two radial pours behind the type and
   three ambient orbs drifting on long, offset loops, plus a shimmer on
   the accented word. Its violet (#8b5cf6) and cyan (#06b6d4) are
   replaced throughout by this site's #ef233c and #ff7a8d — the brief was
   the hero effect with a reddish splash, not a second accent colour.

   Everything here animates transform and opacity only, so the whole
   layer composites on the GPU and never triggers layout. It sits at
   z-index 0 inside #hero, which already establishes a stacking context,
   and it is pointer-events:none so it cannot eat a click on the CTA.

   Synapse specifies cubic-bezier(.23,1,.32,1) rather than a plain ease,
   and that is what the orbs use.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes hs-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(0,-20px,0) scale(1.05)}
}
@keyframes hs-shimmer{
  0%  {background-position:200% 50%}
  100%{background-position:-200% 50%}
}

#hero{position:relative;isolation:isolate}
.hero-splash{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Lift the content above the splash. .chip-rail is deliberately NOT in
   this list: it is position:absolute;inset:0 and giving it position:relative
   collapsed all four chips out of their corners and into the flow, on top
   of the CTAs. It only needs the z-index. */
#hero > .wrap,#hero > .hero-strip{position:relative;z-index:1}
#hero > .chip-rail{z-index:2}

/* The two pours. Top-centre is the strong one behind the headline; the
   left-centre wash is what stops the composition reading as a single
   symmetrical blob. */
.hs-pour{position:absolute;display:block;border-radius:50%}
.hs-top{
  top:-28%;left:50%;width:min(1100px,120vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(239,35,60,.40),rgba(239,35,60,.10) 42%,transparent 68%);
  filter:blur(90px);
}
.hs-left{
  top:18%;left:-16%;width:min(760px,90vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,122,141,.16),transparent 66%);
  filter:blur(110px);
}

/* Orbs. Different sizes, positions, durations and delays on purpose — an
   even cadence reads as a loop rather than as ambience. */
.orb{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;
  animation:hs-float var(--dur,11s) cubic-bezier(.23,1,.32,1) infinite;
  animation-delay:var(--dly,0s);
}
.orb-1{
  top:12%;left:12%;width:320px;height:320px;--dur:13s;--dly:0s;
  background:radial-gradient(circle,rgba(239,35,60,.30),transparent 70%);filter:blur(60px);
}
.orb-2{
  top:52%;right:8%;width:260px;height:260px;--dur:9s;--dly:1.4s;
  background:radial-gradient(circle,rgba(255,122,141,.26),transparent 70%);filter:blur(50px);
}
.orb-3{
  bottom:6%;left:44%;width:400px;height:400px;--dur:15s;--dly:.7s;
  background:radial-gradient(circle,rgba(200,30,60,.28),transparent 72%);filter:blur(80px);
}

/* Shimmer on the accented word. A 200% gradient slid across the glyphs,
   which is why background-size and background-position are both set —
   the word stays red at rest and a white highlight travels through it. */
#hero h1 .h1-mark{
  background:linear-gradient(90deg,#ef233c 0%,#ff7a8d 30%,#ffffff 46%,#ffffff 54%,#ff7a8d 70%,#ef233c 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:hs-shimmer 6s linear infinite;
}
/* The swoosh is a sibling SVG and must not inherit the clip. */
.h1-swoosh{color:#ef233c;-webkit-text-fill-color:currentColor}

@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  #hero h1 .h1-mark{animation:none;background-position:50% 50%}
}
@media (max-width:760px){
  .orb-1{width:200px;height:200px}
  .orb-2{width:170px;height:170px}
  .orb-3{width:240px;height:240px}
  .hs-top{filter:blur(60px)}
}