/* ==========================================================================
   khatwa.ps — static build. Self-hosted fonts + design tokens + components.
   Flattened from the React/JSX design system to plain CSS. No runtime deps.
   ========================================================================== */

/* --- Fonts (self-hosted IBM Plex, latin subset) ------------------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/plex-mono-600.woff2') format('woff2'); }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Navy */
  --navy-950: #060F1F; --navy-900: #0A192F; --navy-800: #0B2540;
  --navy-700: #0B3C5D; --navy-600: #14507A; --navy-500: #1F6699;
  /* Slate */
  --slate-900: #1A202C; --slate-800: #2D3748; --slate-700: #4A5568;
  --slate-600: #718096; --slate-500: #A0AEC0; --slate-400: #CBD5E0;
  --slate-300: #E2E8F0; --slate-200: #EDF1F6; --slate-100: #F8FAFC;
  --white: #FFFFFF;
  /* Crimson */
  --crimson-800: #7F1515; --crimson-700: #991B1B; --crimson-600: #B91C1C; --crimson-100: #FBEAEA;
  /* Supporting */
  --amber-700: #92610A; --amber-100: #FBF3E2; --green-700: #1E5F44; --green-100: #E5F0EB;

  /* Surfaces */
  --surface-page: var(--slate-100); --surface-card: var(--white); --surface-inset: var(--slate-200);
  --surface-navy: var(--navy-900); --surface-navy-deep: var(--navy-950); --surface-navy-panel: var(--navy-800);
  /* Text */
  --text-strong: var(--navy-900); --text-body: var(--slate-700); --text-muted: var(--slate-600); --text-faint: var(--slate-500);
  --text-on-navy-strong: var(--white); --text-on-navy-body: var(--slate-400); --text-on-navy-muted: var(--slate-500);
  /* Borders */
  --border-hairline: var(--slate-300); --border-default: var(--slate-400); --border-strong: var(--slate-700);
  --border-on-navy: rgba(255,255,255,0.10); --border-on-navy-strong: rgba(255,255,255,0.18);
  /* Accent */
  --accent: var(--crimson-700); --accent-hover: var(--crimson-800); --accent-wash: var(--crimson-100); --focus-ring: var(--navy-600);
  /* Risk */
  --risk-critical-fg: var(--crimson-700); --risk-critical-bg: var(--crimson-100);
  --risk-medium-fg: var(--amber-700); --risk-medium-bg: var(--amber-100);
  --risk-cleared-fg: var(--green-700); --risk-cleared-bg: var(--green-100);
  --risk-neutral-fg: var(--slate-700); --risk-neutral-bg: var(--slate-200);

  /* Fonts */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-display: 58px; --fs-h1: 42px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 11px;
  --fs-mono-lg: 28px; --fs-mono: 14px; --fs-mono-sm: 12px;
  --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-caps: 0.12em; --ls-mono: 0.01em;

  /* Spacing / radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(10,25,47,0.06);
  --shadow-sm: 0 1px 3px rgba(10,25,47,0.08), 0 1px 2px rgba(10,25,47,0.04);
  --shadow-md: 0 4px 12px rgba(10,25,47,0.10), 0 1px 3px rgba(10,25,47,0.06);
  --shadow-lg: 0 12px 32px rgba(10,25,47,0.14), 0 2px 6px rgba(10,25,47,0.06);
  --shadow-focus: 0 0 0 3px rgba(20,80,122,0.28);
  --shadow-accent-focus: 0 0 0 3px rgba(153,27,27,0.24);
  --ease-standard: cubic-bezier(0.2,0,0.2,1);
  --dur-fast: 120ms; --dur-base: 180ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }
ul { margin: 0; padding: 0; list-style: none; }
svg.icon { width: 18px; height: 18px; stroke-width: 1.75; display: inline-flex; flex: 0 0 auto; }

.kx-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.kx-section { padding: 88px 0; }
.kx-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.kx-eyebrow--on-navy { color: var(--text-on-navy-muted); }

/* ==========================================================================
   Section head
   ========================================================================== */
.kx-head__title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-strong); max-width: 720px; }
.kx-head__intro { margin-top: 16px; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-muted); max-width: 720px; }
.kx-head--on-navy .kx-head__title { color: #fff; }
.kx-head--on-navy .kx-head__intro { color: var(--text-on-navy-body); }
.kx-head > .kx-eyebrow { margin-bottom: 16px; }

/* ==========================================================================
   Button
   ========================================================================== */
.kx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
  letter-spacing: 0.01em; line-height: 1; padding: 10px 20px; min-height: 42px;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap; user-select: none; text-decoration: none;
}
.kx-btn:hover { color: inherit; }
.kx-btn .icon { width: 17px; height: 17px; }
.kx-btn--sm { padding: 7px 14px; min-height: 34px; font-size: var(--fs-body-sm); }
.kx-btn--lg { padding: 14px 28px; min-height: 52px; font-size: var(--fs-body); }
.kx-btn--full { width: 100%; }
.kx-btn--primary { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.kx-btn--primary:hover { background: var(--navy-800); color: var(--white); }
.kx-btn--critical { background: var(--accent); color: var(--white); border-color: var(--accent); }
.kx-btn--critical:hover { background: var(--accent-hover); color: var(--white); }
.kx-btn--secondary { background: transparent; color: var(--navy-900); border-color: var(--border-default); }
.kx-btn--secondary:hover { background: var(--slate-200); border-color: var(--border-strong); color: var(--navy-900); }
.kx-btn--ghost { background: transparent; color: var(--navy-700); border-color: transparent; }
.kx-btn--ghost:hover { background: var(--slate-200); }
/* secondary variant used on the navy hero */
.kx-btn--on-navy { color: #fff; border-color: var(--border-on-navy-strong); background: transparent; }
.kx-btn--on-navy:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: var(--border-on-navy-strong); }

/* ==========================================================================
   Card
   ========================================================================== */
.kx-card {
  position: relative; background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);
}
.kx-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-default); }
.kx-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kx-card__index { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-semibold); color: var(--accent); letter-spacing: var(--ls-mono); }
.kx-card__eyebrow { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }

/* Module card internals */
.kx-modicon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--slate-100); border: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: center; color: var(--navy-700); margin-bottom: 18px; }
.kx-modicon .icon { width: 20px; height: 20px; }
.kx-card__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-strong); }

/* Capability bullet */
.kx-caps { margin: 18px 0 0; }
.kx-cap { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.kx-cap__mark { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.kx-cap__mark .icon { width: 16px; height: 16px; }
.kx-cap__text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-body); }

/* ==========================================================================
   RiskBadge
   ========================================================================== */
.kx-risk {
  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono);
  font-size: var(--fs-mono-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-sm);
  border: 1px solid; border-color: color-mix(in srgb, currentColor 28%, transparent); white-space: nowrap;
}
.kx-risk__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: 0 0 auto; }
.kx-risk--critical { color: var(--risk-critical-fg); background: var(--risk-critical-bg); }
.kx-risk--medium { color: var(--risk-medium-fg); background: var(--risk-medium-bg); }
.kx-risk--cleared { color: var(--risk-cleared-fg); background: var(--risk-cleared-bg); }
.kx-risk--neutral { color: var(--risk-neutral-fg); background: var(--risk-neutral-bg); }

/* ==========================================================================
   Tag
   ========================================================================== */
.kx-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: 0.01em; padding: 3px 9px; border-radius: var(--radius-sm); white-space: nowrap; }
.kx-tag--mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.kx-tag--outline { background: transparent; color: var(--text-body); border: 1px solid var(--border-hairline); }
.kx-tag--solid { background: var(--slate-200); color: var(--text-strong); border: 1px solid transparent; }
.kx-tag--navy { background: var(--navy-800); color: var(--slate-300); border: 1px solid var(--border-on-navy); }

/* ==========================================================================
   Metric
   ========================================================================== */
.kx-metric { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.kx-metric__value { font-family: var(--font-mono); font-size: var(--fs-mono-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--text-strong); line-height: 1; }
.kx-metric__value--accent { color: var(--accent); }
.kx-metric__value--on-dark { color: var(--text-on-navy-strong); }
.kx-metric__label { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.kx-metric__label--on-dark { color: var(--text-on-navy-muted); }

/* ==========================================================================
   DataTable
   ========================================================================== */
.kx-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-body-sm); }
.kx-table th { text-align: left; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.kx-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-hairline); vertical-align: middle; line-height: 1.2; color: var(--text-body); }
.kx-table td.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.kx-table td.strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.kx-table th.right, .kx-table td.right { text-align: right; }
.kx-table--on-dark th { color: var(--text-on-navy-muted); border-bottom-color: var(--border-on-navy-strong); }
.kx-table--on-dark td { color: var(--text-on-navy-body); border-bottom-color: var(--border-on-navy); }
.kx-table--on-dark td.strong { color: var(--text-on-navy-strong); }

/* ==========================================================================
   Form fields
   ========================================================================== */
.kx-field { display: block; font-family: var(--font-sans); }
.kx-field__label { display: block; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--space-2); }
.kx-req { color: var(--accent); margin-left: 3px; }
.kx-input, .kx-select, .kx-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: var(--fs-body-sm);
  color: var(--text-strong); background: var(--surface-card); padding: 10px 12px; min-height: 42px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default); outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.kx-textarea { line-height: 1.5; resize: vertical; min-height: auto; }
.kx-input:focus, .kx-textarea:focus, .kx-select:focus { border-color: var(--focus-ring); box-shadow: var(--shadow-focus); }
.kx-field--error .kx-input, .kx-field--error .kx-select, .kx-field--error .kx-textarea { border-color: var(--accent); }
.kx-field--error .kx-input:focus, .kx-field--error .kx-select:focus, .kx-field--error .kx-textarea:focus { box-shadow: var(--shadow-accent-focus); }
.kx-select { appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 12px; color: var(--text-faint); cursor: pointer; }
.kx-select.has-value { color: var(--text-strong); }
.kx-select-wrap { position: relative; }
.kx-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.kx-hint { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-2); }
.kx-error { display: block; font-size: var(--fs-caption); color: var(--accent); margin-top: var(--space-2); }
.kx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* honeypot — visually + AT hidden, still in DOM for bots */
.kx-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ==========================================================================
   Nav
   ========================================================================== */
.kx-nav { position: sticky; top: 0; z-index: 50; background: rgba(248,250,252,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); }
.kx-nav__inner { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.kx-nav__right { display: flex; align-items: center; gap: 28px; }
.kx-navlinks { display: flex; gap: 24px; }
.kx-navlinks a { font-size: 13px; font-weight: 500; color: var(--text-body); border-bottom: 2px solid transparent; padding-bottom: 4px; }
.kx-navlinks a.active { font-weight: 600; color: var(--text-strong); border-bottom-color: var(--accent); }
.kx-navlinks a:hover { color: var(--accent); }

/* Logo */
.kx-logo { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-sans); }
.kx-logo__word { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-900); }
.kx-logo__word .dot { color: var(--accent); }
.kx-logo__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-muted); border-left: 1px solid var(--border-hairline); padding-left: 8px; }
.kx-logo--on-navy .kx-logo__word { color: #fff; }
.kx-logo--on-navy .kx-logo__sub { color: var(--slate-500); border-left-color: var(--border-on-navy); }

/* ==========================================================================
   Hero
   ========================================================================== */
.kx-hero { background: var(--navy-900); border-bottom: 1px solid var(--navy-800); position: relative; overflow: hidden; }
.kx-hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--border-on-navy) 1px, transparent 1px), linear-gradient(90deg, var(--border-on-navy) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.5; -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%); mask-image: linear-gradient(to bottom, black, transparent 90%); }
.kx-hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 84px 32px; }
.kx-hero__eyebrow { color: var(--slate-500); margin-bottom: 22px; line-height: 1.5; }
.kx-hero__title { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; color: #fff; }
.kx-hero__title .muted { color: var(--slate-500); }
.kx-hero__lede { margin-top: 24px; font-size: var(--fs-body-lg); line-height: 1.62; color: var(--text-on-navy-body); max-width: 560px; }
.kx-hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* Hero console panel */
.kx-panel { background: var(--surface-navy-panel); border: 1px solid var(--border-on-navy-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.kx-panel__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-on-navy); }
.kx-panel__label { font-family: var(--font-mono); font-size: 12px; color: var(--slate-400); display: inline-flex; align-items: center; gap: 8px; }
.kx-panel__label .icon { width: 14px; height: 14px; color: var(--accent); }
.kx-panel__body { padding: 8px 8px 4px; }
.kx-panel__foot { display: flex; border-top: 1px solid var(--border-on-navy); }
.kx-panel__foot > div:first-child, .kx-panel__stat { flex: 1; padding: 16px 18px; }
.kx-panel__divider { width: 1px; background: var(--border-on-navy); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.kx-trust { background: var(--navy-950); border-bottom: 1px solid var(--navy-800); }
.kx-trust__inner { display: flex; align-items: center; gap: 32px; padding: 20px 32px; flex-wrap: wrap; }
.kx-trust__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--slate-500); text-transform: uppercase; }
.kx-trust__logos { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.kx-trust__logos span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--slate-400); }

/* ==========================================================================
   Problem grid
   ========================================================================== */
.kx-problem { margin-top: 44px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.kx-problem__grid { display: grid; grid-template-columns: 1fr 1.5fr 1.4fr; }
.kx-problem__h { padding: 14px 24px; background: var(--slate-100); border-bottom: 1px solid var(--border-default); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.kx-problem__h + .kx-problem__h { border-left: 1px solid var(--border-hairline); }
.kx-problem__h.accent { color: var(--accent); }
.kx-problem__cell { padding: 22px 24px; border-bottom: 1px solid var(--border-hairline); }
.kx-problem__cell.mid, .kx-problem__cell.res { border-left: 1px solid var(--border-hairline); }
.kx-problem__cell.res { background: color-mix(in srgb, var(--crimson-100) 30%, transparent); }
.kx-problem__row:last-child .kx-problem__cell { border-bottom: none; }
.kx-problem__b { font-weight: 600; font-size: 15px; color: var(--text-strong); line-height: 1.3; }
.kx-problem__i { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.kx-problem__rt { font-weight: 600; font-size: 14px; color: var(--text-strong); margin-bottom: 6px; }
.kx-problem__rd { font-size: 14px; line-height: 1.5; color: var(--text-body); }

/* ==========================================================================
   Grids / shared section layouts
   ========================================================================== */
.kx-band-card { background: var(--surface-card); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.kx-band-navy { background: var(--navy-900); }
.kx-band-navy-deep { background: var(--navy-950); }
.kx-3col { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Architecture spec card */
.kx-spec { background: var(--surface-navy-panel); border: 1px solid var(--border-on-navy); border-radius: var(--radius-lg); padding: 28px; }
.kx-spec__icon { color: var(--accent); margin-bottom: 18px; }
.kx-spec__icon .icon { width: 22px; height: 22px; }
.kx-spec__title { font-size: var(--fs-h4); font-weight: 600; color: #fff; margin-bottom: 10px; }
.kx-spec__body { font-size: 14px; line-height: 1.6; color: var(--text-on-navy-body); }
.kx-tags { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Advisory */
.kx-advisory { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.kx-metricgrid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.kx-metricgrid > div { padding: 20px 22px; }
.kx-metricgrid > div:nth-child(odd):not(:first-child) { }
.kx-metricgrid > div:nth-child(3), .kx-metricgrid > div:nth-child(4) { border-top: 1px solid var(--border-hairline); }
.kx-metricgrid > div:nth-child(even) { border-left: 1px solid var(--border-hairline); }
.kx-advisory__prose { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--text-body); }
.kx-advisory__prose p + p { margin-top: 20px; }

/* ==========================================================================
   Contact / demo form section
   ========================================================================== */
.kx-form-sec { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; }
.kx-form-benefits { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.kx-form-benefit { display: flex; gap: 12px; align-items: center; color: var(--text-on-navy-body); font-size: 14px; }
.kx-form-benefit .icon { width: 17px; height: 17px; color: var(--accent); }
.kx-form-card { background: var(--surface-card); border: 1px solid var(--border-on-navy-strong); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); }
.kx-form { display: flex; flex-direction: column; gap: 18px; }
.kx-form-noscript { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.kx-form-success { text-align: center; padding: 40px 12px; }
.kx-form-success__icon { color: var(--risk-cleared-fg); display: flex; justify-content: center; margin-bottom: 16px; }
.kx-form-success__icon .icon { width: 40px; height: 40px; }
.kx-form-success h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 10px; }
.kx-form-success p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.kx-form-alert { font-size: 13px; color: var(--accent); background: var(--crimson-100); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius-md); padding: 10px 12px; }
.kx-busy { opacity: 0.6; pointer-events: none; }

/* CTA band (about page) */
.kx-cta-band { padding: 56px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.kx-cta-band h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; color: #fff; max-width: 560px; }

/* Page header (internal pages) */
.kx-pagehead { background: var(--navy-900); border-bottom: 1px solid var(--navy-800); }
.kx-pagehead__inner { padding: 64px 32px; }

/* About */
.kx-about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
.kx-about__prose { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--text-body); }
.kx-about__prose p + p { margin-top: 20px; }
.kx-mandate { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 28px; background: var(--surface-page); }
.kx-mandate__icon { color: var(--navy-700); margin-bottom: 18px; }
.kx-mandate__icon .icon { width: 22px; height: 22px; }
.kx-mandate h3 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: 10px; }
.kx-mandate p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.kx-footer { background: var(--navy-950); border-top: 1px solid var(--navy-800); }
.kx-footer__inner { padding: 48px 32px 40px; }
.kx-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.kx-footer__links { display: flex; gap: 28px; flex-wrap: wrap; }
.kx-footer__links a { font-size: 13px; color: var(--slate-400); }
.kx-footer__links a:hover { color: var(--accent); }
.kx-footer__rule { height: 1px; background: var(--navy-800); margin: 28px 0 20px; }
.kx-footer__bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kx-footer__bottom p { font-size: 12px; color: var(--slate-500); line-height: 1.6; }
.kx-footer__bottom p:first-child { max-width: 640px; }
.kx-footer__bottom p.mono { font-family: var(--font-mono); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .kx-hero__inner, .kx-3col, .kx-advisory, .kx-form-sec, .kx-about,
  .kx-problem__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .kx-navlinks { display: none !important; }
  .kx-hero__title { font-size: 44px; }
  /* Stack the problem grid as blocks on small screens */
  .kx-problem__h { display: none; }
  .kx-problem__cell, .kx-problem__cell.mid, .kx-problem__cell.res { border-left: none; }
}
@media (max-width: 860px) {
  .kx-container { padding: 0 20px; }
  .kx-section { padding: 56px 0; }
  .kx-hero__inner { padding: 56px 20px; }
  .kx-grid-2 { grid-template-columns: 1fr; }
  .kx-hero__title { font-size: 38px; }
}