/* KKE Circuit – additional styling on top of Tailwind utility classes
   ──────────────────────────────────────────────────────────────────
   IBM Plex Sans + Plex Mono. Slightly denser base size, tabular figures
   on numerical contexts, and a deliberately technical eyebrow style.
*/

html { font-size: 14.5px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 1280px) { html { font-size: 15px; } }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "tnum";
  letter-spacing: -0.005em;
  color: #1e293b;
}

/* Headings: tighten + technical numerals */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.022em;
  font-feature-settings: "ss01", "ss02", "tnum";
  font-weight: 600;
}
h1 { letter-spacing: -0.03em; font-weight: 700; }

/* Mono utilities — picked up by `font-mono` Tailwind class too */
.font-mono, code, kbd, pre, samp,
.eyebrow, .badge-tech, .price-amount, .meta-line {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "ss01", "ss02", "tnum";
}

/* Eyebrow / kicker label — uppercase, mono, tracked-out */
.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1d4ed8;
}

/* Auto-promote the existing "NEW — Cloud-based..." pill on the home hero */
section .inline-flex.bg-brand-100.text-brand-700,
section .inline-flex.bg-emerald-50,
.text-xs.uppercase.tracking-widest,
.text-\[10px\].font-bold.uppercase {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.12em !important;
}

/* Pricing numerals always tabular + mono */
#proPrice, #proBilled, .price-amount {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
}

/* Markdown / CMS body content */
.prose img  { border-radius: 0.5rem; }
.prose h2   { font-size: 1.4rem;  font-weight: 600; margin-top: 2rem;     letter-spacing: -0.022em; }
.prose h3   { font-size: 1.12rem; font-weight: 600; margin-top: 1.4rem;   letter-spacing: -0.018em; }
.prose ul   { list-style: disc;    padding-left: 1.5rem; }
.prose ol   { list-style: decimal; padding-left: 1.5rem; }
.prose a    { color: #2563eb; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose code { background: #f1f5f9; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85em; }

/* Subtle technical grid background — opt-in via .grid-bg */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ─── Region/language modal ─────────────────────────────────────────── */
#languageModal .modal-dialog       { max-width: 1180px; }
#languageModal .modal-content      { border-radius: 14px; }
#languageModal .modal-body         { padding: 1.25rem 1.5rem 1.5rem; }
#languageModal h6                  {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d4ed8;
  font-weight: 600;
}
#languageModal .list-group-item    { border: 0; padding: 0.3rem 0.45rem; font-size: 0.78rem; line-height: 1.25; border-radius: 6px; }
#languageModal .list-group-item:hover { background: #f1f5f9; color: #1d4ed8; }
#languageModal .locale-label       { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#languageModal .text-muted         { color: #94a3b8 !important; font-size: 0.72rem; }

/* Cookie consent ─────────────────────────────────────────────────────── */
#cookieBanner button { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em; }
#consentModal h5     { font-weight: 600; letter-spacing: -0.018em; }