/*
 * Shared brand refresh for older standalone pages with inline CSS.
 * Loaded after page-local styles so the site reads as one product.
 */
:root {
  --bg: #0b0d10 !important;
  --bg-2: #11151b !important;
  --bg-3: #151a21 !important;
  --surface: #11151b !important;
  --surface-2: #151a21 !important;
  --line: rgba(236,231,220,0.13) !important;
  --line-2: rgba(236,231,220,0.24) !important;
  --line-3: rgba(236,231,220,0.38) !important;
  --fg: #ece7dc !important;
  --fg-2: #c9c2b2 !important;
  --fg-3: #a8adb7 !important;
  --muted: #9097a3 !important;
  --dim: #707985 !important;
  --violet: #4c7dff !important;
  --violet-2: #9db6ff !important;
  --cyan: #7ef0d2 !important;
  --emerald: #7ef0d2 !important;
}

body {
  background: #0b0d10 !important;
  color: var(--fg) !important;
}

.bg-stage {
  background: #0b0d10 !important;
}

.bg-stage::before {
  background:
    linear-gradient(90deg, rgba(76,125,255,.10), transparent 36%),
    linear-gradient(180deg, rgba(236,231,220,.045), transparent 34%) !important;
  opacity: 1 !important;
  filter: none !important;
}

.bg-stage::after {
  background:
    linear-gradient(rgba(236,231,220,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,231,220,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,.72) 62%, rgba(11,13,16,.96) 100%) !important;
  background-size: 64px 64px, 64px 64px, auto !important;
}

.aurora,
.aurora-chip,
.grad,
.hero h1 .accent,
.tail h2 .accent {
  background-image: none !important;
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
}

/* Unified header chrome — same height, brand size, and nav metrics
 * across every header variant (header.site, .site-header, nav.top).
 * Tightens the bar so it reads as product chrome, not marketing.
 */
header.site,
.site-header,
nav.top {
  background: rgba(11,13,16,.86) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: saturate(150%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px) !important;
}

header.site .row,
header.site > .wrap > .row,
header.site .wrap,
.site-header .wrap,
nav.top {
  height: 60px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Pin the header AND footer's inner wrap to one canonical width across
 * every page. Without this, the per-page .wrap (760-1180px on article
 * vs landing pages) made the nav visibly shift left/right when switching
 * tabs, and the footer drifted in the same way. */
header.site > .wrap,
header.site > .wrap.row,
.site-header > .wrap,
footer.site > .wrap,
footer.site > .wrap.row,
.site-footer > .wrap {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}
@media (max-width: 720px) {
  header.site > .wrap,
  header.site > .wrap.row,
  .site-header > .wrap,
  footer.site > .wrap,
  footer.site > .wrap.row,
  .site-footer > .wrap {
    padding: 0 20px !important;
  }
}

header.site .left,
header.site > .wrap > .row > .left {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
}

header.site .brand,
.site-header .brand,
nav.top .brand,
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: none !important;
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

header.site .brand span,
.site-header .brand span,
nav.top .brand span {
  font-size: 13.5px !important;
  font-weight: 560 !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing: 0 !important;
}

/* Canonical brand mark — show the SVG glyph everywhere. */
header.site .brand img,
.site-header .brand img,
nav.top .brand img,
img.brand-mark,
.brand .brand-mark {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 2px;
  vertical-align: -4px;
  flex-shrink: 0;
}
.sidebar h1 .glyph {
  display: none !important;
}

/* Pseudo-dot fallback — only when the SVG mark is absent. Footer keeps the dot. */
nav.top .brand:not(:has(img))::before,
header.site .brand:not(:has(img)):not(:has(.brand-dot))::before,
footer .brand-row .mark::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  background: #4c7dff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(76,125,255,0.7);
  vertical-align: 2px;
  margin-right: 9px;
  animation: brand-pulse-shared 3.4s ease-in-out infinite;
}
@keyframes brand-pulse-shared {
  0%, 100% { box-shadow: 0 0 12px rgba(76,125,255,0.7); opacity: 1; }
  50%      { box-shadow: 0 0 16px rgba(76,125,255,0.95); opacity: 0.85; }
}

/* Tab spacing — same metrics on every header variant.
 * Wrapped in a media query so the nav can hide on phones (<920px).
 * Without this guard, display:flex !important would override the
 * `.site-nav { display: none }` rule in styles.css and force the nav
 * to render on iPhone viewports, overflowing the header. */
@media (min-width: 921px) {
  header.site nav,
  .site-header .site-nav,
  nav.top .site-nav,
  nav.top .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
  }
}
@media (max-width: 920px) {
  header.site nav,
  .site-header .site-nav,
  nav.top .site-nav,
  nav.top .nav-links {
    display: none !important;
  }
  /* Below 460px the GitHub-star pill + sign-in + CTA crowd; drop GH and sign-in
   * down to icon-only / hidden so the CTA always reaches a tappable size. */
  .site-header .site-actions .gh-star,
  .site-header .site-actions a[href="/signin"],
  header.site .right .ghost {
    display: none !important;
  }
  .site-header .site-actions,
  header.site .right { gap: 8px !important; }
}

/* Inline <code> in body copy: keep readable, mono, with subtle background.
 * On phones, force break-anywhere so multi-flag commands don't trail off-screen. */
p code,
.lede code,
li code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 0.86em !important;
  background: rgba(255,255,255,0.04) !important;
  color: #9db6ff !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0 !important;
  border: none !important;
  white-space: nowrap !important;
}
@media (max-width: 720px) {
  p code, .lede code, li code {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 0.82em !important;
    padding: 1px 4px !important;
  }
}

/* Inline <code> inside hero h1 must not blow up the layout on mobile.
 * The fluid clamp() can hit 36-52px and a wide mono glyph then breaks
 * the line. Constrain to 0.85em and allow break-word to avoid overflow. */
h1 code,
.hero h1 code,
.hero-h1 code {
  font-size: 0.78em !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing: -0.01em !important;
  padding: 2px 8px !important;
  background: rgba(76,125,255,0.10) !important;
  border-radius: 6px !important;
  color: #9db6ff !important;
  font-weight: 500 !important;
  vertical-align: 2px !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
}
@media (max-width: 720px) {
  h1, .hero h1, .hero-h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.08 !important;
  }
  h1 code, .hero h1 code, .hero-h1 code {
    font-size: 0.72em !important;
    padding: 1px 6px !important;
  }
}
header.site nav a,
.site-header .site-nav a,
nav.top .site-nav a,
nav.top .nav-links a {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--fg-3, #a8adb7) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif !important;
  transition: color 120ms ease;
}
header.site nav a:hover,
header.site nav a.active,
.site-header .site-nav a:hover,
.site-header .site-nav a.active,
nav.top .site-nav a:hover,
nav.top .site-nav a.active {
  color: var(--fg, #ece7dc) !important;
}

/* Right-side actions — sign-in + CTA tighter and consistently sized. */
header.site .right,
.site-header .site-actions,
.site-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
header.site .right .ghost,
header.site .right a:not(.cta),
.site-header .site-actions a:not(.cta),
.site-actions a:not(.cta) {
  font-size: 12.5px !important;
  color: var(--fg-3, #a8adb7) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif !important;
}
header.site .right .ghost:hover,
header.site .right a:not(.cta):hover,
.site-header .site-actions a:not(.cta):hover,
.site-actions a:not(.cta):hover {
  color: var(--fg, #ece7dc) !important;
}
header.site .right .cta,
.site-header .site-actions .cta,
.site-actions .cta {
  font-size: 12px !important;
  font-weight: 540 !important;
  padding: 6px 11px !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif !important;
}

.btn-primary,
.btn.primary,
.site-actions .cta,
button.primary {
  background: linear-gradient(180deg, #ece7dc 0%, #c9c2b2 100%) !important;
  color: #0b0d10 !important;
  border-color: rgba(236,231,220,.44) !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-ghost,
.btn.ghost {
  border-color: var(--line-2) !important;
  background: rgba(236,231,220,.035) !important;
}

.term,
.inspect,
.contract,
.code-block,
.codeblock,
.phone,
.card,
.feature,
.step,
.tier,
.artifact,
.runner,
.sample,
.trace {
  background: linear-gradient(180deg, rgba(21,26,33,.94), rgba(11,13,16,.94)) !important;
  border-color: var(--line-2) !important;
  box-shadow: none;
}

.term::before,
.inspect::before,
.contract::before,
.code-block::before {
  background:
    linear-gradient(120deg, rgba(126,240,210,.07), transparent 45%),
    linear-gradient(300deg, rgba(76,125,255,.08), transparent 48%) !important;
}

code {
  color: var(--violet-2) !important;
}

footer {
  background: rgba(11,13,16,.78) !important;
  border-top-color: var(--line) !important;
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.plate .cap .title,
.tail h2,
.headline,
.title {
  font-weight: 540 !important;
  letter-spacing: 0 !important;
}
h1 {
  font-size: clamp(36px, 6vw, 72px) !important;
  line-height: 1 !important;
}
h2 {
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.08 !important;
}
strong, b {
  font-weight: 560 !important;
}

nav.top .brand,
header.site .brand,
.site-header .brand,
.brand {
  color: var(--fg) !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

/* Footer brand mark — show the SVG glyph at small size. */
footer img.brand-mark,
.site-footer .meta img {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  vertical-align: -4px;
  margin-right: 6px;
}
footer .brand-row .mark::before {
  width: 6px !important;
  height: 6px !important;
}

.btn,
.btn-primary,
.btn-ghost,
.btn.primary,
.btn.ghost,
.site-actions .cta,
button {
  font-weight: 500 !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
}

.tone,
.accent,
.plate .cap .title .tone,
.tail h2 .accent {
  color: var(--violet-2) !important;
  -webkit-text-fill-color: var(--violet-2) !important;
}

svg [fill="#4c7dff"],
svg [stroke="#4c7dff"] {
  fill: #4c7dff !important;
  stroke: #4c7dff !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
 * Mobile pass v5.5 — defensive overrides that win over every
 * page's inline <style> block (brand-refresh.css loads after).
 * Ships:
 *  - kills page-level horizontal scroll
 *  - keeps header on one line, no nav/CTA wrap
 *  - terminal/pre wraps instead of pushing layout wider
 *  - figure.plate gives up its 16:9 below 480 so the cap stops overlapping the diagram
 * ========================================================= */

/* Defensive: never let the page itself scroll sideways. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Anything inside main can't push past viewport. */
img, svg, video, iframe, canvas, picture {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 720px) {
  /* Header: brand + CTA only on narrow viewports — nav already display:none at <920px. */
  header.site .row,
  .site-header .wrap {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .site-actions a,
  .site-header .cta,
  header.site .right .cta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* CTA: never wrap, tighten padding so "get a key" stays one line */
  .site-actions .cta,
  header.site .right .cta {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Terminal / pre / code — wrap, never push layout. */
  pre, .terminal, pre.terminal, .terminal pre, .codebox, code {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
  }
  pre { font-size: 12px !important; padding: 14px 16px !important; }

  /* Hero/lab containment so the home grid's right column can't blow viewport. */
  .home-hero .wrap,
  .hero .wrap,
  .hero-copy,
  .artifact-lab,
  .install,
  .install-cmd { min-width: 0 !important; max-width: 100% !important; }
  .install-cmd { white-space: normal !important; padding-right: 64px !important; }
  .install-cmd .install-text,
  .install-cmd #install-text {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  /* Hide the secondary "sign in" link in the header so the brand+CTA fit on tiny screens.
   * "/signin" still reachable from /account, footer, and signup tab. */
  .site-actions a:not(.cta),
  header.site .right a:not(.cta) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* The .plate figure on /k-score uses aspect-ratio:16/9 with absolute-positioned cap.
   * On phones the cap collides with the SVG diagram. Drop the aspect ratio and let
   * the image have a min-height; let the cap sit below as a normal block. */
  .plate { aspect-ratio: auto !important; }
  .plate .img {
    aspect-ratio: 16/9 !important;
    min-height: 180px !important;
  }
  .plate .cap {
    position: static !important;
    padding: 14px 16px 16px !important;
    background: rgba(8,9,8,0.92) !important;
    border-top: 1px solid var(--line, rgba(255,255,255,0.06)) !important;
  }
  .plate .stamp { top: 12px !important; left: 12px !important; }

  /* Tighter header at narrow widths */
  header.site .row,
  .site-header .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* /k-score component grid: 5 → 2 above, 2 → 1 here. Inline page CSS only goes to 880px. */
  .grid.cols-5,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 { grid-template-columns: 1fr !important; }

  /* /compile two-up I/O panels: stack on tiny widths */
  .io { grid-template-columns: 1fr !important; }
  /* /anatomy 1.25fr 1fr layout: stack */
  .layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* /serve compare side-by-side: stack */
  .compare,
  .clients,
  .steps { grid-template-columns: 1fr !important; }
  /* footers everywhere */
  footer .cols,
  footer.site .grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* H1s shrink, meta paragraphs wrap */
  h1 { font-size: clamp(32px, 9vw, 48px) !important; max-width: 100% !important; }
  h2 { font-size: clamp(22px, 6.5vw, 28px) !important; max-width: 100% !important; }
}

/* iOS rubber-banding fix (touch screens often expose the overscroll area). */
@supports (-webkit-touch-callout: none) {
  html { -webkit-text-size-adjust: 100%; }
}

/* Site-wide brand tagline injected above every footer. CSS content can't
 * render <code>, so the line uses plain monospace + middot separators.
 * Anchors the brand stack: company → binary → file → spec. */
footer.site::before,
footer.modern::before {
  content: "Kolmogorov \00B7  The AI compiler \00B7  kolm is the binary \00B7  .kolm is the file format \00B7  RS-1 is the spec, MIT-licensed";
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(236,231,220,0.42) !important;
  text-align: center;
  padding: 24px 24px 16px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  border-bottom: 1px solid rgba(236,231,220,0.06);
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  footer.site::before,
  footer.modern::before {
    font-size: 10px;
    padding: 18px 16px 12px;
    line-height: 1.55;
  }
}

/* === diagram plates (replaces /img/kolm-*.svg backgrounds) === */
/* All pages with a .plate .img { background-image: ... } can now drop the
   image and put a .diag inside the .img div. The diag draws an inline,
   topic-specific composition using existing periwinkle/ink CSS tokens. */
.plate .img.diag-bg {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(76,125,255,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(76,125,255,0.06), transparent 50%),
    linear-gradient(180deg, #07090c 0%, #050607 70%);
}
.plate .diag {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 48px 78px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.plate .diag::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(76,125,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,125,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  z-index: 0;
}
.plate .diag > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .plate .diag { padding: 44px 22px 70px; }
}

/* Fan-out diagram (kolm serve --mcp): center node + 3-4 client nodes */
.diag-fanout {
  width: 100%; max-width: 760px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  align-items: center;
}
.diag-fanout .node {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 11.5px;
  color: #b5bdb1;
  text-align: center;
}
.diag-fanout .node b { display:block; color:#faf2e1; font-weight:540; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-size: 13px; margin-bottom: 4px; letter-spacing: -0.01em; }
.diag-fanout .node span,
.diag-fanout .center span { display:block; font-size: 10.5px; color:#737c73; }
.diag-fanout .center {
  grid-column: 1 / -1;
  border: 1px solid rgba(76,125,255,0.32);
  background: linear-gradient(180deg, rgba(76,125,255,0.10), rgba(76,125,255,0.02));
  padding: 18px 20px; border-radius: 10px;
  text-align: center; font-size: 12px; color:#9db6ff;
  margin-bottom: 8px;
}
.diag-fanout .center b { color:#faf2e1; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 540; }
@media (max-width: 720px) {
  .diag-fanout { grid-template-columns: repeat(2, 1fr); }
  .diag-fanout .center { grid-column: 1 / -1; }
}

/* Anatomy diagram (.kolm file tree) */
.diag-tree {
  width: 100%; max-width: 720px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 22px 28px;
  font-size: 12.5px;
  color: #b5bdb1;
  line-height: 1.95;
}
.diag-tree .root { color:#9db6ff; font-weight:540; }
.diag-tree .seg { color:#faf2e1; }
.diag-tree .desc { color:#737c73; padding-left: 8px; }
@media (max-width: 720px) {
  .diag-tree { font-size: 11px; padding: 16px 18px; line-height: 1.75; }
}

/* Compile pipeline (10 stages timeline) */
.diag-pipeline {
  width: 100%; max-width: 820px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.diag-pipeline .stage {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  padding: 9px 8px;
  text-align: center;
  font-size: 10px;
  color: #b5bdb1;
}
.diag-pipeline .stage .n {
  display: block; font-size: 9px; color:#737c73;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px;
}
.diag-pipeline .stage b { display:block; color:#faf2e1; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight:540; margin-bottom: 2px; letter-spacing: -0.005em; }
.diag-pipeline .stage span:not(.n) { display:block; color:#737c73; font-size: 9.5px; letter-spacing: 0.02em; }
.diag-pipeline .stage.acc { border-color: rgba(76,125,255,0.32); background: rgba(76,125,255,0.05); color:#9db6ff; }
.diag-pipeline .stage.acc b { color:#9db6ff; }
@media (max-width: 720px) {
  .diag-pipeline { grid-template-columns: repeat(2, 1fr); }
}

/* Receipt chain (verification rings) */
.diag-chain {
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11.5px;
}
.diag-chain .ring {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.30);
  border-radius: 8px;
  padding: 11px 16px;
}
.diag-chain .ring .lbl { color:#737c73; text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.04em; }
.diag-chain .ring .hash { color:#9db6ff; font-size: 11px; }
.diag-chain .ring .ok { color:#7ef0d2; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 720px) {
  .diag-chain .ring { grid-template-columns: 80px 1fr auto; gap: 10px; padding: 9px 12px; }
  .diag-chain .ring .hash { font-size: 10px; }
}

/* K-score gauge */
.diag-gauge {
  width: 100%; max-width: 580px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}
.diag-gauge .formula {
  font-size: 14px; color:#faf2e1; letter-spacing: -0.005em;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 18px;
}
.diag-gauge .formula .var { color:#9db6ff; }
.diag-gauge .formula .w { color:#737c73; }
.diag-gauge .bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  position: relative; overflow: hidden;
}
.diag-gauge .bar .fill {
  position: absolute; inset: 0;
  width: 92%;
  background: linear-gradient(90deg, rgba(76,125,255,0.45), rgba(126,240,210,0.85));
}
.diag-gauge .legend {
  display: flex; justify-content: space-between; width: 100%;
  font-size: 10px; color:#737c73; letter-spacing: 0.03em;
  flex-wrap: wrap; gap: 6px 12px;
}
.diag-gauge .legend b { color:#9db6ff; font-family: ui-monospace, monospace; font-weight: 600; margin-right: 4px; }
.diag-gauge .legend .ok { color:#7ef0d2; }

/* Tier ladder (pricing) */
.diag-ladder {
  width: 100%; max-width: 820px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  align-items: end;
}
.diag-ladder .step {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  font-size: 10px;
  color: #b5bdb1;
}
.diag-ladder .step:nth-child(1) { padding-top: 24px; }
.diag-ladder .step:nth-child(2) { padding-top: 32px; }
.diag-ladder .step:nth-child(3) { padding-top: 42px; border-color: rgba(76,125,255,0.30); background: rgba(76,125,255,0.04); color:#9db6ff; }
.diag-ladder .step:nth-child(4) { padding-top: 50px; }
.diag-ladder .step:nth-child(5) { padding-top: 58px; }
.diag-ladder .step:nth-child(6) { padding-top: 68px; }
.diag-ladder .step b { display:block; color:#faf2e1; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight:540; margin-bottom:2px; }
.diag-ladder .step span { display:block; color:#9db6ff; font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.diag-ladder .step .d { color:#737c73; font-size: 9px; margin-top: 2px; letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .diag-ladder { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .diag-ladder .step { padding-top: 14px !important; padding-bottom: 8px; font-size: 9.5px; }
}

/* Device targets (run on anything) */
.diag-device {
  width: 100%; max-width: 720px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.diag-device .tgt {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  font-size: 10.5px;
  color: #b5bdb1;
}
.diag-device .tgt b {
  display: block; color:#faf2e1; font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-weight: 540; margin-bottom: 5px;
}
.diag-device .tgt .lat,
.diag-device .tgt i { color:#9db6ff; font-size: 11px; margin-top: 4px; display: block; font-style: normal; }
.diag-device .tgt span { display: block; font-size: 10px; color:#737c73; }
@media (max-width: 720px) {
  .diag-device { grid-template-columns: repeat(2, 1fr); }
}

/* Article hero - generic (clean spec card) */
.diag-spec {
  width: 100%; max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.diag-spec .col,
.diag-spec .card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.30);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 11.5px;
  color: #b5bdb1;
}
.diag-spec .col .lbl { font-size: 10px; color:#737c73; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.diag-spec .col ul { margin: 0; padding: 0; list-style: none; font-size: 12px; color:#b5bdb1; line-height: 1.8; }
.diag-spec .col ul b { color:#faf2e1; font-weight: 540; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; }
.diag-spec .card b {
  display: block; color:#9db6ff; font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.diag-spec .card span {
  display: block; color:#faf2e1; font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-weight: 540; line-height: 1.35; margin-bottom: 8px;
}
.diag-spec .card i {
  display: block; font-style: normal; font-size: 10.5px;
  color:#737c73; letter-spacing: 0.02em;
}
.diag-spec .card.acc {
  border-color: rgba(76,125,255,0.32);
  background: rgba(76,125,255,0.05);
}
.diag-spec .card.acc b { color:#9db6ff; }
.diag-spec .card.acc span { color:#faf2e1; }
@media (max-width: 720px) {
  .diag-spec { grid-template-columns: 1fr 1fr; gap: 8px; }
  .diag-spec .card { padding: 11px 12px; }
}