/* ═══════════════════════════════════════════════════════════════
   HOSTSTACK DESIGN SYSTEM — v3 "Nightshift"
   Dark-only. Bento-grid surfaces, Vercel-style type, subtle gradients,
   restrained micro-motion. Loaded after tailwind.css. Owns: typography,
   design tokens, component classes (hs-*), motion, and the restyled
   legacy classes that older pages still reference.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces — layered near-blacks, not pure #000 ─────────── */
  --ground:     #08090C;   /* page background */
  --panel:      #0D0F14;   /* section / alt background */
  --panel-2:    #111318;   /* raised surface (cards) */
  --panel-3:    #16181F;   /* nested / hover surface */
  --overlay:    #0A0B0F;   /* modals, popovers */

  /* ── Ink — off-white, never pure #fff on body copy ──────────── */
  --ink:        #F3F4F6;   /* primary text */
  --ink-2:      #9CA3AF;   /* secondary text */
  --ink-3:      #6B7280;   /* tertiary / muted */
  --ink-inv:    #08090C;   /* text on light chips */

  /* ── Hairlines ───────────────────────────────────────────────── */
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);
  --line-soft:  rgba(255,255,255,.05);

  /* ── Brand ───────────────────────────────────────────────────── */
  --blue:       #3B82F6;
  --blue-deep:  #2563EB;
  --blue-cta:   #1D4ED8;
  --blue-soft:  rgba(59,130,246,.12);
  --sky:        #7DD3FC;
  --violet:     #A78BFA;
  --green:      #34D399;
  --green-soft: rgba(52,211,153,.12);
  --amber:      #FBBF24;
  --rose:       #FB7185;

  /* ── Gradient stops (subtle — mesh + text) ──────────────────── */
  --grad-a: #3B82F6;
  --grad-b: #7DD3FC;
  --grad-c: #A78BFA;

  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-disp:  'Space Grotesk', 'Inter', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --r-card: 16px;
  --r-btn:  10px;
  --r-chip: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 24px 60px -20px rgba(0,0,0,.65);
  --shadow-glow: 0 0 0 1px rgba(59,130,246,.15), 0 20px 50px -20px rgba(59,130,246,.25);

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* Force dark scheme regardless of OS preference — this is a dark-only design. */
:root { color-scheme: dark; }

/* ── Base typography ─────────────────────────────────────────── */
html { background: var(--ground); }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .font-display {
  font-family: var(--font-disp);
  letter-spacing: -0.02em;
  color: var(--ink);
}
p { color: var(--ink-2); }
.font-mono2 { font-family: var(--font-mono); }

::selection { background: var(--blue); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Signature: mono kicker with index ───────────────────────── */
.hs-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
}
.hs-kicker::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.hs-kicker--light { color: var(--sky); }
.hs-kicker .idx { opacity: .5; }

/* ── Section header row: title left, meta right ──────────────── */
.hs-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-bottom: 3rem;
}
.hs-sechead h2 { max-width: 34rem; }
.hs-sechead .aside { max-width: 24rem; color: var(--ink-2); }

/* ── Buttons ─────────────────────────────────────────────────── */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: .95rem 1.5rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out),
              color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.hs-btn:active { transform: translateY(1px) scale(.98); }
.hs-btn svg { transition: transform .18s var(--ease-out); }
.hs-btn:hover svg.hs-arr { transform: translateX(3px); }

.hs-btn--primary {
  background: var(--ink);
  color: var(--ink-inv);
  box-shadow: var(--shadow-1);
}
.hs-btn--primary:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), var(--shadow-1); }

.hs-btn--ink { background: var(--blue); color: #fff; box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.25); }
.hs-btn--ink:hover { background: var(--blue-deep); }

.hs-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.hs-btn--ghost:hover { border-color: rgba(255,255,255,.4); background: var(--line-soft); }

.hs-btn--ghost-inv { background: transparent; color: var(--ink); border-color: var(--line-2); }
.hs-btn--ghost-inv:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

.hs-btn--white { background: var(--ink); color: var(--ink-inv); box-shadow: var(--shadow-1); }
.hs-btn--white:hover { background: #fff; }

.hs-btn--sm { padding: .62rem 1rem; font-size: .82rem; }
.hs-btn--lg { padding: 1.1rem 1.9rem; font-size: 1rem; }

/* Arrow-link */
.hs-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--sky);
  transition: gap .18s var(--ease-out), color .15s;
}
.hs-link:hover { gap: .65rem; color: #fff; }

/* ── Cards — bento surfaces ──────────────────────────────────── */
.hs-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), background .2s;
}
.hs-card--hover:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  background: var(--panel-3);
}
.hs-card--dark {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.hs-card--dark:hover { border-color: rgba(125,211,252,.35); }

/* Bento cell — the atomic unit of the bento grid. Optional --glow accent. */
.hs-bento {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .25s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.hs-bento::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(59,130,246,.08), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
}
.hs-bento:hover::before { opacity: 1; }
.hs-bento:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.hs-bento--glow:hover { box-shadow: var(--shadow-glow), var(--shadow-2); }

/* ── Chips / badges ──────────────────────────────────────────── */
.hs-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .38rem .75rem;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-2);
}
.hs-chip--dark { background: rgba(255,255,255,.04); border-color: var(--line); color: #c3cbdc; }
.hs-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); flex-shrink: 0; }

.hs-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .55rem;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--sky);
}
.hs-tag--green { background: var(--green-soft); color: var(--green); }
.hs-tag--dark  { background: rgba(125,211,252,.12); color: var(--sky); }

/* ── Backgrounds & patterns ──────────────────────────────────── */
.hs-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hs-blueprint {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(125,211,252,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hs-ruled {
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 56px;
}

/* Mesh gradient — restrained, for hero/section backdrops */
.hs-mesh {
  position: relative;
  background: var(--ground);
}
.hs-mesh::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(167,139,250,.10), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(125,211,252,.06), transparent 60%);
  pointer-events: none;
}

/* Section divider: hairline with center tick */
.hs-divider {
  position: relative;
  height: 1px;
  background: var(--line);
}
.hs-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--panel);
  border: 1px solid var(--line-2);
}

/* ── Spec sheet rows (dotted leaders) ────────────────────────── */
.hs-spec { font-size: .875rem; }
.hs-spec .row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
}
.hs-spec .row + .row { border-top: 1px dashed var(--line); }
.hs-spec .k { color: var(--ink-3); flex-shrink: 0; }
.hs-spec .lead { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.hs-spec .v { font-weight: 600; color: var(--ink); font-family: var(--font-mono); font-size: .82rem; }
.hs-spec--dark .row + .row { border-top-color: var(--line); }
.hs-spec--dark .k { color: var(--ink-3); }
.hs-spec--dark .lead { border-bottom-color: var(--line-2); }
.hs-spec--dark .v { color: #fff; }

/* ── Tables ──────────────────────────────────────────────────── */
.hs-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.hs-table th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line-2);
}
.hs-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.hs-table tbody tr { transition: background .15s; }
.hs-table tbody tr:hover { background: var(--panel-3); }
.hs-table .num { font-family: var(--font-mono); font-size: .82rem; color: var(--ink); }
.hs-table--dark th { color: var(--ink-3); border-bottom-color: var(--line-2); }
.hs-table--dark td { color: #c3cbdc; border-bottom-color: var(--line); }
.hs-table--dark tbody tr:hover { background: rgba(255,255,255,.03); }
.hs-table--dark .num { color: #fff; }

/* ── Forms ───────────────────────────────────────────────────── */
.hs-input {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .9rem;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hs-input::placeholder { color: var(--ink-3); }
.hs-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.18); background: var(--panel-3); }
.hs-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .45rem;
}

/* ── Accordion ───────────────────────────────────────────────── */
.hs-acc { border-top: 1px solid var(--line); }
.hs-acc-item { border-bottom: 1px solid var(--line); }
.hs-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  text-align: left;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  transition: color .15s;
}
.hs-acc-btn:hover { color: var(--sky); }
.hs-acc-btn .ic {
  flex-shrink: 0;
  width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-3);
  transition: transform .25s var(--ease-out), background .2s, color .2s, border-color .2s;
}
.hs-acc-item.open .ic { transform: rotate(45deg); background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.hs-acc-body {
  display: none;
  padding: 0 2.5rem 1.25rem .25rem;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.65;
}
.hs-acc-item.open .hs-acc-body { display: block; }

/* ── Reveal motion (new system) ──────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.aos-in, .rv.rv-in { opacity: 1; transform: none; }

/* ── Status pulse dot ────────────────────────────────────────── */
.hs-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--green); flex-shrink: 0; }
.hs-pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--green);
  opacity: .6;
  animation: hsPing 2.2s var(--ease-out) infinite;
}
@keyframes hsPing { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

/* ── Latency meter bars ──────────────────────────────────────── */
.hs-meter { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hs-meter > i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  width: 0;
  transition: width 1.1s var(--ease-out) .2s;
}
.aos-in .hs-meter > i, .hs-meter.go > i { width: var(--w, 60%); }

/* ═══════════════════════════════════════════════════════════════
   LEGACY CLASSES — restyled to the new system so older pages
   inherit the redesign without markup changes.
   ═══════════════════════════════════════════════════════════════ */

/* AOS (kept: markup across the site uses data-aos) */
[data-aos] { opacity: 0; transition-property: opacity, transform, filter; transition-timing-function: var(--ease-out); transition-duration: 600ms; will-change: opacity, transform; }
[data-aos].aos-in { opacity: 1 !important; transform: none !important; filter: none !important; }
[data-aos="fade-up"]    { transform: translateY(26px); }
[data-aos="fade-down"]  { transform: translateY(-26px); }
[data-aos="fade-left"]  { transform: translateX(-34px); }
[data-aos="fade-right"] { transform: translateX(34px); }
[data-aos="zoom-in"]    { transform: scale(.94); }
[data-aos="zoom-up"]    { transform: scale(.95) translateY(18px); }
[data-aos="blur-up"]    { transform: translateY(16px); filter: blur(5px); }
[data-aos-delay="80"]{transition-delay:80ms}[data-aos-delay="100"]{transition-delay:100ms}
[data-aos-delay="120"]{transition-delay:120ms}[data-aos-delay="150"]{transition-delay:150ms}
[data-aos-delay="200"]{transition-delay:200ms}[data-aos-delay="240"]{transition-delay:240ms}
[data-aos-delay="250"]{transition-delay:250ms}[data-aos-delay="300"]{transition-delay:300ms}
[data-aos-delay="360"]{transition-delay:360ms}[data-aos-delay="400"]{transition-delay:400ms}
[data-aos-delay="480"]{transition-delay:480ms}[data-aos-delay="500"]{transition-delay:500ms}
[data-aos-delay="600"]{transition-delay:600ms}[data-aos-delay="700"]{transition-delay:700ms}
[data-aos-duration="400"]{transition-duration:400ms}[data-aos-duration="800"]{transition-duration:800ms}
[data-aos-duration="1000"]{transition-duration:1000ms}

/* Stagger children */
.stagger>* { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.stagger.stagger-in>* { opacity: 1; transform: none; }
.stagger.stagger-in>*:nth-child(1){transition-delay:0ms}
.stagger.stagger-in>*:nth-child(2){transition-delay:70ms}
.stagger.stagger-in>*:nth-child(3){transition-delay:140ms}
.stagger.stagger-in>*:nth-child(4){transition-delay:210ms}
.stagger.stagger-in>*:nth-child(5){transition-delay:280ms}
.stagger.stagger-in>*:nth-child(6){transition-delay:350ms}
.stagger.stagger-in>*:nth-child(n+7){transition-delay:420ms}

/* Gradient text — Vercel-style restrained brand treatment */
.gradient-text {
  background: linear-gradient(115deg, var(--grad-a) 0%, var(--grad-b) 55%, var(--grad-c) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark hero surface — mesh gradient + fine grid, Vercel-adjacent */
.hero-mesh {
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% -15%, rgba(59,130,246,.38) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 95% -5%, rgba(167,139,250,.24) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 105%, rgba(125,211,252,.14) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
}

/* Particles: retired visually (kept as no-op so JS is harmless) */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particle { display: none; }

/* Keyframes still referenced */
@keyframes floatBob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulseSlow     { 0%,100%{opacity:.5} 50%{opacity:.85} }
@keyframes slideInLeft   { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInUp     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes cursorBlink   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes hsShimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.animate-float      { animation: floatBob 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulseSlow 4s ease-in-out infinite; }
.slide-in-left      { animation: slideInLeft .35s var(--ease-out); }
.slide-in-up        { animation: slideInUp .3s var(--ease-out); }

/* Button shimmer — restored as a subtle sheen for the primary CTA only */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity .2s;
}
.btn-shimmer:hover::after { opacity: 1; animation: hsShimmer 1.1s var(--ease-out); }

/* Cards (legacy) */
.card-lift { transition: transform .22s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s, background-color .2s; }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card-glow { transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.card-glow:hover { border-color: rgba(59,130,246,.4) !important; box-shadow: 0 8px 32px -10px rgba(59,130,246,.25); }
.icon-inner { transition: transform .25s var(--ease-out), background-color .2s; }
.card-lift:hover .icon-inner { transform: scale(1.06); }

/* Popular pricing card highlight — single crisp ring + glow */
.popular-card { box-shadow: 0 0 0 1px rgba(59,130,246,.5), var(--shadow-glow); }

/* Marquee */
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 34s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Typewriter cursor */
.tw-cursor { display: inline-block; width: 3px; height: .85em; background: var(--sky); margin-left: 4px; vertical-align: middle; border-radius: 1px; animation: cursorBlink .8s step-end infinite; }

/* Decorative line — thinner, single-tone */
.deco-line { height: 2px; background: var(--blue); border-radius: 2px; width: 40px; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-aos], .stagger>*, .rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .animate-float, .animate-pulse-slow, .marquee-track, .hs-pulse::after, .tw-cursor { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE DARK REMAP
   ─────────────────────────────────────────────────────────────
   400 pages hardcode Tailwind's light-mode slate/white/color-50
   utility classes directly in markup (bg-white, text-slate-900,
   border-slate-200, bg-blue-50 …) rather than referencing the
   :root tokens above. Rewriting every class on every page is not
   tractable, so this block remaps those exact class names to the
   dark palette here, after tailwind.css, using the same specificity.
   New markup should prefer the hs-* component classes or the
   :root custom properties directly — this remap exists for the
   legacy surface, not as the primary way to theme new work.
   ═══════════════════════════════════════════════════════════════ */

/* Page / section backgrounds that were light surfaces */
.bg-white                 { background-color: var(--panel-2) !important; }
.bg-slate-50               { background-color: var(--panel) !important; }
.bg-slate-100               { background-color: var(--panel-3) !important; }
.bg-\[\#f7f8fa\]           { background-color: var(--panel) !important; }
.bg-\[\#f8fafc\]           { background-color: var(--panel) !important; }

/* Body / heading text */
.text-slate-950, .text-slate-900 { color: var(--ink) !important; }
.text-slate-800                   { color: #E5E7EB !important; }
.text-slate-700                   { color: #D1D5DB !important; }
.text-slate-600                   { color: var(--ink-2) !important; }
.text-slate-500                   { color: var(--ink-2) !important; }
.text-slate-400                   { color: var(--ink-3) !important; }
.text-slate-300                   { color: var(--ink-3) !important; }

/* Hairline borders */
.border-slate-50, .border-slate-100  { border-color: var(--line-soft) !important; }
.border-slate-200                     { border-color: var(--line) !important; }
.border-slate-300, .border-slate-400 { border-color: var(--line-2) !important; }

/* On-dark text/border classes already used for the site's few dark
   sections stay correct as-is (text-white, border-white/10, slate-950
   bg, etc.) since the whole page is now that same dark register —
   no remap needed there, they already point the right direction. */

/* Light accent-tint chips (icon tiles, callouts) → dark-safe tints.
   Keeps each color's identity (blue stays blue, green stays green)
   without the opaque white/near-white backing plate they had in
   light mode. */
.bg-blue-50    { background-color: rgba(59,130,246,.12) !important; }
.bg-blue-100   { background-color: rgba(59,130,246,.16) !important; }
.bg-green-50   { background-color: rgba(52,211,153,.12) !important; }
.bg-green-100  { background-color: rgba(52,211,153,.16) !important; }
.bg-emerald-50 { background-color: rgba(52,211,153,.12) !important; }
.bg-purple-50  { background-color: rgba(167,139,250,.12) !important; }
.bg-purple-100 { background-color: rgba(167,139,250,.16) !important; }
.bg-amber-50   { background-color: rgba(251,191,36,.12) !important; }
.bg-red-50     { background-color: rgba(251,113,133,.12) !important; }
.bg-sky-50     { background-color: rgba(125,211,252,.12) !important; }
.bg-violet-50  { background-color: rgba(167,139,250,.12) !important; }
.bg-indigo-50  { background-color: rgba(99,102,241,.14) !important; }
.bg-orange-50  { background-color: rgba(251,146,60,.12) !important; }
.bg-cyan-50    { background-color: rgba(34,211,238,.12) !important; }
.bg-teal-50    { background-color: rgba(45,212,191,.12) !important; }
.bg-pink-50    { background-color: rgba(244,114,182,.12) !important; }
.bg-rose-50    { background-color: rgba(251,113,133,.12) !important; }
.bg-yellow-50  { background-color: rgba(250,204,21,.12) !important; }

.border-blue-100, .border-blue-200, .border-blue-300 { border-color: rgba(59,130,246,.28) !important; }
.border-green-100, .border-emerald-100                 { border-color: rgba(52,211,153,.28) !important; }
.border-red-100, .border-rose-100                       { border-color: rgba(251,113,133,.28) !important; }
.border-violet-100, .border-purple-100                  { border-color: rgba(167,139,250,.28) !important; }
.border-indigo-100                                      { border-color: rgba(99,102,241,.28) !important; }
.border-orange-100                                      { border-color: rgba(251,146,60,.28) !important; }
.border-amber-100, .border-yellow-100                   { border-color: rgba(251,191,36,.28) !important; }
.border-sky-100, .border-cyan-100                       { border-color: rgba(125,211,252,.28) !important; }
.border-teal-100                                        { border-color: rgba(45,212,191,.28) !important; }

/* Fraction-opacity accent-tint chips (bg-blue-50/50, bg-green-50/30,
   etc.) — same near-white base colors as above but with an author-set
   opacity on top, used for comparison-table highlighted columns and
   callout panels. Without a remap these render as solid pale patches. */
.bg-blue-50\/30, .bg-blue-50\/40, .bg-blue-50\/50, .bg-blue-50\/60, .bg-blue-50\/70 {
  background-color: rgba(59,130,246,.12) !important;
}
.bg-green-50\/30   { background-color: rgba(52,211,153,.12) !important; }
.bg-indigo-50\/50  { background-color: rgba(99,102,241,.14) !important; }
.bg-violet-50\/50  { background-color: rgba(167,139,250,.14) !important; }

/* Slightly brighten saturated brand blues so they read on near-black
   the way they read on white — same hue family, tuned for contrast. */
.text-blue-600, .text-blue-700 { color: var(--sky) !important; }
.text-blue-500, .text-blue-400 { color: var(--sky) !important; }
.bg-blue-600  { background-color: var(--blue-cta) !important; }
.bg-blue-700  { background-color: var(--blue-deep) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover { background-color: var(--blue-deep) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: #fff !important; }
.hover\:text-slate-950:hover, .hover\:text-slate-900:hover { color: var(--ink) !important; }
.hover\:bg-slate-50:hover,
.hover\:bg-slate-50\/50:hover,
.hover\:bg-slate-50\/70:hover,
.hover\:bg-slate-50\/80:hover { background-color: var(--panel-3) !important; }
.hover\:border-slate-400:hover { border-color: var(--line-2) !important; }
.group:hover .group-hover\:text-slate-950,
.group:hover .group-hover\:text-slate-900 { color: var(--ink) !important; }
.group:hover .group-hover\:bg-slate-50    { background-color: var(--panel-3) !important; }

/* Colored hover:bg-*-50 tints — nav/card rows across the site switch to
   a light accent-50 on hover; without a remap the hover state flashes
   an unreadable pale patch. Reuses the same tints as the static bg-*-50
   rules above. */
.hover\:bg-blue-50:hover    { background-color: rgba(59,130,246,.16) !important; }
.hover\:bg-blue-50\/60:hover{ background-color: rgba(59,130,246,.16) !important; }
.hover\:bg-green-50:hover   { background-color: rgba(52,211,153,.16) !important; }
.hover\:bg-emerald-50:hover { background-color: rgba(52,211,153,.16) !important; }
.hover\:bg-purple-50:hover  { background-color: rgba(167,139,250,.16) !important; }
.hover\:bg-violet-50:hover  { background-color: rgba(167,139,250,.16) !important; }
.hover\:bg-indigo-50:hover  { background-color: rgba(99,102,241,.18) !important; }
.hover\:bg-orange-50:hover  { background-color: rgba(251,146,60,.16) !important; }
.hover\:bg-amber-50:hover   { background-color: rgba(251,191,36,.16) !important; }
.hover\:bg-red-50:hover     { background-color: rgba(251,113,133,.16) !important; }
.hover\:bg-sky-50:hover     { background-color: rgba(125,211,252,.16) !important; }
.hover\:bg-cyan-50:hover    { background-color: rgba(34,211,238,.16) !important; }
.hover\:bg-teal-50:hover    { background-color: rgba(45,212,191,.16) !important; }

/* Named-group hover (group/i … group-hover/i:bg-blue-50) — nav dropdown
   icon tiles switch fill on row hover via a scoped group name Tailwind's
   prebuilt bundle never generated a utility for, so the hover was a
   silent no-op. Defining it directly here (not just remapping) fixes it. */
.group\/i:hover .group-hover\/i\:bg-blue-50 { background-color: rgba(59,130,246,.16) !important; }

/* Inputs / native form chrome that inherited light backgrounds */
/* Safety net: color-scheme alone only affects native chrome (scrollbars,
   date pickers) — it does NOT force a background/text color on inputs that
   carry their own conflicting utility classes. Across this site's ~400 pages
   several inputs used raw text-slate-900 (remapped to light ink) with no
   background class at all, silently falling back to the browser's native
   white input background — light text on white, effectively invisible.
   This rule guarantees every native form control gets a legible dark
   background and readable text by default; hs-input / explicit bg classes
   still override it as normal, this only catches what nothing else claims. */
input, textarea, select {
  color-scheme: dark;
  background-color: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
/* Native <option> elements are rendered by the OS on most platforms and
   ignore most CSS, but Chromium/Firefox respect these on the <select> and
   ordinary <option> backgrounds — worth setting so the dropdown list itself
   isn't a stray white rectangle even though we can't fully control OS chrome. */
select { background-color: var(--panel-2); color: var(--ink); }
option { background-color: var(--panel-2); color: var(--ink); }
.bg-slate-950 { background-color: var(--ground) !important; }
.bg-slate-900 { background-color: var(--panel) !important; }
.bg-slate-800 { background-color: var(--panel-2) !important; }

/* Sticky header translucency — every page ships the identical
   `bg-white/[.92] backdrop-blur-md` header, an arbitrary-value class
   Tailwind emits literally, so it's targetable the same way. */
.bg-white\/\[\.92\] { background-color: rgba(8,9,12,.86) !important; }
.bg-white\/\[0\.02\], .bg-white\/\[\.02\] { background-color: rgba(255,255,255,.02) !important; }
.bg-slate-950\/\[\.97\] { background-color: rgba(8,9,12,.97) !important; }

/* Fraction-opacity slate-50 panels (bg-slate-50/50, /60, /70, /80) —
   used as light-tinted card backgrounds throughout content pages;
   without a remap they render as solid light-gray boxes on dark pages. */
.bg-slate-50\/50, .bg-slate-50\/60, .bg-slate-50\/70, .bg-slate-50\/80 {
  background-color: var(--panel) !important;
}