/* ==========================================================================
   IP-DB enterprise layer (2026-10-27)
   One design system for the four operator-facing pages: honeypot,
   integrations, dashboard sensors and datasets.

   The look the owner picked: dark bands, sharp corners, hairline rules,
   uppercase micro-labels, dense tables, no decoration. Everything is scoped
   to .ent so the rest of the site is untouched; bands stay dark in both
   themes, body surfaces follow the theme.
   ========================================================================== */

.ent {
  --e-line: #d8dee8;
  --e-line-soft: #e8edf3;
  --e-panel: #ffffff;
  --e-panel-2: #f5f7fa;
  --e-ink: #0d1424;
  --e-ink-2: #5a6680;
  --e-ink-3: #8a94a8;
  --e-accent: #1550d4;
  --e-accent-soft: #eaf0ff;
  --e-ok: #0a7d55;
  --e-warn: #a85a00;
  --e-bad: #c02626;
  /* bands are dark in both themes */
  --e-dark: #0a0f1c;
  --e-dark-2: #111a2e;
  --e-dark-line: #1e2a44;
  --e-dark-ink: #e7ecf5;
  --e-dark-ink-2: #93a0ba;
  --e-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --e-pad: 28px;
  color: var(--e-ink);
}
html[data-theme="dark"] .ent {
  --e-line: #222d44;
  --e-line-soft: #1a2437;
  --e-panel: #0e1626;
  --e-panel-2: #121c2e;
  --e-ink: #e7ecf5;
  --e-ink-2: #9aa6bd;
  --e-ink-3: #74809a;
  --e-accent: #5b8cff;
  --e-accent-soft: rgba(91, 140, 255, .12);
  --e-ok: #35c08a;
  --e-warn: #e0a152;
  --e-bad: #ef6464;
}
html[data-theme="dark"] body:has(.ent) { background: #070b14; }
body:has(.ent) main { background: var(--e-panel-2); }
html[data-theme="dark"] body:has(.ent) main { background: #070b14; }

.ent-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ── sticky product band ─────────────────────────────────────────────── */
.ent-band {
  position: sticky; top: var(--nav-height, 64px); z-index: 50;
  background: var(--e-dark); border-bottom: 1px solid var(--e-dark-line);
}
.ent-band-in { display: flex; align-items: center; gap: 18px; height: 54px; }
.ent-band-id { display: flex; align-items: center; gap: 10px; flex: none; }
.ent-band-id i { width: 8px; height: 8px; background: var(--e-ok); flex: none; }
.ent-band-id b { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ent-band-nav { display: flex; gap: 2px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.ent-band-nav::-webkit-scrollbar { display: none; }
.ent-band-nav a {
  padding: 7px 12px; color: var(--e-dark-ink-2); font-size: 12.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.ent-band-nav a:hover { color: #fff; }
.ent-band-nav a.is-on { color: #fff; border-bottom-color: var(--e-accent); }
.ent-band-act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ent-band-cmd {
  display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; max-width: 820px;
  padding: 7px 12px; background: #060a13; border: 1px solid var(--e-dark-line);
  font-family: var(--e-mono); font-size: 12px; color: #7ee2b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-band.is-cmd .ent-band-cmd { display: flex; }
.ent-band.is-cmd .ent-band-nav { display: none; }
/* The button has to read on whatever it sits on. The default is a light
   surface — sections, panels, cards, the config output header — where the
   old dark-band colours (near-white ink on a near-white panel) left nothing
   but a floating border. The dark surfaces restate the original treatment
   below, so the band, the hero and the closing CTA are unchanged. */
.ent-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border: 1px solid var(--e-line); background: var(--e-panel); color: var(--e-ink);
  font: 600 12.5px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.ent-btn:hover { border-color: var(--e-accent); background: var(--e-panel-2); color: var(--e-accent); }
.ent-band .ent-btn, .ent-hero .ent-btn, .ent-cta .ent-btn {
  border-color: var(--e-dark-line); background: transparent; color: var(--e-dark-ink);
}
.ent-band .ent-btn:hover, .ent-hero .ent-btn:hover, .ent-cta .ent-btn:hover {
  border-color: #3a4a6e; background: rgba(255, 255, 255, .06); color: #fff;
}
.ent-btn-primary,
.ent-band .ent-btn-primary, .ent-hero .ent-btn-primary, .ent-cta .ent-btn-primary {
  background: var(--e-accent); border-color: var(--e-accent); color: #fff;
}
.ent-btn-primary:hover,
.ent-band .ent-btn-primary:hover, .ent-hero .ent-btn-primary:hover, .ent-cta .ent-btn-primary:hover {
  background: #0f44bd; border-color: #0f44bd; color: #fff;
}
html[data-theme="dark"] .ent-btn-primary:hover { background: #7aa5ff; border-color: #7aa5ff; color: #0a0f1c; }
.ent-btn.is-copied { border-color: var(--e-ok); color: var(--e-ok); }

/* ── hero ────────────────────────────────────────────────────────────── */
.ent-hero { background: var(--e-dark); border-bottom: 1px solid var(--e-dark-line); color: var(--e-dark-ink); }
.ent-hero-in { padding-top: 48px; }
.ent-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--e-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--e-dark-ink-2);
}
.ent-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--e-accent); }
.ent-hero h1 {
  margin: 0; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; max-width: 17ch;
}
.ent-hero-lede { margin: 16px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--e-dark-ink-2); }
.ent-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.ent-cmd {
  display: flex; align-items: stretch; gap: 0; flex: 1 1 520px; min-width: 0;
  background: #060a13; border: 1px solid var(--e-dark-line);
}
.ent-cmd code {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 14px; height: 42px;
  font-family: var(--e-mono); font-size: 12.5px; color: #7ee2b8; overflow-x: auto; white-space: nowrap;
}
.ent-cmd code::before { content: "$"; color: var(--e-accent); margin-right: 8px; flex: none; }
.ent-cmd button { flex: none; height: 42px; border: 0; border-left: 1px solid var(--e-dark-line); }
.ent-facts { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.ent-facts li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--e-dark-ink-2); }
.ent-facts li::before { content: ""; width: 4px; height: 4px; background: var(--e-ok); }

/* stat strip, bordered cells */
.ent-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--e-dark-line); }
.ent-kpi { padding: 20px 0 24px; border-left: 1px solid var(--e-dark-line); padding-left: 20px; }
.ent-kpi:first-child { border-left: 0; padding-left: 0; }
.ent-kpi span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--e-dark-ink-2); }
.ent-kpi strong { display: block; margin-top: 8px; font-size: 1.9rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ent-kpi small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--e-ink-3); }

/* ── sections ────────────────────────────────────────────────────────── */
.ent-sec { padding: 48px 0; border-bottom: 1px solid var(--e-line); }
.ent-sec:last-child { border-bottom: 0; }
.ent-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ent-sec h2 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--e-ink);
  display: flex; align-items: center; gap: 12px;
}
.ent-sec h2::before { content: ""; width: 3px; height: 14px; background: var(--e-accent); }
.ent-sec-sub { margin: 10px 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: var(--e-ink-2); }
.ent-sec-link { font-size: 12.5px; font-weight: 600; color: var(--e-accent); text-decoration: none; white-space: nowrap; }

/* ── panels, tables ──────────────────────────────────────────────────── */
.ent-panel { background: var(--e-panel); border: 1px solid var(--e-line); }
.ent-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--e-line); background: var(--e-panel-2);
}
.ent-panel-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-2); }
.ent-panel-body { padding: 16px; }

.ent-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ent-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--e-line); background: var(--e-panel-2);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); white-space: nowrap;
}
.ent-table td { padding: 12px 14px; border-bottom: 1px solid var(--e-line-soft); color: var(--e-ink); vertical-align: middle; }
.ent-table tbody tr:last-child td { border-bottom: 0; }
.ent-table tbody tr:hover td { background: var(--e-panel-2); }
.ent-table .num { text-align: right; font-family: var(--e-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ent-table .mono, .ent-mono { font-family: var(--e-mono); }
.ent-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── small parts ─────────────────────────────────────────────────────── */
.ent-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid var(--e-line); background: var(--e-panel-2);
  font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-2); white-space: nowrap;
}
.ent-tag-ok { border-color: color-mix(in srgb, var(--e-ok) 45%, transparent); color: var(--e-ok); background: color-mix(in srgb, var(--e-ok) 10%, transparent); }
.ent-tag-bad { border-color: color-mix(in srgb, var(--e-bad) 45%, transparent); color: var(--e-bad); background: color-mix(in srgb, var(--e-bad) 10%, transparent); }
.ent-tag-warn { border-color: color-mix(in srgb, var(--e-warn) 45%, transparent); color: var(--e-warn); background: color-mix(in srgb, var(--e-warn) 10%, transparent); }
.ent-dot { width: 7px; height: 7px; flex: none; background: var(--e-ink-3); }
.ent-dot-on { background: var(--e-ok); }
.ent-dot-warn { background: var(--e-warn); }
.ent-dot-off { background: var(--e-ink-3); }
.ent-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); }
.ent-meter { height: 6px; background: var(--e-line-soft); overflow: hidden; }
.ent-meter i { display: block; height: 100%; background: var(--e-accent); }
.ent-note {
  display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--e-line);
  border-left: 3px solid var(--e-accent); background: var(--e-panel); font-size: 13.5px; color: var(--e-ink-2); line-height: 1.6;
}
.ent-note b { color: var(--e-ink); }
.ent-code {
  margin: 0; padding: 14px 16px; background: var(--e-dark); color: #dbe4ff; border: 1px solid var(--e-dark-line);
  font-family: var(--e-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre;
}
.ent-code .c-str { color: #7ee2b8; } .ent-code .c-cm { color: #6b7a99; } .ent-code .c-num { color: #ffcc80; }

/* ── split: catalogue + sticky stage ─────────────────────────────────── */
.ent-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent-split-list { border-right: 1px solid var(--e-line); max-height: 620px; overflow-y: auto; }
.ent-split-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; text-align: left;
  padding: 12px 16px; border: 0; border-bottom: 1px solid var(--e-line-soft); background: none; cursor: pointer;
}
.ent-split-item:hover { background: var(--e-panel-2); }
.ent-split-item.is-on { background: var(--e-accent-soft); box-shadow: inset 3px 0 0 var(--e-accent); }
.ent-split-item b { font-size: 13.5px; font-weight: 650; color: var(--e-ink); }
.ent-split-item span { grid-column: 1 / -1; font-size: 11.5px; color: var(--e-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-split-item em { font-style: normal; font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-2); }
.ent-split-stage { min-width: 0; }
.ent-stage-sticky { position: sticky; top: calc(var(--nav-height, 64px) + 70px); }

@media (max-width: 1020px) {
  .ent-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-kpi { padding-left: 20px; border-left: 1px solid var(--e-dark-line); }
  .ent-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ent-kpi:nth-child(n+3) { border-top: 1px solid var(--e-dark-line); }
  .ent-split { grid-template-columns: minmax(0, 1fr); }
  .ent-split-list { border-right: 0; border-bottom: 1px solid var(--e-line); max-height: 300px; }
  .ent-stage-sticky { position: static; }
}
@media (max-width: 680px) {
  .ent-wrap { padding: 0 16px; }
  .ent-hero-in { padding-top: 32px; }
  .ent-hero h1 { font-size: 1.55rem; }
  .ent-band-in { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .ent-band-act { margin-left: auto; }
  .ent-sec { padding: 32px 0; }
  .ent-kpi strong { font-size: 1.45rem; }
}

/* ── FAQ accordion ───────────────────────────────────────────────────── */
.ent-faq { border-bottom: 1px solid var(--e-line-soft); }
.ent-faq:last-child { border-bottom: 0; }
.ent-faq > summary {
  list-style: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--e-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ent-faq > summary::-webkit-details-marker { display: none; }
.ent-faq > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--e-ink-3); border-bottom: 2px solid var(--e-ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.ent-faq[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ent-faq > summary:hover { background: var(--e-panel-2); }
.ent-faq > div { padding: 0 16px 16px; font-size: 14px; line-height: 1.7; color: var(--e-ink-2); }

/* ── decoy stage inside the enterprise split ─────────────────────────── */
.ent .hp-sc-view[hidden] { display: none; }
.ent .hp-sc-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--e-line); background: var(--e-panel-2); }
.ent .hp-sc-dots { display: inline-flex; gap: 6px; flex: none; }
.ent .hp-sc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ent .hp-sc-dots i:nth-child(2) { background: #febc2e; } .ent .hp-sc-dots i:nth-child(3) { background: #28c840; }
.ent .hp-sc-addr { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 5px 10px;
  border: 1px solid var(--e-line); background: var(--e-panel); font-family: var(--e-mono); font-size: 11.5px;
  color: var(--e-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent .hp-sc-addr svg { flex: none; color: var(--e-ok); }
.ent .hp-sc-addr-term { color: #7ee2b8; background: var(--e-dark); border-color: var(--e-dark-line); }
.ent .hp-sc-tabs { display: inline-flex; flex: none; border: 1px solid var(--e-line); }
.ent .hp-sc-tab { padding: 5px 12px; border: 0; background: var(--e-panel); font: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--e-ink-3); cursor: pointer; }
.ent .hp-sc-tab + .hp-sc-tab { border-left: 1px solid var(--e-line); }
.ent .hp-sc-tab.is-on { background: var(--e-accent); color: #fff; }
.ent .hp-sc-pane { display: none; } .ent .hp-sc-pane.is-on { display: block; }
.ent .hp-sc-pane-preview { height: 460px; background: #fff; }
.ent .hp-sc-pane-preview iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ent .hp-sc-code { height: 460px; overflow: auto; border: 0; margin: 0; }
.ent .hp-sc-foot { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 14px;
  border-top: 1px solid var(--e-line); background: var(--e-panel-2); font-size: 11.5px; color: var(--e-ink-3); }
.ent .hp-sc-foot svg { color: var(--e-ok); }

/* builder inside an enterprise panel */
.ent .hb { margin-top: 0; }
.ent .hb-item, .ent .hb-out, .ent .hb-bundle, .ent .hb-tier { border-radius: 0; }
.ent .hb-cmd { border-radius: 0; }
@media (max-width: 1020px) { .ent .hp-sc-pane-preview, .ent .hp-sc-code { height: 380px; } }

/* ── light KPI strip (inside the signed-in dashboard, not a dark hero) ── */
.ent-kpis-light { margin-top: 0; border: 1px solid var(--e-line); border-top: 1px solid var(--e-line); background: var(--e-panel); }
.ent-kpis-light .ent-kpi { padding: 18px 20px; border-left: 1px solid var(--e-line); }
.ent-kpis-light .ent-kpi:first-child { border-left: 0; }
.ent-kpis-light .ent-kpi span { color: var(--e-ink-3); }
.ent-kpis-light .ent-kpi strong { color: var(--e-ink); }
.ent-kpis-light .ent-kpi small { color: var(--e-ink-3); }
.ent-kpis-light .ent-kpi.is-bad strong { color: var(--e-bad); }
@media (max-width: 1020px) {
  .ent-kpis-light .ent-kpi { border-left: 1px solid var(--e-line); }
  .ent-kpis-light .ent-kpi:nth-child(odd) { border-left: 0; }
  .ent-kpis-light .ent-kpi:nth-child(n+3) { border-top: 1px solid var(--e-line); }
}
/* enterprise blocks used inside the dashboard shell */
.dx .ent-sec:first-child, .dx3 .ent-sec:first-child { padding-top: 0; }
.ent-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; margin-bottom: 20px; background: var(--e-dark); border: 1px solid var(--e-dark-line);
}
.ent-head h1 { margin: 0; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.ent-head p { margin: 6px 0 0; color: var(--e-dark-ink-2); font-size: 13.5px; max-width: 70ch; }
.ent-head-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* signature list: long by nature, so it scrolls inside the panel */
.ent-sig-wrap { max-height: 520px; overflow-y: auto; }
.ent-sig thead th { position: sticky; top: 0; z-index: 1; }

/* ── search field on a dark hero ──────────────────────────────────────── */
.ent-search { display: flex; align-items: stretch; flex: 1 1 520px; min-width: 0; background: #060a13; border: 1px solid var(--e-dark-line); }
.ent-search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 0; background: transparent;
  color: var(--e-dark-ink); font: inherit; font-size: 14px; outline: none;
}
.ent-search input::placeholder { color: var(--e-ink-3); }
.ent-search input:focus { box-shadow: none; }
.ent-search button { flex: none; height: 42px; border: 0; border-left: 1px solid var(--e-dark-line); }

/* ── bridge: CVE tracker components inside the enterprise frame ───────── */
.ent .cv-panel, .ent .panel-card, .ent .cv-list, .ent .cv-item, .ent .cv-filters,
.ent .cv-composer3, .ent .cv-assets, .ent .cv-subs, .ent .cv-prod, .ent .cv-cta-band,
.ent .cv-sub, .ent .cv-asset, .ent .hb-out, .ent .hb-item, .ent .cv-tags, .ent .cv-input,
.ent .cv-select, .ent .cv-suggest-grouped, .ent .cv-picked, .ent .cv-vsuggest,
.ent .cv-switch-box, .ent .cv-opt, .ent .cv-amail, .ent .cv-exp-item, .ent .cv-vhow,
.ent .dx-card, .ent .cv-step-n, .ent details.cv-faq { border-radius: 0 !important; }
.ent .cv-pill, .ent .cv-tag, .ent .cv-vchip, .ent .cv-chip span, .ent .hb-bundle,
.ent .cv-count, .ent .cv-sev, .ent .cv-kev, .ent .cv-st, .ent .badge { border-radius: 2px !important; }
.ent .cv-sub-av, .ent .cv-picked-av, .ent .cv-suggest-av, .ent .cv-prod-av { border-radius: 2px !important; }
.ent .panel-card, .ent .dx-card { box-shadow: none !important; border: 1px solid var(--e-line) !important; }
.ent .panel-card-head { background: var(--e-panel-2); border-bottom: 1px solid var(--e-line); }
.ent .panel-card-head h2 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-2); }
.ent .cv-hero, .ent .cv-hero-v2 { display: none; }

/* ── code panels inside the enterprise frame ──────────────────────────────
   The docs code blocks come from main.css with rounded corners and the
   generic ink surface. On an .ent page they take the band palette instead,
   so a snippet reads as part of the same system: sharp corners, hairline
   rules, mono micro-label. In light theme the panel is band ink on a pale
   page; in dark the page is already near-black, so the panel lifts above it
   instead — a darker card would vanish, which is what it used to do. */
.ent {
  --e-code: var(--e-dark);
  --e-code-head: var(--e-dark-2);
  --e-code-line: var(--e-dark-line);
  --e-code-ink: var(--e-dark-ink);
  --e-code-ink-2: var(--e-dark-ink-2);
}
html[data-theme="dark"] .ent {
  --e-code: #162036;
  --e-code-head: #20304e;
  --e-code-line: #2c3a58;
  --e-code-ink: #e9eef7;
  --e-code-ink-2: #a7b2c9;
}
.ent .code-block,
.ent .code-card { border-radius: 2px; }
.ent .code-block { border-color: var(--e-code-line); box-shadow: none; }
.ent .code-block-header {
  background: var(--e-code-head); color: var(--e-code-ink-2);
  border-bottom-color: var(--e-code-line);
  font-family: var(--e-mono); letter-spacing: .08em;
}
.ent .code-card {
  background: var(--e-code); color: var(--e-code-ink);
  border-color: var(--e-code-line);
}
.ent .code-block .code-card { border: 0; }
.ent .code-block-copy {
  border-radius: 2px; font-family: var(--e-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px;
  color: var(--e-code-ink); background: rgba(255, 255, 255, .06);
  border-color: var(--e-code-line);
}
.ent .code-block-copy:hover { background: rgba(255, 255, 255, .13); border-color: #3b4c72; }
.ent .code-block-copy:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 1px; }
.ent .code-block-copy.is-done { color: var(--e-ok); background: rgba(53, 192, 138, .14); border-color: rgba(53, 192, 138, .45); }
.ent .code-card .cm { color: #8e9ab4; }
.ent .code-card .ck { color: #a8bcff; }
.ent .code-card .cs { color: #74d7a0; }

/* ── status page ─────────────────────────────────────────────────────── */
/* The band dot and the hero state row both carry the one verdict the view
   computed; everything else on the page reports a single component. */
.ent-band-id.is-warn i { background: var(--e-warn); }
.ent-band-id.is-bad i { background: var(--e-bad); }

.ent-state {
  display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px;
  background: #060a13; border: 1px solid var(--e-dark-line);
}
.ent-state i { width: 10px; height: 10px; flex: none; background: var(--e-ok); }
.ent-state.is-warn i { background: var(--e-warn); }
.ent-state.is-bad i { background: var(--e-bad); }
.ent-state b { font-size: 15px; font-weight: 700; color: #fff; }
.ent-state span {
  margin-left: auto; flex: none; font-family: var(--e-mono); font-size: 12px; color: var(--e-dark-ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .ent-state i { animation: ent-pulse 2.4s ease-in-out infinite; }
  @keyframes ent-pulse { 50% { opacity: .35; } }
}

/* The coverage meter sits in the dark KPI strip, so it needs the band's
   rules rather than the light panel ones. */
.ent-kpi .ent-meter { margin-top: 10px; background: var(--e-dark-line); }
.ent-kpi .ent-meter i { background: var(--e-ok); }

/* Sync history and run log: the shapes come from main.css, the corners and
   the palette from here. */
.ent .uptime-bars { height: 36px; gap: 2px; }
.ent .uptime-bars i { border-radius: 0; background: var(--e-ok); }
.ent .uptime-bars i.warn { background: var(--e-warn); }
.ent .uptime-bars i.down { background: var(--e-bad); }
.ent .uptime-bars i.none { background: var(--e-line); }
.ent .uptime-legend { font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-3); }

.ent .run-item { padding: 14px 16px; border-bottom: 1px solid var(--e-line-soft); }
.ent .run-item:last-child { border-bottom: 0; }
.ent .run-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 650; color: var(--e-ink); }
.ent .run-dot { width: 7px; height: 7px; border-radius: 0; background: var(--e-ok); }
.ent .run-dot.warn { background: var(--e-warn); }
.ent .run-dot.down { background: var(--e-bad); }
.ent .run-meta { margin: 6px 0 0; font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-3); }
.ent .run-desc {
  margin-top: 8px; padding: 8px 10px; background: var(--e-panel-2); border: 1px solid var(--e-line-soft);
  font-family: var(--e-mono); font-size: 11.5px; line-height: 1.6; color: var(--e-ink-2); white-space: pre-wrap;
}

@media (max-width: 680px) {
  .ent-state { flex-wrap: wrap; }
  .ent-state span { margin-left: 0; width: 100%; }
}

/* ── API reference ───────────────────────────────────────────────────── */
/* The docs keep their own markup — prose, code cards, parameter tables —
   and pick up the enterprise surface here: square corners, hairline rules,
   mono micro-labels. Same approach as the honeypot builder above. */
.ent .docs-layout { padding: 48px 0 80px; gap: 56px; grid-template-columns: 220px minmax(0, 1fr); }
.ent .docs-sidebar { top: calc(var(--nav-height, 64px) + 78px); }
.ent .docs-nav-label {
  padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--e-line);
  font-family: var(--e-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--e-ink-3);
}
.ent .docs-nav-link {
  padding: 7px 10px; border-radius: 0; border-left: 2px solid transparent;
  font-size: 13px; color: var(--e-ink-2);
}
.ent .docs-nav-link:hover { background: var(--e-panel-2); color: var(--e-ink); }
.ent .docs-nav-link.active {
  background: var(--e-accent-soft); border-left-color: var(--e-accent); color: var(--e-accent); font-weight: 600;
}

/* width:100% is load-bearing. A grid item carrying a max-width is sized to
   fit-content rather than stretched, and fit-content floors at min-content —
   which here is the longest code line, around 860px. Below that the column
   stayed 860 wide inside a 390px track and `body { overflow-x: clip }` ate
   the right-hand half of every docs page on a phone. */
.ent .docs-content { width: 100%; max-width: 860px; font-size: 15px; line-height: 1.75; }
.ent .prose h2 {
  display: flex; align-items: center; gap: 12px; margin: 52px 0 18px; padding-top: 26px;
  border-top: 1px solid var(--e-line);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--e-ink);
}
.ent .prose h2::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--e-accent); }
.ent .docs-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ent .prose h3 { margin: 28px 0 10px; font-size: 15px; font-weight: 700; color: var(--e-ink); }
.ent .prose p, .ent .prose li { color: var(--e-ink-2); }

/* Code samples take the band's palette so a scroll down the page reads as
   one surface rather than three. */
.ent .code-card {
  border-radius: 0; box-shadow: none; background: var(--e-dark); border: 1px solid var(--e-dark-line);
  color: #dbe4ff; font-size: 12.5px; line-height: 1.7;
}
.ent .code-label {
  display: inline-block; margin: 18px 0 0; font-family: var(--e-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-ink-3);
}
.ent .code-label + .code-card { margin-top: 8px; }
.ent .code-card .cs { color: #7ee2b8; } .ent .code-card .ck { color: #9ec1ff; }

.ent .table-wrap { overflow-x: auto; border: 1px solid var(--e-line); background: var(--e-panel); margin: 16px 0 24px; }
.ent .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ent .data-table th {
  text-align: left; padding: 10px 14px; background: var(--e-panel-2); border-bottom: 1px solid var(--e-line);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); white-space: nowrap;
}
.ent .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--e-line-soft); color: var(--e-ink); }
.ent .data-table tbody tr:last-child td { border-bottom: 0; }
.ent .data-table tbody tr:hover td { background: var(--e-panel-2); }

.ent .endpoint-badge { border-radius: 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent .endpoint-badge .method { background: var(--e-accent); color: #fff; }
.ent .endpoint-badge .method.post { background: var(--e-ok); }
.ent .endpoint-badge .path { color: var(--e-ink); }

/* The six capability cards under the hero, as bordered cells. */
.ent .explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent .intel-card {
  border: 0; border-radius: 0; box-shadow: none; background: none; padding: 20px;
  border-left: 1px solid var(--e-line); border-top: 1px solid var(--e-line);
}
.ent .intel-card:nth-child(3n+1) { border-left: 0; }
.ent .intel-card:nth-child(-n+3) { border-top: 0; }
.ent .intel-card h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--e-ink); }
.ent .intel-card p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--e-ink-2); }

@media (max-width: 980px) {
  .ent .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 32px; }
  .ent .docs-sidebar { position: static; max-height: none; }
  .ent .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent .intel-card:nth-child(3n+1) { border-left: 1px solid var(--e-line); }
  .ent .intel-card:nth-child(odd) { border-left: 0; }
  .ent .intel-card:nth-child(-n+3) { border-top: 1px solid var(--e-line); }
  .ent .intel-card:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 620px) {
  .ent .explain-grid { grid-template-columns: minmax(0, 1fr); }
  .ent .intel-card { border-left: 0; border-top: 1px solid var(--e-line); }
  .ent .intel-card:first-child { border-top: 0; }
}

/* ── cards, steps, CTA (about and any page that needs them) ──────────── */
/* One bordered field of cells rather than floating boxes: the grid draws
   the outer rule, each cell draws the two it owns, so there are never
   doubled hairlines between them. */
.ent-num {
  font-style: normal; font-family: var(--e-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--e-ink-3); margin-right: 2px;
}
.ent-sec h2 .ent-num { font-weight: 700; }

.ent-cards { display: grid; gap: 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ent-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ent-card {
  position: relative; display: block; padding: 22px 20px 24px; text-decoration: none;
  border-left: 1px solid var(--e-line); border-top: 1px solid var(--e-line);
  transition: background-color .15s;
}
.ent-cards-4 .ent-card:nth-child(4n+1), .ent-cards-3 .ent-card:nth-child(3n+1) { border-left: 0; }
.ent-cards-4 .ent-card:nth-child(-n+4), .ent-cards-3 .ent-card:nth-child(-n+3) { border-top: 0; }
a.ent-card:hover { background: var(--e-panel-2); }
.ent-card-ico {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px;
  border: 1px solid var(--e-line); background: var(--e-panel-2); color: var(--e-accent);
}
a.ent-card:hover .ent-card-ico { border-color: var(--e-accent); }
.ent-card h3 { margin: 0 0 7px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--e-ink); }
.ent-card p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--e-ink-2); }
.ent-card-go {
  position: absolute; top: 20px; right: 18px; font-size: 15px; color: var(--e-ink-3);
  opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
a.ent-card:hover .ent-card-go { opacity: 1; transform: none; color: var(--e-accent); }

.ent-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0;
  list-style: none; border: 1px solid var(--e-line); background: var(--e-panel);
}
.ent-step { padding: 22px 20px 24px; border-left: 1px solid var(--e-line); }
.ent-step:first-child { border-left: 0; }
.ent-step-num {
  display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--e-line);
  font-family: var(--e-mono); font-size: 20px; font-weight: 700; color: var(--e-accent);
}
.ent-step h3 { margin: 0 0 7px; font-size: 14px; font-weight: 700; color: var(--e-ink); }
.ent-step p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--e-ink-2); }

.ent-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px; background: var(--e-dark); border: 1px solid var(--e-dark-line);
}
.ent-cta h2 {
  margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff;
  text-transform: none; display: block;
}
.ent-cta h2::before { display: none; }
.ent-cta p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.7; color: var(--e-dark-ink-2); }
.ent-cta-act { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

@media (max-width: 1020px) {
  .ent-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-cards-4 .ent-card:nth-child(4n+1) { border-left: 1px solid var(--e-line); }
  .ent-cards-4 .ent-card:nth-child(odd) { border-left: 0; }
  .ent-cards-4 .ent-card:nth-child(-n+4) { border-top: 1px solid var(--e-line); }
  .ent-cards-4 .ent-card:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 760px) {
  .ent-cards-4, .ent-cards-3, .ent-steps { grid-template-columns: minmax(0, 1fr); }
  .ent-cards .ent-card, .ent-steps .ent-step { border-left: 0; border-top: 1px solid var(--e-line); }
  .ent-cards .ent-card:first-child, .ent-steps .ent-step:first-child { border-top: 0; }
  .ent-card-go { display: none; }
}

/* ── auth (login, register) ──────────────────────────────────────────── */
/* Form on the left, what the account is for on the right: the dark half is
   the same band surface the rest of the system uses, so signing in does not
   land on a different-looking site. */
.ent-auth {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: stretch; gap: 0; margin: 48px auto 72px; max-width: 920px;
}
.ent-auth-form { border-right: 0; }
.ent-auth-form .ent-panel-body { padding: 22px 24px 24px; }

.ent-field { margin-bottom: 16px; }
.ent-field label {
  display: block; margin-bottom: 6px;
  font-family: var(--e-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.ent-field input {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 0;
  background: var(--e-panel); border: 1px solid var(--e-line); color: var(--e-ink);
  font: 400 14px/1 var(--font-sans);
}
.ent-field input:focus {
  outline: none; border-color: var(--e-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-accent) 18%, transparent);
}
.ent-field-err { display: block; margin-top: 5px; font-size: 12px; color: var(--e-bad); }
.ent-btn-block { width: 100%; height: 42px; margin-top: 4px; }
.ent-auth-alt { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--e-ink-2); }
.ent-auth-alt a { color: var(--e-accent); font-weight: 600; text-decoration: none; }
.ent-auth-alt a:hover { text-decoration: underline; }

.ent-auth-aside {
  padding: 30px 32px; background: var(--e-dark); border: 1px solid var(--e-dark-line);
  color: var(--e-dark-ink-2);
}
.ent-auth-aside h1 {
  margin: 0 0 12px; color: #fff; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase;
}
.ent-auth-aside p { margin: 0; font-size: 14px; line-height: 1.7; }
.ent-auth-aside .ent-facts { margin-top: 20px; gap: 10px 0; flex-direction: column; align-items: flex-start; }
.ent-auth-figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 26px; border-top: 1px solid var(--e-dark-line);
}
.ent-auth-figs div { padding: 16px 0 0; border-left: 1px solid var(--e-dark-line); padding-left: 18px; }
.ent-auth-figs div:first-child { border-left: 0; padding-left: 0; }
.ent-auth-figs span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ent-auth-figs strong {
  display: block; margin-top: 6px; font-size: 1.5rem; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

@media (max-width: 860px) {
  .ent-auth { grid-template-columns: minmax(0, 1fr); margin: 28px auto 56px; }
  .ent-auth-form { border-right: 1px solid var(--e-line); }
  .ent-auth-aside { border-top: 0; padding: 24px; }
}

/* A timestamp in a KPI cell is not a headline number; it gets body size so
   the strip stays readable rather than wrapping a date across two lines. */
.ent-kpi strong.ent-kpi-sm { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
/* Tags that sit next to a name in a table cell, not on their own line. */
.ent-table td .ent-tag { margin-left: 6px; vertical-align: 1px; }

/* ── list pages: secondary cell text, pager, empty state ─────────────── */
/* .ent-btn is dark-band furniture; on a light panel it needs the body
   palette or it reads as a hole in the page. */
.ent-panel .ent-btn, .ent-pager .ent-btn {
  border-color: var(--e-line); background: var(--e-panel); color: var(--e-ink-2);
}
.ent-panel .ent-btn:hover, .ent-pager .ent-btn:hover {
  border-color: var(--e-accent); background: var(--e-panel-2); color: var(--e-accent);
}
.ent-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.ent-cell-note {
  display: block; margin-top: 5px; max-width: 420px;
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5; color: var(--e-ink-3);
}
.ent-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; }
.ent-empty { text-align: center; padding: 40px 16px; color: var(--e-ink-3); font-size: 14px; }

/* A share bar beside the percentage it restates; it is decoration for the
   number, so it collapses first when the table runs out of room. */
.ent-col-share { width: 160px; }
.ent-col-share .ent-meter { display: block; width: 100%; }
@media (max-width: 760px) { .ent-col-share { display: none; } }

/* ── abuse desk table (keeps its own ad-* cell markup) ───────────────── */
.ent .ad-sub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--e-ink-3); }
.ent .ad-org { font-size: 13.5px; font-weight: 650; color: var(--e-ink); }
.ent .ad-ref { font-weight: 700; color: var(--e-accent); text-decoration: none; }
.ent .ad-ref:hover { text-decoration: underline; }
.ent .ad-contact { font-size: 12.5px; color: var(--e-ink-2); }
.ent .ad-num, .ent .ad-table .ad-num {
  text-align: right; font-family: var(--e-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ent .ad-kind { font-size: 12.5px; font-weight: 600; color: var(--e-ink); }
.ent .ad-excerpt {
  display: block; margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--e-line);
  font-style: normal; font-size: 11.5px; line-height: 1.55; color: var(--e-ink-3); quotes: none;
}
.ent .ad-action { white-space: nowrap; }
.ent .ad-cc {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 11.5px; color: var(--e-ink-3);
}
.ent .ent-note p { margin: 0 0 8px; }
.ent .ent-note p:last-child { margin-bottom: 0; }
.ent .ent-note a { color: var(--e-accent); text-decoration: none; font-weight: 600; }
.ent .ad-contact { min-width: 180px; }

/* ── threat overview ─────────────────────────────────────────────────── */
/* The page keeps its cards, charts and world map; they take the system's
   surface here rather than being rebuilt. */
.ent-ov { padding: 40px 0 72px; }
.ent-ov .card {
  border-radius: 0; box-shadow: none; background: var(--e-panel);
  border: 1px solid var(--e-line); padding: 0;
}
.ent-ov .card > *:not(.panel-title):not(.table-wrap) { margin-left: 20px; margin-right: 20px; }
.ent-ov .card > .worldmap { margin: 0 20px 20px; }
.ent-ov .panel-title {
  margin: 0 0 18px; padding: 12px 16px;
  border-bottom: 1px solid var(--e-line); background: var(--e-panel-2);
}
.ent-ov .panel-title h2, .ent-ov .panel-title h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--e-ink-2);
}
.ent-ov .card:last-child { margin-bottom: 0; }
.ent-ov .kv-table { width: calc(100% - 40px); margin: 0 20px 20px; border-collapse: collapse; }
.ent-ov .kv-table td { padding: 9px 0; border-bottom: 1px solid var(--e-line-soft); font-size: 13.5px; color: var(--e-ink); }
.ent-ov .kv-table td:last-child { text-align: right; font-family: var(--e-mono); }
.ent-ov .kv-table tr:last-child td { border-bottom: 0; }
.ent-ov .table-wrap { border: 0; margin: 0; }

/* Breadcrumb inside a dark hero. */
.ent-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
  font-family: var(--e-mono); font-size: 11.5px; color: var(--e-dark-ink-2);
}
.ent-crumb a { color: var(--e-dark-ink-2); text-decoration: none; }
.ent-crumb a:hover { color: #fff; }
.ent-crumb span[aria-hidden] { color: #3a4a6e; }

/* ── tool pages (DNS, subnet, converter, bulk) ───────────────────────── */
/* These keep their form markup; only the surface changes. */
.ent-tool { padding: 40px 0 72px; max-width: 980px; }
.ent .card {
  border-radius: 0; box-shadow: none; background: var(--e-panel);
  border: 1px solid var(--e-line); padding: 20px;
}
.ent .field { margin-bottom: 14px; }
.ent .field label { font-family: var(--e-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-ink-3); }
.ent .field input, .ent .field textarea, .ent .field select {
  border-radius: 0; background: var(--e-panel); border: 1px solid var(--e-line); color: var(--e-ink);
}
.ent .field input:focus, .ent .field textarea:focus, .ent .field select:focus {
  border-color: var(--e-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-accent) 18%, transparent);
}
.ent .btn { border-radius: 0; }
.ent .btn-primary { background: var(--e-accent); border-color: var(--e-accent); }
.ent .btn-primary:hover { background: #0f44bd; border-color: #0f44bd; }
.ent .breadcrumb { display: none; }
.ent-tool-wide { max-width: 1280px; }
.ent-crumb-light { color: var(--e-ink-3); margin: 0 0 20px; }
.ent-crumb-light a { color: var(--e-ink-2); }
.ent-crumb-light a:hover { color: var(--e-accent); }
.ent-crumb-light span[aria-hidden] { color: var(--e-line); }

/* .ent-plain: the band only. The page below keeps its own surfaces, so the
   body-background rules the full system applies must not fire here. */
body:has(.ent-plain) main { background: var(--bg-page); }
html[data-theme="dark"] body:has(.ent-plain) main { background: var(--bg-page); }
html[data-theme="dark"] body:has(.ent-plain) { background: var(--bg-page); }
.ent-plain { color: inherit; }

/* ── WordPress plugin block (integrations) ───────────────────────────── */
/* Every other entry on that page is a snippet to paste; this one is a
   product you download, so it gets a release panel, a picture of the screen
   it installs and its own cards. The shapes stay the enterprise ones —
   hairline cells on the panel surface — except the screenshot, which keeps
   wp-admin's own greys in both themes because that is what it is a picture
   of. Rules are scoped with .ent so they outrank the .prose defaults. */
.ent .wp-logo { height: 46px; width: 46px; padding: 0; background: none; }
html[data-theme="dark"] .ent .wp-logo { background: none; padding: 0; }

.ent .wp-rel { margin: 22px 0 10px; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent .wp-rel-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px;
}
.ent .wp-rel-id b { display: block; font-size: 15px; font-weight: 700; color: var(--e-ink); }
.ent .wp-rel-id span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--e-ink-3); }
.ent .wp-rel-act { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.ent .wp-rel-act .btn { border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; }
.ent .wp-rel-spec {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; border-top: 1px solid var(--e-line);
}
.ent .wp-rel-spec > div { padding: 13px 20px; border-left: 1px solid var(--e-line); }
.ent .wp-rel-spec > div:first-child { border-left: 0; }
.ent .wp-rel-spec dt {
  font-family: var(--e-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.ent .wp-rel-spec dd {
  margin: 6px 0 0; font-size: 14px; font-weight: 650; color: var(--e-ink);
  font-variant-numeric: tabular-nums;
}
.ent .wp-rel-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0;
  padding: 10px 20px; border-top: 1px solid var(--e-line); background: var(--e-panel-2);
}
.ent .wp-rel-sum span {
  flex: none; font-family: var(--e-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.ent .wp-rel-sum code {
  min-width: 0; font-family: var(--e-mono); font-size: 11.5px;
  color: var(--e-ink-2); overflow-wrap: anywhere;
}

/* The screenshot. It scrolls sideways under ~700px rather than reflowing:
   a shrunken admin screen stops being a picture of the admin screen. */
.ent .wp-shot { margin: 26px 0 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.ent .wp-shot-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ent .wp-shot figcaption {
  padding: 10px 14px; border-top: 1px solid var(--e-line);
  font-size: 12px; color: var(--e-ink-3);
}
.ent .wp-adm {
  min-width: 720px; display: grid; grid-template-columns: 150px minmax(0, 1fr);
  background: #f0f0f1; color: #1d2327; font-size: 12px; line-height: 1.5;
}
.ent .wp-adm-side { padding: 7px 0; background: #1d2327; }
.ent .wp-adm-side span {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 11.5px; color: #c3c4c7;
}
.ent .wp-adm-side i { flex: none; width: 11px; height: 11px; border: 1px solid currentColor; opacity: .55; }
.ent .wp-adm-side hr { margin: 7px 0; border: 0; border-top: 1px solid #2c3338; }
.ent .wp-adm-side .wp-adm-brand { color: #fff; font-weight: 600; padding-bottom: 9px; }
.ent .wp-adm-side .is-on { background: #2271b1; color: #fff; font-weight: 600; }
.ent .wp-adm-side .is-on i { opacity: 1; }
.ent .wp-adm-body { min-width: 0; padding: 15px 18px 18px; }
.ent .wp-adm-body h3 { margin: 0 0 11px; font-size: 17px; font-weight: 400; color: #1d2327; }
.ent .wp-adm-note {
  margin: 0 0 13px; padding: 8px 11px; background: #fff;
  border: 1px solid #c3c4c7; border-left: 4px solid #72aee6; font-size: 11.5px; color: #1d2327;
}
.ent .wp-adm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ent .wp-adm-card { padding: 9px 11px; background: #fff; border: 1px solid #c3c4c7; }
.ent .wp-adm-card span { display: block; font-size: 10.5px; color: #646970; }
.ent .wp-adm-card strong {
  display: block; margin: 2px 0 1px; font-size: 20px; font-weight: 400;
  color: #1d2327; font-variant-numeric: tabular-nums;
}
.ent .wp-adm-card small { display: block; font-size: 10px; color: #8c8f94; }
.ent .wp-adm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ent .wp-adm-box { background: #fff; border: 1px solid #c3c4c7; }
.ent .wp-adm-box h4 {
  margin: 0; padding: 8px 11px; border-bottom: 1px solid #c3c4c7;
  font-size: 12px; font-weight: 600; color: #1d2327;
}
.ent .wp-adm-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ent .wp-adm-tbl th, .ent .wp-adm-tbl td {
  padding: 5px 11px; text-align: left; border-bottom: 1px solid #f0f0f1; color: #1d2327;
}
.ent .wp-adm-tbl thead th {
  background: #f6f7f7; color: #646970; font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.ent .wp-adm-tbl tbody th { width: 44%; font-weight: 400; color: #646970; }
.ent .wp-adm-tbl tbody tr:last-child th, .ent .wp-adm-tbl tbody tr:last-child td { border-bottom: 0; }
.ent .wp-adm-tbl code { font-family: var(--e-mono); font-size: 11px; color: #2271b1; }
.ent .wp-adm-ok { color: #00804e; font-weight: 600; }
.ent .wp-adm-act { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 11px; border-top: 1px solid #f0f0f1; }
.ent .wp-adm-btn {
  padding: 3px 9px; border: 1px solid #2271b1; border-radius: 3px;
  background: #f6f7f7; color: #2271b1; font-size: 11px;
}
.ent .wp-adm-link { color: #2271b1; font-size: 11.5px; }

/* What it does / how it decides: one bordered field of cells, the same
   construction as .ent-cards, with its own h3 so the prose rule cannot
   out-specify it. */
.ent .wp-feats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 14px 0 6px; border: 1px solid var(--e-line); background: var(--e-panel);
}
.ent .wp-feats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ent .wp-feat { padding: 18px 18px 20px; border-left: 1px solid var(--e-line); border-top: 1px solid var(--e-line); }
.ent .wp-feats .wp-feat:nth-child(3n+1) { border-left: 0; }
.ent .wp-feats .wp-feat:nth-child(-n+3) { border-top: 0; }
.ent .wp-feats-2 .wp-feat:nth-child(n) { border-left: 1px solid var(--e-line); border-top: 0; }
.ent .wp-feats-2 .wp-feat:nth-child(odd) { border-left: 0; }
.ent .wp-feat-ico {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px;
  border: 1px solid var(--e-line); background: var(--e-panel-2); color: var(--e-accent);
}
.ent .wp-feat h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--e-ink); }
.ent .wp-feat p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--e-ink-2); }
.ent .wp-tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 8px;
  border: 1px solid var(--e-line); background: var(--e-panel-2);
  font-family: var(--e-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.ent .wp-note { display: block; margin: 16px 0 0; }

.ent .wp-steps {
  margin: 14px 0 18px; padding: 0; list-style: none; counter-reset: wpstep;
  border: 1px solid var(--e-line); background: var(--e-panel);
}
/* The number is positioned rather than laid out: a grid or flex li would
   turn the <span class="mono"> bits inside each step into grid items of
   their own and shred the sentence into columns. */
.ent .wp-steps li {
  position: relative; display: block; margin: 0;
  padding: 13px 18px 13px 56px; border-top: 1px solid var(--e-line);
  font-size: 14px; line-height: 1.7; color: var(--e-ink-2);
}
.ent .wp-steps li:first-child { border-top: 0; }
.ent .wp-steps li::before {
  counter-increment: wpstep; content: counter(wpstep, decimal-leading-zero);
  position: absolute; left: 18px; top: 16px;
  font-family: var(--e-mono); font-size: 12.5px; font-weight: 700; color: var(--e-accent);
}
.ent .wp-steps li b { color: var(--e-ink); }

@media (max-width: 760px) {
  .ent .wp-rel-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent .wp-rel-spec > div:nth-child(odd) { border-left: 0; }
  .ent .wp-rel-spec > div:nth-child(n+3) { border-top: 1px solid var(--e-line); }
  .ent .wp-rel-act { flex: 1 1 100%; }
  .ent .wp-rel-act .btn { flex: 1 1 150px; justify-content: center; }
  .ent .wp-feats, .ent .wp-feats-2 { grid-template-columns: minmax(0, 1fr); }
  .ent .wp-feats .wp-feat, .ent .wp-feats-2 .wp-feat { border-left: 0; border-top: 1px solid var(--e-line); }
  .ent .wp-feats .wp-feat:first-child, .ent .wp-feats-2 .wp-feat:first-child { border-top: 0; }
}

/* A .btn inside .prose lost to `.prose a` (0,1,1 beats 0,1,0), so every
   button in the docs column rendered as an underlined accent link sitting
   on top of its own fill. Buttons are buttons. */
.ent .prose a.btn { text-decoration: none; }
.ent .prose a.btn-primary, .ent .prose a.btn-primary:hover { color: #fff; }
.ent .prose a.btn-secondary, .ent .prose a.btn-secondary:hover { color: var(--e-ink); }
/* The mock is a picture of wp-admin, so the page's own prose and inline-code
   styling has to stop at its edge — in dark theme it was tinting the notice
   grey and giving every address a dark chip. */
.ent .wp-adm p.wp-adm-note { color: #1d2327; }
.ent .wp-adm code { padding: 0; border: 0; border-radius: 0; background: none; color: #2271b1; }


/* ── one measure down a .ent-plain page (2026-11-01) ──────────────────────
   On /pricing the band aligned to the enterprise 1280, the hero and tables
   to the site's 1180 container, the plan pair to 1000 and the "higher
   volume" strip to 820 — four different left edges, so every section looked
   shifted against the one above it. The band now shares the container, and
   the pricing sections share one width. */
.ent-plain .ent-wrap { max-width: var(--container); }
.pr-section,
.pr-more,
.pr-band { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* The limits table sat left inside its 820px box: the <table> took only the
   width of its own content. It now fills the section, so its edges line up
   with the plan cards above it and the FAQ below. */
.pr-limits-wrap { max-width: 100%; }
table.data-table.pr-limits { width: 100%; }

/* ── shield: what is in the box, what it needs, what it hashes to ──────── */
.sh-box { margin-top: 18px; }
.sh-files, .sh-ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.sh-files li { font-family: var(--e-mono); font-size: 12px; }
.sh-files a { color: var(--e-ink-2); text-decoration: none; }
.sh-files a:hover { color: var(--e-accent); text-decoration: underline; }
.sh-ticks li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--e-ink-2); }
.sh-ticks li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--e-ok); border-bottom: 2px solid var(--e-ok); transform: rotate(-45deg);
}
.sh-sha { margin: 12px 0 10px; overflow-x: auto; }
.sh-sha code { font-size: 11px; white-space: pre; }
.sh-rel-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; font-size: 12.5px; }
.sh-rel-links a { color: var(--e-accent); }
.sh-rel .ent-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ==========================================================================
   IP-DB Shield product page — rebuilt 2026-11-01
   Everything is a plain grid inside .ent-wrap: no sticky column and no inner
   scroll box, so every section shares the same left and right edge all the
   way down the page. Scoped to .shx-* so nothing else can inherit it.
   ========================================================================== */

.shx-kit {
  font-style: normal; font-family: var(--e-mono); font-size: 11px; opacity: .75;
  margin-left: 9px; padding-left: 9px; border-left: 1px solid currentColor;
}
.shx-meta { font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-3); }
.shx-opts-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--e-ink-3);
}
.shx-opts-label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .85; }
.shx-opts-label b { font-family: var(--e-mono); font-size: 12px; color: var(--e-accent); }

/* ── 1. the live screens ─────────────────────────────────────────────── */
.shx-demo {
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  border: 1px solid var(--e-line); background: var(--e-panel);
}
.shx-side { border-right: 1px solid var(--e-line); min-width: 0; }
.shx-pick-item {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; width: 100%; text-align: left;
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--e-line-soft);
  background: none; cursor: pointer; font: inherit;
}
.shx-pick-item:hover { background: var(--e-panel-2); }
.shx-pick-item.is-on { background: var(--e-accent-soft); box-shadow: inset 3px 0 0 var(--e-accent); }
.shx-pick-item b { font-size: 13.5px; font-weight: 650; color: var(--e-ink); }
.shx-pick-item em {
  font-style: normal; font-family: var(--e-mono); font-size: 11px; color: var(--e-ink-3);
  border: 1px solid var(--e-line); padding: 1px 6px; align-self: start;
}
.shx-pick-item span { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--e-ink-3); }
.shx-opts { padding: 16px; display: grid; gap: 7px; }
.shx-opts input[type="text"], .shx-opts input[type="url"], .shx-opts select,
.shx-f input[type="text"], .shx-f select, .shx-f textarea {
  width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 0;
  color: var(--e-ink); background: var(--e-panel); border: 1px solid var(--e-line);
}
.shx-opts input:focus, .shx-opts select:focus, .shx-f input:focus, .shx-f select:focus, .shx-f textarea:focus {
  outline: 2px solid var(--e-accent); outline-offset: -1px; border-color: var(--e-accent);
}
.shx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shx-two > label { display: grid; gap: 5px; min-width: 0; }
.shx-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shx-swatch {
  width: 22px; height: 22px; padding: 0; cursor: pointer; background: var(--sw);
  border: 1px solid rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 2px var(--e-panel);
}
.shx-swatch.is-on { box-shadow: inset 0 0 0 2px var(--e-panel), 0 0 0 2px var(--e-accent); }
.shx-swatches input[type="color"] {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--e-line); background: none; cursor: pointer;
}
.shx-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--e-ink-2); cursor: pointer; }
.shx-check input { margin: 3px 0 0; accent-color: var(--e-accent); flex: 0 0 auto; }
.shx-mini {
  font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; padding: 0;
  border: 0; background: none; color: var(--e-accent); cursor: pointer; text-decoration: underline;
}

.shx-stage { padding: 18px; background: var(--e-panel-2); display: grid; gap: 10px; align-content: start; min-width: 0; }
.shx-browser { border: 1px solid var(--e-line); background: var(--e-panel); }
.shx-browser-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: var(--e-panel-2); border-bottom: 1px solid var(--e-line);
}
.shx-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.shx-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--e-line); display: block; }
.shx-addr {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-3);
  background: var(--e-panel); border: 1px solid var(--e-line); padding: 4px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shx-addr b { color: var(--e-ink-2); font-weight: 600; }
.shx-addr svg { color: var(--e-ok); flex: 0 0 auto; }
.shx-code {
  font-family: var(--e-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; color: var(--e-warn); border: 1px solid currentColor; flex: 0 0 auto;
}
.shx-code[data-code="403"] { color: var(--e-bad); }
.shx-browser iframe { display: block; width: 100%; height: 560px; border: 0; background: var(--e-panel-2); }
.shx-live { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; color: var(--e-ink-3); }
.shx-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--e-ok); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(10, 125, 85, .5); animation: shxPulse 2s infinite;
}
@keyframes shxPulse {
  70% { box-shadow: 0 0 0 7px rgba(10, 125, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 125, 85, 0); }
}

/* ── 2. the decision ladder ──────────────────────────────────────────── */
.shx-ladder { list-style: none; margin: 0; padding: 0; border: 1px solid var(--e-line); background: var(--e-panel); }
.shx-rung {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.15fr); align-items: center;
  gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--e-line-soft);
  box-shadow: inset 3px 0 0 var(--e-ok);
}
.shx-rung:last-child { border-bottom: 0; }
.shx-rung.is-stop { box-shadow: inset 3px 0 0 var(--e-bad); }
.shx-rung.is-ask { box-shadow: inset 3px 0 0 var(--e-warn); }
.shx-rung-n { font-family: var(--e-mono); font-size: 12px; color: var(--e-ink-3); }
.shx-rung-c { font-size: 14px; font-weight: 550; color: var(--e-ink); }
.shx-rung-o { font-size: 13px; color: var(--e-ink-2); }

/* ── 3. sources table ────────────────────────────────────────────────── */
.shx-table th[scope="row"] { font-weight: 550; color: var(--e-ink); white-space: nowrap; }
.shx-col-pick { background: var(--e-accent-soft); }

/* ── 4. install ──────────────────────────────────────────────────────── */
.shx-tabs { border: 1px solid var(--e-line); background: var(--e-panel); }
.shx-tabbar { display: flex; border-bottom: 1px solid var(--e-line); overflow-x: auto; }
.shx-tab {
  font: inherit; font-size: 13px; font-weight: 550; padding: 12px 18px; cursor: pointer; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--e-ink-2);
}
.shx-tab:hover { color: var(--e-ink); background: var(--e-panel-2); }
.shx-tab.is-on { color: var(--e-accent); border-bottom-color: var(--e-accent); }
.shx-pane { display: none; padding: 22px; }
.shx-pane.is-on { display: block; }
.shx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.shx-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.shx-step-n {
  display: grid; place-items: center; width: 30px; height: 30px;
  font-family: var(--e-mono); font-size: 12px; font-weight: 700; color: var(--e-accent);
  border: 1px solid var(--e-line); background: var(--e-panel-2);
}
.shx-step-b { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.shx-step-b b { font-size: 13.5px; }
.shx-step-b pre { margin: 0; width: 100%; }
.shx-step-p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--e-ink-2); }
.shx-token { border: 1px solid var(--e-line); background: var(--e-panel-2); padding: 16px; margin: 0 0 16px; }
.shx-token-head { display: grid; gap: 3px; margin-bottom: 12px; }
.shx-token-head b { font-size: 13.5px; }
.shx-token-head span { font-size: 12.5px; color: var(--e-ink-3); }
.shx-token-row { display: flex; gap: 8px; flex-wrap: wrap; }
.shx-token-row input {
  flex: 1 1 220px; font: inherit; font-size: 13.5px; padding: 8px 10px;
  background: var(--e-panel); border: 1px solid var(--e-line); color: var(--e-ink);
}
.shx-token-row input:focus { outline: 2px solid var(--e-accent); outline-offset: -1px; }
.shx-box { margin-top: 20px; }
.shx-files, .shx-ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.shx-files li { font-family: var(--e-mono); font-size: 12px; }
.shx-files a { color: var(--e-ink-2); text-decoration: none; }
.shx-files a:hover { color: var(--e-accent); text-decoration: underline; }
.shx-ticks li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.65; color: var(--e-ink-2); }
.shx-ticks li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 5px;
  border-left: 2px solid var(--e-ok); border-bottom: 2px solid var(--e-ok); transform: rotate(-45deg);
}
.shx-sha { margin: 12px 0 10px; overflow-x: auto; }
.shx-sha code { font-size: 10.5px; white-space: pre; word-break: break-all; }
.shx-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; font-size: 12.5px; }
.shx-links a { color: var(--e-accent); }

/* ── 5. the builder ──────────────────────────────────────────────────── */
.shx-build {
  display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
  border: 1px solid var(--e-line); background: var(--e-panel);
}
.shx-form { padding: 20px; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--e-line); }
.shx-f { display: grid; gap: 5px; min-width: 0; }
.shx-f textarea { font-family: var(--e-mono); font-size: 12.5px; resize: vertical; }
.shx-f input[type="range"] { width: 100%; accent-color: var(--e-accent); }
.shx-out { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.shx-out-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--e-line); background: var(--e-panel-2);
  font-family: var(--e-mono); font-size: 12px; color: var(--e-ink-2);
}
.shx-out-act { display: flex; gap: 8px; }
.shx-cfg { margin: 0; border: 0; max-height: 620px; overflow: auto; }
.shx-cfg code { white-space: pre; }

/* ── 6. the panel ────────────────────────────────────────────────────── */
.shx-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.shx-mock { border: 1px solid var(--e-line); background: var(--e-panel); }
.shx-mock-bar {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--e-line); background: var(--e-panel-2);
}
.shx-mock-bar b { font-size: 13.5px; }
.shx-mock-bar span { font-family: var(--e-mono); font-size: 11.5px; color: var(--e-ink-3); }
.shx-mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--e-line); }
.shx-mock-kpis > div { padding: 13px 16px; border-right: 1px solid var(--e-line-soft); }
.shx-mock-kpis > div:last-child { border-right: 0; }
.shx-mock-kpis b { display: block; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.shx-mock-kpis span { font-size: 11px; color: var(--e-ink-3); }
.shx-mock-rows { width: 100%; border-collapse: collapse; font-family: var(--e-mono); font-size: 11.5px; }
.shx-mock-rows td { padding: 8px 16px; border-bottom: 1px solid var(--e-line-soft); color: var(--e-ink-2); }
.shx-mock-rows tr:last-child td { border-bottom: 0; }
.shx-tag { display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 700; border: 1px solid currentColor; }
.shx-tag-bad { color: var(--e-bad); }
.shx-tag-warn { color: var(--e-warn); }
.shx-cli { display: grid; gap: 8px; min-width: 0; }
.shx-cli pre { margin: 0; }

@media (max-width: 1080px) {
  .shx-demo, .shx-build { grid-template-columns: minmax(0, 1fr); }
  .shx-side, .shx-form { border-right: 0; border-bottom: 1px solid var(--e-line); }
  .shx-panel { grid-template-columns: minmax(0, 1fr); }
  .shx-browser iframe { height: 520px; }
}
@media (max-width: 680px) {
  .shx-rung { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; }
  .shx-rung-o { grid-column: 2; }
  .shx-two { grid-template-columns: minmax(0, 1fr); }
  .shx-mock-kpis { grid-template-columns: repeat(2, 1fr); }
  .shx-browser iframe { height: 480px; }
  .shx-stage { padding: 12px; }
}

/* ── a promo inside the light docs column (integrations → shield) ─────── */
.ix-promo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  margin: 0 0 42px; padding: 18px 20px;
  border: 1px solid var(--e-line); border-left: 3px solid var(--e-accent); background: var(--e-panel-2);
}
.ix-promo-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--e-line); background: var(--e-panel); color: var(--e-accent);
}
.ix-promo-b { min-width: 0; }
.ix-promo-b b { display: block; font-size: 14.5px; color: var(--e-ink); margin-bottom: 4px; }
.ix-promo-b p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--e-ink-2); }
.ix-promo-go { flex: 0 0 auto; }
@media (max-width: 760px) {
  .ix-promo { grid-template-columns: auto minmax(0, 1fr); }
  .ix-promo-go { grid-column: 1 / -1; justify-self: start; }
}

/* ── pricing limits table: one column rhythm ──────────────────────────────
   The header sat over columns whose widths were decided by their content,
   so "Limit" and "Cost" drifted away from the values under them. Fixed
   widths for the two numeric columns put every heading over its own data. */
table.data-table.pr-limits th:first-child,
table.data-table.pr-limits td:first-child { width: auto; text-align: left; }
table.data-table.pr-limits th:nth-child(2),
table.data-table.pr-limits td:nth-child(2) { width: 32%; text-align: center; }
table.data-table.pr-limits th:nth-child(3),
table.data-table.pr-limits td:nth-child(3) { width: 16%; text-align: center; white-space: nowrap; }
.pr-row-hl td { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 600; }
.pr-row-hl td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pr-table-note {
  max-width: 1000px; margin: 14px auto 0; font-size: 13px; line-height: 1.65; color: var(--text-secondary);
}
.pr-table-note a { color: var(--accent-strong); font-weight: 600; }

/* The quota a contributor earns, stated where the decision is made. */
.ent-hero-perk {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 20px 0 0; padding: 9px 14px; font-size: 13px; line-height: 1.5;
  color: var(--e-dark-ink); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--e-dark-line); border-left: 2px solid var(--e-accent);
}
.ent-hero-perk svg { color: var(--e-accent); flex: 0 0 auto; }
.ent-hero-perk a { color: #fff; font-weight: 600; white-space: nowrap; }