:root{ --bg:#0b1020; --card:#11162a; --ink:#e8eefc; --muted:#a0acc7; --good:#1fbf75; --warn:#ffb020; --bad:#ff5861; --info:#64a8ff; --accent:#5ee1a1;}
.section{margin:26px 0}
.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pricing .plan{padding:18px;border-radius:16px;border:1px solid #243164;background:#0f1738}
.plan h3{margin:0 0 6px}
.plan .price{font-size:28px;font-weight:800}
.list{list-style:none;padding:0;margin:10px 0}
.list li{padding:6px 0;border-bottom:1px dashed #223066}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#9bb3eb;font-size:12px}
.quote{font-style:italic;color:#c8d2ee;border-left:3px solid #2a376d;padding-left:10px}
```css
:root{
--bg:#0b1020; --card:#11162a; --ink:#e8eefc; --muted:#a0acc7; --good:#1fbf75; --warn:#ffb020; --bad:#ff5861; --info:#64a8ff;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--ink)}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0f1430;border-bottom:1px solid #1e2a55;position:sticky;top:0;z-index:9}
.brand{display:flex;gap:10px;align-items:center}
.brand .logo{width:34px;height:34px;filter:drop-shadow(0 1px 3px #000)}
.brand h1{margin:0;font-size:20px}
.brand .sub{color:var(--muted);font-weight:400}
nav a, .welcome{margin-left:10px;color:var(--ink);text-decoration:none;opacity:.9}
nav a:hover{opacity:1}
.container{max-width:1040px;margin:20px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #1d2548;border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.input{width:100%;padding:10px;border-radius:10px;border:1px solid #2a376d;background:#0e1430;color:var(--ink)}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #2a376d;background:#151c3a;color:var(--ink);text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #2a376d;background:#121a38;font-size:13px}
.badge.good{border-color:var(--good)}
.badge.warn{border-color:var(--warn)}
.badge.bad{border-color:var(--bad)}
.badge.info{border-color:var(--info)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px;margin:8px 0}
.disclaimer{background:#0f1532;color:#b8c2e0;border-top:1px solid #1e2a55;border-bottom:1px solid #1e2a55;padding:8px 16px;font-size:13px}
.foot{padding:20px;text-align:center;color:var(--muted)}
small.muted{color:var(--muted)}
.alertScore{font-size:28px;font-weight:700}
.alertScore.low{color:var(--good)}
.alertScore.med{color:var(--warn)}
.alertScore.high{color:var(--bad)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #1e2a55}
header.top nav {
  display: flex;
  flex-wrap: wrap;   /* allow wrapping so items don’t vanish off-screen */
  gap: 10px;
  justify-content: flex-end;
}
header.top .brand { display:flex; align-items:center; gap:10px; }
/* Header container */
header.top {
  padding: 14px 16px;            /* more top/bottom padding */
  min-height: 76px;              /* ~1–1.5in on phones depending on DPI */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 50;
  background: #0b1b2b;           /* whatever your brand bg is */
}

/* Brand row */
header.top .brand {
  display: flex; align-items: center; gap: 10px;
}
header.top .brand .logo { width: 32px; height: 32px; }
header.top .brand h1 { font-size: 18px; line-height: 1.2; margin: 0; }
header.top .brand .sub { opacity:.8; font-weight: 500; }
/* Default (desktop): single row with wrapping if needed */
header.top nav {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Buttons a bit chunkier so they’re tappable */
header.top nav a, header.top nav span.welcome {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff; text-decoration: none; white-space: nowrap;
}
header.top nav a:hover { background: rgba(255,255,255,.12); }

/* Mobile: stack brand on its own row + make nav a grid */
@media (max-width: 768px) {
  header.top { padding: 16px 14px; min-height: 96px; } /* “~an inch or two” */
  header.top .brand { margin-bottom: 10px; }
  header.top nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns of buttons */
    gap: 8px;
  }
  header.top nav a, header.top nav span.welcome {
    padding: 10px 8px; font-size: 14px;
  }
}
.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;
}

/* Screen-reader only but still focusable/visible to autofill engines */
.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;
}

/* Keep input in DOM flow without display:none (browsers ignore those for autofill).
   Move it off-canvas instead of fully clipping so Chrome registers it. */
.sr-only-input {
  position:absolute;
  left:-9999px; top:auto;
  width:1px; height:1px;
  opacity:0.01;
}
.card.goodwill .badge { font-size: 18px; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.card.goodwill .score { color: rgba(255,255,255,.8); font-weight:600; margin-left:6px; }
.card.goodwill .positives { display:flex; flex-wrap:wrap; gap:6px; }
.chips label { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.06); margin:4px 6px 0 0; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); }
.mini-badge { font-size:12px; opacity:.95; display:inline-flex; gap:6px; align-items:center; padding:3px 6px; border-radius:999px; background:rgba(255,255,255,.08); }
/* Buttons with icons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; text-decoration:none; }
.btn.primary { font-weight:600; }

/* Nav bar spacing & wrapping on phones */
.nav { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.nav a.btn { padding:6px 10px; }

/* Marketplace action bar */
.market-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Keep emojis/icons vertically centered everywhere */
.btn, .chip, .badge, .mini-badge { line-height:1.2; }
.badge-pill{display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08)}