*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --canvas:#f5f5f5;
  --paper:#ffffff;
  --surface-alt:#fafafa;
  --ink:#0a0a0a;
  --ink-soft:#171717;
  --mid:#737373;
  --hairline:#e5e5e5;
  --ember:#e7000b;
  --red:#dc2626;
  --amber:#d97706;
  --green:#16a34a;
  --blue:#2563eb;

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r-sm:6px;
  --r-md:10px;
  --r-lg:18px;
  --r-xl:24px;

  --shadow-card:0 0 0 1px rgba(23,23,23,.05),0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}

html{font-size:14px;line-height:1.43;color:var(--ink);background:var(--canvas);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{max-width:1280px;margin:0 auto;padding:0 24px}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--mid)}

/* --- Typography --- */
.h-display{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-2.4px}
.h-lg{font-size:36px;font-weight:600;line-height:1.11;letter-spacing:-.9px}
.h-md{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.75px}
.h-sm{font-size:24px;font-weight:600;line-height:1.33;letter-spacing:-.6px}
.h-sub{font-size:18px;font-weight:600;line-height:1.56}
.text-lg{font-size:16px;line-height:1.5}
.text-body{font-size:14px;line-height:1.43}
.text-caption{font-size:12px;line-height:1.33;letter-spacing:.6px}
.text-muted{color:var(--mid)}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}

/* --- Layout --- */
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-48{gap:48px}
.wrap{flex-wrap:wrap}
.grid{display:grid}
.grid-brands{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

/* --- Header --- */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--hairline);margin-bottom:48px}
.brand-logo{font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.brand-tag{font-size:11px;font-weight:500;background:var(--ink-soft);color:var(--paper);padding:2px 8px;border-radius:var(--r-lg)}
.header-nav{display:flex;gap:24px;font-size:14px;font-weight:400}
.header-nav a{color:var(--mid)}
.header-nav a:hover{color:var(--ink)}

/* --- Hero --- */
.hero{text-align:center;padding:80px 0 64px;max-width:720px;margin:0 auto}
.hero h1{margin-bottom:12px}
.hero .sub{color:var(--mid);font-size:16px;line-height:1.5;margin-bottom:32px}

/* --- Search --- */
.search-box{position:relative;max-width:480px;margin:0 auto;display:flex;gap:8px}
.search-input{flex:1;padding:10px 16px;border:none;border-radius:var(--r-lg);font-size:14px;font-weight:400;background:var(--paper);color:var(--ink);outline:none;font-family:var(--font);box-shadow:var(--shadow-card)}
.search-input::placeholder{color:var(--mid)}
.search-input:focus{box-shadow:var(--shadow-card),0 0 0 1px var(--hairline)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--r-lg);font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;border:none;transition:opacity .15s;height:40px;white-space:nowrap}
.btn:hover{opacity:.85}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-secondary{background:var(--canvas);color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.btn-ghost{background:transparent;color:var(--mid);padding:8px 12px}
.btn-sm{height:32px;padding:4px 12px;font-size:13px}

/* --- Cards --- */
.card{background:var(--paper);border-radius:var(--r-xl);border:1px solid var(--hairline);box-shadow:var(--shadow-card);padding:20px}
.card-header{padding:20px 20px 0;margin:-20px -20px 16px;border-bottom:1px solid var(--hairline);padding-bottom:16px}
.card-header h2{font-size:14px;font-weight:600;letter-spacing:-.2px}

/* --- Brand Card Grid --- */
.brand-card{display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s}
.brand-card:hover{box-shadow:var(--shadow-card),0 4px 12px rgba(0,0,0,.06)}
.brand-card .brand-name{font-size:18px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.brand-card .brand-meta{font-size:12px;color:var(--mid);display:flex;gap:12px}
.brand-card .brand-preview{font-size:13px;color:var(--mid);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.brand-card{text-decoration:none;color:inherit}
a.brand-card:hover{color:inherit}

/* --- Brand logos --- */
.brand-card-name{display:flex;align-items:center;gap:10px}
.brand-card-logo{width:32px;height:32px;border-radius:var(--r-md);object-fit:contain;background:var(--canvas);border:1px solid var(--hairline);flex-shrink:0}
.brand-logo-img{width:56px;height:56px;border-radius:var(--r-lg);object-fit:contain;background:var(--paper);border:1px solid var(--hairline);flex-shrink:0}
.brand-hero-left{display:flex;align-items:center;gap:16px}

/* --- Brand Card Trust Badge --- */
.brand-card .card-trust{display:flex;align-items:center;justify-content:space-between}
.trust-mini{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.trust-mini .dot{width:8px;height:8px;border-radius:50%}
.trust-high{color:var(--green)}.trust-high .dot{background:var(--green)}
.trust-med{color:var(--amber)}.trust-med .dot{background:var(--amber)}
.trust-low{color:var(--red)}.trust-low .dot{background:var(--red)}

/* --- Badge --- */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-lg);font-size:12px;font-weight:500}
.badge-solid{background:var(--ink-soft);color:var(--paper)}
.badge-soft{background:var(--canvas);color:var(--ink-soft)}
.badge-outline{background:transparent;color:var(--ink);border:1px solid var(--hairline)}

/* --- Stat Block --- */
.stat-block{display:flex;flex-direction:column;gap:4px}
.stat-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--mid)}
.stat-value{font-size:30px;font-weight:600;letter-spacing:-.75px;color:var(--ink)}
.stats-row{display:flex;gap:48px;padding:24px 0 32px;flex-wrap:wrap}

/* --- Brief button row --- */
.brief-row{margin-bottom:40px}

/* --- Trust Score Badge --- */
.trust-badge{display:flex;flex-direction:column;align-items:center;gap:4px}
.trust-ring{width:72px;height:72px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.trust-ring svg{position:absolute;top:0;left:0}
.trust-num{font-size:22px;font-weight:600;z-index:1}
.trust-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--mid)}

/* --- Brand Hero --- */
.brand-hero{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}

/* --- Red Flag Radar --- */
.radar-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radar-bar{display:flex;flex-direction:column;gap:6px}
.radar-bar-label{display:flex;justify-content:space-between;font-size:13px}
.radar-bar-label .pct{font-weight:500}
.bar-track{height:6px;background:var(--canvas);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .4s}
.bar-red{background:var(--red)}
.bar-amber{background:var(--amber)}
.bar-green{background:var(--green)}
.bar-blue{background:var(--blue)}

/* --- Withdrawal Stats --- */
.wd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.wd-item{background:var(--canvas);border-radius:var(--r-lg);padding:20px 16px;text-align:center}
.wd-val{font-size:24px;font-weight:600;margin-bottom:4px;letter-spacing:-.4px}
.wd-lab{font-size:11px;color:var(--mid);line-height:1.4}

/* --- Before You Sign Up Checklist --- */
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.checklist li{display:flex;gap:12px;font-size:14px;line-height:1.6;align-items:flex-start}
.check-icon{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.check-icon svg{width:14px;height:14px}
.check-bad{background:#fee2e2}
.check-bad svg{stroke:#991b1b}
.check-warn{background:#fef3c7}
.check-warn svg{stroke:#92400e}
.check-ok{background:#dcfce7}
.check-ok svg{stroke:#166534}

/* --- Sentiment Timeline --- */
.timeline-wrap{position:relative;margin:0}
.timeline-wrap svg{display:block}

/* --- Competitor Comparison Cards --- */
.vs-card{display:flex;align-items:center;gap:16px;padding:16px;background:var(--canvas);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:box-shadow .15s}
.vs-card:hover{box-shadow:var(--shadow-card);color:inherit}
.vs-brand-name{font-size:15px;font-weight:600}
.vs-meta{font-size:12px;color:var(--mid)}
.vs-mid{font-size:12px;font-weight:500;color:var(--mid);background:var(--paper);padding:4px 10px;border-radius:var(--r-md)}
.vs-arrow{margin-left:auto;color:var(--mid);font-size:16px}

/* --- Questions --- */
.q-list{display:flex;flex-direction:column}
.q-item{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.q-item:last-child{border-bottom:none}
.q-score{font-size:13px;font-weight:500;color:var(--mid);min-width:36px;text-align:right}
.q-title{flex:1;font-size:14px;font-weight:400;line-height:1.5}
.q-link{font-size:12px;color:var(--mid);flex-shrink:0;padding:2px 8px;border-radius:var(--r-sm);border:1px solid var(--hairline)}
.q-link:hover{border-color:var(--mid);color:var(--ink)}
.q-type{font-size:11px;font-weight:500;color:var(--mid);background:var(--canvas);padding:1px 6px;border-radius:var(--r-sm);flex-shrink:0}

/* --- Pills (entities, phrases) --- */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-lg);font-size:13px;font-weight:400;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink)}
.pill .count{font-size:11px;color:var(--mid);font-weight:500}
.pill-accent{background:var(--ink-soft);color:var(--paper);border-color:transparent}
.pill-accent .count{color:rgba(255,255,255,.6)}

/* --- Table --- */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;padding:8px 12px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--mid);border-bottom:2px solid var(--hairline)}
.data-table td{padding:8px 12px;border-bottom:1px solid var(--hairline)}
.data-table tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto}

/* --- Breadcrumb --- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mid);margin-bottom:24px}
.breadcrumb a{color:var(--mid)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--hairline)}

/* --- Section --- */
.section{margin-bottom:48px}
.section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--mid);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.section-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.section-icon-red{background:#fee2e2;color:#dc2626}
.section-icon-amber{background:#fef3c7;color:#d97706}
.section-icon-green{background:#dcfce7;color:#16a34a}
.section-icon-blue{background:#dbeafe;color:#2563eb}
.section-icon-ink{background:var(--canvas);color:var(--ink)}

/* --- Brief button --- */
.brief-btn{transition:background .15s,color .15s}
.brief-btn.copied{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}

/* --- Footer --- */
.site-footer{border-top:1px solid var(--hairline);padding:48px 0 24px;margin-top:80px;display:flex;flex-direction:column;gap:8px;text-align:center}
.site-footer p{font-size:12px;color:var(--mid);line-height:1.5}

/* --- Empty state --- */
.empty{text-align:center;padding:48px 20px;color:var(--mid)}
.empty h2{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px}
.empty p{font-size:14px;margin-bottom:24px}

/* --- Responsive --- */
@media(max-width:768px){
  body{padding:0 16px}
  .hero{padding:48px 0 32px}
  .h-display{font-size:30px;letter-spacing:-.75px}
  .h-lg{font-size:24px;letter-spacing:-.6px}
  .stats-row{gap:24px}
  .stat-value{font-size:24px}
  .grid-brands{grid-template-columns:1fr}
  .site-header{margin-bottom:24px}
  .section{margin-bottom:32px}
  .radar-grid{grid-template-columns:1fr}
  .wd-grid{grid-template-columns:1fr}
  .brand-hero{flex-direction:column;gap:16px}
}
@media(max-width:480px){
  .search-box{flex-direction:column}
  .btn{width:100%}
}