/* Konnex website UI kit — component styles. Loads after colors_and_type.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--warm-bg); color: var(--fg1); }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

.kx-container { max-width: var(--measure-grid); margin: 0 auto; padding: 0 var(--gutter); }
.kx-section { padding: var(--space-section) 0; }
.kx-section-linen { background: var(--warm-bg); }
.kx-section-surface { background: var(--warm-surface); }
.kx-section-dark { background: var(--panel-bg); }
.kx-section-title { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.14; letter-spacing: -0.018em; color: var(--fg1);
  margin: 14px 0 12px; text-wrap: balance; }
.kx-section-sub { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--fg2); max-width: 600px; }
.kx-on-dark { color: var(--panel-text); }
.kx-on-dark-sub { color: var(--panel-text-secondary); }
.kx-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--terracotta); }

/* ---------- NAV ---------- */
.kx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(245,240,235,0.0); backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, backdrop-filter .4s; }
.kx-nav.scrolled { background: rgba(245,240,235,0.95); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light); }
.kx-nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--measure-grid);
  margin: 0 auto; padding: 14px var(--gutter); }
.kx-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kx-nav-name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--panel-text); transition: color .4s; }
.kx-nav.scrolled .kx-nav-name { color: var(--fg1); }
.kx-nav-right { display: flex; align-items: center; gap: 24px; }
.kx-nav-link { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--panel-text-secondary); text-decoration: none; transition: color .2s; }
.kx-nav.scrolled .kx-nav-link { color: var(--fg3); }
.kx-nav-link:hover { color: var(--panel-text); }
.kx-nav.scrolled .kx-nav-link:hover { color: var(--fg1); }
.kx-nav-link.active { color: var(--terracotta) !important; }
.kx-nav-cta { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-sm);
  background: var(--terracotta); color: #fff !important; text-decoration: none; transition: background .2s; }
.kx-nav-cta:hover { background: var(--terracotta-deep); }

/* ---------- HERO ---------- */
.kx-hero { background: var(--panel-bg); padding: var(--space-hero) 0 0; display: flex; flex-direction: column; }
.kx-hero-inner { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; width: 100%; }
.kx-hero-headline { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -0.022em; color: var(--panel-text);
  margin-bottom: 22px; text-wrap: balance; }
.kx-hero-sub { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.65; color: var(--panel-text-secondary);
  max-width: 600px; margin: 0 auto 38px; }

/* Ask Konnex demo */
.kx-ask { max-width: 640px; margin: 0 auto; }
.kx-ask-input { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius-lg);
  padding: 10px 10px 10px 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.kx-ask-input input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 1rem; color: var(--fg1); background: transparent; min-width: 0; }
.kx-ask-input input::placeholder { color: var(--panel-text-secondary); }
.kx-ask-send { width: 44px; height: 44px; border-radius: 12px; background: var(--terracotta); border: none;
  display: flex; align-items: center; justify-content: center; transition: background .2s, transform .1s; flex-shrink: 0; }
.kx-ask-send:hover { background: var(--terracotta-deep); }
.kx-ask-send:active { transform: scale(0.96); }
.kx-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.kx-chip { font-family: var(--font-body); font-size: 0.82rem; color: var(--panel-text-secondary);
  background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: var(--radius-pill);
  padding: 9px 16px; transition: all .2s; }
.kx-chip:hover { color: var(--terracotta); border-color: var(--terracotta-line); background: var(--terracotta-glow); }
.kx-thinking { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 22px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--panel-text-secondary); }
.kx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); animation: kxpulse 1s infinite ease-in-out; }
.kx-dot:nth-child(2) { animation-delay: .15s; } .kx-dot:nth-child(3) { animation-delay: .3s; }
@keyframes kxpulse { 0%,100% { opacity: .3; transform: scale(.8);} 50% { opacity: 1; transform: scale(1);} }

.kx-answer { margin-top: 26px; text-align: left; opacity: 1; }
.kx-answer-text { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: var(--panel-text); margin-bottom: 18px; }
.kx-answer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kx-answer-reset { margin: 22px auto 0; display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  color: var(--panel-text-secondary); background: none; border: none; }
.kx-answer-reset:hover { color: var(--panel-text); }

/* Text-answer box — response path for typed Ask Konnex questions (q1/q2/q3) */
.kx-text-answer { margin-top: 26px; text-align: left; }
.kx-text-answer-q { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--panel-text-tertiary); margin-bottom: 12px; }
.kx-text-answer-body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; color: var(--panel-text);
  background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-left: 3px solid var(--terracotta);
  border-radius: 12px; padding: 20px 22px; }
.kx-text-answer-body strong { color: var(--terracotta); font-weight: 600; }
.kx-text-answer-meta { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5;
  color: var(--panel-text-tertiary); margin-top: 12px; }

/* Grounded free-form Q&A — prominent key_stat above the plain-text answer */
.kx-qa-stat { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -0.01em;
  color: var(--terracotta); margin-bottom: 12px; }
.kx-qa-answer { margin: 0; }
/* Out-of-set / no-data — deliberately muted, no terracotta accent, so an honest
   "I don't have that yet" never reads like a confident answer */
.kx-text-answer-nodata { border-left-color: var(--panel-border);
  color: var(--panel-text-secondary); font-style: italic; }

/* Ask Konnex full-screen chat (v3) — opens on the first question */
html.kx-chat-open, html.kx-chat-open body { overflow: hidden; }
.kx-chat { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; background: var(--panel-bg); color: var(--panel-text); }
.kx-chat-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px; border-bottom: 1px solid var(--panel-border); }
.kx-chat-brand { display: flex; align-items: center; gap: 10px; }
.kx-chat-title { font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--panel-text); }
.kx-chat-actions { display: flex; align-items: center; gap: 6px; }
.kx-chat-new { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 0.84rem;
  font-weight: 500; color: var(--panel-text); background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border);
  border-radius: var(--radius-pill); padding: 8px 15px; transition: all .2s; }
.kx-chat-new:hover { color: var(--terracotta); border-color: var(--terracotta-line); background: var(--terracotta-glow); }
.kx-chat-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--panel-text-secondary); background: none; border: none; border-radius: 10px; transition: all .2s; }
.kx-chat-close:hover { color: var(--panel-text); background: rgba(255,255,255,0.06); }
.kx-chat-new:focus-visible, .kx-chat-close:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.kx-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.kx-thread { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 36px var(--gutter) 28px;
  display: flex; flex-direction: column; gap: 26px; }
.kx-turn-user { display: flex; justify-content: flex-end; }
.kx-bubble { max-width: 80%; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--panel-text);
  background: var(--panel-surface); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px 18px 4px 18px; padding: 11px 16px; overflow-wrap: anywhere; }
.kx-turn-kx { display: flex; align-items: flex-start; gap: 14px; }
.kx-turn-mark { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--terracotta-glow); border: 1px solid var(--terracotta-line); }
.kx-turn-body { flex: 1; min-width: 0; padding-top: 4px; }
.kx-turn-text { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.65; color: var(--panel-text);
  overflow-wrap: anywhere; }
.kx-turn-body .kx-qa-stat { margin-bottom: 10px; }
/* Evidence class badge beside the headline number: Verified solid, Observed outlined, Inferred dashed + muted */
.kx-stat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.kx-stat-row .kx-qa-stat { margin-bottom: 0; }
.kx-stat-row:has(+ .kx-ev-basis), .kx-stat-row:has(+ .kx-qa-scope) { margin-bottom: 4px; }
.kx-qa-approx { font-size: 0.5em; font-weight: 500; letter-spacing: 0; margin-right: 2px; vertical-align: 0.35em; }
.kx-qa-scope { margin-bottom: 6px; font-family: var(--font-ui); font-size: 0.86rem; line-height: 1.45; color: var(--panel-text); }
.kx-ev-more { margin-left: 2px; padding: 2px 0; border: 0; background: none; font: inherit; color: var(--terracotta);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.kx-ev-more:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 3px; }
.kx-ev-basis { margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.02em;
  color: var(--panel-text-secondary); overflow-wrap: anywhere; }
.kx-ev-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 6px 10px;
  border-radius: 999px; border: 1px solid var(--terracotta-line); color: var(--terracotta); background: var(--terracotta-glow); }
.kx-ev-date { font-weight: 400; text-transform: none; letter-spacing: 0.02em; color: var(--panel-text-secondary); }
.kx-ev-verified { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.kx-ev-verified .kx-ev-date { color: rgba(255,255,255,0.85); }
.kx-ev-inferred { background: transparent; border-style: dashed; border-color: var(--panel-border);
  color: var(--panel-text-secondary); }
/* Evidence label (Observed / ABN-confirmed / Verified ...) — always visible under the answer */
.kx-evidence { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.45;
  letter-spacing: 0.02em; color: var(--terracotta); background: var(--terracotta-glow);
  border: 1px solid var(--terracotta-line); border-radius: var(--radius-sm); padding: 5px 10px; }
/* Supply chart (Matt 38c3a101): separate bars, one per unit, own scale each. Evidence strength is one
   orange ramp, strongest = full brand orange (Marcus 50e1f0a0); every shade also has a text key. */
.kx-chart { margin: 4px 0 18px; padding: 16px; display: grid; gap: 20px; border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); }
.kx-chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.kx-chart-total { font-family: var(--font-display, var(--font-body)); font-size: 1.35rem; font-weight: 600;
  color: var(--panel-text); font-variant-numeric: tabular-nums; }
.kx-chart-unit { font-size: 0.9rem; color: var(--panel-text); }
.kx-chart-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--panel-text-secondary); }
.kx-chart-label { margin: 2px 0 8px; font-size: 0.85rem; line-height: 1.4; color: var(--panel-text-secondary); }
.kx-chart-bar { display: flex; gap: 2px; height: 14px; }
.kx-chart-seg:first-child { border-radius: 3px 0 0 3px; } .kx-chart-seg:last-child { border-radius: 0 3px 3px 0; }
.kx-chart-seg { flex-grow: 0; flex-shrink: 1; min-width: 3px; }
.kx-sh-strong { background: #E8703A; }
.kx-sh-mid { background: #B0582F; }
.kx-sh-light { background: #5E4538; box-shadow: inset 0 0 0 1px #8A7A70; } /* outline keeps 3:1 against the panel */
.kx-sh-pale { background: #F4B58F; }
.kx-sh-muted { background: #55555B; box-shadow: inset 0 0 0 1px #A4A4AB; } /* composition: the unknown group, neutral grey + outline */
.kx-chart-key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 0.8rem; color: var(--panel-text-secondary); }
.kx-chart-key li { display: block; line-height: 1.45; }
.kx-chart-key b { color: var(--panel-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-chart-asof { display: block; padding-left: 16px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--panel-text-secondary); }
.kx-chart-rownote { margin: 6px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--panel-text-secondary); overflow-wrap: anywhere; }
.kx-chart-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.kx-chart-track { position: relative; height: 40px; border-bottom: 1px dashed var(--panel-text-secondary); }
.kx-chart-band { position: absolute; top: 18px; bottom: 4px;
  background: repeating-linear-gradient(135deg, rgba(232,112,58,0.34) 0 4px, rgba(232,112,58,0.14) 4px 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.kx-chart-band-label { position: absolute; top: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--panel-text); }
.kx-chart-tick { position: absolute; top: 15px; bottom: 0; width: 2px; margin-left: -1px; background: var(--terracotta); }
.kx-chart-scale { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--font-mono);
  font-size: 0.68rem; color: var(--panel-text-secondary); }
.kx-chart-note { font-size: 0.78rem; line-height: 1.45; color: var(--panel-text-secondary); }
/* No-data / connecting: muted, no accent, so it never reads like a confident answer */
/* Collapsible summary under a chart (Matt 15f76f27): headline + key caveat always visible; full text behind a toggle */
.kx-read { margin: 0 0 4px; }
.kx-read-line { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; color: var(--panel-text); overflow-wrap: anywhere; }
.kx-read-caveat { color: var(--panel-text-secondary); }
.kx-read-h { margin: 6px 0 0; font: inherit; }
.kx-read-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
  padding: 10px 2px; background: none; border: 0; border-top: 1px solid var(--panel-border); cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta); }
.kx-read-toggle:hover { color: var(--panel-text); }
.kx-read-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 3px; }
.kx-read-chev { flex-shrink: 0; transition: transform .15s ease; }
.kx-read-toggle[aria-expanded="true"] .kx-read-chev { transform: rotate(180deg); }
.kx-read-body { padding: 4px 0 6px; }
.kx-read-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kx-read-chev { transition: none; } }
.kx-turn-muted .kx-turn-mark { background: rgba(255,255,255,0.04); border-color: var(--panel-border); }
.kx-turn-muted .kx-turn-text { color: var(--panel-text-secondary); font-style: italic; }
.kx-turn-thinking { display: flex; align-items: center; gap: 4px; padding-top: 5px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--panel-text-secondary); }
.kx-turn-thinking span:last-child { margin-left: 10px; }
.kx-chat-cap { text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--panel-text-secondary);
  border-top: 1px solid var(--panel-border); padding-top: 18px; }

.kx-chat-composer { flex-shrink: 0; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--panel-bg) 70%, rgba(31,29,27,0)); }
.kx-chat-input { max-width: 760px; margin: 0 auto; }
.kx-chat-input input:disabled { cursor: not-allowed; }
.kx-ask-send:disabled { opacity: .45; cursor: not-allowed; }
.kx-chat-note { max-width: 760px; margin: 10px auto 0; text-align: center; font-family: var(--font-mono);
  font-size: 0.66rem; line-height: 1.5; color: var(--panel-text-tertiary); }
.kx-chip-resume { color: var(--terracotta); border-color: var(--terracotta-line); }
@media (max-width: 480px) {
  .kx-thread { padding-top: 24px; gap: 22px; }
  .kx-bubble { max-width: 88%; }
  .kx-turn-kx { gap: 10px; }
  .kx-turn-mark { width: 28px; height: 28px; }
}
/* Answer actions (AK-ANSWER-ACTIONS-01): rate, copy, export. 44px targets, keyboard reachable, quiet until used. */
.kx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 10px 0 0 -12px; }
.kx-act { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--panel-text-secondary); cursor: pointer; }
.kx-act:hover { color: var(--panel-text); background: rgba(255,255,255,0.05); }
.kx-act[aria-pressed="true"] { color: var(--terracotta); }
.kx-act[aria-pressed="true"] svg { fill: var(--terracotta-glow); }
.kx-act[aria-disabled="true"], .kx-reason[aria-disabled="true"] { opacity: .5; cursor: progress; }
.kx-act:focus-visible, .kx-reason:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.kx-act-status { margin-left: 8px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--panel-text-secondary); }
.kx-act-status:empty { display: none; }
.kx-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kx-reasons[hidden] { display: none; }
.kx-reason { min-height: 44px; padding: 0 16px; font-family: var(--font-body); font-size: 0.86rem; color: var(--panel-text);
  background: none; border: 1px solid var(--panel-border-strong, rgba(255,255,255,0.14)); border-radius: var(--radius-pill); cursor: pointer; }
.kx-reason:hover, .kx-reason[aria-pressed="true"] { color: var(--terracotta); border-color: var(--terracotta-line); background: var(--terracotta-glow); }

/* Hover / keyboard-focus label for the action buttons (Matt 6528b018): light pill on the dark panel, like the
   reference. Text = the button's aria-label; aria-hidden, never takes pointer events, positioned by JS. */
.kx-tip { position: fixed; z-index: 10; max-width: calc(100vw - 16px); padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--panel-text); color: #1C1917; font-family: var(--font-ui); font-size: 0.75rem; line-height: 1.3;
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.kx-tip[hidden] { display: none; }
.kx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ask Konnex presentation layer, Phase 1 (AK-PRESENTATION-P1-01): typed answer blocks. Visual reference =
   docs/briefs/ak-p1-mocks/index.html on main (Marcus-approved 15 Oct 2026). */
/* Block: one claim with its own title, headline, evidence strip, representation, caveat, method */
.ap-block + .ap-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--panel-border); }
.ap-title { margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--panel-text-secondary); }
.ap-head { margin: 0; font-family: var(--font-body); font-size: 1.08rem; line-height: 1.45; color: var(--panel-text); }
.ap-head .ap-subj { font-weight: 600; }
.ap-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 4px; }
.ap-val { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.05;
  color: var(--terracotta); font-variant-numeric: tabular-nums; }
.ap-unit { font-family: var(--font-ui); font-size: 1rem; color: var(--panel-text); }
.ap-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 14px;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4; color: var(--panel-text-secondary); }
.ap-strip .kx-ev-badge { padding: 5px 9px; }
.ap-strip .ap-sep { color: var(--panel-text-tertiary); }
.ap-chip { padding: 4px 8px; border: 1px solid var(--panel-border); border-radius: var(--radius-pill); }

/* Ranking: one shared zero-based scale per panel, exact values as text, bars decorative */
.ap-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-rank li { display: grid; grid-template-columns: 1.6em minmax(7em, 11em) 1fr auto; align-items: center; gap: 4px 12px;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--panel-text); }
.ap-pos { font-family: var(--font-mono); font-size: 0.72rem; color: var(--panel-text-tertiary); text-align: right; }
.ap-name { overflow-wrap: anywhere; }
.ap-bar { height: 10px; border-radius: 0 3px 3px 0; background: rgba(255,255,255,0.06); position: relative; }
.ap-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 0 3px 3px 0; background: #B0582F; }
.ap-rank li.ap-lead .ap-bar > span { background: var(--terracotta); }
.ap-num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.ap-rank li.ap-lead .ap-name, .ap-rank li.ap-lead .ap-num { font-weight: 600; }
.ap-scale { margin: 6px 0 0; font-family: var(--font-mono); font-size: 0.66rem; color: var(--panel-text-tertiary); }
.ap-side { margin-top: 16px; }
.ap-side h4 { margin: 0 0 6px; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; color: var(--panel-text); }
.ap-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--panel-text-secondary); }
.ap-plain b { font-family: var(--font-ui); font-weight: 500; color: var(--panel-text); font-variant-numeric: tabular-nums; }

/* Composition: existing composition bar + a table that reconciles to the declared base */
.ap-comp-bar { display: flex; gap: 2px; height: 16px; margin: 2px 0 12px; }
.ap-comp-bar span:first-child { border-radius: 3px 0 0 3px; } .ap-comp-bar span:last-child { border-radius: 0 3px 3px 0; }
.ap-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.92rem; color: var(--panel-text); }
.ap-table caption { text-align: left; padding-bottom: 6px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--panel-text-secondary); }
.ap-table th, .ap-table td { padding: 7px 0; border-bottom: 1px solid var(--panel-border); text-align: left; font-weight: 400; }
.ap-table td { text-align: right; font-family: var(--font-ui); font-variant-numeric: tabular-nums; padding-left: 12px; white-space: nowrap; }
.ap-table td.ap-share { color: var(--panel-text-secondary); width: 4.5em; }
.ap-table tr.ap-total th, .ap-table tr.ap-total td { font-weight: 600; border-bottom: 0; }
.ap-table tr.ap-unknown th { color: var(--panel-text-secondary); }
.ap-def { display: block; margin: 2px 0 0 18px; font-size: 0.8rem; line-height: 1.4; color: var(--panel-text-secondary); }
.ap-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }

.ap-caveat { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--terracotta-line);
  font-family: var(--font-body); font-size: 0.92rem; line-height: 1.55; color: var(--panel-text); }
.ap-interp { margin: 12px 0 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: var(--panel-text-secondary); }
.ap-method { margin-top: 12px; }
.ap-method .kx-read-body { padding-top: 6px; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6; color: var(--panel-text-secondary); }
.ap-method .kx-read-body p { margin: 0 0 8px; }

.ap-status { padding: 14px 16px; border: 1px dashed var(--panel-border-strong, rgba(255,255,255,0.18)); border-radius: var(--radius-sm); }
.ap-status p { margin: 0 0 8px; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; color: var(--panel-text); }
.ap-try { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 480px) {
  .ap-rank li { grid-template-columns: 1.4em 1fr auto; }
  .ap-rank li .ap-bar { grid-column: 2 / 4; grid-row: 2; }
}
/* added for the live renderer */
.ap-points { margin: 0 0 8px; padding-left: 18px; }
.ap-points li { margin-bottom: 4px; }
.ap-asat { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--panel-text-tertiary); }
.ap-more { margin: 8px 0 0; font-family: var(--font-body); font-size: 0.88rem; color: var(--panel-text-secondary); }
.ap-why { font-size: 0.8rem; color: var(--panel-text-tertiary); }
.ap-follow { margin-top: 14px; }
.ap-held { margin: 12px 0 0; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5; color: var(--panel-text-tertiary); }
.ap-method .kx-read-h { margin: 0; }

/* Export to PDF: print-only sheet for one answer. Never shown on screen. */
.kx-print { display: none; }
@media print {
  html.kx-printing, html.kx-printing body { overflow: visible !important; height: auto !important; background: #fff !important; }
  html.kx-printing body > :not(#kxPrint) { display: none !important; }
  .kx-tip { display: none !important; }
  @page { margin: 16mm 14mm; }
  .kx-print { display: block; max-width: 180mm; color: #1C1917; font-family: var(--font-body); font-size: 10.5pt; line-height: 1.5;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    --panel-text: #1C1917; --panel-text-secondary: #57534E; --panel-text-tertiary: #78716C; --panel-border: rgba(28,25,23,0.18); }
  .kx-print-brand { display: flex; align-items: center; gap: 8px; padding-bottom: 10pt; margin-bottom: 14pt;
    border-bottom: 1px solid rgba(28,25,23,0.15); font-family: var(--font-wordmark); font-weight: 700; font-size: 15pt; }
  .kx-print-product { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 8pt; letter-spacing: 0.08em;
    text-transform: uppercase; color: #57534E; }
  .kx-print-label { margin: 0 0 3pt; font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase; color: #78716C; }
  .kx-print-q { margin: 0 0 14pt; font-family: var(--font-display); font-weight: 600; font-size: 15pt; line-height: 1.3; }
  .kx-print-answer .kx-turn-text { color: #1C1917; font-size: 10.5pt; }
  .kx-print-answer .kx-read-body[hidden], .kx-print-answer .kx-ev-basis-full[hidden] { display: block !important; }
  .kx-print-answer .kx-chart { break-inside: avoid; background: none; border-color: rgba(28,25,23,0.18); }
  .kx-print-answer .kx-sh-light { background: #C9B5A8; box-shadow: inset 0 0 0 1px #8A7A70; }
  .kx-print-answer .kx-sh-muted { background: #D4D4D8; box-shadow: inset 0 0 0 1px #71717A; }
  .kx-print-answer .kx-ev-badge { color: #B4501F; border-color: #E8703A; background: none; }
  .kx-print-answer .kx-ev-verified { background: #E8703A; color: #fff; }
  .kx-print-answer .kx-evidence { color: #B4501F; background: none; border-color: #E8703A; }
  .kx-print-muted .kx-turn-text { color: #57534E; }
  .kx-print-answer .ap-bar { background: rgba(28,25,23,0.08); }
  .kx-print-answer .ap-rank li .ap-bar > span { background: #B0582F; }
  .kx-print-answer .ap-rank li.ap-lead .ap-bar > span { background: #E8703A; }
  .kx-print-answer .ap-val { color: #B4501F; }
  .kx-print-answer .ap-chip { border-color: rgba(28,25,23,0.2); }
  .kx-print-answer .ap-caveat { border-left-color: #E8703A; }
  .kx-print-answer .ap-table th, .kx-print-answer .ap-table td { border-bottom-color: rgba(28,25,23,0.12); }
  .kx-print-answer .ap-block, .kx-print-answer .ap-table, .kx-print-answer .ap-rank { break-inside: avoid; }
  .kx-print-ev { margin: 14pt 0 0; font-family: var(--font-mono); font-size: 8.5pt; color: #1C1917; }
  .kx-print-foot { margin-top: 18pt; padding-top: 8pt; border-top: 1px solid rgba(28,25,23,0.15); font-size: 8pt; color: #57534E; }
  .kx-print-foot p { margin: 0 0 2pt; overflow-wrap: anywhere; }
}

/* Stats strip */
.kx-stats-wrap { padding: 44px var(--gutter) 60px; }
.kx-stats { display: flex; justify-content: center; gap: var(--gap-xl); flex-wrap: wrap; }
.kx-stat-item { text-align: center; }
.kx-stat-val { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1; letter-spacing: -0.01em; color: var(--terracotta); }
.kx-stat-lab { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--panel-text-secondary); margin-top: 8px; }
.kx-stats-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--panel-text-tertiary); }
.kx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(232,112,58,0.5); animation: kxLive 2.4s infinite; }
@keyframes kxLive { 0% { box-shadow: 0 0 0 0 rgba(232,112,58,0.5); } 70% { box-shadow: 0 0 0 7px rgba(232,112,58,0); } 100% { box-shadow: 0 0 0 0 rgba(232,112,58,0); } }
@media (prefers-reduced-motion: reduce) { .kx-live-dot { animation: none; } }

/* ---------- PERSON CARD ---------- */
.kx-pcard { background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-card); }
.kx-pcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kx-pcard-avatar { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(135deg, #8B3A1A, var(--terracotta));
  display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.kx-pcard-name { font-family: var(--font-ui); font-weight: 600; font-size: 0.98rem; color: var(--fg1); }
.kx-pcard-role { font-size: 0.75rem; color: var(--fg3); }
.kx-pcard-fields { display: flex; flex-direction: column; gap: 12px; }
.kx-pcard-field { display: flex; align-items: center; gap: 10px; }
.kx-pcard-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(28,25,23,0.03); border: 1px solid var(--border-faint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kx-pcard-lab { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); }
.kx-pcard-val { font-size: 0.8rem; color: var(--fg2); }
.kx-pcard-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--terracotta); font-size: 0.75rem; font-weight: 500;
  font-family: var(--font-body); background: none; border: none; padding: 0; }
.kx-pcard-lock:hover { color: var(--terracotta-deep); }
.kx-pcard-div { height: 1px; background: var(--border-faint); margin: 14px 0; }
.kx-pcard-ver { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--terracotta);
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; }
/* Live business-card extras (filter_records) */
.kx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 500; line-height: 1.3; }
.kx-badge svg { flex-shrink: 0; }
.kx-badge-verified { color: var(--terracotta); }
.kx-badge-soft { color: var(--fg2); }
.kx-pcard-link { color: var(--terracotta); text-decoration: none; word-break: break-word; }
.kx-pcard-link:hover { text-decoration: underline; }
.kx-pcard-muted { color: var(--fg3); font-size: 0.8rem; }

/* ---------- SURFACES ---------- */
.kx-surface-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); margin-top: 40px; }
.kx-surface-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px;
  text-decoration: none; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.kx-surface-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.kx-surface-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--terracotta-glow);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.kx-surface-tag { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta); margin-bottom: 6px; }
.kx-surface-name { font-family: var(--font-ui); font-weight: 600; font-size: 1.08rem; color: var(--fg1); margin-bottom: 10px; }
.kx-surface-desc { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.55; color: var(--fg2); flex: 1; margin-bottom: 16px; }
.kx-surface-cta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--terracotta); transition: gap .2s; }
.kx-surface-card:hover .kx-surface-cta { gap: 9px; }

/* ---------- TWO-COL PROOF ---------- */
.kx-two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap-xl); align-items: center; }
.kx-pullquote { font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-size: 1.15rem; line-height: 1.5;
  color: var(--fg1); border-left: 3px solid var(--terracotta); padding-left: 20px; margin-top: 24px; max-width: 460px; }
.kx-two-col-visual { max-width: 400px; width: 100%; }
.kx-sample-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: rgba(28,25,23,0.34); text-align: right; margin-top: 10px; }

/* ---------- INSIGHTS ---------- */
.kx-insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.kx-insight-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.kx-insight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.kx-insight-thumb { height: 132px; display: flex; align-items: center; justify-content: center; }
.kx-insight-body { padding: 20px 22px 24px; }
.kx-insight-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); margin-bottom: 10px; }
.kx-insight-title { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 1.1rem; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--fg1); margin-bottom: 10px; }
.kx-insight-sum { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.55; color: var(--fg2); margin-bottom: 16px; }
.kx-insight-meta { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--fg3); }

/* ---------- API CODE + PRICING ---------- */
.kx-code { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: var(--radius); margin: 40px 0 56px; overflow: hidden; }
.kx-code-tabs { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--panel-border); position: relative; }
.kx-code-tab { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--panel-text-tertiary); background: none; border: none; padding: 6px 12px; border-radius: 6px; transition: all .2s; }
.kx-code-tab.active { color: var(--panel-text); background: rgba(255,255,255,0.05); }
.kx-code-copy { position: absolute; right: 14px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--panel-text-secondary); background: none;
  border: 1px solid var(--panel-border); border-radius: 6px; padding: 5px 10px; }
.kx-code-copy:hover { color: var(--panel-text); }
.kx-code-pre { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; color: var(--panel-text); padding: 22px 24px; overflow-x: auto; white-space: pre; }
.kx-code-pre .kw, .kx-code-pre .str, .kx-code-pre .num, .kx-code-pre .bool { color: var(--terracotta); }
.kx-code-pre .key { color: var(--panel-text-secondary); }

.kx-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.kx-pricing-card { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 14px; padding: 28px 24px;
  display: flex; flex-direction: column; position: relative; }
.kx-pricing-card.popular { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }
.kx-pricing-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--terracotta); color: #fff;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 20px; }
.kx-pricing-plan { font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; color: var(--panel-text); margin-bottom: 6px; }
.kx-pricing-best { font-size: 0.75rem; color: var(--panel-text-secondary); margin-bottom: 20px; }
.kx-pricing-amt { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 2.4rem; color: var(--panel-text); line-height: 1; }
.kx-pricing-amt .cur { font-size: 1.2rem; vertical-align: super; }
.kx-pricing-amt .usd { font-size: 0.7rem; font-weight: 500; color: var(--panel-text-tertiary); letter-spacing: 0.04em; }
.kx-pricing-credits { font-size: 0.8rem; color: var(--terracotta); font-weight: 600; margin: 10px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--panel-border); }
.kx-pricing-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: 26px; }
.kx-pricing-feats li { font-size: 0.8rem; color: var(--panel-text-secondary); padding-left: 22px; position: relative; }
.kx-pricing-feats li::before { content: ''; position: absolute; left: 0; top: 4px; width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%23E8703A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.kx-pricing-cta { padding: 12px; border-radius: 10px; font-family: var(--font-ui); font-weight: 600; font-size: 0.84rem;
  background: var(--panel-bg); color: var(--panel-text); border: 1px solid var(--panel-border); transition: background .2s; }
.kx-pricing-cta:hover { background: #000; }
.kx-pricing-card.popular .kx-pricing-cta { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.kx-pricing-card.popular .kx-pricing-cta:hover { background: var(--terracotta-deep); }

/* ---------- FOOTER ---------- */
.kx-footer { background: var(--panel-bg); border-top: 1px solid var(--panel-border); padding: var(--space-band) 0 36px; }
.kx-footer-inner { max-width: var(--measure-grid); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 32px; }
.kx-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kx-footer-brand { display: flex; align-items: center; gap: 12px; }
.kx-footer-mission { font-family: var(--font-body); font-size: 0.85rem; color: var(--panel-text-secondary); font-style: italic; }
.kx-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.kx-footer-link { font-family: var(--font-body); font-size: 0.82rem; color: var(--panel-text-tertiary); text-decoration: none; transition: color .2s; }
.kx-footer-link:hover { color: var(--panel-text-secondary); }
.kx-footer-bottom { display: flex; justify-content: center; padding-top: 24px; border-top: 1px solid var(--panel-border); }
.kx-footer-copy { font-family: var(--font-mono); font-size: 0.7rem; color: var(--panel-text-tertiary); }

/* ---------- MOBILE NAV (burger + slide-in drawer) ---------- */
.kx-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: none; color: var(--panel-text); }
.kx-nav.scrolled .kx-burger { color: var(--fg1); }
.kx-mobile { position: fixed; inset: 0; z-index: 1100; display: none; }
.kx-mobile.open { display: block; }
.kx-mobile-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.kx-mobile-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 340px);
  background: var(--warm-bg); padding: 24px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: -20px 0 60px rgba(0,0,0,0.25); }
@media (prefers-reduced-motion: no-preference) {
  .kx-mobile-panel { animation: kxslide .35s cubic-bezier(0.16,1,0.3,1); }
  @keyframes kxslide { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
.kx-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kx-mobile-link { font-family: var(--font-ui); font-weight: 500; font-size: 1.05rem; color: var(--fg1);
  text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--border-light); }
.kx-mobile-link:hover, .kx-mobile-link.active { color: var(--terracotta); }
.kx-mobile-cta { margin-top: 18px; text-align: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .kx-surface-grid { grid-template-columns: repeat(2, 1fr); }
  .kx-insight-grid { grid-template-columns: 1fr; max-width: 460px; }
  .kx-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .kx-two-col { grid-template-columns: 1fr; }
  .kx-answer-cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kx-nav-right { display: none; }
  .kx-burger { display: flex; }
  .kx-surface-grid { grid-template-columns: 1fr; }
}