/* Generated by scripts/import-intel.mjs from src/site-ds. Do not edit. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");
/* IBM Plex Sans (body, headings) + IBM Plex Mono (label layer), served by Google Fonts.
   Weights: 400, 500, 700 in the briefs; the site also uses 600 for buttons, kickers and card numbers. */


/* Palette: mapped by intensity onto white, printable paper.
   Ramp: teal to lime to amber to orange to red. 600 is the source hex (spines, strokes, bars, never text);
   700 is text-safe on white (links); 800/900 are darkened toward #101114 for text on tints. */
:root{
/* Surfaces (white paper, warm neutrals) */
--bg:#ffffff;--bg2:#f7f6f3;--bg3:#efeeea;--bg4:#e3e1db;--surface:#ffffff;
/* Ink (near-black, warm greys) */
--text:#101114;--text2:#55534e;--text3:#6b675f;
/* Hairlines: solid, never alpha */
--border:#e3e1db;--border2:#cfcbc3;
/* Red, accent and peak of the ramp */
--red-50:#f8e1de;--red-100:#f5d3d0;--red-200:#eeb3ae;--red-400:#e48980;--red-600:#d9564a;--red-700:#a7453d;--red-800:#75342f;--red-900:#502725;
/* Orange, high */
--orange-50:#fbe9dc;--orange-100:#f9dfcd;--orange-200:#f5c7a8;--orange-400:#efa877;--orange-600:#e8833d;--orange-700:#b26733;--orange-800:#7c4a29;--orange-900:#553521;
/* Amber, mid */
--amber-50:#fbeedc;--amber-100:#f9e7cd;--amber-200:#f5d6a8;--amber-400:#efbf77;--amber-600:#e8a33d;--amber-700:#b27f33;--amber-800:#7c5a29;--amber-900:#554021;
/* Lime, low */
--lime-50:#ebf3df;--lime-100:#e2eed1;--lime-200:#cde2af;--lime-400:#b1d282;--lime-600:#8fbf4d;--lime-700:#6f943f;--lime-800:#506831;--lime-900:#394926;
/* Teal, quiet, the bottom of the ramp */
--teal-50:#dceeef;--teal-100:#cde6e8;--teal-200:#a8d4d8;--teal-400:#77bcc2;--teal-600:#3d9fa8;--teal-700:#327c83;--teal-800:#27585e;--teal-900:#1e3e43;
/* Grey, null / neutral, use last */
--grey-50:#dadbdc;--grey-100:#cacacc;--grey-200:#a3a4a7;--grey-400:#707276;--grey-600:#33353b;--grey-700:#2a2c31;--grey-800:#222328;--grey-900:#1b1d20;
/* Semantic aliases */
--surface-page:var(--bg);--surface-raised:var(--bg2);--surface-sunken:var(--bg3);--surface-track:var(--bg4);--surface-card:var(--surface);
--text-body:var(--text);--text-muted:var(--text2);--text-faint:var(--text3);
--hairline:var(--border);--hairline-strong:var(--border2);
--accent:var(--red-600);--accent-text:var(--red-700);--accent-soft:var(--red-50);--accent-tint:var(--red-100);--accent-ink:var(--red-800);--accent-deep:var(--red-900);
--link:var(--red-700);--link-underline:var(--red-200);--link-underline-hover:var(--red-700);
--ramp-1:var(--teal-600);--ramp-2:var(--lime-600);--ramp-3:var(--amber-600);--ramp-4:var(--orange-600);--ramp-5:var(--red-600);--ramp-null:var(--grey-600);
}

/* The briefs run a 10% global scale-down (html{font-size:14.4px}, set in styles/brief.css scope only).
   rem values below assume 1rem = 14.4px inside a brief. The marketing site uses px on a 16px root. */
:root{
--font-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
--font-mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
--root-size:14.4px;
/* Sizes (rem to px at 14.4) */
--text-h1:2.5rem;        /* 36px */
--text-h2:1.75rem;       /* 25.2px */
--text-h3:1.25rem;       /* 18px */
--text-lead:1.1875rem;   /* 17.1px, subtitle */
--text-body:1rem;        /* 14.4px */
--text-callout:1rem;     /* 14.4px */
--text-small:0.9375rem;  /* 13.5px, tables, cards */
--text-mono:0.875rem;    /* 12.6px, code blocks, table numbers */
--text-caption:0.8125rem;/* 11.7px, captions, footnotes */
--text-label:0.75rem;    /* 10.8px, mono uppercase labels */
/* Brief (dense two-column) format */
--text-h3-brief:22px;    /* brief title */
--text-brief-lead:11.5px;/* brief lead paragraphs, tables, lists */
--text-micro:9.5px;      /* brief mono labels, notes, sub, meta */
--text-nano:8.5px;       /* brief KPI labels, figure captions */
/* Weights, only three exist */
--weight-regular:400;--weight-medium:500;--weight-bold:700;
/* Line heights */
--leading-h1:1.15;--leading-h2:1.2;--leading-h3:1.3;--leading-lead:1.5;--leading-body:1.65;--leading-compact:1.6;--leading-dense:1.55;--leading-caption:1.5;--leading-pill:1.35;
/* Tracking */
--tracking-h1:-0.022em;--tracking-h2:-0.015em;--tracking-h3:-0.01em;
--tracking-label:0.18em;
--tracking-pill:0.18em;
/* Label layer: everything small and structural is mono, uppercase, tracked */
--label-transform:uppercase; /* @kind other */
}

:root{
/* Spacing scale (rem, 1rem = 14.4px). Values are the exact steps the report uses. */
--space-0-5:0.125rem;--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-2-5:0.625rem;--space-3:0.75rem;--space-3-5:0.875rem;--space-4:1rem;--space-4-5:1.125rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-24:6rem;
/* Pixel constants used verbatim in the report */
--px-2:2px;--px-4:4px;--px-6:6px;--px-8:8px;--px-12:12px;--px-20:20px;--px-22:22px;--px-64:64px;
/* Layout */
--measure:50rem;            /* 720px content column (report) */
--brief-measure:1180px;     /* brief: two-column grid */
--brief-pad:24px;
--page-pad-x:2rem;--page-pad-top:4rem;--page-pad-bottom:6rem;
--page-pad-x-mobile:1.25rem;--page-pad-top-mobile:2rem;--page-pad-bottom-mobile:4rem;
--workflow-label-w:90px;
/* Radii */
--radius-xs:4px;
--radius-sm:5px;
--radius-md:6px;
--radius-lg:8px;
--radius-xl:10px;
--radius-2xl:12px;
--radius-pill:4px;
--radius-round:999px;
/* Borders */
--rule:1px solid var(--border);--rule-strong:1px solid var(--border2);--callout-spine:2px;--checkbox-stroke:1.5px;
/* The only shadow */
--shadow-kbd:0 1px 0 rgba(16,17,20,0.06);
}

/* Marketing site (www.vektora.md) tokens. Taken from landing.css, scaled down to the flexible report's density (2026-10-09). 16px root, px sizes. */
:root{
--sans:var(--font-sans);--mono:var(--font-mono);
--wrap:1040px;--wrap-pad:24px;--wrap-pad-mobile:16px;
/* Site type scale */
--site-h1:clamp(24px,2.8vw,31px); /* @kind font */
--site-h1-leading:1.08;--site-h1-tracking:-0.025em;
--site-h2:clamp(18px,1.8vw,21px); /* @kind font */
--site-h2-leading:1.15;--site-h2-tracking:-0.018em;
--site-h3:14px;--site-lead:14.5px;--site-body:13.5px;--site-small:12.5px;
--site-label:10px;--site-kicker:10.5px;--site-btn:11px;--site-btn-small:10px;--site-nav-link:10.5px;
--site-label-tracking:.16em;--site-btn-tracking:.12em;
--site-bl-big:clamp(26px,2.6vw,32px); /* @kind font */
/* Site rhythm */
--section-pad:32px;--section-pad-mobile:24px;--hero-pad-top:32px;--hero-pad-bottom:28px;
--rule-ink:1.5px solid var(--text);  /* nav bottom, footer top, steps top */
--rule-accent-top:3px solid var(--red-600); /* audience cards */
--spine-bl:4px solid var(--red-600);  /* bottom-line card */
--spine-summary:3px solid var(--red-600); /* brief summary, KPI */
}

/* Marketing site component styles, from landing.css, scaled down twice on 2026-10-09 toward the briefs' own density (type about 20 to 40% smaller, spacing about 45% tighter; sync back to the design system). Wrap the page in <main class="vk">. Tokens come from tokens/. */
/* Public landing page, in the briefs' own design system (2026-10-09).
   Tokens copied from report-build/_ds/cr/tokens: white paper, warm greys,
   IBM Plex Sans with a Plex Mono label layer, solid hairlines, the red
   accent and the teal-to-red ramp. Scoped to .vk so nothing else changes.
   */

.vk {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.vk *, .vk *::before, .vk *::after { box-sizing: border-box; }
.vk a { color: var(--red-700); text-decoration-color: var(--red-200); text-underline-offset: 3px; }
.vk a:hover { text-decoration-color: var(--red-700); }
/* Reset in :where() so class margins (.vk-h1, .vk-kicker, .vk-bl__sub…) win. The source used .vk h1 {margin:0}, which out-ranked them and collapsed the spacing. */
:where(.vk) :where(h1, h2, h3, p) { margin: 0; }
.vk-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

/* Numbered mono label on a hairline, as on every card of a brief. */
.vk-cardhead {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--border2); padding-bottom: 5px; margin-bottom: 10px; gap: 16px;
}
.vk-cardhead__label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
.vk-cardhead__n { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--red-700); font-weight: 600; }

/* Type */
.vk-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-700); font-weight: 600; margin-bottom: 10px; }
.vk-h1 { font-size: clamp(24px, 2.8vw, 31px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; margin-bottom: 12px; }
.vk-h2 { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.22; letter-spacing: -0.018em; font-weight: 700; text-wrap: balance; margin-bottom: 10px; }
.vk-h3 { font-size: 14px; line-height: 1.3; font-weight: 700; margin-bottom: 6px; }
.vk-lead { font-size: 14.5px; line-height: 1.55; color: var(--text); max-width: 34em; }
.vk-body { font-size: 13.5px; color: var(--text2); }
.vk-small { font-size: 12.5px; line-height: 1.5; color: var(--text2); }
.vk-measure { max-width: 46em; }

/* Buttons */
.vk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red-700); color: #fff !important; text-decoration: none !important;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 10px 16px; border: 1px solid var(--red-700); white-space: nowrap;
}
.vk-btn:hover { background: var(--red-800); border-color: var(--red-800); }
.vk-btn--ghost { background: transparent; color: var(--text) !important; border-color: var(--border2); }
.vk-btn--ghost:hover { background: var(--bg2); border-color: var(--text3); }
.vk-btn--small { padding: 7px 12px; font-size: 10px; }

/* Nav */
.vk-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1.5px solid var(--text); }
.vk-nav__inner { display: flex; align-items: center; gap: 24px; padding-block: 10px; }
.vk-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--text) !important; margin-right: auto; }
.vk-brand__name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.vk-brand__mark { display: block; width: 22px; height: 22px; flex: none; }
.vk-brand__lockup { display: flex; align-items: center; gap: 8px; }
.vk-brand__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-700); }
.vk-nav__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.vk-nav__links a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); text-decoration: none; }
.vk-nav__links a:hover { color: var(--text); }

/* Hero */
.vk-hero { padding-block: 32px 28px; border-bottom: 1px solid var(--border); }
.vk-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center; }
.vk-hero__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* The bottom line card, as card 11 of a brief */
.vk-bl { margin: 0; background: var(--bg2); border: 1px solid var(--border2); border-left: 4px solid var(--red-600); padding: 11px 14px 12px; }
.vk-bl__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--red-700); font-weight: 600; margin-bottom: 6px; }
.vk-bl__big { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.vk-bl__bar { display: block; width: 48px; height: 4px; background: var(--amber-600); margin: 8px 0 10px; }
.vk-bl__sub { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.vk-bl__body { font-size: 12.5px; color: var(--text2); line-height: 1.55; max-width: 36em; text-wrap: pretty; }
.vk-bl__cap { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border2); font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--text3); }

/* Sections */
.vk-section { padding-block: 32px; border-bottom: 1px solid var(--border); }
.vk-section--well { background: var(--bg2); }
.vk-grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; margin-top: 16px; }
.vk-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.vk-card { background: var(--bg); border: 1px solid var(--border2); padding: 11px 13px 12px; min-width: 0; }
.vk-more { margin-top: 12px; font-size: 12.5px; color: var(--text2); }
.vk-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }

/* Worlds chart (card 06 of the brief) */
.vk-worlds { display: grid; gap: 4px; margin-top: 12px; }
.vk-worlds__row { display: grid; grid-template-columns: minmax(0, 13.5rem) 10px minmax(0, 1fr) 3.4rem; gap: 10px; align-items: center; }
.vk-worlds__name { font-size: 11.5px; line-height: 1.3; text-align: right; }
.vk-worlds__track { position: relative; height: 16px; border-left: 1px solid var(--border2); border-right: 1px solid var(--border2); }
.vk-worlds__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.vk-worlds__dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--red-600); }
.vk-worlds__dot--base { background: var(--teal-600); }
/* The middle 80% of the range a world stated, as in card 06 of the brief (added 2026-10-09; sync back). */
.vk-worlds__range { position: absolute; top: 5px; height: 6px; border-radius: 3px; background: var(--red-600); opacity: .35; }
.vk-worlds__range--base { background: var(--teal-600); }
.vk-worlds__range--key { position: static; display: inline-block; width: 22px; flex: none; }
.vk-worlds__val { font-family: var(--mono); font-size: 10.5px; color: var(--text2); }
.vk-worlds__track--axis { border: 0; height: 14px; }
.vk-worlds__axislabel { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; color: var(--text3); }

/* Noise marks: one half per run, filled when that run moved the answer. */
.vk-mark { display: inline-block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text); flex: none; }
.vk-mark--moves { background: var(--text); }
.vk-mark--borderline { background: linear-gradient(to right, var(--text) 50%, transparent 50%); }
.vk-mark--noise { background: transparent; }
.vk-mark--none { visibility: hidden; }
.vk-mark--key { visibility: visible; border-color: transparent; }
.vk-key { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; font-size: 12px; color: var(--text2); }
.vk-key li { display: flex; gap: 10px; align-items: center; }

/* Signposts (card 13) */
.vk-signposts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.vk-signposts li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.vk-signposts__n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--red-700); padding-top: 2px; }
.vk-signposts__main { display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; min-width: 0; }
.vk-signposts__main span { color: var(--text2); }
.vk-signposts__meta { font-family: var(--mono); font-size: 10px; color: var(--text3) !important; }
.vk-signposts__price { text-align: right; line-height: 1.1; }
.vk-signposts__price b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.vk-signposts__price small { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }

/* Steps */
.vk-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--text); }
.vk-steps li { padding: 10px 12px 4px 0; border-right: 1px solid var(--border2); margin-right: 14px; }
.vk-steps li:last-child { border-right: 0; margin-right: 0; }
.vk-steps__n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--red-700); }
.vk-steps h3 { font-size: 14px; font-weight: 700; margin: 6px 0 6px; }
.vk-steps p { font-size: 12.5px; line-height: 1.5; color: var(--text2); }

/* Who it is for */
.vk-who { border-top: 3px solid var(--red-600); padding-top: 10px; }
.vk-who h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.vk-who p { font-size: 12.5px; line-height: 1.5; color: var(--text2); }

/* Limits */
.vk-limits { list-style: none; margin: 0; padding: 0; display: grid; }
.vk-limits li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--border); position: relative; font-size: 12.5px; line-height: 1.55; color: var(--text2); }
.vk-limits li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 2px; background: var(--red-600); }
.vk-limits strong { color: var(--text); }

/* FAQ */
.vk-faq { margin-top: 14px; border-top: 1px solid var(--border2); max-width: 52em; }
.vk-faq details { border-bottom: 1px solid var(--border2); padding: 4px 0; }
.vk-faq summary { cursor: pointer; list-style: none; padding: 8px 0; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.vk-faq summary::-webkit-details-marker { display: none; }
.vk-faq summary::after { content: "+"; font-family: var(--mono); color: var(--red-700); font-weight: 600; }
.vk-faq details[open] summary::after { content: "\2212"; }
.vk-faq p { padding: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text2); max-width: 44em; }

/* Contact */
.vk-contact__email { margin-top: 12px; font-family: var(--mono); font-size: 14px; }

/* Footer */
.vk-foot { padding-block: 16px 20px; border-top: 1.5px solid var(--text); }
.vk-foot__inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.vk-foot a { color: var(--text2); text-decoration: none; }

/* Narrower screens */
@media (max-width: 960px) {
  .vk-hero__grid, .vk-grid2, .vk-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vk-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk-steps { grid-template-columns: minmax(0, 1fr); }
  .vk-steps li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--border2); padding-bottom: 14px; }
  .vk-nav__links { display: none; }
}
@media (max-width: 560px) {
  .vk-wrap { padding-inline: 16px; }
  .vk-hero { padding-block: 26px 22px; }
  .vk-section { padding-block: 24px; }
  .vk-grid4 { grid-template-columns: minmax(0, 1fr); }
  .vk-brand__tag { display: none; }
  .vk-worlds__row { grid-template-columns: 10px minmax(0, 1fr) 3rem; row-gap: 2px; }
  .vk-worlds__name { grid-column: 1 / -1; text-align: left; }
  .vk-worlds__axis > span:first-child, .vk-worlds__axis > span:nth-child(2) { display: none; }
  .vk-worlds__axis > .vk-worlds__track--axis { grid-column: 2; }
  .vk-signposts li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 10px; }
}

/* Nav links jump to a section; keep its heading clear of the sticky header. */
.vk section[id] { scroll-margin-top: 64px; }

/* Phone menu (added 2026-10-09, sync back to the design system). Under 960px
   the nav links move into a flyout, drawn like the brief's menu: a 34px square
   ink-bordered button with the three-line icon, and a bordered panel of
   numbered mono rows. */
.vk-nav__menu { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; flex: none; background: var(--bg); color: var(--text); border: 1px solid var(--text); border-radius: 0; padding: 0; cursor: pointer; }
.vk-nav__menu:hover, .vk-nav__menu[aria-expanded="true"] { background: var(--text); color: var(--bg); }
.vk-nav__menu:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
.vk-nav__flyout { position: absolute; right: max(var(--wrap-pad), calc((100% - var(--wrap)) / 2 + var(--wrap-pad))); top: calc(100% + 6px); width: min(288px, calc(100% - 2 * var(--wrap-pad))); background: var(--bg); border: 1px solid var(--text); padding: 8px 0; box-shadow: 0 2px 10px rgba(16, 17, 20, .14); }
.vk-nav__flyout ul { list-style: none; margin: 0; padding: 0; }
.vk-nav__flyout a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; padding: 9px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--text); text-decoration: none; }
.vk-nav__flyout a:hover { background: var(--bg2); }
.vk-nav__flyout a:focus-visible { outline: 2px solid var(--red-600); outline-offset: -2px; }
.vk-nav__flyout-n { font-size: 11px; color: var(--red-700); font-weight: 700; }
@media (max-width: 960px) {
  .vk-nav__menu { display: flex; }
  .vk-nav__inner { gap: 10px; }
  .vk-nav__inner > nav { display: none; }
}
@media (min-width: 961px) {
  .vk-nav__flyout { display: none; }
}
@media (max-width: 560px) {
  .vk-nav__flyout { right: var(--wrap-pad-mobile); width: calc(100% - 2 * var(--wrap-pad-mobile)); }
}


/* Intel pages (imported from Red Label, 2026-10-12): the Vektora header and
   footer sit inside .vk wrappers on a Tailwind page, so the .vk page rules are
   undone for them, and Red Label's serif headings take the site's sans. */
/* Above Leaflet's panes and controls (400 to 1000), which covered it on C4. */
.vk.vk-intel-chrome { min-height: 0; background: transparent; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1100; }
.vk.vk-intel-chrome:last-of-type { position: static; }
.vk-intel-chrome .vk-nav { position: relative; top: 0; background: var(--bg); }
body.vk-intel--light-tiles .leaflet-tile-pane { filter: grayscale(1) brightness(1.04) contrast(.92); }
body.vk-intel .font-serif { font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); font-weight: 700; letter-spacing: -0.022em; }
body.vk-intel #toc { top: 5rem; }
/* Layout faults on Red Label's own pages (sideways scroll at phone width on
   AL16, CS6 and SR1): a grid child could not shrink below its table, a legend
   row could not wrap, a table sat outside any scrolling box. */
body.vk-intel main .grid > * { min-width: 0; }
/* SR1's term definitions were drawn (invisibly) even when not hovered, and
   pushed the page 50px wider on a phone. Draw them only on hover. */
body.vk-intel .tooltip-term::after, body.vk-intel .tooltip-term::before { display: none; }
body.vk-intel .tooltip-term:hover::after, body.vk-intel .tooltip-term:hover::before { display: block; }
@media (max-width: 640px) {
  body.vk-intel .tooltip-term::after { min-width: 0; max-width: calc(100vw - 32px); }
  /* Only rows of items (legends), never a bullet's dot and its text (AL12). */
  body.vk-intel main .flex:not(.flex-col):has(> .flex) { flex-wrap: wrap; }
  /* A flex item would not shrink below its widest line (CS6). */
  body.vk-intel main .flex > * { min-width: 0; }
  body.vk-intel main table { display: block; max-width: 100%; overflow-x: auto; }
}
.vk-intel-note { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; line-height: 1.5; letter-spacing: .02em; color: var(--red-700); margin: -1rem 0 1.25rem; max-width: 48rem; }