/* =================================================================
   ROLEPLAY PROJECT — roleplayproject.net
   Design system: GitHub-Dark inspired · Inter · FA Solid
   ================================================================= */

:root {
  /* Surfaces */
  --surface-canvas:          #0d1117;
  --surface-default:         #161b22;
  --surface-overlay:         #21262d;
  --surface-raised:          #1c2128;
  --surface-border:          #30363d;
  --surface-border-emphasis: #484f58;
  --surface-glass:           rgba(13,17,23,0.72);

  /* Foreground */
  --fg-muted:   #6e7681;
  --fg-default: #8b949e;
  --fg-strong:  #c9d1d9;
  --fg-bright:  #e6edf3;
  --fg-pure:    #f0f6fc;

  /* Primary blue */
  --p-100:#dceaff; --p-200:#b6d4ff; --p-300:#8fbfff;
  --p-400:#74b3ff; --p-500:#58a6ff; --p-600:#388bfd;
  --p-700:#1f6feb; --p-800:#1058c0; --p-900:#0a3c8a;

  /* Success */
  --s-300:#7ee787; --s-500:#3fb950; --s-400:#4ade80;
  /* Destructive */
  --d-500:#f85149; --d-400:#ff9090;
  /* Warn */
  --w-500:#d29922; --w-400:#e3b341;

  /* Faction accents */
  --gov:  #FFD700;
  --lspd: #3366FF;
  --ems:  #FF3333;
  --sahp: #C9A227;
  --lsfd: #E63946;
  --osfm: #D97706;
  --doc:  #6E7681;
  --doj:  #8B949E;

  --r-card: 10px;
  --r-btn: 6px;
  --r-pill: 999px;

  --maxw: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface-canvas);
  color: var(--fg-strong);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* tabular numerics anywhere we want them */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.term { font-family: 'Share Tech Mono', 'JetBrains Mono', monospace; }
.fira { font-family: 'Fira Code', 'JetBrains Mono', monospace; font-variant-ligatures: contextual; }

/* ============== SITE ANNOUNCE BAR ============== */
/* Branded, clickable ribbon above every page's top bar. Three regions:
   a solid amber NEWS badge on the left, the headline copy in the
   middle, a primary-blue CTA on the right. The whole strip is an <a>
   so the entire thing is the click target. */
.site-announce,
a.site-announce {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #0f1521;
  border-bottom: 1px solid rgba(88,166,255,0.45);
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  color: var(--fg-bright);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1;
  min-height: 44px;
  overflow: hidden;
  transition: background 0.18s ease;
}
a.site-announce:hover { background: #121a2a; }
a.site-announce:hover .sa-cta { background: var(--p-600); }
a.site-announce:hover .sa-cta i { transform: translateX(4px); }
a.site-announce:focus-visible { outline: 2px solid var(--p-400); outline-offset: -2px; }

/* Solid amber news pill on the left */
.site-announce .sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #d29922 0%, #b87a18 100%);
  color: #1a1300;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0 16px;
  border-right: 1px solid rgba(0,0,0,0.35);
  white-space: nowrap;
}
.site-announce .sa-badge i { font-size: 11px; }

/* Live indicator dot */
.site-announce .sa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 8px rgba(255,230,109,0.95), 0 0 14px rgba(210,153,34,0.5);
  flex-shrink: 0;
  animation: sa-pulse 1.5s ease-in-out infinite;
}
@keyframes sa-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.65); }
}

/* Central headline */
.site-announce .sa-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  color: var(--fg-bright);
  text-align: center;
}
.site-announce .sa-body b {
  color: var(--fg-pure);
  font-weight: 700;
}
.site-announce .sa-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-muted);
  flex-shrink: 0;
}
.site-announce .sa-date {
  color: #d8ffe0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 9px;
  background: linear-gradient(180deg, rgba(63,185,80,0.32), rgba(63,185,80,0.18));
  border: 1px solid rgba(63,185,80,0.55);
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.4px;
}

/* Primary CTA on the right */
.site-announce .sa-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--p-500);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0 18px;
  border-left: 1px solid rgba(0,0,0,0.35);
  white-space: nowrap;
  transition: background 0.18s ease;
}
.site-announce .sa-cta i { font-size: 11px; transition: transform 0.18s ease; }

.site-announce + .topbar { top: 44px; }

@media (max-width: 900px) {
  .site-announce { font-size: 12px; }
  .site-announce .sa-badge { padding: 0 12px; letter-spacing: 0.8px; font-size: 10.5px; }
  .site-announce .sa-cta { padding: 0 14px; font-size: 11.5px; }
  .site-announce .sa-body { padding: 6px 12px; gap: 7px; }
  .site-announce + .topbar { top: auto; }
}
@media (max-width: 640px) {
  .site-announce { min-height: 40px; }
  .site-announce .sa-badge span:not(.sa-dot) { display: none; }
  .site-announce .sa-cta span { display: none; }
  .site-announce .sa-body { font-size: 11.5px; padding: 6px 10px; }
}

/* ============== TOP BAR ============== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface-border);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
}
.brand .mark {
  width: 32px; height: 32px;
  border-radius: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px rgba(88,166,255,0.25);
}
.brand .name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.brand .name span { color: var(--fg-default); font-weight: 500; }

.topnav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.topnav a {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-default);
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.topnav a:hover { color: var(--fg-strong); background: rgba(255,255,255,0.04); }
.topnav a.active { color: var(--p-500); background: rgba(88,166,255,0.13); }
@media (max-width: 980px) { .topnav { display: none; } }

.topbar .spacer { flex: 1; }
.topbar .live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--s-400);
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.35);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.topbar .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-400);
  box-shadow: 0 0 8px var(--s-400);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.7); } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--surface-border);
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms, border-color 120ms, background 120ms;
  line-height: 1;
}
.btn:hover { border-color: var(--surface-border-emphasis); color: #fff; }
.btn .fa, .btn i { color: inherit; font-size: 12px; }
.btn.primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 0;
  padding: 10px 14px;
}
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.success {
  background: linear-gradient(135deg, #2ea043, #238636);
  color: #fff;
  border: 0;
}
.btn.success:hover { color: #fff; }
.btn.ghost { color: #fff; }
.btn.ghost:hover { color: #fff; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* ============== SECTIONS ============== */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px 24px;
}
.section.tight { padding: 56px 24px; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-bottom: 12px;
}
.section-label .num {
  color: var(--p-500);
}

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--surface-border);
}
.section-head h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--fg-pure);
  text-wrap: balance;
  max-width: 720px;
}
.section-head .note {
  font-size: 13px;
  color: var(--fg-default);
  max-width: 320px;
  line-height: 1.55;
}

/* ============== HERO ============== */
/* .hero itself is now full-bleed so the YouTube backdrop reaches the
   viewport edges. Content centers via asymmetric padding — the left/
   right padding eats whatever space is past --maxw, so the headline,
   stats and ticker still align with the rest of the page's column. */
.hero {
  max-width: none;
  margin: 0;
  padding: 96px max(24px, calc((100% - var(--maxw)) / 2)) 80px;
  display: block;
}
@media (max-width: 980px) { .hero { padding-top: 64px; padding-bottom: 64px; } }

.hero-frequency {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-500);
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.30);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 24px;
}
.hero-frequency .fa { font-size: 10px; }

.hero h1 {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--fg-pure);
  text-wrap: balance;
}
.hero h1 .accent { color: var(--p-500); }
.hero h1 .strike {
  display: block;
  font-weight: 600;
  color: var(--fg-default);
}

.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 24px 0 0;
  max-width: 56ch;
}
.hero-sub b { color: var(--fg-bright); font-weight: 600; }

.hero-cta {
  margin-top: 28px;
  display: flex; gap: 10px; flex-wrap: wrap;
}

.hero-stats {
  margin-top: 40px;
  display: grid;
  /* minmax(0, 1fr) so each tile is hard-capped at 25% of the container.
     Without the 0 min-size, any tile whose mono-numeric content is
     wider than 1/4 of the row pushes the others out of view. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* Narrow viewports: 2x2 grid so each tile keeps a reasonable width. */
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:nth-child(2n) { border-right: 0; }
  .hero-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--surface-border); }
}
.hero-stats > div {
  padding: 16px 18px;
  border-right: 1px solid var(--surface-border);
  min-width: 0;
  overflow: hidden;
}
.hero-stats > div:last-child { border-right: 0; }
.hero-stats .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: flex; align-items: center; gap: 6px;
}
.hero-stats .k .fa { font-size: 10px; color: var(--p-500); }
.hero-stats .v {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 26px;
  color: var(--fg-pure);
  margin-top: 6px;
  line-height: 1;
}
.hero-stats .v small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--fg-default);
  margin-top: 4px;
  letter-spacing: 0;
}

/* ============== CONSOLE (live status panel) ============== */
.console {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5);
}
.console-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-raised);
}
.console-head .title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: var(--fg-pure);
  letter-spacing: 0.5px;
}
.console-head .title .fa { color: var(--p-500); margin-right: 6px; }
.console-head .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(34,197,94,0.13);
  color: var(--s-400);
  border: 1px solid rgba(34,197,94,0.35);
}
.console-head .pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-400);
  box-shadow: 0 0 6px var(--s-400);
  animation: pulse 1.5s ease-in-out infinite;
}

.console-body { padding: 14px 16px; }
.console-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--surface-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.console-row:last-child { border-bottom: 0; }
.console-row .k {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-default);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
}
.console-row .k .fa { width: 12px; color: var(--p-500); font-size: 11px; }
.console-row .v { color: var(--fg-bright); font-weight: 600; }
.console-row .v.good { color: var(--s-400); }
.console-row .v.warn { color: var(--w-400); }
.console-row .v.bad  { color: var(--d-400); }

.console-feed {
  border-top: 1px solid var(--surface-border);
  background: var(--surface-canvas);
  padding: 12px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  line-height: 1.85;
  max-height: 190px;
  overflow: hidden;
  position: relative;
}
.console-feed::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 50px;
  background: linear-gradient(180deg, transparent, var(--surface-canvas));
  pointer-events: none;
}
.console-feed .line { display: block; color: var(--fg-strong); }
.console-feed .line .ts { color: var(--fg-muted); margin-right: 8px; }
.console-feed .line .tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 8px;
}
.console-feed .line .tag.disp  { color: var(--p-500); background: rgba(88,166,255,0.13); }
.console-feed .line .tag.ems   { color: var(--ems);   background: rgba(255,51,51,0.13); }
.console-feed .line .tag.fire  { color: var(--lsfd);  background: rgba(230,57,70,0.13); }
.console-feed .line .tag.alert { color: var(--d-400); background: rgba(248,81,73,0.13); }
.console-feed .line .tag.gov   { color: var(--gov);   background: rgba(255,215,0,0.12); }

.console-stamp {
  border-top: 1px solid var(--surface-border);
  padding: 10px 16px;
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* ============== STATUS PILL ============== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.pill.success { background: rgba(34,197,94,0.13); color: var(--s-400); border-color: rgba(34,197,94,0.35); }
.pill.muted   { background: rgba(110,118,129,0.18); color: var(--fg-default); border-color: rgba(110,118,129,0.4); }
.pill.error   { background: rgba(248,81,73,0.13); color: var(--d-400); border-color: rgba(248,81,73,0.35); }
.pill.warn    { background: rgba(210,153,34,0.13); color: var(--w-400); border-color: rgba(210,153,34,0.35); }
.pill.info    { background: rgba(88,166,255,0.13); color: var(--p-500); border-color: rgba(88,166,255,0.35); }
.pill .fa { font-size: 9px; }

/* ============== MARQUEE ============== */
.marquee {
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-default);
  overflow: hidden;
}
.marquee-track {
  display: inline-flex;
  gap: 40px;
  white-space: nowrap;
  padding: 12px 0;
  animation: marqueeScroll 65s linear infinite;
}
.marquee-track .item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: inline-flex; align-items: center; gap: 10px;
}
.marquee-track .item .fa { color: var(--p-500); font-size: 10px; }
.marquee-track .item.gov  .fa { color: var(--gov); }
.marquee-track .item.ems  .fa { color: var(--ems); }
.marquee-track .item.lspd .fa { color: var(--lspd); }
.marquee-track .item b { color: var(--fg-bright); font-weight: 600; margin-left: 4px; }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============== ABOUT / TENETS ============== */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 32px; } }
.about p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--fg-strong);
}
.about h2 {
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg-pure);
  margin: 6px 0 18px;
  text-wrap: balance;
}
.about h2 .accent { color: var(--p-500); }

.tenets { list-style: none; margin: 0; padding: 0; }
.tenets li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--surface-border);
}
.tenets li:first-child { border-top: 1px solid var(--surface-border); }
.tenets .icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--p-500);
  font-size: 14px;
}
.tenets h4 {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--fg-bright);
  letter-spacing: -0.01em;
}
.tenets p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-default);
  margin: 0;
}

/* ============== CITY STRIP ============== */
.city-strip {
  background: var(--surface-default);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.city-strip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .city-strip-inner { grid-template-columns: repeat(2, 1fr); } }
.city-cell {
  padding: 24px 24px;
  border-right: 1px solid var(--surface-border);
}
.city-cell:last-child { border-right: 0; }
@media (max-width: 860px) { .city-cell:nth-child(even) { border-right: 0; } }
.city-cell .label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-500);
  margin-bottom: 8px;
}
.city-cell .label .fa { font-size: 10px; }
.city-cell .name {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--fg-pure);
  margin: 0 0 6px;
}
.city-cell .desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-default);
  margin: 0;
}

/* ============== FACTIONS ============== */
.faction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 960px) { .faction-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .faction-grid { grid-template-columns: 1fr; } }

.faction {
  position: relative;
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  min-height: 250px;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.faction:hover {
  border-color: var(--surface-border-emphasis);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}

.faction .fheader {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.faction .ficon {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--surface-border);
  color: var(--accent, var(--p-500));
  flex-shrink: 0;
}
.faction h3 {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg-pure);
  margin: 0;
  line-height: 1.2;
}
.faction .ftag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-top: 2px;
}
.faction .ftag .acc { color: var(--accent, var(--p-500)); }

.faction .motto {
  font-size: 12.5px;
  font-style: italic;
  color: var(--accent, var(--p-500));
  margin-bottom: 10px;
  opacity: 0.9;
}
.faction p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 16px;
  flex: 1;
}
.faction .ops {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.faction .ops .lead { color: var(--fg-strong); }

/* faction accent colours */
.faction.lspd { --accent: #58a6ff; }
.faction.sahp { --accent: #c9a227; }
.faction.gov  { --accent: #ffd700; }
.faction.ems  { --accent: #ff5b5b; }
.faction.lsfd { --accent: #e63946; }
.faction.osfm { --accent: #d97706; }
.faction.crim { --accent: #f85149; }
.faction.mc   { --accent: #c084fc; }
.faction.cart { --accent: #4ade80; }
.faction.biz  { --accent: #58a6ff; }
.faction.news { --accent: #74b3ff; }
.faction.solo { --accent: #8b949e; }

/* ============== DISPATCH ============== */
.dispatch {
  background: var(--surface-default);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.dispatch-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
}
@media (max-width: 980px) { .dispatch-inner { grid-template-columns: 1fr; } }

.scene {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 22px 22px 18px;
  margin-bottom: 14px;
  border-left: 3px solid var(--p-500);
}
.scene.ems  { border-left-color: var(--ems); }
.scene.fire { border-left-color: var(--lsfd); }
.scene.gov  { border-left-color: var(--gov); }

.scene-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-bottom: 8px;
}
.scene-meta .ts { color: var(--p-500); }
.scene-meta .sep { color: var(--fg-muted); }
.scene-title {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--fg-pure);
  margin: 4px 0 10px;
}
.scene-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-strong);
  margin: 0 0 12px;
}
.scene-body em { color: var(--fg-bright); font-style: italic; }
.scene-attribution {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--surface-border);
}
.scene-attribution .fa { color: var(--p-500); font-size: 10px; }

.dispatch-side { display: flex; flex-direction: column; gap: 12px; }
.alert {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.alert .alert-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.alert .alert-head .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: inline-flex; align-items: center; gap: 6px;
}
.alert .alert-head .label .fa { color: var(--p-500); }
.alert h5 {
  font-weight: 700;
  font-size: 14.5px;
  margin: 0 0 6px;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.alert p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0;
}

/* ============== WHITELIST ============== */
.whitelist {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .whitelist { grid-template-columns: 1fr; } }

.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  position: relative;
  padding: 0 0 30px 60px;
  border-left: 1px solid var(--surface-border);
  margin-left: 22px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps .num {
  position: absolute;
  left: -22px; top: -4px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-default);
  border: 1px solid var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--p-500);
}
.steps h4 {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--fg-pure);
}
.steps p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 8px;
}
.steps .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: inline-flex; align-items: center; gap: 6px;
}
.steps .meta .fa { color: var(--p-500); }

.requirements {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 20px 22px 22px;
  position: sticky;
  top: 80px;
}
.requirements .rqhead {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 14px;
}
.requirements .rqhead .ricon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: rgba(88,166,255,0.13);
  border: 1px solid rgba(88,166,255,0.30);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.requirements h3 {
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.requirements .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-top: 2px;
}
.req-list { list-style: none; padding: 0; margin: 0; }
.req-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--surface-border);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 13.5px;
  color: var(--fg-strong);
  line-height: 1.5;
}
.req-list li:last-child { border-bottom: 0; }
.req-list li .fa { color: var(--s-400); margin-top: 3px; font-size: 11px; }

.req-cta {
  margin-top: 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.req-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--surface-border);
  font-size: 12px;
  color: var(--fg-default);
  line-height: 1.5;
}

/* ============== RULES ============== */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 760px) { .rules-grid { grid-template-columns: 1fr; } }
.rule {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
}
.rule .ricon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.30);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.rule .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.rule h4 {
  font-weight: 600;
  font-size: 15px;
  margin: 4px 0 6px;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.rule p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0;
}

/* ============== STAFF ============== */
.staff-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .staff-hero { grid-template-columns: 1fr; } }

.staff-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-overlay) 0%, var(--surface-default) 100%);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 20px 20px 18px;
  overflow: hidden;
  transition: border-color 160ms;
}
.staff-card:hover { border-color: var(--p-500); }
.staff-card::after {
  content: "";
  position: absolute; top: -40%; left: -50%;
  width: 60%; height: 200%;
  transform: rotate(20deg);
  background: linear-gradient(90deg,
    transparent 30%,
    rgba(88,166,255,0.20) 50%,
    transparent 70%);
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes shimmer { 0% { left: -50%; } 60% { left: 130%; } 100% { left: 130%; } }

.staff-card .savatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-600), var(--p-800));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.staff-card .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-500);
}
.staff-card .sname {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg-pure);
  margin: 6px 0 8px;
}
.staff-card .bio {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 14px;
}
.staff-card .pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .staff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .staff-grid { grid-template-columns: 1fr; } }

.staff-mini {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 16px 16px 14px;
  transition: border-color 140ms, background 140ms;
}
.staff-mini:hover { border-color: var(--surface-border-emphasis); background: var(--surface-raised); }
.staff-mini .row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.staff-mini .av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-overlay);
  border: 1px solid var(--surface-border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-strong);
}
.staff-mini .av.lspd { color: var(--lspd); border-color: rgba(51,102,255,0.4); }
.staff-mini .av.ems  { color: var(--ems);  border-color: rgba(255,51,51,0.4); }
.staff-mini .av.dev  { background: linear-gradient(135deg, var(--p-700), var(--p-900)); color: #fff; border: 0; }
.staff-mini .name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--fg-pure);
  margin: 0;
}
.staff-mini .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-500);
  margin-bottom: 8px;
}
.staff-mini .quip {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-default);
  margin: 0;
}
.staff-mini.dashed { border-style: dashed; }

/* ============== COMMUNITY ============== */
.community {
  background: var(--surface-default);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.community-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .community-inner { grid-template-columns: 1fr; gap: 40px; } }

.community h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg-pure);
  margin: 8px 0 16px;
}
.community h2 .accent { color: var(--p-500); }
.community .lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 24px;
}
.community-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.platforms { display: grid; gap: 10px; }
.platform {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  transition: border-color 140ms, transform 140ms, background 140ms;
  cursor: pointer;
}
.platform:hover {
  border-color: var(--p-500);
  background: var(--surface-raised);
  transform: translateX(3px);
}
.platform .picon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #fff;
}
.platform .picon.discord { background: linear-gradient(135deg, #5865F2, #4752C4); }
.platform .picon.forum   { background: linear-gradient(135deg, #1f6feb, #0a3c8a); }
.platform .picon.wiki    { background: linear-gradient(135deg, #6e7681, #484f58); }
.platform .picon.twitch  { background: linear-gradient(135deg, #9146FF, #6D28D9); }
.platform .h {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.platform .p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-top: 2px;
}
.platform .stat {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.platform .stat b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-pure);
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ============== FAQ ============== */
.faq-list { display: grid; gap: 8px; }
.faq {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-bright);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .fa { color: var(--p-500); font-size: 13px; transition: transform 200ms; }
.faq[open] summary .fa { transform: rotate(45deg); }
.faq .a {
  padding: 0 18px 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-strong);
  border-top: 1px solid var(--surface-border);
  padding-top: 14px;
  max-width: 70ch;
}

/* ============== FOOTER ============== */
.footer {
  background: var(--surface-canvas);
  border-top: 1px solid var(--surface-border);
  padding: 56px 24px 24px;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

.footer-brand .name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
  color: var(--fg-pure);
}
.footer-brand .name .mark {
  width: 28px; height: 28px; border-radius: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-default);
  margin: 14px 0 0;
  max-width: 38ch;
}

.footer-col h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin: 0 0 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-col a {
  font-size: 13px;
  color: var(--fg-strong);
  transition: color 120ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-col a:hover { color: var(--p-500); }
.footer-col a .fa { font-size: 10px; color: var(--fg-muted); }
.footer-col a:hover .fa { color: var(--p-500); }

.footer-bottom {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.footer-bottom .lr { display: flex; gap: 18px; }
.footer-bottom .lr a:hover { color: var(--p-500); }

/* =================================================================
   v3 ADDITIONS — Wordmark strip, subdomain network, systems showcase,
   PanelShell mock, dev blog
   ================================================================= */

/* ===== WORDMARK STRIP (under hero) ===== */
.wordmark-strip {
  background: var(--surface-default);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.wordmark-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fg-default);
  flex-wrap: wrap;
}
.wordmark-inner b {
  color: var(--fg-pure);
  font-weight: 700;
}
.wordmark-inner .accent { color: var(--p-500); }
.wordmark-inner .sep { color: var(--fg-muted); }
.wordmark-inner .pill { font-family: 'JetBrains Mono', monospace; }

/* ===== SUBDOMAIN NETWORK ===== */
.network-strip {
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-canvas);
}
.network-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 760px) {
  .network-inner { grid-template-columns: 1fr; gap: 12px; }
}
.network-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: inline-flex; align-items: center; gap: 8px;
}
.network-label .fa { color: var(--p-500); font-size: 12px; }
.network-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.network-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-strong);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.network-link .fa { font-size: 10px; }
.network-link:hover {
  border-color: var(--accent, var(--p-500));
  color: var(--accent, var(--p-500));
  background: var(--surface-raised);
}
.network-link.gov  { --accent: var(--gov); }
.network-link.lspd { --accent: var(--lspd); }
.network-link.sahp { --accent: var(--sahp); }
.network-link.lsfd { --accent: var(--lsfd); }
.network-link.osfm { --accent: var(--osfm); }
.network-link.ems  { --accent: var(--ems); }
.network-link.gov  .fa { color: var(--gov); }
.network-link.lspd .fa { color: var(--lspd); }
.network-link.sahp .fa { color: var(--sahp); }
.network-link.lsfd .fa { color: var(--lsfd); }
.network-link.osfm .fa { color: var(--osfm); }
.network-link.ems  .fa { color: var(--ems); }

/* ===== SYSTEMS SHOWCASE ===== */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .systems-grid { grid-template-columns: 1fr; } }

.system {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 160ms;
}
.system:hover { border-color: var(--surface-border-emphasis); }

.system .syshead {
  display: flex; align-items: center; gap: 12px;
}
.system .sysicon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.30);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.system.law  .sysicon { background: rgba(51,102,255,0.12); border-color: rgba(51,102,255,0.35); color: var(--lspd); }
.system.ems  .sysicon { background: rgba(255,51,51,0.12); border-color: rgba(255,51,51,0.35); color: var(--ems); }
.system.econ .sysicon { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: var(--s-400); }
.system.life .sysicon { background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.35); color: #c084fc; }
.system.crim .sysicon { background: rgba(248,81,73,0.12); border-color: rgba(248,81,73,0.35); color: var(--d-400); }
.system.gov  .sysicon { background: rgba(255,215,0,0.10); border-color: rgba(255,215,0,0.35); color: var(--gov); }

.system .systitle {
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.system .syssub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-top: 2px;
}
.system p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0;
}

.cmd-block {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-variant-ligatures: contextual;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-strong);
  overflow-x: auto;
}
.cmd-block .cmd { color: var(--p-500); font-weight: 500; }
.cmd-block .arg { color: var(--w-400); }
.cmd-block .opt { color: var(--fg-default); }
.cmd-block .cm  { color: var(--fg-muted); }
.cmd-block .out { color: var(--s-400); }
.cmd-block .line { display: block; white-space: nowrap; }
.cmd-block .line .prompt {
  color: var(--fg-muted);
  margin-right: 8px;
  user-select: none;
}

.system .feat-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.system .feat-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--fg-strong);
  font-family: 'JetBrains Mono', monospace;
}
.system .feat-list li .fa {
  color: var(--p-500);
  font-size: 10px;
  width: 12px;
}

/* ===== FACTION RANK LADDER ===== */
.faction .ranks {
  display: flex;
  gap: 3px;
  margin: 10px 0 12px;
}
.faction .ranks .rank {
  flex: 1;
  height: 4px;
  background: var(--surface-border);
  border-radius: 2px;
}
.faction .ranks .rank.filled { background: var(--accent, var(--p-500)); }
.faction .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.faction .stats .stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
}
.faction .stats .stat b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-pure);
  margin-top: 2px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.faction .fid {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* ===== PANELSHELL MOCK ===== */
.panel-mock-wrap {
  background: var(--surface-default);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.panel-mock-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) { .panel-mock-inner { grid-template-columns: 1fr; gap: 32px; } }

.panel-mock-copy h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg-pure);
  margin: 12px 0 18px;
  text-wrap: balance;
}
.panel-mock-copy h2 .accent { color: var(--p-500); }
.panel-mock-copy p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 14px;
}
.panel-mock-copy .mini-list {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.panel-mock-copy .mini-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--fg-strong);
}
.panel-mock-copy .mini-list li .fa {
  color: var(--p-500);
  width: 14px;
}

/* The mock panel itself */
.panel-shell {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.02) inset;
}
.panel-shell-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-raised);
}
.panel-shell-head .picon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(51,102,255,0.13);
  border: 1px solid rgba(51,102,255,0.40);
  color: var(--lspd);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.panel-shell-head h2 {
  font-weight: 600;
  font-size: 16px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.panel-shell-head .sub {
  font-size: 12px;
  color: var(--fg-default);
  margin-top: 1px;
}
.panel-shell-head .ctrl {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--fg-default);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
}
.panel-shell-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 360px;
}
.panel-shell-tabs {
  background: var(--surface-canvas);
  border-right: 1px solid var(--surface-border);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.panel-shell-tabs .tab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-default);
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}
.panel-shell-tabs .tab .fa { font-size: 12px; width: 14px; }
.panel-shell-tabs .tab:hover { background: rgba(255,255,255,0.04); color: var(--fg-strong); }
.panel-shell-tabs .tab.active {
  background: rgba(88,166,255,0.13);
  color: var(--p-500);
}
.panel-shell-tabs .tab .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--surface-overlay);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.panel-shell-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.psc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.psc-row h3 {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.psc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.psc-card {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.psc-card .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  display: inline-flex; align-items: center; gap: 6px;
}
.psc-card .k .fa { color: var(--p-500); font-size: 9px; }
.psc-card .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--fg-pure);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.psc-card .v.good { color: var(--s-400); }
.psc-card .v.bad  { color: var(--d-400); }
.psc-list {
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  overflow: hidden;
}
.psc-list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 12.5px;
  background: var(--surface-canvas);
}
.psc-list li:last-child { border-bottom: 0; }
.psc-list .badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--lspd);
  font-weight: 700;
}
.psc-list .who {
  color: var(--fg-bright);
  font-weight: 600;
}
.psc-list .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-default);
}

/* ===== DEV BLOG / PATCH NOTES ===== */
.devblog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .devblog-grid { grid-template-columns: 1fr; } }

.patch {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 160ms, transform 160ms;
}
.patch:hover { border-color: var(--surface-border-emphasis); transform: translateY(-2px); }

.patch-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.patch-meta .ver { color: var(--p-500); }
.patch h3 {
  font-weight: 700;
  font-size: 19px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.015em;
}
.patch h3 .codename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--fg-default);
  font-weight: 500;
  display: block;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.patch ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.patch ul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-strong);
}
.patch ul li .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  align-self: start;
  white-space: nowrap;
}
.patch ul li .tag.add { background: rgba(34,197,94,0.13); color: var(--s-400); }
.patch ul li .tag.fix { background: rgba(210,153,34,0.13); color: var(--w-400); }
.patch ul li .tag.chg { background: rgba(88,166,255,0.13); color: var(--p-500); }
.patch ul li .tag.rem { background: rgba(248,81,73,0.13); color: var(--d-400); }
.patch ul li {
  grid-template-columns: 48px 1fr;
}
.patch .foot {
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-muted);
  display: flex; justify-content: space-between;
}
.patch .foot a {
  color: var(--p-500);
  font-weight: 600;
}

/* ===== FOOTER DEPT GRID (subdomain cards) ===== */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 20px 0 8px;
}
@media (max-width: 880px) { .dept-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .dept-grid { grid-template-columns: repeat(2, 1fr); } }
.dept-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  text-align: center;
  transition: border-color 140ms, background 140ms;
  cursor: pointer;
}
.dept-card:hover { border-color: var(--accent, var(--p-500)); background: var(--surface-raised); }
.dept-card .icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--accent, var(--p-500));
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
}
.dept-card .id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent, var(--p-500));
  letter-spacing: 0.5px;
}
.dept-card .nm {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-strong);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}
.dept-card.gov  { --accent: var(--gov); }
.dept-card.lspd { --accent: var(--lspd); }
.dept-card.sahp { --accent: var(--sahp); }
.dept-card.lsfd { --accent: var(--lsfd); }
.dept-card.osfm { --accent: var(--osfm); }
.dept-card.ems  { --accent: var(--ems); }

/* =================================================================
   RULES PAGE — sidebar TOC + sectioned ruleset
   ================================================================= */
.rules-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .rules-page { grid-template-columns: 1fr; }
}

.rules-toc {
  position: sticky;
  top: 80px;
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 14px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .rules-toc { position: relative; top: 0; max-height: none; }
}
.rules-toc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 8px;
}
.rules-toc-head .ricon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(88,166,255,0.13);
  border: 1px solid rgba(88,166,255,0.30);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.rules-toc-head h3 {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.rules-toc-head .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--fg-default);
  text-transform: uppercase;
}
.rules-toc ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2px;
}
.rules-toc a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-default);
  transition: background 120ms, color 120ms;
}
.rules-toc a:hover { background: rgba(255,255,255,0.04); color: var(--fg-strong); }
.rules-toc a.active {
  background: rgba(88,166,255,0.13);
  color: var(--p-500);
}
.rules-toc a .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-muted);
  min-width: 22px;
}
.rules-toc a.active .num { color: var(--p-500); }
.rules-toc a .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--surface-canvas);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.rules-toc-legend {
  border-top: 1px solid var(--surface-border);
  margin-top: 10px;
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.rules-toc-legend .lh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  padding: 0 8px;
  margin-bottom: 4px;
}
.rules-toc-legend .pill {
  width: fit-content;
  margin: 0 8px;
}

/* ----- Rules main column ----- */
.rules-main {
  min-width: 0;
}
.rules-hero {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 32px 32px 28px;
  margin-bottom: 24px;
}
.rules-hero .crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-bottom: 12px;
}
.rules-hero .crumb a { color: var(--p-500); }
.rules-hero h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg-pure);
  margin: 0 0 12px;
}
.rules-hero p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-strong);
  max-width: 70ch;
  margin: 0 0 18px;
}
.rules-hero .meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-default);
}

.rules-section {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  scroll-margin-top: 80px;
}
.rules-section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--surface-border);
}
.rules-section-head .sicon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.30);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.rules-section.severe .sicon {
  background: rgba(248,81,73,0.13);
  border-color: rgba(248,81,73,0.40);
  color: var(--d-400);
}
.rules-section-head .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.rules-section-head h2 {
  font-weight: 700;
  font-size: 19px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.015em;
}
.rules-section-head .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-default);
  background: var(--surface-canvas);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
}

.rule-item {
  padding: 20px 24px;
  border-bottom: 1px solid var(--surface-border);
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
}
.rule-item:last-child { border-bottom: 0; }
.rule-item .rid {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-500);
  letter-spacing: 0.5px;
  padding-top: 3px;
}
.rule-item .rbody {
  min-width: 0;
}
.rule-item .rhead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.rule-item h4 {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.rule-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0 0 10px;
}
.rule-item p:last-child { margin-bottom: 0; }
.rule-item ul.bullets {
  list-style: none;
  padding: 0; margin: 0 0 10px;
  display: grid; gap: 6px;
}
.rule-item ul.bullets li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-strong);
}
.rule-item ul.bullets li::before {
  content: "›";
  color: var(--fg-muted);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.example-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 4px;
}
@media (max-width: 640px) { .example-block { grid-template-columns: 1fr; } }
.example {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-strong);
}
.example .lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.example.bad  { border-left: 3px solid var(--d-500); }
.example.bad  .lbl { color: var(--d-400); }
.example.good { border-left: 3px solid var(--s-500); }
.example.good .lbl { color: var(--s-400); }
.example .txt {
  color: var(--fg-strong);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.escalation {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 4px;
}
.escalation .eh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--w-400);
  margin-bottom: 8px;
}
.escalation ol {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 6px;
  counter-reset: step;
}
.escalation ol li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-strong);
  padding: 6px 0;
  border-bottom: 1px dashed var(--surface-border);
}
.escalation ol li:last-child { border-bottom: 0; }
.escalation ol li::before {
  counter-increment: step;
  content: counter(step);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-500);
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}

/* Severity tag — extends pill */
.tag-sev {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-sev .fa { font-size: 9px; }
.tag-sev.warning  { background: rgba(88,166,255,0.13); color: var(--p-500); border-color: rgba(88,166,255,0.35); }
.tag-sev.jail     { background: rgba(210,153,34,0.13); color: var(--w-400); border-color: rgba(210,153,34,0.35); }
.tag-sev.ban      { background: rgba(248,81,73,0.13); color: var(--d-400); border-color: rgba(248,81,73,0.35); }
.tag-sev.permban  { background: rgba(248,81,73,0.18); color: #ff6b6b; border-color: rgba(248,81,73,0.55); }
.tag-sev.note     { background: rgba(110,118,129,0.18); color: var(--fg-default); border-color: rgba(110,118,129,0.40); }

/* Search bar at top of rules */
.rules-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 24px;
}
.rules-search input {
  background: transparent;
  border: 0;
  color: var(--fg-pure);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  flex: 1;
  outline: none;
}
.rules-search input::placeholder { color: var(--fg-muted); }
.rules-search .fa { color: var(--fg-default); }
.rules-search .kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-default);
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  padding: 2px 6px;
  border-radius: 4px;
}

/* =================================================================
   v4 — Open-city pivot: market panel, ways-to-play, dev page
   ================================================================= */


/* ===== WAYS TO PLAY ===== */
.ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 960px) { .ways-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ways-grid { grid-template-columns: 1fr; } }

.way {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 160ms, transform 160ms;
  position: relative;
  overflow: hidden;
}
.way:hover { border-color: var(--surface-border-emphasis); transform: translateY(-2px); }
.way .wicon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--accent, var(--p-500));
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
}
.way.merchant   { --accent: var(--s-400); }
.way.gearhead   { --accent: var(--ems); }
.way.suit       { --accent: var(--gov); }
.way.artisan    { --accent: #c084fc; }
.way.rider      { --accent: var(--w-400); }
.way.hustler    { --accent: var(--d-400); }
.way.investor   { --accent: var(--p-500); }
.way.driver     { --accent: var(--lspd); }
.way.shopkeeper { --accent: var(--sahp); }

.way h3 {
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-pure);
  margin: 0;
  letter-spacing: -0.01em;
}
.way .vibe {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent, var(--fg-default));
  margin-top: -8px;
}
.way p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-strong);
  margin: 0;
}
.way .uses {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.way .uses .pill {
  font-size: 9.5px;
  padding: 3px 7px;
}

/* ===== FREEDOM BLURB / OPEN MARKET PROMO ===== */
.open-promo {
  background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(88,166,255,0.06));
  border: 1px solid rgba(34,197,94,0.30);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 760px) { .open-promo { grid-template-columns: 1fr; text-align: left; } }
.open-promo .picon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(34,197,94,0.13);
  border: 1px solid rgba(34,197,94,0.40);
  color: var(--s-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.open-promo h3 {
  font-weight: 700;
  font-size: 22px;
  color: var(--fg-pure);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.open-promo p {
  font-size: 14px;
  color: var(--fg-strong);
  margin: 0;
  line-height: 1.5;
  max-width: 60ch;
}

/* ===== DEVELOPER PAGE (dev.html) ===== */
.dev-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.dev-hero h1 {
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--fg-pure);
  margin: 12px 0;
}
.dev-hero h1 .accent { color: var(--p-500); }
.dev-hero p.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-strong);
  max-width: 60ch;
  margin: 0;
}
.dev-hero .crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
  margin-bottom: 6px;
}
.dev-hero .crumb a { color: var(--p-500); }

.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 880px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
.stack-card {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.stack-card .icn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  color: var(--p-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.stack-card .name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
}
.stack-card .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-default);
}
.stack-card .desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-strong);
  margin-top: 4px;
}

/* roadmap board */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .roadmap { grid-template-columns: 1fr; } }
.roadmap-col {
  background: var(--surface-default);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 16px;
}
.roadmap-col .colhead {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 12px;
}
.roadmap-col .colhead h3 {
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  color: var(--fg-pure);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.roadmap-col .colhead h3 .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.roadmap-col.now    .colhead h3 .dot { background: var(--s-400); box-shadow: 0 0 8px var(--s-400); }
.roadmap-col.next   .colhead h3 .dot { background: var(--p-500); }
.roadmap-col.later  .colhead h3 .dot { background: var(--fg-muted); }
.roadmap-col .colhead .ct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--surface-canvas);
  padding: 2px 8px;
  border-radius: 999px;
}
.roadmap-card {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.roadmap-card:last-child { margin-bottom: 0; }
.roadmap-card .h {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-bright);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.roadmap-card .d {
  font-size: 12px;
  color: var(--fg-default);
  line-height: 1.4;
  margin: 0;
}
.roadmap-card .pills {
  display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap;
}
.roadmap-card .pills .pill { font-size: 9px; padding: 2px 6px; }

/* spec block — code-ish */
.spec-block {
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
}
.spec-block .specbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--surface-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-default);
  letter-spacing: 0.5px;
}
.spec-block .specbar .fa { color: var(--p-500); }
.spec-block .specbar .name { color: var(--fg-pure); font-weight: 600; }
.spec-block pre {
  margin: 0;
  padding: 16px 18px;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-strong);
  font-variant-ligatures: contextual;
  overflow-x: auto;
}
.spec-block pre .key { color: var(--p-500); }
.spec-block pre .str { color: var(--s-400); }
.spec-block pre .num { color: var(--w-400); }
.spec-block pre .cm  { color: var(--fg-muted); font-style: italic; }
.spec-block pre .typ { color: #c084fc; }

/* =================================================================
   ANIMATED CITY SKYLINE (hero visual)
   ================================================================= */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #080b14;
  border: 1px solid var(--surface-border);
  box-shadow:
    0 20px 60px -12px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}
.hero-visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.visual-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--fg-bright);
  background: rgba(13,17,23,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--surface-border);
  padding: 7px 12px;
  border-radius: 999px;
}
.visual-caption-tr {
  bottom: auto; left: auto;
  top: 16px; right: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
}
.visual-caption .vc-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--s-400);
  box-shadow: 0 0 8px var(--s-400);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes rp-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.95; }
}
@keyframes rp-blink {
  0%, 88%, 100% { opacity: 0.2; }
  90%, 95%      { opacity: 1; }
}
.rp-win { will-change: opacity; }
@keyframes rp-win-a {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.98; }
}
@keyframes rp-win-b {
  0%, 60%, 100% { opacity: 0.80; }
  65%, 67%      { opacity: 0.10; }
}
@keyframes rp-win-c {
  0%, 30%, 100% { opacity: 0.70; }
  35%           { opacity: 1.00; }
  60%           { opacity: 0.70; }
  88%           { opacity: 0.20; }
  92%           { opacity: 0.80; }
}
@keyframes rp-win-d {
  0%, 100% { opacity: 0.40; }
  50%      { opacity: 0.90; }
}
.rp-win.rp-win-a { animation: rp-win-a 5s ease-in-out infinite; }
.rp-win.rp-win-b { animation: rp-win-b 7s ease-in-out infinite; }
.rp-win.rp-win-c { animation: rp-win-c 6s ease-in-out infinite; }
.rp-win.rp-win-d { animation: rp-win-d 8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .rp-win, .rp-star, .vc-pulse { animation: none !important; }
}

/* Marketing-site skyline perf rules (added 2026-05-25) */
.rp-win-static { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
    .rp-star, .rp-win, .rp-win-static {
        animation: none !important;
    }
}

/* ── Frame brand wordmark (2026) ───────────────────────────────────── */
.brand, .footer-brand {
  font-family: 'Onest', 'Inter', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.05em;
}
.brand .name { font-weight: 500; color: var(--fg-default, #9098a6); }
.brand .name > span { font-weight: 700; color: var(--fg-pure, #eef2f8); }
.brand .mark img { display: block; }
.footer-brand .name .mark img { display: block; }


/* ============== COOKIE CONSENT MODAL ==============
   Centered first-visit gate. site-bootstrap.js builds the DOM only when
   the three signals (cookie consent, age attestation, region) aren't
   already stored. The backdrop blocks the page until the user accepts. */
#rpp-consent-shroud {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: rpp-consent-fade-in 0.22s ease-out;
}
@keyframes rpp-consent-fade-in { from { opacity: 0; } to { opacity: 1; } }

.rpp-consent-card {
    width: 100%; max-width: 540px;
    background: var(--surface-default, #161b22);
    border: 1px solid var(--surface-border, #30363d);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    padding: 26px 28px 22px;
    color: var(--fg-bright, #e6edf3);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 13.5px; line-height: 1.55;
}
.rpp-consent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--surface-border, #30363d); }
.rpp-consent-head .mark {
    width: 32px; height: 32px; border-radius: 7px;
    background: var(--surface-canvas, #0d1117);
    border: 1px solid var(--surface-border, #30363d);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpp-consent-head .mark img { width: 22px; height: 22px; display: block; }
.rpp-consent-head h2 {
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: 17px; font-weight: 800; letter-spacing: -0.2px;
    color: var(--fg-pure, #f0f6fc); margin: 0;
}
.rpp-consent-head h2 .accent { color: var(--p-400, #74b3ff); }

.rpp-consent-card p { margin: 0 0 14px; color: var(--fg-default, #8b949e); font-size: 12.5px; }
.rpp-consent-card p b { color: var(--fg-bright, #e6edf3); font-weight: 600; }
.rpp-consent-card a { color: var(--p-400, #74b3ff); text-decoration: none; }
.rpp-consent-card a:hover { text-decoration: underline; }

.rpp-consent-row { margin-bottom: 12px; }
.rpp-consent-label {
    display: block; margin-bottom: 5px;
    font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--fg-muted, #6e7681); font-weight: 700;
}
.rpp-consent-select {
    width: 100%; height: 40px;
    background: var(--surface-canvas, #0d1117);
    border: 1px solid var(--surface-border, #30363d);
    border-radius: 7px;
    color: var(--fg-bright, #e6edf3);
    font-family: inherit; font-size: 13px;
    padding: 0 12px;
    box-sizing: border-box;
}
.rpp-consent-select:focus { outline: none; border-color: var(--p-500, #58a6ff); }
.rpp-consent-select option:disabled { color: var(--fg-muted, #6e7681); }

.rpp-consent-check {
    display: flex; gap: 10px; align-items: center;
    background: var(--surface-canvas, #0d1117);
    border: 1px solid var(--surface-border, #30363d);
    border-left: 3px solid var(--p-500, #58a6ff);
    border-radius: 7px;
    padding: 10px 12px;
    margin: 0 0 16px;
    cursor: pointer; user-select: none;
}
.rpp-consent-check input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--p-500, #58a6ff); margin: 0; }
.rpp-consent-check span { color: var(--fg-bright, #e6edf3); font-size: 12.5px; font-weight: 700; }

.rpp-consent-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--surface-border, #30363d); }
.rpp-consent-actions button {
    flex: 1; min-width: 0;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    padding: 11px 14px;
    border-radius: 7px; cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rpp-consent-actions button.primary { background: var(--p-500, #58a6ff); color: #fff; }
.rpp-consent-actions button.primary:hover:not(:disabled) { background: var(--p-600, #388bfd); }
.rpp-consent-actions button.ghost { background: transparent; color: var(--fg-default, #8b949e); border-color: var(--surface-border, #30363d); }
.rpp-consent-actions button.ghost:hover:not(:disabled) { color: var(--fg-bright, #e6edf3); border-color: var(--p-500, #58a6ff); }
.rpp-consent-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

.rpp-consent-foot { margin-top: 12px; font-size: 11px; color: var(--fg-muted, #6e7681); text-align: center; }

@media (max-width: 520px) {
    .rpp-consent-card { padding: 22px 20px 18px; }
    .rpp-consent-head h2 { font-size: 15px; }
    .rpp-consent-actions { flex-direction: column; }
}

/* ============== HERO — wow pass ============== */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .hero-content { position: relative; z-index: 2; }
/* Soft fade from hero bg into the page canvas so the full-bleed
   video backdrop doesn't end on a hard horizontal line. Extends to the
   viewport edges the same way the video does. */
.hero::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    bottom: 0;
    height: 160px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, transparent, var(--surface-canvas));
}

/* ─── YouTube background video ────────────────────────────────────
   Full-bleed wrapper that reaches both viewport edges using the same
   negative-inset trick as the old mesh. The iframe inside is oversized
   relative to the viewport so it covers the hero at any aspect ratio
   without letterboxing. pointer-events:none on both the wrapper and
   the iframe so the video can't grab clicks or scrolls. */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* solid base so the dark wash always reads even before the iframe
       starts painting */
    background: #050709;
}
.hero-video iframe {
    position: absolute;
    top: 50%; left: 50%;
    /* Scale up 35% so YouTube's centered play button + corner logos all
       sit outside the visible clip area. Wider scale = more aggressive
       crop = no UI ever visible. */
    transform: translate(-50%, -50%) scale(1.35);
    width: 100vw;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    border: 0;
}

/* Dark wash sitting between the video and the content, so the headline
   and copy stay readable regardless of which frame is on screen. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Center radial darkens the exact spot where YouTube renders its
           initial play button + paused-state overlay, so it never shows
           through even while the iframe is buffering. ~600x340px ellipse
           is enough to mask the player UI without vignetting the headline,
           which sits to the left in the centered content column. */
        radial-gradient(ellipse 600px 340px at center, rgba(5,7,9,0.85) 0%, rgba(5,7,9,0.4) 55%, transparent 80%),
        linear-gradient(180deg, rgba(13,17,23,0.45) 0%, rgba(13,17,23,0.60) 55%, rgba(13,17,23,0.92) 100%),
        linear-gradient(90deg,  rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.18) 60%, rgba(13,17,23,0.18) 100%);
}

/* "mock data" caveat under the ticker — tiny dim line, gives the ticker
   honesty without killing the showpiece. */
.hero-ticker-note {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--fg-muted);
    letter-spacing: 0.2px;
    opacity: 0.75;
}
.hero-ticker-note .star { color: var(--p-500); margin-right: 4px; }

/* Animated colour-mesh behind the skyline + headline. Three blurred
   radial blobs drift slowly via CSS keyframes, plus a tiny film-grain
   noise overlay to stop the gradients banding. The mesh extends to the
   viewport edges via negative inset, so the gradient backdrop reaches
   full-width while the content grid above stays centered at --maxw. */
.hero-mesh {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: 0; pointer-events: none;
    overflow: hidden;
}
.hero-mesh .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
}
.hero-mesh .blob-a {
    width: 520px; height: 520px;
    background: radial-gradient(circle at 30% 30%, #1f6feb 0%, transparent 60%);
    top: -160px; left: -80px;
    animation: rp-blob-a 22s ease-in-out infinite alternate;
}
.hero-mesh .blob-b {
    width: 420px; height: 420px;
    background: radial-gradient(circle at 60% 50%, #2ea043 0%, transparent 65%);
    top: 40%; right: -100px;
    opacity: 0.40;
    animation: rp-blob-b 28s ease-in-out infinite alternate;
}
.hero-mesh .blob-c {
    width: 360px; height: 360px;
    background: radial-gradient(circle at 50% 50%, #d2a8ff 0%, transparent 60%);
    bottom: -120px; left: 40%;
    opacity: 0.28;
    animation: rp-blob-c 34s ease-in-out infinite alternate;
}
.hero-mesh .grain {
    position: absolute; inset: 0;
    opacity: 0.04; mix-blend-mode: overlay; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.6) 0.4px, transparent 0.6px);
    background-size: 3px 3px;
}

@keyframes rp-blob-a {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(80px,40px) scale(1.08); }
    100% { transform: translate(-30px,90px) scale(0.95); }
}
@keyframes rp-blob-b {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-50px,-30px) scale(1.05); }
    100% { transform: translate(40px,40px) scale(0.92); }
}
@keyframes rp-blob-c {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(50px,-50px) scale(1.10); }
    100% { transform: translate(-30px,30px) scale(0.96); }
}

/* Live-dot in the frequency pill */
.hero-frequency .freq-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 8px rgba(63,185,80,0.8);
    animation: rp-freq-pulse 1.6s ease-in-out infinite;
}
@keyframes rp-freq-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.75); }
}

/* Rotating accent word in the headline. min-width sized to the longest
   word in the set ("shape.") at the headline's font weight — too small
   a value clipped "shape" / "build" / "claim" on entry. */
.word-rotator {
    position: relative;
    display: inline-block;
    color: var(--p-500);
    overflow: visible;
    vertical-align: bottom;
    line-height: 1.02;
    min-width: 4.4em;
    /* nudge baseline so the rotator sits on the same line as the prose */
    height: 1em;
}
.word-rotator .word {
    position: absolute;
    left: 0; top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(110%);
    transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    background: linear-gradient(120deg, #74b3ff 0%, #58a6ff 40%, #d2a8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.word-rotator .word.is-active   { opacity: 1; transform: translateY(0);     z-index: 2; }
.word-rotator .word.is-leaving  { opacity: 0; transform: translateY(-110%); z-index: 1; }
.word-rotator .word.is-entering { opacity: 0; transform: translateY(110%);  z-index: 1; }

/* Primary CTA — animated shimmer sweep + heavier hover lift */
.btn.btn-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn.btn-shimmer::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.35) 50%,
        transparent 65%,
        transparent 100%);
    transform: translateX(-120%);
    animation: rp-shimmer 4s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}
@keyframes rp-shimmer {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
.hero-cta .btn {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.25s ease,
                background 0.18s ease,
                border-color 0.18s ease;
}
.hero-cta .btn.primary { box-shadow: 0 6px 18px rgba(31,111,235,0.35); }
.hero-cta .btn.primary:hover { box-shadow: 0 10px 26px rgba(31,111,235,0.55); }

/* Stat tiles — subtle gradient sheen + hover lift */
.hero-stats {
    backdrop-filter: blur(6px);
    background:
        linear-gradient(160deg, rgba(31,111,235,0.05), rgba(63,185,80,0.03)) padding-box,
        var(--surface-default) padding-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hero-stats > div { transition: background 0.2s ease, transform 0.2s ease; }
.hero-stats > div:hover {
    background: rgba(88,166,255,0.06);
}

/* ─── Live ticker ─── */
.hero-ticker {
    margin-top: 28px;
    position: relative;
    display: flex; align-items: center;
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    height: 38px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hero-ticker .tick-pip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px; height: 100%;
    background: linear-gradient(135deg, #d2402b, #f85149);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.9px;
    border-right: 1px solid rgba(0,0,0,0.3);
    z-index: 3;
}
.hero-ticker .tick-pip .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.9);
    animation: rp-freq-pulse 1.2s ease-in-out infinite;
}
.hero-ticker .tick-track {
    display: flex; align-items: center; gap: 18px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 18px;
    will-change: transform;
    animation: rp-ticker 55s linear infinite;
}
.hero-ticker:hover .tick-track { animation-play-state: paused; }
@keyframes rp-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hero-ticker .tick-item {
    font-size: 12.5px;
    color: var(--fg-bright);
    display: inline-flex; align-items: center; gap: 4px;
}
.hero-ticker .tick-item b { color: var(--fg-pure); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.hero-ticker .tick-sep { color: var(--fg-muted); font-weight: 700; }
.hero-ticker .tick-edge {
    position: absolute; top: 0; bottom: 0; width: 50px; pointer-events: none; z-index: 2;
}
.hero-ticker .tick-edge-l { left: 60px; background: linear-gradient(to right, var(--surface-default), transparent); }
.hero-ticker .tick-edge-r { right: 0;   background: linear-gradient(to left,  var(--surface-default), transparent); }

/* Respect reduced-motion preferences — turn the animated chrome off but
   keep the layout. */
@media (prefers-reduced-motion: reduce) {
    .hero-mesh .blob,
    .hero-frequency .freq-dot,
    .btn.btn-shimmer::after,
    .hero-ticker .tick-track,
    .hero-ticker .tick-pip .dot {
        animation: none !important;
    }
    .word-rotator .word { transition: none; }
}

/* ============== MEGA MENU ============== */
/* Replaces the flat horizontal nav. Each top-level trigger is a button
   and the panel below it spans the topbar's full width so we get a
   proper mega-panel feel rather than a narrow dropdown. */
.megamenu-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    position: static;
}
.megamenu-item {
    /* relative so the panel anchors under THIS trigger, not the full
       topbar. Each item is its own positioning context. */
    position: relative;
}
.megamenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: var(--fg-bright);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.megamenu-trigger:hover,
.megamenu-trigger[aria-expanded="true"] {
    color: var(--p-500);
    background: rgba(88,166,255,0.10);
}
.megamenu-trigger .chev {
    font-size: 9px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.megamenu-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Panel: anchored DIRECTLY under its trigger (via .megamenu-item being
   position:relative). Fixed width — the card never spans the topbar.
   top:100% touches the trigger so the cursor can travel into the card
   without exiting the item's hover region, and padding-top creates the
   visual gap. z-index high enough to clear the site-announce strip. */
.megamenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 500;
    padding-top: 12px;
    width: min(880px, calc(100vw - 32px));
    background: transparent;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* --mega-shift is set by JS to the overflow amount (in pixels) for
       any panel whose anchored width would extend past the viewport
       right edge. CSS shifts the panel back by that amount so it stays
       fully in view while still appearing to drop from its trigger. */
    --mega-shift: 0px;
    transform: translate(calc(-1 * var(--mega-shift)), -4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s linear;
}
/* All panels open left-aligned from their trigger for consistency.
   JS shifts the panel back into the viewport on the rare desktop case
   where the trigger sits close enough to the right edge that an
   880px-wide panel would overflow. */
.megamenu-card {
    background: rgba(13,17,23,0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
    pointer-events: auto;
}
.megamenu-item:hover .megamenu-panel,
.megamenu-item.is-open .megamenu-panel { pointer-events: auto; }
.megamenu-item:hover .megamenu-panel,
.megamenu-trigger[aria-expanded="true"] + .megamenu-panel,
.megamenu-item.is-open .megamenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-1 * var(--mega-shift)), 0);
    transition-delay: 0s;
}

/* Hover-intent: short delay so brushing past triggers doesn't open them.
   Only applies on pointer-fine devices. */
@media (hover: hover) and (pointer: fine) {
    .megamenu-panel { transition-delay: 0.08s; }
}

.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
.megamenu-col {
    display: flex; flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.megamenu-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--surface-border);
}
.megamenu-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fg-bright);
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.megamenu-link:hover {
    background: rgba(88,166,255,0.08);
    transform: translateX(2px);
}
.megamenu-link > i {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(88,166,255,0.10);
    color: var(--p-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 1px;
}
.megamenu-link-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-pure);
    line-height: 1.3;
}
.megamenu-link-sub {
    font-size: 11.5px;
    color: var(--fg-default);
    line-height: 1.5;
    margin-top: 3px;
}

/* Featured CTA card on the right of each panel. */
.megamenu-feature {
    background:
        linear-gradient(160deg, rgba(31,111,235,0.10), rgba(63,185,80,0.04)) padding-box,
        rgba(20,28,40,0.65) padding-box;
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.mf-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--p-500);
}
.mf-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-pure);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.mf-sub {
    font-size: 12.5px;
    color: var(--fg-default);
    line-height: 1.5;
}
.mf-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff !important;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: filter 0.15s ease, transform 0.12s ease;
}
.mf-cta:hover { filter: brightness(1.1); transform: translateX(2px); color: #fff !important; }
.mf-cta i, .mf-cta span { color: inherit; }

@media (max-width: 980px) {
    .megamenu-nav { display: none; }
}

/* ============== SITE ANNOUNCE — under-the-bar refresh ============== */
/* Wrapper carries the borders and the dismiss button. The inner <a>
   takes the click for the body. z-index intentionally low so the
   topbar's mega-menu panels paint above the strip. */
.site-announce-wrap {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: stretch;
    background:
        linear-gradient(90deg, rgba(255,180,40,0.08) 0%, rgba(255,180,40,0.04) 50%, rgba(255,180,40,0.08) 100%),
        rgba(13,17,23,0.85);
    border-top: 1px solid rgba(255,180,40,0.18);
    border-bottom: 1px solid rgba(255,180,40,0.18);
}
.site-announce-wrap.is-dismissed { display: none; }
.site-announce {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 24px;
    color: var(--fg-bright);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.18s ease;
}
.site-announce:hover {
    background:
        linear-gradient(90deg, rgba(255,180,40,0.06) 0%, rgba(255,180,40,0.02) 50%, rgba(255,180,40,0.06) 100%);
}
.sa-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255,180,40,0.18);
    color: var(--fg-default);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sa-close:hover { background: rgba(255,180,40,0.10); color: var(--fg-pure); }

/* ============== FOOTER — mega refresh ============== */
/* Fleshed out to mirror the topbar's mega menu: brand block on the
   left with tagline + social, 5 link columns spanning the rest. Bottom
   bar gets a left/right split for the legal block + the disclaimer. */
.footer.footer-mega {
    margin-top: 80px;
    background: linear-gradient(180deg, rgba(13,17,23,0.0) 0%, rgba(8,10,14,0.7) 100%);
    border-top: 1px solid var(--surface-border);
    padding: 56px 24px 24px;
}
.footer-mega .footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 1.3fr) 4fr;
    gap: 56px;
    padding: 0;
}
@media (max-width: 980px) {
    .footer-mega .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

.footer-brand .footer-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--fg-pure);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}
.footer-brand .footer-name .mark {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
.footer-tag {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fg-default);
    margin: 0 0 18px;
    max-width: 36ch;
}
.footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 11.5px;
    color: var(--fg-default);
}
.footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--s-400);
    font-weight: 600;
}
.footer-pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--s-400);
    box-shadow: 0 0 6px var(--s-400);
    animation: rp-freq-pulse 1.6s ease-in-out infinite;
}
.footer-divider {
    width: 1px; height: 12px;
    background: var(--surface-border);
}
.footer-launch b { color: var(--fg-bright); font-weight: 600; }
.footer-social {
    display: inline-flex;
    gap: 8px;
}
.footer-social a {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    color: var(--fg-default);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.footer-social a:hover {
    color: var(--p-500);
    border-color: rgba(88,166,255,0.40);
    background: rgba(88,166,255,0.08);
}

.footer-mega .footer-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 980px) {
    .footer-mega .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
    .footer-mega .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}
.footer-mega .footer-col h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--surface-border);
}
.footer-mega .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}
.footer-mega .footer-col a {
    text-decoration: none;
    color: var(--fg-bright);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s ease, transform 0.12s ease;
    display: inline-block;
}
.footer-mega .footer-col a:hover { color: var(--p-500); transform: translateX(2px); }

.footer-mega .footer-bottom {
    max-width: var(--maxw);
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--surface-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: var(--fg-muted);
}
.footer-mega .footer-bottom .fb-l,
.footer-mega .footer-bottom .fb-r {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-mega .footer-bottom .fb-sep { color: var(--surface-border); }
.footer-mega .footer-bottom b { color: var(--fg-default); font-weight: 600; }
@media (max-width: 760px) {
    .footer-mega .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============== CREATOR PROGRAMME PAGE ============== */
.cc-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 96px max(24px, calc((100% - var(--maxw)) / 2)) 64px;
}
.cc-hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(145, 70, 255, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 75% 60%, rgba(31, 111, 235, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 60% 100%, rgba(63, 185, 80, 0.10) 0%, transparent 60%);
    pointer-events: none;
}
.cc-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
}
.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--p-500);
    background: rgba(88,166,255,0.10);
    border: 1px solid rgba(88,166,255,0.30);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 26px;
}
.cc-eyebrow .fa { font-size: 11px; }
.cc-hero h1 {
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--fg-pure);
    text-wrap: balance;
}
.cc-accent {
    background: linear-gradient(120deg, #74b3ff 0%, #58a6ff 40%, #d2a8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cc-lede {
    margin: 24px 0 32px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg-strong);
    max-width: 64ch;
}
.cc-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) { .cc-grid-3 { grid-template-columns: 1fr; } }

.cc-card {
    position: relative;
    padding: 24px;
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.cc-card:hover { transform: translateY(-2px); border-color: rgba(88,166,255,0.35); }
.cc-card-accent {
    background:
        linear-gradient(160deg, rgba(31,111,235,0.06), rgba(63,185,80,0.02)) padding-box,
        var(--surface-default) padding-box;
}
.cc-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(88,166,255,0.12);
    color: var(--p-500);
    font-size: 18px;
    margin-bottom: 16px;
}
.cc-card h3 { margin: 0 0 8px; color: var(--fg-pure); font-size: 18px; font-weight: 700; }
.cc-card p { margin: 0; color: var(--fg-default); font-size: 13.5px; line-height: 1.55; }

.cc-perk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 760px) { .cc-perk-grid { grid-template-columns: 1fr; } }
.cc-perk {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
}
.cc-perk > i {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(210,168,255,0.12);
    color: #d2a8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.cc-perk h4 { margin: 0 0 6px; color: var(--fg-pure); font-size: 15px; font-weight: 700; }
.cc-perk p { margin: 0; color: var(--fg-default); font-size: 13px; line-height: 1.55; }
.cc-perk-feature {
    grid-column: 1 / -1;
    background:
        linear-gradient(135deg, rgba(31,111,235,0.10), rgba(63,185,80,0.03)) padding-box,
        var(--surface-default) padding-box;
    border-color: rgba(88,166,255,0.30);
}
.cc-perk-feature > i {
    background: rgba(88,166,255,0.18);
    color: var(--p-500);
}

.cc-ref {
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 900px) { .cc-ref { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }
.cc-ref-headline h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.15; color: var(--fg-pure); letter-spacing: -0.02em; }
.cc-ref-headline p { margin: 0; color: var(--fg-default); font-size: 14.5px; line-height: 1.6; }
.cc-ref-headline b { color: var(--fg-bright); font-weight: 700; }
.cc-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .cc-ref-grid { grid-template-columns: 1fr; } }
.cc-ref-tile {
    padding: 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
}
.cc-ref-stat {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--fg-pure);
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.cc-ref-stat span { font-size: 16px; color: var(--fg-default); }
.cc-ref-stat .fa { font-size: 22px; color: var(--p-500); }
.cc-ref-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fg-default);
    margin-bottom: 10px;
}
.cc-ref-tile p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-default); }

.cc-apply {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) { .cc-apply { grid-template-columns: 1fr; } }
.cc-apply-steps ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}
.cc-apply-steps li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px;
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
}
.cc-apply-steps .num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(88,166,255,0.12);
    color: var(--p-500);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cc-apply-steps h4 { margin: 0 0 6px; color: var(--fg-pure); font-size: 16px; font-weight: 700; }
.cc-apply-steps p { margin: 0; color: var(--fg-default); font-size: 13.5px; line-height: 1.55; }
.cc-apply-card {
    padding: 26px;
    background:
        linear-gradient(160deg, rgba(88,101,242,0.10), rgba(88,166,255,0.03)) padding-box,
        var(--surface-default) padding-box;
    border: 1px solid rgba(88,101,242,0.30);
    border-radius: var(--r-card);
    text-align: left;
}
.cc-apply-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(88,101,242,0.20);
    color: #5865f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.cc-apply-card h3 { margin: 0 0 10px; color: var(--fg-pure); font-size: 20px; font-weight: 700; }
.cc-apply-card p { margin: 0 0 16px; color: var(--fg-default); font-size: 13.5px; line-height: 1.55; }
.cc-apply-card b { color: var(--fg-bright); font-weight: 700; }
.cc-apply-btn { width: 100%; justify-content: center; }
.cc-apply-sub { margin-top: 12px; font-size: 12px; color: var(--fg-muted); }
.cc-apply-sub a { color: var(--p-500); text-decoration: none; }

.cc-elig {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) { .cc-elig { grid-template-columns: 1fr; } }
.cc-elig-body h2 { margin: 0 0 14px; font-size: 26px; line-height: 1.2; color: var(--fg-pure); letter-spacing: -0.02em; }
.cc-elig-body p { margin: 0 0 14px; color: var(--fg-default); font-size: 14.5px; line-height: 1.6; }
.cc-elig-body p:last-child { margin-bottom: 0; }
.cc-elig-body b { color: var(--fg-bright); font-weight: 700; }
.cc-elig-bullets {
    padding: 22px;
    background: var(--surface-default);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    display: grid;
    gap: 12px;
}
.cc-elig-bullet { display: flex; align-items: center; gap: 12px; color: var(--fg-bright); font-size: 14px; }
.cc-elig-bullet .fa { color: var(--s-400); font-size: 12px; }

.cc-signoff { padding-bottom: 96px; }
.cc-signoff-card {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 48px;
    background:
        linear-gradient(160deg, rgba(31,111,235,0.10), rgba(210,168,255,0.05)) padding-box,
        var(--surface-default) padding-box;
    border: 1px solid rgba(88,166,255,0.25);
    border-radius: 20px;
}
.cc-signoff-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--p-500);
    margin-bottom: 12px;
}
.cc-signoff-card h2 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--fg-pure); letter-spacing: -0.025em; text-wrap: balance; }
.cc-signoff-card p { margin: 0 0 24px; color: var(--fg-default); font-size: 15px; line-height: 1.6; }
.cc-signoff-card .cc-cta-row { justify-content: center; }
.cc-signoff-sign {
    margin-top: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--fg-muted);
    letter-spacing: 0.5px;
}

/* ============== CREATOR HERO — video backdrop ============== */
/* Replaces the gradient mesh with a full-bleed local video clip. */
.cc-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #050709;
}
.cc-hero-video video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.cc-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 700px 380px at 20% 50%, rgba(5,7,9,0.65) 0%, rgba(5,7,9,0.25) 50%, transparent 80%),
        linear-gradient(180deg, rgba(13,17,23,0.45) 0%, rgba(13,17,23,0.55) 55%, rgba(13,17,23,0.92) 100%),
        linear-gradient(90deg,  rgba(13,17,23,0.7) 0%, rgba(13,17,23,0.25) 60%, rgba(13,17,23,0.1) 100%);
}
.cc-hero { padding-bottom: 88px; }
.cc-hero-inner { position: relative; z-index: 2; }

/* ============== CREATOR PORTAL ============== */
.cc-portal-section { padding-bottom: 96px; }
.cc-portal {
    background:
        linear-gradient(160deg, rgba(31,111,235,0.05), rgba(63,185,80,0.02)) padding-box,
        var(--surface-default) padding-box;
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: 32px;
    min-height: 220px;
    display: grid;
}
.cc-portal-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.cc-portal-state h3 { margin: 0; color: var(--fg-pure); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cc-portal-state p  { margin: 0; color: var(--fg-default); font-size: 14.5px; line-height: 1.6; max-width: 60ch; }

.cc-portal-loading { align-items: center; justify-content: center; flex-direction: row; color: var(--fg-default); font-size: 13px; }
.cc-portal-spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.10);
    border-top-color: var(--p-500);
    animation: cc-spin 0.7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

.cc-portal-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(88,166,255,0.14);
    color: var(--p-500);
    font-size: 22px;
}
.cc-portal-icon-warn { background: rgba(248,81,73,0.14); color: #f85149; }
.cc-portal-icon-go { background: rgba(63,185,80,0.14); color: var(--s-400); }

.cc-portal-header {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.cc-portal-header h3 { margin: 0 0 4px; }
.cc-portal-header p  { margin: 0; }

.cc-portal-form {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 560px;
}
.cc-portal-field { display: grid; gap: 6px; }
.cc-portal-field-label { font-size: 12px; font-weight: 600; color: var(--fg-default); }
.cc-portal-field input,
.cc-portal-field textarea {
    background: var(--surface-canvas);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--fg-bright);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
}
.cc-portal-field input:focus,
.cc-portal-field textarea:focus { border-color: var(--p-500); }
.cc-portal-field textarea { min-height: 110px; resize: vertical; }
.cc-portal-status { font-size: 13px; color: var(--fg-default); }
.cc-portal-status.is-error { color: #f85149; }
.cc-portal-meta { font-size: 12px; color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; }

.cc-portal-banner {
    display: flex; gap: 18px; align-items: center;
    padding: 18px 22px;
    background: rgba(63,185,80,0.06);
    border: 1px solid rgba(63,185,80,0.20);
    border-radius: 12px;
    margin-bottom: 24px;
}
.cc-portal-banner h3 { color: var(--fg-pure); font-size: 18px; margin: 0 0 4px; }
.cc-portal-banner p  { color: var(--fg-default); margin: 0; font-size: 13.5px; }

.cc-portal-card {
    padding: 22px;
    background: var(--surface-canvas);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    margin-bottom: 16px;
}
.cc-portal-card h4 {
    margin: 0 0 8px;
    color: var(--fg-pure);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
}
.cc-portal-card h4 .fa { color: var(--p-500); font-size: 13px; }
.cc-portal-card > p { margin: 0 0 16px; color: var(--fg-default); font-size: 13px; }

.cc-code-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 16px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px dashed var(--surface-border);
}
.cc-code-row:first-of-type { border-top: 0; }
.cc-code-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--fg-muted); }
.cc-code-value {
    display: flex; align-items: center; gap: 10px;
}
.cc-code-value code {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: var(--fg-bright);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--surface-border);
    padding: 8px 12px;
    border-radius: 8px;
    word-break: break-all;
}
.cc-code-copy {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    width: 34px; height: 34px;
    color: var(--fg-default);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cc-code-copy:hover { background: rgba(88,166,255,0.08); color: var(--p-500); border-color: rgba(88,166,255,0.3); }
.cc-code-hint { grid-column: 2; font-size: 11.5px; color: var(--fg-muted); margin-top: -4px; }

.cc-portal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cc-portal-stat { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--surface-border); border-radius: 8px; }
.cc-portal-stat-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 22px; color: var(--fg-pure); line-height: 1; }
.cc-portal-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--fg-default); margin-top: 6px; }

/* Twitch link state */
.cc-portal-icon-twitch { background: rgba(145,70,255,0.16); color: #9146ff; }

/* Linked-Twitch chip used in the apply form header */
.cc-twitch-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(145,70,255,0.08);
    border: 1px solid rgba(145,70,255,0.25);
    border-radius: 12px;
    margin-bottom: 18px;
    max-width: 560px;
}
.cc-twitch-chip img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cc-twitch-chip-name {
    color: var(--fg-pure);
    font-weight: 700;
    font-size: 14px;
}
.cc-twitch-chip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--fg-default);
    margin-top: 2px;
}
.cc-twitch-chip-meta b { color: var(--fg-bright); font-weight: 600; }
.cc-twitch-tag {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(145,70,255,0.18);
    color: #d2a8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}