/* ============================================================================
   NGARi — universal site chrome (header, footer, page shell, chat widget)
   Single source of truth for every page on ngari.ai.
   Class prefix: ngc  (so page-local styles can never collide).
   Loaded by every page via the siteChrome() Vite plugin.
   ========================================================================= */

:root, [data-theme='dark'] {
  --ngc-bg: #000000;
  --ngc-surface: #0d0d10;
  --ngc-glass: rgba(16, 52, 166, 0.07);
  --ngc-glass-2: rgba(255, 255, 255, 0.035);
  --ngc-line: rgba(255, 255, 255, 0.09);
  --ngc-line-strong: rgba(255, 255, 255, 0.18);
  --ngc-fg: #eef1fb;
  --ngc-fg-70: rgba(238, 241, 251, 0.72);
  --ngc-fg-55: rgba(238, 241, 251, 0.56);
  --ngc-fg-40: rgba(238, 241, 251, 0.42);
  --ngc-primary: #1034a6;
  --ngc-primary-soft: rgba(16, 52, 166, 0.16);
  --ngc-primary-glow: rgba(16, 52, 166, 0.45);
  --ngc-gold: #cfb53b;
  --ngc-emerald: #34d399;
  --ngc-amber: #fbbf24;
  --ngc-max: 1040px;
}

[data-theme='light'] {
  --ngc-bg: #f7f8fc;
  --ngc-surface: #ffffff;
  --ngc-glass: rgba(16, 52, 166, 0.05);
  --ngc-glass-2: rgba(16, 34, 66, 0.035);
  --ngc-line: rgba(16, 34, 66, 0.13);
  --ngc-line-strong: rgba(16, 34, 66, 0.24);
  --ngc-fg: #101423;
  --ngc-fg-70: rgba(16, 20, 35, 0.74);
  --ngc-fg-55: rgba(16, 20, 35, 0.58);
  --ngc-fg-40: rgba(16, 20, 35, 0.44);
}

/* ---------------------------------------------------------------- page shell */
/* Pages lay their own <body> out (max-width, margins). When the chrome is
   present we neutralise that and let .ngc-main own the measure instead. */
body:has(.ngc-header) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ngc-bg) !important;
  color: var(--ngc-fg) !important;
}

.ngc-main {
  max-width: var(--ngc-max);
  margin: 0 auto;
  padding: 34px 20px 72px;
}
body[data-ngc-width="wide"] .ngc-main { max-width: 1180px; }

.ngc-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ngc-primary); color: #fff; padding: 10px 14px;
  border-radius: 0 0 10px 0; z-index: 200; font-size: 13px;
}
.ngc-skip:focus { left: 0; }

/* -------------------------------------------------------------- typography */
.ngc-main h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 12px; }
.ngc-main h2 { font-size: clamp(21px, 3vw, 29px); line-height: 1.18; letter-spacing: -0.02em; margin: 46px 0 12px; }
.ngc-main h3 { font-size: 17px; line-height: 1.25; margin: 26px 0 8px; }
.ngc-main p  { font-size: 15px; line-height: 1.62; color: var(--ngc-fg-70); margin: 0 0 14px; }
.ngc-main small, .ngc-small { font-size: 12.5px; color: var(--ngc-fg-40); }
.ngc-main a { color: var(--ngc-fg); text-decoration-color: var(--ngc-line-strong); text-underline-offset: 3px; }
.ngc-main a:hover { text-decoration-color: var(--ngc-primary); }
.ngc-main hr { border: none; border-top: 1px solid var(--ngc-line); margin: 40px 0; }
.ngc-lede { font-size: 17px !important; color: var(--ngc-fg-70) !important; max-width: 72ch; }
.ngc-eyebrow {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ngc-fg-40); margin: 0 0 12px;
}
.ngc-mono, .ngc-main code, .ngc-main pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ngc-main code { font-size: 0.9em; background: var(--ngc-glass-2); border: 1px solid var(--ngc-line); border-radius: 5px; padding: 1px 5px; }
.ngc-main pre {
  background: #060a18; color: #c8d4ff; border: 1px solid var(--ngc-line);
  border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 12.8px; line-height: 1.55;
}
.ngc-main pre code { background: none; border: none; padding: 0; }

/* NGARi wordmark rules — Inter Black for the word, Ubuntu for the suffix */
.ngc-main .ngari-brand, .ngc-header .ngari-brand, .ngc-footer .ngari-brand {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 900; letter-spacing: -0.02em;
}
.ngc-main .brand-suffix, .ngc-header .brand-suffix, .ngc-footer .brand-suffix {
  font-family: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; font-weight: 400; letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ buttons */
.ngc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  /* Nothing on this site sets box-sizing, so a `width: 100%` button added its
     24px padding + 2px border ON TOP of the column and spilled 26px out of its
     card. Buttons are the only elements given an explicit width here, so the fix
     is scoped to them rather than a site-wide reset that could shift page layouts. */
  box-sizing: border-box;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ngc-btn-primary { background: var(--ngc-primary); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
.ngc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 24px var(--ngc-primary-glow); }
.ngc-btn-ghost { background: transparent; color: var(--ngc-fg); border-color: var(--ngc-line-strong); }
.ngc-btn-ghost:hover { border-color: var(--ngc-primary); }

/* An in-page button is an <a>, so `.ngc-main a { color: var(--ngc-fg) }` (0,1,1)
   otherwise WINS over `.ngc-btn-primary { color: #fff }` (0,1,0). In the LIGHT theme
   that painted near-black #101423 on the #1034a6 button — 1.8:1, unreadable — while
   dark mode accidentally looked fine, which is why it survived review. These two
   selectors out-specify `.ngc-main a` so a label is legible in both themes. */
.ngc-main a.ngc-btn-primary,
.ngc-main a.ngc-btn-primary:hover { color: #fff; }
.ngc-main a.ngc-btn-ghost,
.ngc-main a.ngc-btn-ghost:hover { color: var(--ngc-fg); }
.ngc-btn-sm { padding: 9px 15px; font-size: 12.5px; }
.ngc-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }

/* ------------------------------------------------------------------- header */
.ngc-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ngc-bg) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ngc-line);
}
.ngc-header-in {
  max-width: var(--ngc-max); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 18px;
}
body[data-ngc-width="wide"] .ngc-header-in { max-width: 1180px; }
.ngc-brand {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 16px; color: var(--ngc-fg); text-decoration: none; flex-shrink: 0;
}
.ngc-brand .brand-suffix { color: var(--ngc-fg-40); font-size: 14px; }
.ngc-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.ngc-nav a {
  font-size: 13px; color: var(--ngc-fg-55); text-decoration: none;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.ngc-nav a:hover { color: var(--ngc-fg); background: var(--ngc-glass-2); }
.ngc-nav a[aria-current='page'] { color: var(--ngc-fg); background: var(--ngc-primary-soft); }
.ngc-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ngc-theme {
  background: transparent; border: 1px solid var(--ngc-line); color: var(--ngc-fg-55);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 13px; line-height: 1;
}
.ngc-theme:hover { color: var(--ngc-fg); border-color: var(--ngc-line-strong); }
.ngc-burger {
  display: none; background: transparent; border: 1px solid var(--ngc-line);
  color: var(--ngc-fg-70); border-radius: 10px; padding: 7px 11px; font-size: 13px; cursor: pointer;
}

/* ------------------------------------------------------------------- blocks */
.ngc-grid { display: grid; gap: 14px; }
.ngc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ngc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ngc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ngc-card {
  background: var(--ngc-glass-2); border: 1px solid var(--ngc-line);
  border-radius: 16px; padding: 20px;
}
.ngc-card h3 { margin-top: 0; }
.ngc-card p:last-child { margin-bottom: 0; }
.ngc-card-feature { background: var(--ngc-glass); border-color: color-mix(in srgb, var(--ngc-primary) 40%, var(--ngc-line)); }

.ngc-price { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ngc-fg); }
.ngc-price small { font-size: 12.5px; font-weight: 400; color: var(--ngc-fg-40); letter-spacing: 0; }

.ngc-tag {
  display: inline-block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ngc-fg-40); border: 1px solid var(--ngc-line); border-radius: 999px;
  padding: 4px 9px; margin-bottom: 10px;
}
.ngc-tag-blue { color: #cfd9ff; border-color: color-mix(in srgb, var(--ngc-primary) 55%, transparent); background: var(--ngc-primary-soft); }
.ngc-pill { display: inline-block; font-size: 11.5px; color: var(--ngc-fg-55); border: 1px solid var(--ngc-line); border-radius: 999px; padding: 4px 10px; }
.ngc-pill-good { color: var(--ngc-emerald); border-color: color-mix(in srgb, var(--ngc-emerald) 45%, transparent); }

.ngc-list { list-style: none; padding: 0; margin: 0 0 14px; }
.ngc-list li { position: relative; padding-left: 20px; margin: 7px 0; font-size: 14px; color: var(--ngc-fg-70); line-height: 1.5; }
.ngc-list li::before { content: '—'; position: absolute; left: 0; color: var(--ngc-fg-40); }
.ngc-list-check li::before { content: '✓'; color: var(--ngc-emerald); font-weight: 700; }

/* ------------------------------------------------------------------- tables */
.ngc-table-wrap { overflow-x: auto; border: 1px solid var(--ngc-line); border-radius: 14px; margin: 18px 0; }
.ngc-table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 560px; }
.ngc-table th, .ngc-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ngc-line); }
.ngc-table th { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ngc-fg-40); font-weight: 600; }
.ngc-table td { color: var(--ngc-fg-70); }
.ngc-table tr:last-child td { border-bottom: none; }
.ngc-table td strong, .ngc-table td b { color: var(--ngc-fg); }

/* -------------------------------------------------------------- hero / bands */
.ngc-hero { padding: 26px 0 8px; }
.ngc-hero h1 { max-width: 20ch; }
.ngc-band {
  background: var(--ngc-glass); border: 1px solid color-mix(in srgb, var(--ngc-primary) 34%, var(--ngc-line));
  border-radius: 20px; padding: 30px; margin: 44px 0;
}
.ngc-band h2 { margin-top: 0; }
.ngc-quiet { font-size: 12.5px; color: var(--ngc-fg-40); }

/* ------------------------------------------------------------ device plates */
.ngc-device { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ngc-device-stage {
  background: radial-gradient(120% 90% at 50% 8%, rgba(16, 52, 166, 0.20), transparent 62%);
  border: 1px solid var(--ngc-line); border-radius: 16px; padding: 8px; margin-bottom: 16px;
}
.ngc-metric { display: flex; align-items: baseline; gap: 7px; }
.ngc-metric b { font-size: 25px; letter-spacing: -0.03em; color: var(--ngc-fg); font-weight: 800; }
.ngc-metric span { font-size: 12px; color: var(--ngc-fg-40); }

/* --------------------------------------------------------------- stat strip */
.ngc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ngc-line); border: 1px solid var(--ngc-line); border-radius: 14px; overflow: hidden; margin: 26px 0; }
.ngc-stat { background: var(--ngc-bg); padding: 18px 16px; }
.ngc-stat b { display: block; font-size: 24px; letter-spacing: -0.03em; color: var(--ngc-fg); font-weight: 800; }
.ngc-stat span { font-size: 12px; color: var(--ngc-fg-40); line-height: 1.4; display: block; margin-top: 3px; }

/* ------------------------------------------------------------------- bars */
.ngc-bars { margin: 18px 0; }
.ngc-bar-row { display: grid; grid-template-columns: 150px 1fr 78px; align-items: center; gap: 12px; margin: 9px 0; font-size: 13px; }
.ngc-bar-track { height: 9px; background: var(--ngc-glass-2); border: 1px solid var(--ngc-line); border-radius: 999px; overflow: hidden; }
.ngc-bar-fill { height: 100%; background: var(--ngc-primary); border-radius: 999px; }
.ngc-bar-fill-gold { background: var(--ngc-gold); }
.ngc-bar-val { text-align: right; color: var(--ngc-fg-55); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ FAQ */
.ngc-faq { margin: 18px 0; }
.ngc-faq details { border-bottom: 1px solid var(--ngc-line); padding: 14px 0; }
.ngc-faq summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ngc-fg); }
.ngc-faq details p { margin: 10px 0 0; font-size: 14px; }

/* ------------------------------------------------------------------- footer */
.ngc-footer { border-top: 1px solid var(--ngc-line); margin-top: 40px; background: var(--ngc-glass-2); }
.ngc-footer-in { max-width: var(--ngc-max); margin: 0 auto; padding: 40px 20px 26px; }
body[data-ngc-width="wide"] .ngc-footer-in { max-width: 1180px; }
.ngc-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.ngc-footer h4 { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ngc-fg-40); margin: 0 0 12px; font-weight: 600; }
.ngc-footer ul { list-style: none; margin: 0; padding: 0; }
.ngc-footer li { margin: 8px 0; }
.ngc-footer a { font-size: 13px; color: var(--ngc-fg-55); text-decoration: none; }
.ngc-footer a:hover { color: var(--ngc-fg); }
.ngc-footer-brand p { font-size: 13px; color: var(--ngc-fg-40); max-width: 34ch; line-height: 1.55; margin: 12px 0 0; }
.ngc-footer-legal {
  border-top: 1px solid var(--ngc-line); margin-top: 30px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.ngc-footer-legal span, .ngc-footer-legal a { font-size: 11.5px; color: var(--ngc-fg-40); text-decoration: none; }

/* ---------------------------------------------------------- sitewide chat */
.ngc-chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ngc-primary); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}
.ngc-chat-fab:hover { box-shadow: 0 10px 34px var(--ngc-primary-glow); }
.ngc-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 96;
  width: min(400px, calc(100vw - 24px)); height: min(560px, calc(100vh - 36px));
  display: none; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--ngc-surface) 92%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ngc-line-strong); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.ngc-chat[data-open='1'] { display: flex; }
.ngc-chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--ngc-line); }
.ngc-chat-head b { font-size: 13.5px; }
.ngc-chat-head .ngc-chat-note { font-size: 10.5px; color: var(--ngc-emerald); }
.ngc-chat-head button { margin-left: auto; background: transparent; border: none; color: var(--ngc-fg-40); font-size: 18px; cursor: pointer; line-height: 1; }
.ngc-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ngc-chat-msg { font-size: 13.5px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; max-width: 92%; }
.ngc-chat-msg-user { align-self: flex-end; background: var(--ngc-primary); color: #fff; border-bottom-right-radius: 4px; }
.ngc-chat-msg-ai { align-self: flex-start; background: var(--ngc-glass-2); border: 1px solid var(--ngc-line); border-bottom-left-radius: 4px; color: var(--ngc-fg-70); white-space: pre-wrap; }
.ngc-chat-msg-ai p { margin: 0 0 8px; font-size: 13.5px; color: inherit; }
.ngc-chat-msg-ai p:last-child { margin-bottom: 0; }
.ngc-chat-msg-ai ul, .ngc-chat-msg-ai ol { margin: 6px 0; padding-left: 20px; }
.ngc-chat-msg-ai code { font-size: 12px; }
.ngc-chat-foot { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--ngc-line); }
.ngc-chat-foot textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 110px; font-family: inherit; font-size: 14px;
  background: var(--ngc-glass-2); border: 1px solid var(--ngc-line); color: var(--ngc-fg);
  border-radius: 12px; padding: 11px 12px; outline: none;
}
.ngc-chat-foot textarea:focus { border-color: color-mix(in srgb, var(--ngc-primary) 60%, transparent); box-shadow: 0 0 0 3px var(--ngc-primary-soft); }
.ngc-chat-foot button {
  background: var(--ngc-primary); color: #fff; border: none; border-radius: 11px;
  padding: 0 15px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ngc-chat-foot button:disabled { opacity: 0.45; cursor: default; }
.ngc-chat-limit { font-size: 10.5px; color: var(--ngc-amber); padding: 0 13px 10px; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .ngc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ngc-footer-cols { grid-template-columns: 1fr 1fr; }
  .ngc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ngc-nav { display: none; }
  .ngc-nav[data-open='1'] {
    display: flex; position: absolute; left: 12px; right: 12px; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--ngc-surface); border: 1px solid var(--ngc-line-strong);
    border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5); margin: 0;
  }
  .ngc-nav[data-open='1'] a { padding: 11px 12px; font-size: 14px; }
  .ngc-burger { display: inline-block; }
  .ngc-header-in { position: relative; }
  .ngc-header-actions .ngc-btn { display: none; }
  .ngc-grid-2, .ngc-grid-3 { grid-template-columns: 1fr; }
  .ngc-bar-row { grid-template-columns: 96px 1fr 62px; font-size: 12px; }
  .ngc-footer-cols { grid-template-columns: 1fr; gap: 22px; }
  .ngc-chat { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: min(72vh, 560px); }
}
@media (max-width: 520px) {
  .ngc-grid-4 { grid-template-columns: 1fr; }
  .ngc-cta-row .ngc-btn { width: 100%; }
}

@media print {
  .ngc-header, .ngc-chat, .ngc-chat-fab, .ngc-footer { display: none !important; }
}

/* ============================================================================
   Fonts — the two fonts the brand actually ships (Inter Black wordmark,
   Ubuntu Regular suffix). Static pages only have these three files, so we
   declare explicit ranges rather than relying on synthesised weights.
   ========================================================================= */
@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Ubuntu';src:url('/fonts/ubuntu-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root, [data-theme='dark'] { --ngc-link:#9db4ff; }
[data-theme='light']       { --ngc-link:#1034a6; }

html { scroll-behavior:smooth; }
[id] { scroll-margin-top:78px; }

/* --------------------------- neutralise the per-page legacy markup/styles */
/* The chrome is injected into pages that predate it. Rather than rewrite each
   page, we re-theme their element-level rules through .ngc-main so every page
   inherits the same design system. */
body.ngc-chrome {
  max-width:none !important; margin:0 !important; padding:0 !important;
  background:var(--ngc-bg) !important; color:var(--ngc-fg) !important;
}

.ngc-main { color:var(--ngc-fg); }
.ngc-main p, .ngc-main li { color:var(--ngc-fg-70); }
.ngc-main strong, .ngc-main b { color:var(--ngc-fg); }
.ngc-main a { color:var(--ngc-link); text-decoration:none; }
.ngc-main a:hover { text-decoration:underline; }
.ngc-main h1, .ngc-main h2, .ngc-main h3, .ngc-main h4 { color:var(--ngc-fg); font-family:'Ubuntu',ui-sans-serif,system-ui,sans-serif; font-weight:700; }
.ngc-main h1 { font-size:clamp(28px,4.4vw,40px); letter-spacing:-0.02em; margin:0 0 10px; }
.ngc-main h2 { font-size:clamp(20px,2.8vw,27px); margin:44px 0 12px; border-top:1px solid var(--ngc-line); padding-top:26px; }
.ngc-main h3 { font-size:16px; margin:24px 0 8px; }
.ngc-main h4 { font-size:14px; margin:18px 0 6px; }
.ngc-main p { font-size:14.5px; line-height:1.65; }
.ngc-main li { font-size:14.5px; line-height:1.6; }
.ngc-main ul, .ngc-main ol { padding-left:22px; }
.ngc-main small, .ngc-main .upd, .ngc-main .class, .ngc-main .paper-meta { color:var(--ngc-fg-40) !important; }
.ngc-main hr { border:none; border-top:1px solid var(--ngc-line); margin:38px 0; }

.ngc-main table { border-collapse:collapse; width:100%; font-size:13.5px; margin:16px 0; }
.ngc-main th, .ngc-main td {
  border:1px solid var(--ngc-line) !important;
  padding:9px 12px; text-align:left; vertical-align:top; color:var(--ngc-fg-70);
}
.ngc-main th { background:var(--ngc-glass-2) !important; color:var(--ngc-fg-40) !important; font-weight:600; }
.ngc-main code { background:var(--ngc-glass-2) !important; color:var(--ngc-fg) !important; border:1px solid var(--ngc-line); padding:1px 5px; border-radius:5px; }
.ngc-main pre { background:#060a18 !important; color:#c8d4ff !important; border:1px solid var(--ngc-line); }
.ngc-main pre code { background:none !important; border:none; }
.ngc-main blockquote {
  background:var(--ngc-glass-2) !important; border-left:3px solid var(--ngc-primary) !important;
  color:var(--ngc-fg-70) !important; border-radius:0 10px 10px 0; padding:12px 16px; margin:16px 0;
}
.ngc-main .toc, .ngc-main .note, .ngc-main .keybox, .ngc-main .sidebar {
  background:var(--ngc-glass-2) !important; border:1px solid var(--ngc-line) !important;
  border-radius:14px; padding:16px 18px; margin:20px 0;
}
.ngc-main .toc b { color:var(--ngc-fg-40) !important; }
.ngc-main .hero-lead { color:var(--ngc-fg-70) !important; font-size:16px; }
.ngc-main .note, .ngc-main .key-note { color:var(--ngc-fg-40) !important; font-size:13px; }

/* API docs (developers.html) legacy controls */
.ngc-main .keyrow input {
  background:var(--ngc-bg) !important; color:var(--ngc-fg) !important;
  border:1px solid var(--ngc-line-strong) !important; border-radius:9px;
}
.ngc-main .btn { background:var(--ngc-primary) !important; color:#fff !important; border:1px solid transparent !important; }
.ngc-main .btn.ghost { background:transparent !important; color:var(--ngc-fg) !important; border:1px solid var(--ngc-line-strong) !important; }
.ngc-main .keyval { background:var(--ngc-glass-2) !important; color:var(--ngc-fg) !important; }
.ngc-main .buys { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ============================================================================
   Brand-alignment pass — 2026-09-22
   The app homepage ships Inter 400/500/600/700/900 + Ubuntu (brand suffix only)
   and the JetBrains Mono stack for code. Everything below makes the static
   chrome render with exactly that stack, puts the header on a single line, and
   tightens the footer.
   ========================================================================= */

/* ------------------------------------------------------------- typography */
.ngc-header,
.ngc-footer,
.ngc-main,
body.ngc-chrome,
.ngc-chat {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ngc-main h1, .ngc-main h2, .ngc-main h3, .ngc-main h4,
.ngc-hero h1 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.ngc-main h1 { font-weight: 900; letter-spacing: -0.03em; }
.ngc-main h2 { font-weight: 900; letter-spacing: -0.025em; }
.ngc-main h3 { font-weight: 600; letter-spacing: -0.01em; }
.ngc-main h4 { font-weight: 600; }
.ngc-hero h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 900; line-height: 1.04; }
.ngc-main p, .ngc-main li { font-weight: 400; }
.ngc-eyebrow, .ngc-tag, .ngc-footer h4, .ngc-table th { font-weight: 600; }
.ngc-btn { font-weight: 600; }
.ngc-nav a { font-weight: 500; }
.ngc-stat b, .ngc-price, .ngc-metric b { font-weight: 900; letter-spacing: -0.03em; }
.ngc-main .ngari-brand, .ngc-header .ngari-brand, .ngc-footer .ngari-brand { font-weight: 900; }
.ngc-main .brand-suffix, .ngc-header .brand-suffix, .ngc-footer .brand-suffix {
  font-family: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; font-weight: 400;
}

/* ------------------------------------- header: always one line, never wraps */
.ngc-header-in { flex-wrap: nowrap; gap: 14px; }
.ngc-brand { white-space: nowrap; }
.ngc-nav { flex-wrap: nowrap; gap: 0; }
.ngc-nav a { font-size: 12.5px; padding: 7px 9px; }
.ngc-header-actions { flex-wrap: nowrap; }

/* ------------------------------------------------------------------ footer */
.ngc-footer-in { padding: 34px 20px 22px; }
.ngc-footer h4 { margin-bottom: 10px; }
.ngc-footer li { margin: 7px 0; }
.ngc-footer-cols { gap: 24px; }
/* compact variant, used on the React app page */
.ngc-footer-compact .ngc-footer-in { padding: 20px 20px 16px; }
.ngc-footer-compact .ngc-footer-inline {
  align-items: baseline; gap: 6px 16px; border-top: none; margin-top: 0; padding-top: 0;
}
.ngc-footer-compact .ngc-footer-inline .ngc-brand { margin-right: 6px; }
.ngc-footer-compact .ngc-footer-inline ul { display: contents; }
.ngc-footer-compact .ngc-footer-inline li { display: inline; margin: 0; }
.ngc-footer-compact .ngc-footer-legal + .ngc-footer-legal {
  border-top: 1px solid var(--ngc-line); margin-top: 14px; padding-top: 14px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) { .ngc-nav a { font-size: 12px; padding: 7px 7px; } }
@media (max-width: 1000px) {
  .ngc-nav { display: none; }
  .ngc-nav[data-open='1'] {
    display: flex; position: absolute; left: 12px; right: 12px; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--ngc-surface); border: 1px solid var(--ngc-line-strong);
    border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, .5); margin: 0;
  }
  .ngc-nav[data-open='1'] a { padding: 11px 12px; font-size: 14px; }
  .ngc-burger { display: inline-block; }
  .ngc-header-in { position: relative; }
}
@media (max-width: 520px) { .ngc-header-actions .ngc-btn { display: none; } }