/* NetUtils — GMI Cloud-style theme.
   Pure black/white, 0px radius, 1px hairline borders, flat (no shadows/gradients),
   mono labels, generous whitespace. Accent via [data-accent]. */

/* ───── accent tokens (two-tone palettes) ────────────────── */
/* Each preset pairs a primary accent with a darker complementary
   shade; both are used together in gradients, borders, and CTAs. */
:root {
  --accent:        #8b5cf6;
  --accent-2:      #6d28d9;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(139,92,246,0.16);
  --accent-edge:   rgba(139,92,246,0.50);
  --good:           #4ade80;
  --warn:           #fbbf24;
  --bad:            #f87171;
}
:root[data-accent="violet"] {
  --accent: #8b5cf6; --accent-2: #6d28d9; --accent-ink: #ffffff;
  --accent-soft: rgba(139,92,246,0.16); --accent-edge: rgba(139,92,246,0.50);
}
:root[data-accent="cyan"] {
  --accent: #22d3ee; --accent-2: #0891b2; --accent-ink: #000000;
  --accent-soft: rgba(34,211,238,0.16); --accent-edge: rgba(34,211,238,0.50);
}
:root[data-accent="green"] {
  --accent: #4ade80; --accent-2: #16a34a; --accent-ink: #000000;
  --accent-soft: rgba(74,222,128,0.16); --accent-edge: rgba(74,222,128,0.50);
}
:root[data-accent="amber"] {
  --accent: #fbbf24; --accent-2: #d97706; --accent-ink: #000000;
  --accent-soft: rgba(251,191,36,0.16); --accent-edge: rgba(251,191,36,0.50);
}
:root[data-accent="orange"] {
  --accent: #fb923c; --accent-2: #ea580c; --accent-ink: #000000;
  --accent-soft: rgba(251,146,60,0.16); --accent-edge: rgba(251,146,60,0.50);
}
:root[data-accent="blue"] {
  --accent: #60a5fa; --accent-2: #2563eb; --accent-ink: #ffffff;
  --accent-soft: rgba(96,165,250,0.16); --accent-edge: rgba(96,165,250,0.50);
}

/* ───── surfaces (pure black/white) ──────────────────────── */
:root[data-theme="dark"] {
  --bg:           #000000;
  --bg-elev:      #000000;
  --bg-soft:      #171717;
  --bg-alt:       #262626;
  --bg-code:      #0a0a0a;
  --border:       #404040;
  --border-soft:  #262626;
  --border-bold:  #404040;
  --fg:           #ffffff;
  --fg-dim:       #a3a3a3;
  --fg-mute:      #8a8a8a;
}
:root[data-theme="light"] {
  --bg:           #ffffff;
  --bg-elev:      #ffffff;
  --bg-soft:      #f5f5f5;
  --bg-alt:       #e5e5e5;
  --bg-code:      #0a0a0a;
  --border:       #e5e5e5;
  --border-soft:  #f5f5f5;
  --border-bold:  #d4d4d4;
  --fg:           #0a0a0a;
  --fg-dim:       #737373;
  --fg-mute:      #a3a3a3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark light; }
/* During a theme toggle, freeze every transition for one frame so the whole
   page recolors in a single instant. Without this, surfaces with no transition
   (body) flip immediately while the topbar animates its 200ms background — the
   header visibly lags the rest of the site. The .theme-switching class is added
   by the toggle handler and removed on the next frame. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
  transition: none !important;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.8; }

/* Keyboard focus ring — visible on every interactive element. On accent
   surfaces the accent outline would vanish, so use the ink color there. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.section-accent :focus-visible,
.cta-band:not(.cta-plain) :focus-visible {
  outline-color: var(--accent-ink);
}

code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ───── shared atoms ────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
  text-transform: lowercase;
}
.related .section-title { margin-bottom: 32px; }

/* ───── topbar ───────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "left actions";
  align-items: center;
  gap: 1rem;
  padding: 8px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: border-color 200ms, background 200ms, padding 200ms;
}
.topbar.scrolled {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom-color: var(--border-soft);
}
@media (min-width: 640px) { .topbar { padding: 9px 40px; } }
@media (min-width: 768px) { .topbar { padding: 9px 64px; } }
.topbar-left { grid-area: left; display: inline-flex; align-items: center; gap: 32px; min-width: 0; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
  flex-shrink: 0;
}
.brand:hover { opacity: 0.82; }
.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-wordmark svg { height: 26px; width: auto; display: block; }

/* ── animated wordmark (nav + home hero) ──────────────────────────────────
   On the first page of a session the strokes draw themselves on with a glow
   pulse (`.logo-intro`, set by an inline head script), then the mark settles
   into a quiet periodic glint forever. The glint is a white streak masked to
   the exact letterforms via `--wm` — keep its paths in sync with the WORDMARK
   const in src/handlers/web/icons.rs. */
.wm-fx {
  position: relative;
  --wm: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20108%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='butt'%20stroke-linejoin='miter'%3E%3Cpath%20d='M23%208%20H11%20L4%2015%20V33%20L11%2040%20H23%20L30%2033%20V19'/%3E%3Cpath%20d='M42%2040%20V8%20L68%2040%20V8'/%3E%3Cpath%20d='M104%208%20H80%20V40%20H104%20M80%2024%20H98'/%3E%3C/svg%3E");
}
.wm-fx .sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--wm) center / 100% 100% no-repeat;
          mask: var(--wm) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  background: linear-gradient(108deg,
    transparent 46%, rgba(255,255,255,0.95) 50%, transparent 54%);
  background-size: 320% 100%;
  background-position: 150% 0; /* streak parked off-screen until fired */
}
/* JS fires a single sweep at a random interval (see initGlint in app.js). */
.wm-fx .sheen.is-glint { animation: wm-glint-sweep 1.15s ease-in; }
/* no-JS fallback: a steady periodic glint so the mark still shimmers. */
.no-js .wm-fx .sheen { animation: wm-glint 4.6s ease-in 1.2s infinite; }
.logo-intro .wm-fx svg path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: wm-draw-in 1.5s ease-out forwards;
}
.logo-intro .wm-fx svg path:nth-child(2) { animation-delay: 0.16s; }
.logo-intro .wm-fx svg path:nth-child(3) { animation-delay: 0.32s; }
.logo-intro .wm-fx { animation: wm-pulse 1.6s ease-in-out 0.3s 2 both; }

@keyframes wm-glint {
  0%, 70%  { background-position: 150% 0; }
  88%,100% { background-position: -50% 0; }
}
@keyframes wm-glint-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@keyframes wm-draw-in {
  0%   { stroke-dashoffset: 360; }
  100% { stroke-dashoffset: 0; }
}
@keyframes wm-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 9px var(--accent-edge)) brightness(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .wm-fx .sheen { animation: none; }
  .logo-intro .wm-fx { animation: none; }
  .logo-intro .wm-fx svg path { animation: none; stroke-dashoffset: 0; }
}
.topnav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-item { position: relative; display: inline-flex; }
.topnav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  transition: color 140ms, background 140ms;
}
.topnav .nav-link:hover { opacity: 1; color: var(--accent); text-decoration: none; }
.topnav .nav-link.active { color: var(--accent); }
/* two-tone underline that slides in from the left on hover and stays lit on
   the active link / open dropdown — the site's accent-gradient tab language. */
.topnav .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.topnav .nav-link:hover::after,
.topnav .nav-link.active::after,
.nav-dropdown[data-open="true"] > .nav-link::after { transform: scaleX(1); }
.nav-chevron { width: 14px; height: 14px; transition: transform 180ms; opacity: 0.7; }
.nav-dropdown[data-open="true"] .nav-chevron { transform: rotate(180deg); }
.nav-dropdown[data-open="true"] > .nav-link { color: var(--accent); }

/* dropdown panel — flat hairline flyout. A simple dropdown (Docs) is a narrow
   column anchored to its trigger; the Tools mega panel is restyled below into
   a full-width band under the header. */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 60;
}
.nav-dropdown[data-open="true"] .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown-columns { display: flex; flex-direction: column; gap: 2px; }
.dropdown-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  padding: 6px 12px 8px;
  white-space: nowrap;
}
/* row = glyph + text block. The accent tick on the left edge scales in on
   hover; blurbs are hard-clamped to one ellipsized line so a long description
   can never wrap and break the column rhythm. */
.dropdown-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 120ms;
}
.dropdown-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dropdown-link:hover { background: var(--bg-soft); text-decoration: none; opacity: 1; }
.dropdown-link:hover::before { transform: scaleY(1); }
.dropdown-ic {
  flex: 0 0 auto;
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--fg-mute);
  transition: color 120ms;
}
.dropdown-ic svg { width: 100%; height: 100%; display: block; }
.dropdown-link:hover .dropdown-ic { color: var(--accent); }
.dropdown-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dropdown-label { color: var(--fg); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.dropdown-blurb {
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mega menu (Tools): a full-width flat band pinned under the header, in the
   same translucent-blur material as the topbar. motion.js sets --nav-drop-top
   to the topbar's live bottom edge when it opens the menu. */
.dropdown-mega {
  position: fixed;
  top: var(--nav-drop-top, 56px);
  left: 0;
  right: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.dropdown-mega .dropdown-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 64px 20px;
}
.dropdown-mega .dropdown-section { padding: 0 24px; border-left: 1px solid var(--border-soft); }
.dropdown-mega .dropdown-section:first-child { padding-left: 0; border-left: 0; }
.dropdown-mega .dropdown-section:last-child { padding-right: 0; }
.dropdown-mega .dropdown-link { padding: 7px 12px; }
/* columns cascade in with a short stagger each time the panel opens */
.nav-dropdown[data-open="true"] .dropdown-mega .dropdown-section {
  animation: drop-sec 260ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.nav-dropdown[data-open="true"] .dropdown-mega .dropdown-section:nth-child(2) { animation-delay: 45ms; }
.nav-dropdown[data-open="true"] .dropdown-mega .dropdown-section:nth-child(3) { animation-delay: 90ms; }
.nav-dropdown[data-open="true"] .dropdown-mega .dropdown-section:nth-child(4) { animation-delay: 135ms; }
.nav-dropdown[data-open="true"] .dropdown-mega .dropdown-foot {
  animation: drop-sec 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 170ms backwards;
}
@keyframes drop-sec {
  from { opacity: 0; transform: translateY(6px); }
}
/* footer strip: full-bleed hairline; padding centers the content on the same
   1280px column as the grid above (64px gutter). */
.dropdown-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  padding: 12px max(64px, calc((100% - 1280px) / 2 + 64px));
}
.dropdown-foot-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}
.dropdown-foot-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent-edge);
  background: var(--accent-soft);
  padding: 6px 14px;
  text-decoration: none;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.dropdown-foot-link:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  opacity: 1;
}
@media (max-width: 1023px) {
  .dropdown-mega .dropdown-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; padding: 20px 40px 16px; }
  .dropdown-mega .dropdown-section:nth-child(odd) { padding-left: 0; border-left: 0; }
  .dropdown-mega .dropdown-section:nth-child(even) { padding-right: 0; }
  .dropdown-foot { padding: 12px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .topnav .nav-link::after { transition: none; }
  .dropdown-panel { transition: none; transform: none; }
  .dropdown-link::before { transition: none; }
  .nav-dropdown[data-open="true"] .dropdown-mega .dropdown-section,
  .nav-dropdown[data-open="true"] .dropdown-mega .dropdown-foot { animation: none; }
}

/* Account menu — native <details> dropdown in the topbar. */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); color: var(--fg); font-size: 14px; user-select: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::marker { content: ""; }
.account-menu > summary:hover { border-color: var(--fg-mute); }
.account-menu[open] > summary { border-color: var(--accent); }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; }
.account-trigger-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu[open] > summary .nav-chevron { transform: rotate(180deg); }
.account-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 248px; background: var(--bg-elev); border: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 70; }
.account-menu-head { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.account-menu-name { color: var(--fg); font-size: 14px; font-weight: 500; }
.account-menu-email { color: var(--fg-mute); font-size: 12px; word-break: break-all; }
.account-menu-plan { color: var(--accent); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.account-menu-link { display: block; width: 100%; text-align: left; padding: 9px 12px; color: var(--fg); font-size: 14px; background: transparent; border: none; cursor: pointer; text-decoration: none; font-family: inherit; box-sizing: border-box; transition: background 120ms; }
.account-menu-link:hover { background: var(--bg-soft); text-decoration: none; }
.account-menu-danger { color: var(--bad); }
.account-menu-signout { margin: 0; }
@media (max-width: 640px) {
  .account-trigger-name { display: none; }
  .account-menu-panel { right: 0; min-width: 220px; max-width: calc(100vw - 24px); }
}

.topbar-actions { grid-area: actions; display: inline-flex; gap: 8px; justify-self: end; align-items: center; }
.icon-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 120ms, border-color 120ms;
}
.icon-btn:hover { opacity: 0.8; border-color: var(--fg); }
.nav-toggle { display: none; }

/* ───── layout ───────────────────────────────────────────── */
.page { flex: 1 1 auto; width: 100%; margin: 0; padding: 0; }

/* ───── buttons ──────────────────────────────────────────── */
.btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 120ms, background 120ms, color 120ms;
  text-decoration: none;
  border-radius: 0;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); opacity: 1; text-decoration: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.btn-primary:hover { background: var(--accent-ink); color: var(--accent); border-color: transparent; opacity: 1; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--fg); transition: background 120ms, color 120ms, border-color 120ms, opacity 120ms; }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); opacity: 1; }
.btn-sm { padding: 8px 16px; font-size: 12px; }

/* ───── hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--bg);
  border-bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 48px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) { .hero-inner { padding: 48px 40px 80px; } }
@media (min-width: 768px) { .hero-inner { padding: 64px 64px 104px; } }

/* Two-column split: copy on the left, animated 3D model on the right. */
.hero-split .hero-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 24px 80px;
}
.hero-copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hero-visual {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero3d-mount {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}
/* Fallback glow when hero3d is unavailable or on mobile. */
.hero3d-fallback-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 55% at 50% 48%, var(--accent-soft), transparent 65%),
    radial-gradient(40% 45% at 60% 30%, var(--accent-soft), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hero3d-mount:not(.hero3d-fallback) ~ .hero3d-fallback-glow { opacity: 0; }
.hero3d-fallback { /* CSS-only fallback class set by hero3d.js */ }
.hero3d-fallback ~ .hero3d-fallback-glow { opacity: 0.6; }

@media (min-width: 960px) {
  .hero-split .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    padding: 64px 64px 112px;
    align-items: center;
  }
  .hero-copy { max-width: 640px; min-width: 0; }
  .hero-visual { min-height: 460px; height: 560px; min-width: 0; }
}
@media (min-width: 1100px) {
  .hero-visual { height: 620px; }
}
/* Short viewports: let the fold grow to its content instead of clipping the
   hero (badges/buttons) under the fixed-height fold, and shrink the title. */
@media (max-height: 760px) {
  .landing-fold { height: auto; max-height: none; }
  .landing-fold > .hero { overflow: visible; }
  .hero-title { font-size: clamp(32px, 6vw, 60px); }
  .hero-split .hero-grid { padding-top: 40px; padding-bottom: 56px; }
  .hero-visual { min-height: 280px; }
}

.hero-badge {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--fg);
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg);
  height: 44px;
}
.hero-badge-span { display: inline-flex; align-items: center; padding: 0 12px; }
.hero-badge-span.dark { background: var(--bg); border-right: 1px solid var(--fg); }
.hero-title {
  font-family: var(--font-hero);
  font-size: clamp(40px, 7.6vw, 88px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero-word { display: block; }
.hero-word-first { color: var(--accent); }
.hero-word-rest {
  visibility: hidden;
  display: inline;
  white-space: nowrap;
}
.hero-word-rest.is-revealed { visibility: visible; }
.hero-caret {
  display: inline-block;
  width: 0.55ch;
  height: 0.85em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: hero-caret-blink 1s steps(2, end) infinite;
  pointer-events: none;
}
@keyframes hero-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--fg);
  max-width: 820px;
  margin: 8px 0 0;
  opacity: 0.9;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.hero-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-lookup { flex: 1 1 360px; min-width: 0; max-width: 560px; }
.hero-lookup .lookup-row { max-width: none; }
.hero-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.strip-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
  padding: 6px 12px;
  border: 1px solid var(--border);
}

/* ───── landing fold (hero + partners above the fold) ──────── */
/* Fixed to the viewport below the sticky topbar so the partners
   marquee sits flush at the bottom on first paint. Height (not
   min-height) prevents tall hero content from pushing partners
   below the fold; overflow clips the hero instead. */
.landing-fold {
  display: flex;
  flex-direction: column;
  height: var(--landing-fold-h, calc(100svh - var(--topbar-h, 57px)));
  max-height: var(--landing-fold-h, calc(100svh - var(--topbar-h, 57px)));
  overflow: hidden;
}
.landing-fold > .hero {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
.landing-fold > .partners-section {
  flex: 0 0 auto;
}

/* ───── partners marquee ─────────────────────────────────── */
/* A static band of greyscale partner wordmarks that sits in normal
   page flow inside landing-fold (pinned to the viewport bottom on load).
   It scrolls up and out of view with the page. The track is duplicated
   (and cloned further in JS on wide viewports) so a single CSS keyframe
   can translate it by exactly one set's width for a seamless infinite
   loop. Two sets fill the screen at rest but are not enough to cover the
   right edge mid-scroll; JS adds copies until (n - 1) sets span the
   marquee width. The set width is measured in JS and exposed via
   --partner-set-w; until that's known, the keyframe is a no-op
   (translate by 0) and the track sits flush against the left edge under
   the marquee mask. */
.partners-section {
  width: 100%;
  background: var(--bg);
  padding: 28px 0;
  pointer-events: none;
}
.partners-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* fade masks on both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partners-track {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding-right: 64px;
  animation: partners-slide 32s linear infinite;
  will-change: transform;
  animation-play-state: paused;
}
.partners-track[data-ready="1"] {
  animation-play-state: running;
}
@keyframes partners-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--partner-set-w, 0px)), 0, 0); }
}
.partner-logo {
  display: inline-flex;
  align-items: center;
  color: var(--fg-dim);
  opacity: 0.55;
  filter: grayscale(1);
  height: 30px;
  flex: 0 0 auto;
}
.partner-logo svg { height: 30px; width: auto; max-width: 220px; display: block; }
.logo-mark { display: block; }
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* ───── sections (universal) ─────────────────────────────── */
.section {
  width: 100%;
  padding: 48px 24px;
}
@media (min-width: 640px) { .section { padding: 80px 40px; } }
@media (min-width: 768px) { .section { padding: 104px 64px; } }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-black { background: var(--bg); color: var(--fg); border-top: 0; border-bottom: 0; }
.section-gray { background: var(--bg-alt); color: var(--fg); }
.section-white {
  background: #ffffff;
  color: #0a0a0a;
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-soft: #f5f5f5;
  --bg-alt: #e5e5e5;
  --bg-code: #0a0a0a;
  --border: #e5e5e5;
  --border-soft: #f5f5f5;
  --border-bold: #d4d4d4;
  --fg: #0a0a0a;
  --fg-dim: #737373;
  --fg-mute: #6b6b6b;
}
.section-accent {
  background: var(--accent);
  color: var(--accent-ink);
  --bg: var(--accent);
  --bg-soft: color-mix(in srgb, var(--accent) 88%, var(--accent-2));
  --bg-alt: color-mix(in srgb, var(--accent) 75%, var(--accent-2));
  --border: color-mix(in srgb, var(--accent-ink) 25%, transparent);
  --border-soft: color-mix(in srgb, var(--accent-ink) 15%, transparent);
  --border-bold: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  --fg: var(--accent-ink);
  --fg-dim: color-mix(in srgb, var(--accent-ink) 70%, transparent);
  --fg-mute: color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
/* On an accent background, accent-colored marks would vanish — use ink. */
.section-accent .faq-item summary::after,
.section-accent .pillar-arrow,
.section-accent .pillar-icon,
.section-accent .hero-word-first,
.section-accent .section-title { color: var(--accent-ink); }
.section-intro { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }
.section-intro p { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; opacity: 0.8; max-width: 640px; }

/* ───── lookup console ──────────────────────────────────── */
.lookup-console {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 48px 24px;
}
@media (min-width: 640px) { .lookup-console { padding: 48px 40px; } }
@media (min-width: 768px) { .lookup-console { padding: 64px 64px 80px; } }
.lookup-console-inner { max-width: 720px; margin: 0 auto; }
.lookup-row { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: stretch; max-width: 720px; }
.lookup-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  padding-left: 16px;
  transition: border-color 120ms;
}
.lookup-input-wrap:focus-within { border-color: var(--accent); }
.lookup-prompt { color: var(--fg-mute); font-family: var(--font-mono); font-size: 14px; user-select: none; pointer-events: none; }
.lookup-input {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 16px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
}
.lookup-input::placeholder { color: var(--fg-mute); }
/* min-width reserves room for the wider "Looking up…" busy label so the
   button (and the grid column) does not jump width mid-request. */
.lookup-btn { border-left: 1px solid var(--border); min-width: 128px; justify-content: center; }
.lookup-hint {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
}
.lookup-hint code {
  color: var(--fg-dim);
}
.error-banner {
  margin-top: 16px;
  border: 1px solid var(--bad);
  background: transparent;
  color: var(--bad);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ───── result panel / tabs ──────────────────────────────── */
.result-panel {
  max-width: 720px;
  margin: 16px auto 48px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
              margin 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.result-panel-inner { overflow: hidden; min-height: 0; border: 1px solid var(--border); background: var(--bg); }
.result-panel[data-visible="true"] { grid-template-rows: 1fr; opacity: 1; }
.result-panel[data-visible="false"] { margin-top: 0; margin-bottom: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; border: none; background: transparent; color: var(--fg-mute);
  padding: 16px 24px; font-family: var(--font-mono); font-size: 14px;
  font-weight: 500; cursor: pointer; position: relative; white-space: nowrap;
}
.tab:hover:not([disabled]) { color: var(--fg); }
.tab[disabled] { opacity: 0.4; cursor: not-allowed; }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tab-panel { padding: 24px; display: none; min-height: 56px; }
@media (min-width: 768px) { .tab-panel { padding: 32px; } }
.tab-panel[data-active="true"] { display: block; }
.tab-empty { color: var(--fg-mute); font-family: var(--font-mono); font-size: 14px; }
.tab-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-mute); font-family: var(--font-mono); font-size: 14px; }
.tab-loading::before {
  content: ""; width: 12px; height: 12px; border: 1.5px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.55s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* data rows */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14px; }
@media (min-width: 768px) { .kv { grid-template-columns: 200px 1fr; } }
.kv dt {
  color: var(--fg-mute); font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; padding-top: 2px;
}
.kv dd { margin: 0; color: var(--fg); word-break: break-word; }
.kv dd .mono { color: var(--fg); }
.kv dd a { color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--fg);
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 10px; text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere;
}
.chip:hover { text-decoration: none; border-color: var(--accent); opacity: 1; }
.chip.accent { border-color: var(--accent); color: var(--accent); }
.chip-more { color: var(--fg-mute); font-size: 12px; align-self: center; }
.flag { font-size: 1.05em; line-height: 1; }

/* ───── stats band (horizontal row w/ hairline dividers) ─── */
.stats-section { padding: 64px 24px; }
@media (min-width: 640px) { .stats-section { padding: 80px 40px; } }
@media (min-width: 768px) { .stats-section { padding: 104px 64px; } }
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  box-shadow: 0 0 0 1px var(--border);
}
.stat-num {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  opacity: 0.8;
}
/* Loading state: pulse the placeholder numbers until /api/v1/stats resolves. */
.stats-grid[data-stats-pending] .stat-num {
  color: var(--fg-mute);
  animation: stat-pulse 1.4s ease-in-out infinite;
}
@keyframes stat-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
.stats-error { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); }
@media (prefers-reduced-motion: reduce) {
  .stats-grid[data-stats-pending] .stat-num { animation: none; }
}

/* ───── pillars (single bordered box w/ dividers) ────────── */
.pillars-wrap { border: 1px solid var(--border); }
.pillars {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) { .pillars { flex-direction: row; } }
.pillar {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  color: var(--fg);
  text-decoration: none;
  transition: background 120ms;
}
@media (min-width: 640px) { .pillar { padding: 32px; } }
.pillar + .pillar { border-top: 1px solid var(--border); }
@media (min-width: 1024px) {
  .pillar + .pillar { border-top: none; border-left: 1px solid var(--border); }
}
.pillar:hover { background: var(--bg-soft); text-decoration: none; opacity: 1; }
.pillar-icon { color: var(--accent); flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.pillar-icon svg { width: 32px; height: 32px; }
.pillar-body { display: flex; flex-direction: column; gap: 16px; }
.pillar h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.2; }
@media (min-width: 640px) { .pillar h3 { font-size: 24px; } }
.pillar p { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; opacity: 0.8; }
@media (min-width: 640px) { .pillar p { font-size: 14px; } }
.pillar-arrow { color: var(--accent); font-weight: 500; margin-left: auto; align-self: center; font-family: var(--font-mono); }

/* ───── FAQ (two-column) ─────────────────────────────────── */
.faq-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .faq-layout { gap: 56px; } }
@media (min-width: 1024px) { .faq-layout { flex-direction: row; gap: 128px; } }
.faq-head { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .faq-head { width: 400px; flex-shrink: 0; } }
.faq-head p { font-family: var(--font-mono); font-size: 14px; opacity: 0.8; }
.faq-list { flex: 1; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 24px 0; font-weight: 500; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--font-sans); font-size: 18px;
  color: var(--fg);
}
@media (min-width: 640px) { .faq-item summary { font-size: 24px; padding: 32px 0; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 20px; transition: transform 160ms; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 24px; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; opacity: 0.8; }

/* ───── CTA band (two-tone accent gradient) ──────────────── */
.cta-band { background: var(--accent); color: var(--accent-ink); padding: 48px 24px; text-align: center; }
@media (min-width: 640px) { .cta-band { padding: 80px 40px; } }
@media (min-width: 768px) { .cta-band { padding: 104px 64px; } }
.cta-inner { max-width: 805px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.cta-inner h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.01em; font-weight: 400; text-transform: lowercase; margin: 0; color: var(--accent-ink); }
.cta-inner p { font-family: var(--font-mono); font-size: 14px; opacity: 0.85; margin: 0; color: var(--accent-ink); }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cta-band .btn-primary { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.cta-band .btn-primary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); opacity: 1; }
.cta-band .btn-ghost { border-color: var(--accent-ink); color: var(--accent-ink); }
.cta-band .btn-ghost:hover { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); opacity: 1; }
/* Plain (on-black) CTA variant — used on the landing page so the CTA does
   not blend into the accent FAQ band directly above it. */
.cta-band.cta-plain { background: var(--bg); color: var(--fg); border-top: 1px solid var(--border); }
.cta-band.cta-plain .cta-inner h2,
.cta-band.cta-plain .cta-inner p { color: var(--fg); }
.cta-band.cta-plain .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cta-band.cta-plain .btn-primary:hover { background: var(--accent-ink); color: var(--accent); border-color: transparent; }
.cta-band.cta-plain .btn-ghost { border-color: var(--border); color: var(--fg); }
.cta-band.cta-plain .btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Inner-page modules (page-hero, tools, tool-page, docs, 404, pricing, info)
   moved to pages.css to keep this file under the 1000-line limit. */

/* ───── footer ───────────────────────────────────────────── */
.site-footer { background: var(--bg); padding: 48px 24px 24px; }
@media (min-width: 640px) { .site-footer { padding: 64px 40px 24px; } }
@media (min-width: 768px) { .site-footer { padding: 88px 64px 24px; } }
.footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-wordmark svg { height: 24px; }
.footer-tagline { color: var(--fg-dim); font-family: var(--font-mono); font-size: 14px; margin: 0 0 24px; max-width: 280px; opacity: 0.8; }
.footer-col h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin: 0 0 16px; font-weight: 500; }
.footer-col a, .footer-col .footer-meta { display: block; color: var(--fg-dim); font-family: var(--font-mono); font-size: 14px; padding: 4px 0; }
.footer-col a:hover { color: var(--fg); opacity: 1; }
.footer-social { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a { height: 32px; padding: 0 12px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 12px; }
.footer-social a:hover { color: var(--fg); border-color: var(--fg); opacity: 1; }
.footer-social a.footer-social-icon { width: 32px; padding: 0; }
.footer-bottom { max-width: 1280px; margin: 64px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-mute); font-family: var(--font-mono); font-size: 12px; }
.footer-meta { color: var(--fg-mute); }

/* Mobile footer optimization: brand spans full width on top, the three link
   columns flow into a 2-col grid; gaps and bottom margin are trimmed so the
   footer does not become excessively tall when stacked. Desktop (>=768px) is
   untouched. */
@media (max-width: 767px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { margin-bottom: 12px; }
  .footer-social { margin-top: 12px; }
  .footer-bottom { margin-top: 32px; }
}

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--border); background: transparent;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim);
}
.status-pill .dot { width: 8px; height: 8px; background: var(--fg-mute); }
.status-pill[data-state="ok"] .dot { background: var(--good); }
.status-pill[data-state="degraded"] .dot { background: var(--warn); }
.status-pill[data-state="down"] .dot { background: var(--bad); }
.status-pill[data-state="ok"] { color: var(--good); }
.status-pill[data-state="degraded"] { color: var(--warn); }
.status-pill[data-state="down"] { color: var(--bad); }

/* ───── responsive ───────────────────────────────────────── */
@media (max-width: 880px) {
  .topbar-left { gap: 20px; }
  .topnav .nav-link { padding: 8px 10px; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "left actions";
    row-gap: 10px;
  }
  .topnav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .topnav.open { display: flex; }
  .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-dropdown[data-open="true"] .dropdown-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    border-top: 1px solid var(--border-soft);
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topnav .nav-link {
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    justify-content: space-between;
  }
  .topnav .nav-link::after { display: none; }
  .nav-link > span { flex: 1; }
  /* Mega menu collapses to a single stacked column inside the mobile drawer. */
  .dropdown-columns,
  .dropdown-mega .dropdown-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    padding: 0;
  }
  .dropdown-mega .dropdown-section,
  .dropdown-mega .dropdown-section:nth-child(odd),
  .dropdown-mega .dropdown-section:nth-child(even) {
    padding: 0;
    border-left: 0;
  }
  .dropdown-section { gap: 0; }
  .dropdown-heading {
    padding: 14px 24px 6px;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .dropdown-link,
  .dropdown-mega .dropdown-link { padding: 12px 24px; border-bottom: 1px solid var(--border-soft); }
  .dropdown-link:last-child { border-bottom: 1px solid var(--border); }
  .dropdown-foot { padding: 12px 24px 16px; }
  .lookup-row { grid-template-columns: 1fr auto; }
  .lookup-btn { min-width: 0; padding-left: 16px; padding-right: 16px; }
  .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv dt { padding-top: 8px; }
}

/* Outlined sign-in / account button in the top bar (hairline border, square,
   solid — no gradient). */
.topbar-account, .topbar-login {
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--border);
  padding: 8px 16px;
  color: var(--fg);
  transition: border-color 140ms, color 140ms;
}
.topbar-account:hover, .topbar-login:hover { border-color: var(--fg); opacity: 1; }

/* Proxies and auth (login / register / account) modules moved to pages.css. */