/* ═══════════════════════════════════════════════════════════════
   KORT-X // OPERATIONS TERMINAL
   The site-wide art direction. Loaded last on every page, so it is
   the definitive layer over each page's inline <style>, fx.css and
   home.css.

   Direction: instrument panel, not glass card. Hard edges with cut
   corners, hairline rules, monospace chrome, cyan on void with a
   single amber accent. Everything structural is token-driven so the
   palette can be re-pitched from this block alone.
   ═══════════════════════════════════════════════════════════════ */

:root,
body {
  /* Brand ── --kx-rgb feeds every rgba() across the site */
  --kx-rgb: 47, 224, 255;
  --kx-cyan: #2fe0ff;
  --kx-cyan-soft: rgba(47, 224, 255, 0.55);
  --kx-amber: #ffab3d;
  --kx-amber-rgb: 255, 171, 61;

  /* Surface */
  --kx-void: #03070c;
  --kx-deep: #050b12;
  --kx-panel: rgba(9, 19, 28, 0.66);
  --kx-panel-solid: #06101a;
  --kx-line: rgba(47, 224, 255, 0.14);
  --kx-line-strong: rgba(47, 224, 255, 0.38);

  /* Ink */
  --kx-text: #d6e7f0;
  --kx-mute: rgba(214, 231, 240, 0.64);
  --kx-faint: rgba(214, 231, 240, 0.42);

  /* Type */
  --kx-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --kx-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry ── the cut-corner notch is the signature move */
  --kx-notch: 10px;
  --kx-notch-lg: 18px;

  /* Legacy variables the existing components still read */
  --primary: var(--kx-cyan);
  --bg: var(--kx-void);
  --text: var(--kx-text);
  --glass-border: var(--kx-line);
  --card-bg: var(--kx-panel);
  --header-bg: rgba(4, 9, 14, 0.82);
  --menu-bg: rgba(5, 11, 17, 0.97);
}

/* home.css declares its own palette on .home-shell, which outranks the
   body block above. Re-point those names at the shared tokens so the
   landing page cannot drift away from the rest of the site — including
   the mint and orange accents, which predate the cyan/amber pairing. */
body.home-shell {
  --bg: var(--kx-void);
  --text: var(--kx-text);
  --primary: var(--kx-cyan);
  --header-bg: rgba(4, 9, 14, 0.82);
  --menu-bg: rgba(5, 11, 17, 0.97);
  --card-bg: var(--kx-panel);
  --glass-border: var(--kx-line);
  --kx-mint: var(--kx-cyan);
  --kx-orange: var(--kx-amber);
  --kx-muted: var(--kx-mute);
}

body[data-theme="light"] {
  --kx-void: #eef3f7;
  --kx-deep: #e4ecf2;
  --kx-panel: rgba(255, 255, 255, 0.72);
  --kx-panel-solid: #f7fafc;
  --kx-line: rgba(10, 90, 115, 0.16);
  --kx-line-strong: rgba(10, 90, 115, 0.4);
  --kx-cyan: #067f9c;
  --kx-rgb: 6, 127, 156;
  --kx-cyan-soft: rgba(6, 127, 156, 0.5);
  --kx-text: #0b1a24;
  --kx-mute: rgba(11, 26, 36, 0.6);
  --kx-faint: rgba(11, 26, 36, 0.38);
  --header-bg: rgba(244, 249, 252, 0.86);
  --menu-bg: rgba(246, 250, 252, 0.98);
}

/* ── Shape utilities ─────────────────────────────────────────── */

.kx-notch,
.card,
.fx-stat,
.fx-layer,
.fx-role,
.menu-btn,
.fx-next a,
.t-scenario,
.t-specs,
.t-caps li,
.paper-card,
.paper-slot,
.research-notice,
.osf-direct-panel,
.embed-wrap,
.bf-panel,
.marketplace-cta {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--kx-notch) 0,
    100% 0,
    100% calc(100% - var(--kx-notch)),
    calc(100% - var(--kx-notch)) 100%,
    0 100%,
    0 var(--kx-notch)
  );
}

.fx-cta,
.menu-panel {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--kx-notch-lg) 0,
    100% 0,
    100% calc(100% - var(--kx-notch-lg)),
    calc(100% - var(--kx-notch-lg)) 100%,
    0 100%,
    0 var(--kx-notch-lg)
  );
}

/* ── Ground ──────────────────────────────────────────────────── */

body,
body.home-shell {
  background-color: var(--kx-void);
  color: var(--kx-text);
  font-family: var(--kx-sans);
  /* The survey grid has to stay at the threshold of visibility — it is
     ground, not pattern. Anything stronger competes with the cards. */
  background-image:
    linear-gradient(rgba(var(--kx-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--kx-rgb), 0.035) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--kx-rgb), 0.09), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(var(--kx-amber-rgb), 0.04), transparent 70%);
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* Scanline + vignette plate, injected once by fx.js so it never
   collides with the ::before/::after each page already spends. */
#kx-scan {
  position: fixed;
  inset: 0;
  z-index: 2500;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5) 0 1px,
      transparent 1px 5px
    ),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.24;
}
body[data-theme="light"] #kx-scan { opacity: 0.12; }

/* The scanning wordmark gradient. The original ran from a 30%-alpha
   white, which reads as flat grey against the deeper void — the stops
   are re-pitched here so titles stay bright through the whole cycle. */
.scan-glow {
  background: linear-gradient(
    90deg,
    rgba(214, 231, 240, 0.72) 0%,
    var(--kx-cyan) 25%,
    rgba(214, 231, 240, 0.72) 50%,
    var(--kx-cyan) 75%,
    rgba(214, 231, 240, 0.72) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(var(--kx-rgb), 0.28));
}
body[data-theme="light"] .scan-glow {
  background: linear-gradient(
    90deg,
    rgba(11, 26, 36, 0.9) 0%,
    var(--kx-cyan) 25%,
    rgba(11, 26, 36, 0.9) 50%,
    var(--kx-cyan) 75%,
    rgba(11, 26, 36, 0.9) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Header ──────────────────────────────────────────────────── */

header,
.home-shell header {
  height: 66px;
  padding: 0 26px;
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--kx-line-strong);
  box-shadow: 0 1px 0 rgba(var(--kx-rgb), 0.08), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

/* A live rail under the header — the site's pulse line */
header::after,
.home-shell header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kx-cyan), transparent);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: kxSweep 7s linear infinite;
  opacity: 0.9;
}
@keyframes kxSweep {
  from { background-position: -240px 0; }
  to   { background-position: calc(100% + 240px) 0; }
}

.nav-logo,
.home-shell .nav-logo {
  font-family: var(--kx-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 7px;
  line-height: 1;
}

.status-pending,
.home-shell .status-pending {
  font-family: var(--kx-mono);
  font-size: 7.5px;
  letter-spacing: 4px;
  color: var(--kx-cyan);
  opacity: 0.9;
}
.status-pending::before { content: '// '; opacity: 0.5; }

/* The inline stylesheets dim these with their own opacity; the new
   palette already carries the contrast, so reset it here. */
.status-description,
.home-shell .status-description {
  font-family: var(--kx-mono);
  font-size: 7.5px;
  letter-spacing: 1.2px;
  color: var(--kx-mute);
  opacity: 1;
}

/* Header controls read as terminal switches */
.gh-link,
.lang-select,
#theme-toggle,
.home-shell .lang-select,
.home-shell #theme-toggle {
  font-family: var(--kx-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--kx-text);
  background: rgba(var(--kx-rgb), 0.05);
  border: 1px solid var(--kx-line);
  border-radius: 0;
  padding: 7px 11px;
  opacity: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.gh-link:hover,
.lang-select:hover,
#theme-toggle:hover {
  border-color: var(--kx-cyan);
  color: var(--kx-cyan);
  background: rgba(var(--kx-rgb), 0.12);
}
#theme-toggle,
.home-shell #theme-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
}
#theme-icon { width: 14px; height: 14px; stroke: currentColor; }

/* ── HUD strip ───────────────────────────────────────────────── */

.home-shell .hud { top: 66px; }

.hud-tele,
.home-shell .hud-tele {
  font-family: var(--kx-mono);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--kx-cyan);
  opacity: 0.62;
}

/* Corner ticks of the HUD frame */
.home-shell .hud b {
  border-color: var(--kx-line-strong);
  width: 14px;
  height: 14px;
}

/* ── Page banner ─────────────────────────────────────────────── */

.page-banner {
  position: relative;
  padding: 78px 40px 34px;
  background:
    linear-gradient(180deg, rgba(var(--kx-rgb), 0.07), transparent 85%) !important;
  border-bottom: 1px solid var(--kx-line);
}

/* Registration mark, left-aligned with the copy. It stays clear of the
   top-right corner, which the mini navigation cube already owns. */
.page-banner::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 56px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--kx-line-strong);
  border-left: 1px solid var(--kx-line-strong);
  opacity: 0.7;
}

.breadcrumb {
  font-family: var(--kx-mono);
  font-size: 8.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--kx-mute);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--kx-cyan); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.page-title {
  font-family: var(--kx-mono);
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: 9px;
  line-height: 1.05;
}

.page-subtitle {
  font-family: var(--kx-mono);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--kx-mute);
  margin-top: 12px;
}

/* ── Cards ───────────────────────────────────────────────────── */

/* Cards sit on their own plate. The panel colour has to be opaque
   enough to stop the survey grid reading through them. */
.card {
  background:
    linear-gradient(160deg, rgba(var(--kx-rgb), 0.09), transparent 60%),
    var(--kx-panel-solid);
  border: 1px solid var(--kx-line);
  border-top: 1px solid var(--kx-line-strong);
  padding: 22px 22px 26px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--kx-line-strong);
  box-shadow: 0 18px 46px -20px rgba(0, 0, 0, 0.8);
}

.card-icon {
  color: var(--kx-cyan);
  font-size: 15px;
  text-shadow: 0 0 20px rgba(var(--kx-rgb), 0.65);
}

.card-title {
  font-family: var(--kx-mono);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--kx-cyan);
  padding-bottom: 10px;
}
.card-title::after {
  width: 34px;
  background: linear-gradient(90deg, var(--kx-cyan), transparent);
}

.card-text {
  font-family: var(--kx-sans);
  font-size: 0.72rem;
  line-height: 1.75;
  color: var(--kx-mute);
}

/* ── Section blocks ──────────────────────────────────────────── */

.fx-section-title {
  font-family: var(--kx-mono);
  font-size: 9px;
  letter-spacing: 5px;
  color: var(--kx-cyan);
}
.fx-section-title::before {
  content: '//';
  opacity: 0.45;
  margin-right: 4px;
}
.fx-section-title::after {
  background: linear-gradient(90deg, var(--kx-line-strong), transparent);
}

.fx-stat {
  border: 1px solid var(--kx-line);
  border-left: 2px solid var(--kx-cyan);
  background: var(--kx-panel);
}
.fx-stat-num {
  font-family: var(--kx-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--kx-cyan);
  letter-spacing: 2px;
}
.fx-stat-label {
  font-family: var(--kx-mono);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--kx-mute);
  opacity: 1;
}

.fx-tl-phase,
.fx-layer-no,
.fx-layer-name,
.fx-role-name,
.fx-role-status,
.fx-chip,
.rail-heading,
.rail-status,
.fx-cta-title,
.fx-next a {
  font-family: var(--kx-mono);
}

.fx-timeline::before {
  background: linear-gradient(to bottom, var(--kx-cyan), transparent);
}
.fx-tl-item::before {
  border-radius: 0;
  transform: rotate(45deg);
  border-color: var(--kx-cyan);
  background: var(--kx-void);
  box-shadow: 0 0 12px rgba(var(--kx-rgb), 0.6);
}

.fx-layer {
  background: linear-gradient(90deg, rgba(var(--kx-rgb), 0.09), transparent 60%);
  border: 1px solid var(--kx-line);
}
.fx-layer:hover { border-color: var(--kx-line-strong); }

.fx-chip {
  border-radius: 0;
  border: 1px solid var(--kx-line);
  background: var(--kx-panel);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.fx-chip:hover { border-color: var(--kx-cyan); color: var(--kx-cyan); }

.fx-role { border: 1px solid var(--kx-line); background: var(--kx-panel); }
.fx-role-status {
  border-radius: 0;
  border-color: var(--kx-line-strong);
  color: var(--kx-amber);
  letter-spacing: 2.5px;
}

.fx-cta {
  border: 1px solid var(--kx-line-strong);
  background:
    linear-gradient(180deg, rgba(var(--kx-rgb), 0.07), transparent 70%),
    var(--kx-panel);
}
.fx-cta-title { letter-spacing: 7px; color: var(--kx-text); }
.fx-cta-text { color: var(--kx-mute); }

.fx-next a {
  border: 1px solid var(--kx-line);
  color: var(--kx-text);
  letter-spacing: 2.5px;
}
.fx-next a:hover {
  border-color: var(--kx-cyan);
  color: var(--kx-cyan);
  background: rgba(var(--kx-rgb), 0.08);
}

.fx-quote {
  font-family: var(--kx-mono);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 3px;
  color: var(--kx-mute);
}
.fx-quote::before,
.fx-quote::after { color: var(--kx-cyan); }

/* ── Navigation menu ─────────────────────────────────────────── */

#front-menu::before,
.home-shell #front-menu::before {
  background: rgba(2, 5, 9, 0.78);
  backdrop-filter: blur(5px);
}
body[data-theme="light"] #front-menu::before { background: rgba(226, 236, 243, 0.7); }

/* Width is deliberately not set for the home shell: that panel is a
   three-column grid sized by home.css, and forcing the subpage width
   on it clips the labels. */
.menu-panel {
  width: 330px;
  background: var(--menu-bg);
  border: 1px solid var(--kx-line-strong);
  padding: 18px;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.85), 0 0 40px rgba(var(--kx-rgb), 0.12);
}
.home-shell .menu-panel {
  background: var(--menu-bg);
  border: 1px solid var(--kx-line-strong);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.85), 0 0 40px rgba(var(--kx-rgb), 0.12);
}

.menu-head,
.home-shell .menu-head { border-bottom: 1px solid var(--kx-line); }

.menu-head-label,
.home-shell .menu-head-label {
  font-family: var(--kx-mono);
  font-size: 7.5px;
  letter-spacing: 3.5px;
  color: var(--kx-cyan);
}

.menu-head-dot,
.home-shell .menu-head-dot {
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--kx-cyan);
  box-shadow: 0 0 10px var(--kx-cyan);
}

.menu-btn,
.home-shell .menu-btn {
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  border: 1px solid var(--kx-line);
  background: rgba(var(--kx-rgb), 0.04);
  color: var(--kx-text);
  padding: 11px 13px;
}
.menu-btn:hover,
.menu-btn:focus-visible,
.home-shell .menu-btn:hover,
.home-shell .menu-btn:focus-visible {
  background: rgba(var(--kx-rgb), 0.16);
  border-color: var(--kx-cyan);
  color: var(--kx-cyan);
}
.menu-btn:hover .mi,
.menu-btn:focus-visible .mi,
.menu-btn:hover .ma,
.menu-btn:focus-visible .ma { color: var(--kx-cyan); }

.menu-btn[aria-current="page"] {
  border-left: 2px solid var(--kx-amber);
  color: var(--kx-amber);
}
.menu-btn[aria-current="page"] .mi { color: var(--kx-amber); }

/* ── Injected nav trigger (contact, privacy, topic, 404) ─────
   These pages have no cube of their own, so fx.js gives them a flat
   corner module instead of the 3D one. Same position, same overlay. */

.cube-wrap.kx-nav-cube {
  position: fixed;
  /* Same corner as the 3D cube the other subpages carry, so the trigger does
     not jump when you move between them. Clear of the banner's top edge, and
     far enough in that the 3D cube's orbiting orb is not clipped. */
  top: 84px;
  right: 30px;
  z-index: 900;
  transform: none;
}

.kx-nav-cube #cube-viewport {
  /* 36px — matches the 3D cube at scale(0.20) on a 180px face. */
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--kx-line-strong);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  clip-path: polygon(
    var(--kx-notch) 0, 100% 0, 100% calc(100% - var(--kx-notch)),
    calc(100% - var(--kx-notch)) 100%, 0 100%, 0 var(--kx-notch)
  );
}
.kx-nav-cube #cube-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 12, 0.62);
}
.kx-nav-cube #cube-viewport:hover {
  border-color: var(--kx-cyan);
  box-shadow: 0 0 24px rgba(var(--kx-rgb), 0.28);
  transform: translateY(-2px);
}

/* Three bars — the same "open navigation" affordance the cube carries */
.kx-nav-glyph {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 2px;
  background: var(--kx-cyan);
  box-shadow: 0 -5px 0 var(--kx-cyan), 0 5px 0 var(--kx-cyan);
}

/* ── Home hero ───────────────────────────────────────────────── */

.home-shell .hero-kicker,
.home-shell .rail-heading,
.home-shell .rail-status,
.home-shell .cube-hint span,
.home-shell .bf-main-label {
  font-family: var(--kx-mono);
  letter-spacing: 4px;
}

.home-shell .hero-wordmark {
  font-family: var(--kx-mono);
  letter-spacing: 10px;
}
.home-shell .hero-wordmark span { color: var(--kx-cyan); }

.home-shell .hero-deck {
  font-family: var(--kx-sans);
  color: var(--kx-mute);
}

.home-shell .hero-title {
  font-family: var(--kx-mono);
  letter-spacing: 8px;
}

.home-shell .cube-face {
  border: 1px solid var(--kx-line-strong);
  box-shadow: inset 0 0 40px rgba(var(--kx-rgb), 0.14);
}

.home-shell .bf-main-btn {
  border-radius: 0;
  border: 1px solid var(--kx-line-strong);
  clip-path: polygon(
    var(--kx-notch) 0, 100% 0, 100% calc(100% - var(--kx-notch)),
    calc(100% - var(--kx-notch)) 100%, 0 100%, 0 var(--kx-notch)
  );
}
.home-shell .bf-main-btn:hover { border-color: var(--kx-cyan); }

.home-shell .capability-rail a { border-left: 1px solid var(--kx-line); }
.home-shell .capability-rail a:hover { border-left-color: var(--kx-cyan); }
.home-shell .rail-no { font-family: var(--kx-mono); color: var(--kx-cyan); }
.home-shell .capability-rail strong {
  font-family: var(--kx-mono);
  letter-spacing: 3px;
  font-weight: 600;
}
.home-shell .capability-rail small { color: var(--kx-faint); }

/* ── Contact / Privacy ───────────────────────────────────────
   These two shipped with a marketing-page voice — a 72px rounded
   headline and soft rounded panels — which read as a different site.
   Brought onto the terminal language here. */

main > .eyebrow,
.panel .eyebrow {
  font-family: var(--kx-mono);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--kx-cyan);
}

body:not(.home-shell) main > h1 {
  font-family: var(--kx-mono);
  font-size: clamp(26px, 5vw, 50px);
  font-weight: 700;
  letter-spacing: 6px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 16px 0 20px;
}

body:not(.home-shell) main > p {
  font-family: var(--kx-sans);
  color: var(--kx-mute);
  max-width: 62ch;
}

.panel {
  border: 1px solid var(--kx-line-strong) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(var(--kx-rgb), 0.05), transparent 60%),
    var(--kx-panel-solid) !important;
  clip-path: polygon(
    var(--kx-notch-lg) 0, 100% 0, 100% calc(100% - var(--kx-notch-lg)),
    calc(100% - var(--kx-notch-lg)) 100%, 0 100%, 0 var(--kx-notch-lg)
  );
}

.email {
  font-family: var(--kx-mono);
  letter-spacing: 1px;
  border-bottom: 1px solid var(--kx-cyan);
}

.item { border-left: 1px solid var(--kx-line-strong); }
.item strong {
  font-family: var(--kx-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--kx-cyan);
}
.item span { color: var(--kx-mute); }

.ro { border-top: 1px solid var(--kx-line); }
.ro strong {
  font-family: var(--kx-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--kx-cyan);
}

.actions a {
  font-family: var(--kx-mono);
  border: 1px solid var(--kx-line);
  border-bottom: 1px solid var(--kx-line);
  padding: 9px 16px;
  color: var(--kx-text);
  letter-spacing: 2.5px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}
.actions a:hover {
  border-color: var(--kx-cyan);
  border-bottom-color: var(--kx-cyan);
  color: var(--kx-cyan);
  background: rgba(var(--kx-rgb), 0.08);
}

/* ── Research / marketplace / Beyond Frontiers components ───── */

.paper-card,
.paper-slot,
.research-notice,
.osf-direct-panel,
.bf-panel {
  border: 1px solid var(--kx-line);
  background:
    linear-gradient(160deg, rgba(var(--kx-rgb), 0.06), transparent 60%),
    var(--kx-panel-solid);
}
.paper-card:hover { border-color: var(--kx-line-strong); }

.paper-tag,
.banner-badge {
  font-family: var(--kx-mono);
  border-radius: 0;
  border: 1px solid var(--kx-line);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--kx-cyan);
}

.bf-toggle,
.marketplace-cta-btn,
.external-paper-link {
  font-family: var(--kx-mono);
  border-radius: 0;
  border: 1px solid var(--kx-line);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}
.bf-toggle:hover,
.marketplace-cta-btn:hover,
.external-paper-link:hover {
  border-color: var(--kx-cyan);
  color: var(--kx-cyan);
  background: rgba(var(--kx-rgb), 0.08);
}

/* ── Topic pages ─────────────────────────────────────────────── */

.t-cat,
.t-back {
  font-family: var(--kx-mono);
  border-radius: 0;
  border: 1px solid var(--kx-line);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}
.t-cat:hover,
.t-back:hover { border-color: var(--kx-cyan); color: var(--kx-cyan); }

.t-scenario,
.t-specs { border: 1px solid var(--kx-line); background: var(--kx-panel-solid); }

/* ── Footer ──────────────────────────────────────────────────── */

#trademark-footer {
  font-family: var(--kx-mono);
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--kx-faint);
}
#trademark-footer a { color: var(--kx-mute) !important; text-decoration: none; }
#trademark-footer a:hover { color: var(--kx-cyan) !important; }

/* ── Chat widget ─────────────────────────────────────────────── */

#chat-widget {
  border-radius: 0;
  border: 1px solid var(--kx-line-strong);
  background: var(--kx-panel-solid);
}
#chat-widget:not(.minimized) {
  clip-path: polygon(
    var(--kx-notch) 0, 100% 0, 100% calc(100% - var(--kx-notch)),
    calc(100% - var(--kx-notch)) 100%, 0 100%, 0 var(--kx-notch)
  );
}
#chat-widget.minimized { border-radius: 50%; clip-path: none; }
.chat-header {
  font-family: var(--kx-mono);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kx-line);
  color: var(--kx-cyan);
}
.user-msg {
  border-radius: 0;
  background: rgba(var(--kx-rgb), 0.14);
  border: 1px solid var(--kx-line-strong);
}

/* ═══════════════════════════════════════════════════════════════
   Investor deck (investors.html)
   The deck shipped with its own identity: a magenta/purple gradient
   set, pill buttons and a soft sans, none of which exist anywhere
   else on the site. Its utility classes carry literal colours, so the
   palette is re-pitched here rather than in the page.
   ═══════════════════════════════════════════════════════════════ */

.kx-deck {
  background-color: var(--kx-void);
  color: var(--kx-text);
  font-family: var(--kx-sans);
  background-image:
    linear-gradient(rgba(var(--kx-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--kx-rgb), 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}

.kx-deck h1,
.kx-deck h2,
.kx-deck h3,
.kx-deck .display-font {
  font-family: var(--kx-mono);
  letter-spacing: 2px;
}

/* Magenta → the site's single warm accent */
.kx-deck .gradient-text {
  background: linear-gradient(120deg, var(--kx-text) 0%, var(--kx-cyan) 55%, var(--kx-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kx-deck .glass-panel,
.kx-deck .tech-card {
  background:
    linear-gradient(160deg, rgba(var(--kx-rgb), 0.07), transparent 60%),
    var(--kx-panel-solid);
  border: 1px solid var(--kx-line);
  border-radius: 0;
  clip-path: polygon(
    var(--kx-notch) 0, 100% 0, 100% calc(100% - var(--kx-notch)),
    calc(100% - var(--kx-notch)) 100%, 0 100%, 0 var(--kx-notch)
  );
}
.kx-deck .tech-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 46px -20px rgba(0, 0, 0, 0.85);
  border-color: var(--kx-line-strong);
}
.kx-deck .neon-border {
  box-shadow: 0 0 26px rgba(var(--kx-rgb), 0.22), inset 0 0 26px rgba(var(--kx-rgb), 0.08);
}

/* The deck's rounded language becomes the site's cut-corner one */
.kx-deck .rounded-lg,
.kx-deck .rounded-xl,
.kx-deck .rounded-2xl,
.kx-deck .rounded-3xl { border-radius: 0; }
.kx-deck .rounded-full { border-radius: 0; }

/* Utility palette remap: purple / fuchsia / green / yellow all
   collapse onto cyan + amber. */
.kx-deck .text-purple-400,
.kx-deck .text-purple-500,
.kx-deck .text-fuchsia-400,
.kx-deck .text-fuchsia-500,
.kx-deck .text-yellow-400,
.kx-deck .text-yellow-500 { color: var(--kx-amber); }

.kx-deck .text-cyan-400,
.kx-deck .text-cyan-500,
.kx-deck .text-green-400,
.kx-deck .text-green-500 { color: var(--kx-cyan); }

.kx-deck .bg-purple-400,
.kx-deck .bg-purple-500,
.kx-deck .bg-fuchsia-400,
.kx-deck .bg-fuchsia-500,
.kx-deck .bg-yellow-500 { background-color: var(--kx-amber); }

.kx-deck .bg-cyan-400,
.kx-deck .bg-cyan-500 { background-color: var(--kx-cyan); }

.kx-deck [class*="bg-purple-500/"],
.kx-deck [class*="bg-fuchsia-500/"],
.kx-deck [class*="bg-yellow-500/"] { background-color: rgba(var(--kx-amber-rgb), 0.14); }
.kx-deck [class*="bg-cyan-500/"],
.kx-deck [class*="bg-cyan-950/"] { background-color: rgba(var(--kx-rgb), 0.12); }

.kx-deck .border-purple-500,
.kx-deck .border-fuchsia-500,
.kx-deck [class*="border-fuchsia-500/"],
.kx-deck .border-green-500 { border-color: rgba(var(--kx-amber-rgb), 0.45); }
.kx-deck .border-cyan-400,
.kx-deck [class*="border-cyan-"] { border-color: var(--kx-line-strong); }

.kx-deck .from-purple-600,
.kx-deck .from-fuchsia-600,
.kx-deck .from-yellow-600,
.kx-deck .from-green-600 { --gradient-from: var(--kx-amber); }
.kx-deck .to-purple-400,
.kx-deck .to-fuchsia-400,
.kx-deck .to-fuchsia-500,
.kx-deck .to-yellow-400,
.kx-deck .to-green-400 { --gradient-to: var(--kx-amber); }
.kx-deck .from-cyan-400,
.kx-deck .from-cyan-600 { --gradient-from: var(--kx-cyan); }
.kx-deck .to-cyan-400 { --gradient-to: var(--kx-cyan); }

.kx-deck .hover\:text-fuchsia-400:hover { color: var(--kx-amber); }
.kx-deck .hover\:text-cyan-400:hover { color: var(--kx-cyan); }

/* Chrome: top-right links, slide counter, prev/next */
.kx-deck .presentation-links a {
  font-family: var(--kx-mono);
  border: 1px solid var(--kx-line);
  border-radius: 0;
  background: rgba(4, 9, 14, 0.85);
  color: var(--kx-text);
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}
.kx-deck .presentation-links a:hover,
.kx-deck .presentation-links a:focus-visible {
  color: var(--kx-cyan);
  border-color: var(--kx-cyan);
  background: rgba(var(--kx-rgb), 0.1);
}

.kx-deck .nav-controls button {
  border-radius: 0 !important;
  border: 1px solid var(--kx-line-strong);
  background: rgba(4, 9, 14, 0.85);
  color: var(--kx-cyan);
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}
.kx-deck .nav-controls button:hover:not(:disabled) {
  background: rgba(var(--kx-rgb), 0.14);
  border-color: var(--kx-cyan);
}

.kx-deck .slide-counter {
  font-family: var(--kx-mono);
  letter-spacing: 3px;
  color: var(--kx-mute);
}

.kx-deck .progress-bar { background: linear-gradient(90deg, var(--kx-cyan), var(--kx-amber)); }

/* ── 404 ─────────────────────────────────────────────────────
   Standalone page: no header, no fx.js, so it only inherits the
   tokens. Type is brought across by hand. */

body > .code {
  font-family: var(--kx-mono);
  letter-spacing: 4px;
  opacity: 0.1;
}
body > .label,
body > .links a,
body > footer {
  font-family: var(--kx-mono);
  letter-spacing: 3px;
}
body > h1 { font-family: var(--kx-mono); letter-spacing: 6px; }
body > .links a {
  border-radius: 0;
  border: 1px solid var(--kx-line);
  padding: 10px 18px;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}

/* ── Focus ───────────────────────────────────────────────────── */

:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kx-cyan);
  outline-offset: 2px;
  border-radius: 0;
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  header::after,
  .home-shell header::after { animation: none; }
  #kx-scan { background-image: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.5) 100%); }
}

/* ── Narrow screens ──────────────────────────────────────────── */

@media (max-width: 720px) {
  header, .home-shell header { height: 58px; padding: 0 14px; }
  .nav-logo, .home-shell .nav-logo { font-size: 20px; letter-spacing: 4px; }
  .status-description, .home-shell .status-description { display: none; }
  .gh-text { display: none; }
  .page-banner { padding: 66px 20px 26px; }
  .page-title { letter-spacing: 5px; }
  .menu-panel { width: min(330px, calc(100vw - 32px)); }

  /* Keep the injected trigger clear of the banner copy */
  .cube-wrap.kx-nav-cube { top: 76px; right: 18px; }
  .kx-nav-cube #cube-viewport { width: 36px; height: 36px; }

  /* The survey grid gets busy at phone widths */
  body, body.home-shell, .kx-deck { background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%; }
}

/* ── Language selector flag ──────────────────────────────────
   Injected by assets/lang.js. The <select> keeps its own styling from
   each page; this only positions the flag beside it. */

.lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lang-flag {
  display: inline-flex;
  line-height: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

body[data-theme="light"] .lang-flag {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.lang-wrap:hover .lang-flag {
  opacity: 1;
}

.lang-flag svg {
  display: block;
  width: 17px;
  height: 11px;
}