/* ActivateDigital Knowledge — Build 1B prototype design system.
   External stylesheet only: /knowledge is served under style-src 'self', so nothing
   here may ever move inline. Brand tokens are inherited verbatim from the live
   knowledge.css; everything with a kx- prefix is new and cannot collide with the
   live k- system, which is why the prototype can sit beside it safely. */

:root{
  --cobalt:#0B67D0; --cobalt-dark:#0757B8; --cobalt-400:#3B8EE8;
  --cobalt-100:#D6E8FB; --cobalt-050:#EBF4FD;
  --navy:#0A1A30;
  --ink:#1d1d1f; --ink-soft:#424247; --ink-faint:#6e6e73; --ink-subtle:#a1a1a6;
  --paper:#fff; --surface:#F4F8FD; --surface-2:#EEF1F5; --rule:#ECECF0; --rule-mid:#D2D2D7;
  --sans:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --st-adopted-bg:#EAF2FC; --st-adopted-fg:#0757B8;
  --st-force-bg:#E7F4EC;   --st-force-fg:#166B3C;
  --st-expected-bg:#FBF2DE;--st-expected-fg:#8A6516;
  --st-unknown-bg:#EEF1F5; --st-unknown-fg:#5C6779;
  /* E2 layout, corrected.

     The first E2 pass removed the right rail and widened the column, but left the prose
     LEFT-ALIGNED inside it: at 1440px the text began 30px from the navigation and had
     382px of nothing to its right, and at 1680px 502px. That is not a measure problem,
     it is a balance problem - the article read as an afterthought pinned to the menu
     rather than as the subject of the page.

     The article column now CENTRES its prose. The navigation fills the left band, the
     residual space falls either side of the text, and the page reads as one centred
     surface with a quiet index beside it. The navigation is slimmer and lighter, the
     shell is wider, the measure is larger and set at 18px, and structured content takes
     the whole column - 1144px at 1440, against 702px before E2. */
  --read:800px; --nav:200px; --shell:1560px; --gap:40px;
  --pad:28px;
  /* --head is the CANONICAL global header's height, not a Knowledge choice. The
     header is a shared component; this variable is how Knowledge's sticky bar, rail
     offsets and heading scroll-margins stay under it. It is measured, and a gate
     fails if the two ever disagree: 46px from 821px up, 62px below, where
     site-header.css switches to its compact row. --bar is Knowledge's own. */
  --head:46px; --bar:0px;
  --r:12px; --rsm:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);font-family:var(--sans);color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Links are coloured per region rather than globally. A bare a{} rule would reach
   inside ported legacy components and repaint anchors the legacy layer styles
   itself. */
.kx-head a,.kx-bar a,.kx-foot a,.kx-nav a,.kx-rail a,.kx-hero a,.kx-search a,
.kx-starters a,.kx-flag a,.kx-terrs a,.kx-watch a,.kx-crumb a,.kx-next a,
.kx-keep a,.kx-main a{color:var(--cobalt);text-decoration:none}
.kx-head a:hover,.kx-nav a:hover,.kx-terrs a:hover,.kx-keep a:hover,
.kx-main a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}
/* An unconstrained inline SVG inside legacy article markup rendered 400px tall in
   the Slice A dry run. Icons carry their own size in the legacy layer; this is the
   floor under anything that does not. */
.kx-main svg{max-width:100%;height:auto}
.kx-main svg:not([width]):not([height]):not([class]){width:1.05em;height:1.05em;vertical-align:-.15em}
.kx-hero h1,.kx-flag h2,.kx-terr h2,.kx-watch h2,.kx-keep h2,.kx-src h2,
.kx-main h1,.kx-main h2,.kx-main h3,.kx-main h4{
  color:var(--navy);letter-spacing:-.021em;line-height:1.18;margin:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.kx-skip{position:absolute;left:-9999px}
.kx-skip:focus{left:12px;top:10px;z-index:99;background:var(--paper);padding:10px 14px;
  border-radius:var(--rsm);box-shadow:0 2px 18px rgba(16,22,35,.18)}

/* ---------------------------------------------------------------- site header */
.kx-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--rule)}
.kx-head-in{max-width:1240px;margin:0 auto;height:var(--head);padding:0 24px;
  display:flex;align-items:center;gap:26px}
.kx-logo{display:flex;align-items:center;height:26px}
.kx-logo img{height:22px;width:auto}
.kx-head nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.kx-head nav a{color:var(--ink-soft);font-weight:500}
.kx-head nav a[aria-current]{color:var(--navy);font-weight:600}

/* ------------------------------------------------------------------ home hero */
.kx-hero{max-width:1240px;margin:0 auto;padding:76px 24px 8px}
.kx-hero-in{max-width:760px}
.kx-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt);font-weight:650;margin:0 0 18px}
.kx-hero h1{font-size:clamp(38px,5.4vw,56px);font-weight:700;letter-spacing:-.032em}
.kx-hero .kx-lede{font-size:clamp(19px,2.1vw,22px);line-height:1.5;color:var(--ink-soft);
  margin:20px 0 0;max-width:60ch}
.kx-hero .kx-sub{font-size:16.5px;color:var(--ink-faint);margin:14px 0 0;max-width:62ch}

/* search */
.kx-search{max-width:1240px;margin:34px auto 0;padding:0 24px}
.kx-search form{position:relative;max-width:620px}
.kx-search input{width:100%;font:inherit;font-size:17px;color:var(--ink);
  padding:16px 18px 16px 48px;border:1px solid var(--rule-mid);border-radius:var(--r);
  background:var(--paper);transition:border-color .18s,box-shadow .18s}
.kx-search input::placeholder{color:var(--ink-subtle)}
.kx-search input:focus{outline:none;border-color:var(--cobalt-400);
  box-shadow:0 0 0 4px var(--cobalt-050)}
.kx-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-subtle);pointer-events:none}
.kx-results{margin:10px 0 0;padding:0;list-style:none;max-width:620px}
.kx-results li{padding:11px 2px;border-bottom:1px solid var(--rule)}
.kx-results a{display:block}
.kx-results a:hover .t{color:var(--cobalt-dark)}
.kx-results .t{font-weight:600;color:var(--navy);display:block;line-height:1.35}
/* the direct-answer clue: enough to tell two similar titles apart without opening both */
.kx-results .s{display:block;font-size:14px;color:var(--ink-soft);line-height:1.45;
  margin:3px 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.kx-results .m{font-size:13px;color:var(--ink-faint);display:block}
.kx-results .kx-lv{color:var(--ink-subtle)}
.kx-results .kx-lv::before{content:"· "}
.kx-results[hidden]{display:none}

/* question starters */
.kx-starters{max-width:1240px;margin:26px auto 0;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:9px}
.kx-starters a{font-size:14.5px;color:var(--ink-soft);background:var(--surface-2);
  padding:8px 14px;border-radius:100px;transition:background .16s,color .16s}
.kx-starters a:hover{background:var(--cobalt-050);color:var(--cobalt-dark);text-decoration:none}

/* --------------------------------------------------------- flagship territory */
.kx-flag{margin:72px 0 0;background:var(--surface);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.kx-flag-in{max-width:1240px;margin:0 auto;padding:56px 24px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px}
.kx-flag h2{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.028em}
.kx-flag p{color:var(--ink-soft);margin:16px 0 0;max-width:46ch}
.kx-flag .kx-explore{display:inline-flex;align-items:center;gap:7px;margin-top:24px;
  font-weight:600;font-size:15.5px}
.kx-flag .kx-explore span{transition:transform .18s var(--ease)}
.kx-flag .kx-explore:hover span{transform:translateX(3px)}
.kx-picks{list-style:none;margin:0;padding:0}
.kx-picks li{border-top:1px solid var(--rule-mid)}
.kx-picks li:last-child{border-bottom:1px solid var(--rule-mid)}
.kx-picks a{display:block;padding:15px 2px;color:var(--navy);font-weight:550;font-size:16.5px}
.kx-picks a:hover{color:var(--cobalt-dark);text-decoration:none}
.kx-picks .d{display:block;font-weight:400;font-size:14.5px;color:var(--ink-faint);
  margin-top:3px;line-height:1.45}

/* ------------------------------------------------------------- territory grid */
.kx-terrs{max-width:1240px;margin:0 auto;padding:68px 24px 12px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px}
.kx-terr h2{font-size:20px;font-weight:650;letter-spacing:-.018em}
.kx-terr .kx-terr-d{color:var(--ink-faint);font-size:15px;margin:8px 0 16px;max-width:44ch}
.kx-terr ul{list-style:none;margin:0;padding:0}
.kx-terr li{margin:0 0 9px}
.kx-terr li a{color:var(--cobalt-dark);font-size:15.5px;line-height:1.45}
.kx-terr li a:hover{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.kx-terr .kx-more{display:inline-block;margin-top:12px;font-size:14.5px;font-weight:600}

/* ------------------------------------------------- F: the audience doorway
   Small Business is an audience route through the same five territories, so this
   must not read as a sixth one. It gets none of a territory section's parts: no
   card, no picks list, no two-column grid slot, no territory heading scale. It is
   a single quiet rule-bounded band with one link, sitting after the five and
   before What we're watching. */
/* The audience doorway is a BAND, not a paragraph. It opens on a rule and closes on
   one, with the same space top and bottom, so the reader sees a self-contained "who
   this is for" moment and then the catalogue starting on its own ground. Without the
   closing rule and the bottom space it leaked straight into the first territory
   heading 27px below it, which read as a stray note attached to Digital Product
   Passports rather than as a route for a different audience. */
.kx-aud{max-width:1240px;margin:26px auto 34px;padding:26px 24px 28px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kx-aud-e{font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin:0}
.kx-aud h2{font-size:17.5px;font-weight:650;letter-spacing:-.014em;margin:9px 0 0;
  color:var(--navy)}
.kx-aud .kx-aud-d{color:var(--ink-faint);font-size:15px;line-height:1.55;margin:7px 0 0;
  max-width:62ch}
.kx-aud .kx-aud-go{display:inline-block;margin-top:12px;font-size:14.5px;font-weight:600;
  color:var(--cobalt-dark)}
.kx-aud .kx-aud-go:hover{color:var(--cobalt);text-decoration:underline;
  text-underline-offset:3px}
@media (max-width:860px){
  .kx-aud{padding:22px 20px 24px;margin-top:20px;margin-bottom:28px}
  .kx-aud .kx-aud-d{font-size:14.5px}
}

/* ---------------------------------------------------------- what's changing */
.kx-watch{max-width:1240px;margin:64px auto 0;padding:0 24px 84px}
.kx-watch h2{font-size:20px;font-weight:650}
.kx-watch .kx-terr-d{color:var(--ink-faint);font-size:15px;margin:8px 0 20px}
.kx-watch ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.kx-watch li{background:var(--paper);padding:20px 22px}
.kx-watch .w-when{font-size:12.5px;font-weight:650;color:var(--cobalt-dark);
  letter-spacing:.02em;display:block;margin-bottom:7px}
.kx-watch .w-what{color:var(--navy);font-weight:550;font-size:15.5px;line-height:1.4}
.kx-watch .w-note{color:var(--ink-faint);font-size:14px;margin:7px 0 0;line-height:1.5}

/* ===================================================== article shell ========= */
.kx-shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:var(--nav) minmax(0,1fr);gap:var(--gap);
  align-items:start}
/* The column is wide; the PROSE inside it is not. Body text is held to the reading
   measure by .kx-shell .kx-main>* below, while tables, diagrams and wide callouts opt
   out and use the full column. That is the whole point of releasing the rail's width:
   it goes to the content that needed it, not to the paragraphs. */
/* No auto margins here. .kx-main is a GRID ITEM, and auto margins on a grid item switch
   off stretch alignment and size it to its content - which made the column 846px on a
   text page and 1280px on one with a wide table, overflowing the viewport by 108px. The
   item stretches to its track; the centring happens on its children, which are ordinary
   blocks and behave normally. */
.kx-main{min-width:0;padding:38px 0 96px;max-width:none;margin:0}

/* left territory navigation: only the current territory is expanded */
.kx-nav{position:sticky;top:calc(var(--head) + 20px);padding:38px 0 40px;
  max-height:calc(100vh - var(--head) - 40px);overflow-y:auto}
.kx-drawer-x{display:none}
.kx-nav-h{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-subtle);font-weight:650;margin:20px 0 10px}

/* ---- E2: the left column is the Knowledge control centre, not just a territory list.
   A way home, and the 92-resource search reachable from inside an article. */
.kx-home-link{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:0 0 10px;
  border-radius:var(--rsm);font-size:14.5px;font-weight:600;color:var(--navy)}
.kx-home-link svg{flex:none;color:var(--cobalt)}
.kx-home-link:hover{background:var(--cobalt-050);color:var(--cobalt-dark);text-decoration:none}
.kx-navsearch{position:relative;margin:0 0 4px}
.kx-navsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--ink-subtle);pointer-events:none}
.kx-navsearch input{width:100%;font:inherit;font-size:14px;color:var(--ink);
  padding:9px 11px 9px 33px;border:1px solid var(--rule-mid);border-radius:var(--rsm);
  background:var(--paper);-webkit-appearance:none}
.kx-navsearch input::placeholder{color:var(--ink-subtle)}
.kx-navsearch input:focus{outline:none;border-color:var(--cobalt-400);
  box-shadow:0 0 0 3px var(--cobalt-050)}
.kx-navresults{max-width:none;margin:8px 0 2px;border:1px solid var(--rule);
  border-radius:var(--rsm);background:var(--paper);max-height:52vh;overflow-y:auto}
.kx-navresults li{padding:9px 11px}
.kx-navresults li:last-child{border-bottom:0}
.kx-navresults .t{font-size:13.5px;line-height:1.3}
.kx-navresults .s{display:none}
.kx-navresults .m{font-size:12px}
.kx-nav ul{list-style:none;margin:0;padding:0}
.kx-nav>ul>li{margin:0 0 2px}
.kx-nav>ul>li>a{display:block;padding:7px 10px;border-radius:var(--rsm);
  color:var(--ink-soft);font-size:14.5px;font-weight:500}
.kx-nav>ul>li>a:hover{background:var(--surface-2);text-decoration:none}
.kx-nav>ul>li.is-here>a{background:var(--cobalt-050);color:var(--cobalt-dark);font-weight:650}
.kx-nav .kx-sub2{margin:4px 0 10px 10px;padding-left:11px;border-left:1px solid var(--rule-mid)}
.kx-nav .kx-sub2 a{display:block;padding:6px 8px;font-size:13.5px;line-height:1.4;
  color:var(--ink-faint);border-radius:6px}
.kx-nav .kx-sub2 a:hover{color:var(--cobalt-dark);background:var(--surface-2);text-decoration:none}
.kx-nav .kx-sub2 a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--surface-2)}

/* The right "On this page" rail was removed in E2. Its rules are gone rather than
   hidden: hiding it would have left the grid column allocated and the width unreleased,
   which is the failure human review specifically asked not to ship. In-page navigation
   is the authored "Navigate this page" disclosure, now shown at every width.
   .kx-rail-h / .kx-toc / .kx-asknext below are retained only because /404.html and the
   homepage share this stylesheet and no rule may dangle. */
.kx-rail{display:none}
.kx-rail-h{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-subtle);font-weight:650;margin:0 0 12px}
.kx-toc{list-style:none;margin:0 0 30px;padding:0;border-left:1px solid var(--rule)}
.kx-toc a{display:block;padding:6px 0 6px 13px;margin-left:-1px;font-size:14px;
  color:var(--ink-faint);border-left:2px solid transparent;line-height:1.4}
.kx-toc a:hover{color:var(--ink)}
.kx-toc a.is-on{color:var(--cobalt-dark);border-left-color:var(--cobalt);font-weight:600}
.kx-asknext{border-top:1px solid var(--rule);padding-top:18px}
.kx-asknext a{display:block;font-size:14.5px;color:var(--navy);font-weight:550;
  line-height:1.4;margin-bottom:14px}
.kx-asknext a::after{content:"\00a0→";color:var(--cobalt);white-space:nowrap}
.kx-asknext a:hover{color:var(--cobalt-dark);text-decoration:none}

/* --------------------------------------------------------------- article body */
.kx-crumb{font-size:13.5px;color:var(--ink-faint);margin:0 0 20px}
.kx-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.kx-crumb li+li::before{content:"/";margin-right:7px;color:var(--ink-subtle)}
.kx-crumb a{color:var(--ink-faint)}
.kx-main h1{font-size:clamp(30px,4vw,42px);font-weight:700;letter-spacing:-.03em}
.kx-deck{font-size:19.5px;line-height:1.5;color:var(--ink-soft);margin:18px 0 0}
.kx-meta{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.kx-chip{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:100px;
  background:var(--st-unknown-bg);color:var(--st-unknown-fg)}
.kx-chip.is-adopted{background:var(--st-adopted-bg);color:var(--st-adopted-fg)}
.kx-chip.is-force{background:var(--st-force-bg);color:var(--st-force-fg)}
.kx-chip.is-dev{background:var(--st-expected-bg);color:var(--st-expected-fg)}
.kx-answer{margin:34px 0 0;padding:24px 26px;background:var(--cobalt-050);
  border-radius:var(--r)}
.kx-answer h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt-dark);font-weight:700;margin:0 0 10px}
.kx-answer p{margin:0 0 12px;font-size:17.5px;line-height:1.55;color:var(--navy)}
.kx-answer p:last-child{margin-bottom:0}
.kx-main h2{font-size:26px;font-weight:650;margin:52px 0 0;scroll-margin-top:calc(var(--head) + var(--bar) + 20px)}
.kx-main h3{font-size:19px;font-weight:650;margin:34px 0 0;scroll-margin-top:calc(var(--head) + var(--bar) + 20px)}
.kx-main p{margin:16px 0 0}
.kx-main ul,.kx-main ol{margin:16px 0 0;padding-left:22px}
.kx-main li{margin:7px 0}
.kx-main strong{font-weight:650;color:var(--navy)}
.kx-main blockquote{margin:26px 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--cobalt-100);
  font-size:18.5px;color:var(--navy);line-height:1.5}
.kx-main blockquote p{margin:0}
.kx-hr{height:1px;background:var(--rule);border:0;margin:52px 0 0}

/* tables scroll inside their own container, never the page */
.kx-tw{margin:24px 0 0;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r)}
.kx-tw table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.kx-tw th,.kx-tw td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.45}
.kx-tw thead th{background:var(--surface);color:var(--navy);font-weight:650;font-size:13px;
  letter-spacing:.01em;position:sticky;top:0}
.kx-tw tbody tr:last-child td,.kx-tw tbody tr:last-child th{border-bottom:0}
.kx-tw tbody th{font-weight:600;color:var(--navy)}

/* next-question nudge: the core exploration device */
.kx-next{margin:34px 0 0;padding:20px 22px;border:1px solid var(--cobalt-100);
  border-radius:var(--r);background:linear-gradient(180deg,#fff,var(--cobalt-050))}
.kx-next .q{display:block;font-size:17px;font-weight:650;color:var(--navy);line-height:1.35}
.kx-next a{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:15px;font-weight:600}
.kx-next a span{transition:transform .18s var(--ease)}
.kx-next a:hover{text-decoration:none}
.kx-next a:hover span{transform:translateX(3px)}

/* sources / evidence */
.kx-src{margin:52px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.kx-src h2{margin:0 0 4px;font-size:20px}
.kx-src ol{margin:14px 0 0;padding-left:20px;font-size:14.5px;color:var(--ink-soft)}
.kx-src li{margin:9px 0;line-height:1.5}
.kx-verified{display:flex;gap:9px;align-items:baseline;margin:18px 0 0;
  font-size:14px;color:var(--ink-faint)}
.kx-verified b{color:var(--navy);font-weight:600}

/* keep exploring */
.kx-keep{margin:46px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.kx-keep h2{font-size:20px;margin:0 0 14px}
.kx-keep ul{list-style:none;margin:0;padding:0}
.kx-keep li{border-bottom:1px solid var(--rule)}
.kx-keep li:first-child{border-top:1px solid var(--rule)}
.kx-keep a{display:block;padding:14px 2px;color:var(--navy);font-weight:550;font-size:16px}
.kx-keep a:hover{color:var(--cobalt-dark);text-decoration:none}
.kx-keep .d{display:block;font-weight:400;font-size:14px;color:var(--ink-faint);margin-top:2px}

/* footer */
.kx-foot{border-top:1px solid var(--rule);background:var(--surface)}
.kx-foot-in{max-width:1240px;margin:0 auto;padding:34px 24px;display:flex;
  flex-wrap:wrap;gap:18px;align-items:center;font-size:14px;color:var(--ink-faint)}
.kx-foot a{color:var(--ink-soft)}
.kx-foot .sp{margin-left:auto}


/* A fenced example from an approved source, shown inside the existing scroll
   affordance so it needs no new component. Only the block's own metrics are set:
   nothing about the article's width, colour or type scale changes. */
.kx-shell .kx-main .k-pre{margin:0;padding:16px 18px;font-size:12.5px;line-height:1.65;
  color:var(--ink-soft);white-space:pre;overflow:visible;background:none}

/* /404.html renders through the same shell with no territory nav, no rail and no
   sticky bar - there is no article to navigate within and no territory to belong to.
   One column, centred on the reading measure. */
/* The homepage main is NOT .kx-main. It briefly was, so that the required-script gate
   would recognise it, and the article rules underneath - .kx-main h2 at 26px, .kx-main
   ul with a 22px indent - immediately overrode the homepage's own type scale and
   indented every territory list. The gate now identifies a kx page by the stylesheet it
   loads, which is the honest test, so the homepage needs no article class and inherits
   no article typography. */
.kx-shell.kx-solo{grid-template-columns:minmax(0,1fr)}
.kx-shell.kx-solo .kx-main{margin:0 auto;padding-top:56px}

/* The homepage carries the territory list only so the mobile drawer has content.
   On desktop the homepage IS the navigation, so the rail would be a duplicate. */
.kx-home-nav>.kx-nav{display:none}
@media (max-width:860px){.kx-home-nav>.kx-nav{display:block}}

/* ====================================== mobile: sticky bar + left drawer ==== */
.kx-bar{display:none}
.kx-scrim{display:none}
/* Tablet: the two-column shell survives, the column simply takes what is there. */
@media (max-width:1180px){
  .kx-shell{grid-template-columns:var(--nav) minmax(0,1fr);gap:26px;padding:0 20px}
}
@media (max-width:820px){
  :root{--head:62px}
}
@media (max-width:860px){
  :root{--bar:52px}
  .kx-head nav{display:none}
  .kx-shell{display:block;padding:0 20px}
  .kx-main{padding:24px 0 72px;max-width:none}

  /* LOCKED BEHAVIOUR: a Knowledge bar that stays put under the site header, and a
     left drawer behind its control. Visual treatment is new; the benefit is not. */
  .kx-bar{display:flex;position:sticky;top:var(--head);z-index:55;align-items:center;gap:12px;
    padding:0 20px;height:var(--bar);background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--rule)}
  .kx-bar-b{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:-9px;
    border:0;background:none;border-radius:10px;color:var(--navy);cursor:pointer}
  .kx-bar-b:hover{background:var(--surface-2)}
  .kx-bar-t{font-size:15px;font-weight:650;color:var(--navy);letter-spacing:-.012em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kx-bar-t i{font-style:normal;color:var(--ink-subtle);font-weight:500}
  /* The visible "Knowledge" identity is a real link, not decoration: with JavaScript
     unavailable the drawer cannot open, and this is how a mobile reader leaves the
     article and reaches Knowledge navigation. It is styled to look exactly as the
     plain text did, so the approved design is unchanged. */
  .kx-bar-t a{color:inherit;font-weight:inherit;text-decoration:none}
  .kx-bar-t a:hover{color:var(--cobalt-dark)}
  .kx-bar-t a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px}
  /* The hamburger only does anything once kx.js has run, so it is not offered before
     then. visibility, not display: the space is reserved, so revealing it shifts
     nothing, and while hidden it is out of the tab order. */
  .kx-bar-b{visibility:hidden}
  .kx-js .kx-bar-b{visibility:visible}

  .kx-nav{position:fixed;top:0;left:0;z-index:90;width:min(85vw,318px);height:100dvh;
    margin:0;padding:22px 20px 30px;background:var(--paper);overflow-y:auto;
    box-shadow:0 0 60px rgba(16,22,35,.18);max-height:none;
    visibility:hidden;transform:translateX(-100%);
    transition:transform .3s var(--ease),visibility 0s .3s}
  html.kx-open .kx-nav{visibility:visible;transform:none;
    transition:transform .3s var(--ease),visibility 0s}
  html.kx-open{overflow:hidden}
  .kx-scrim{display:block;position:fixed;inset:0;z-index:85;background:rgba(10,26,48,.4);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  html.kx-open .kx-scrim{opacity:1;pointer-events:auto}
  .kx-nav>ul>li>a{padding:11px 12px;font-size:16px;min-height:44px;display:flex;align-items:center}
  .kx-nav .kx-sub2 a{padding:9px 10px;font-size:15px;min-height:40px}
  .kx-drawer-x{display:grid;position:absolute;top:16px;right:14px;width:40px;height:40px;border:0;
    background:none;border-radius:10px;color:var(--ink-faint);cursor:pointer;
    display:grid;place-items:center}
  .kx-drawer-x:hover{background:var(--surface-2)}

  .kx-hero{padding:40px 20px 4px}
  .kx-search,.kx-starters,.kx-terrs,.kx-watch{padding-left:20px;padding-right:20px}
  .kx-flag-in{grid-template-columns:1fr;gap:30px;padding:40px 20px 44px}
  .kx-terrs{grid-template-columns:1fr;gap:44px;padding-top:48px}
  .kx-watch ol{grid-template-columns:1fr}
  .kx-main p,.kx-main li{font-size:16.5px}
  .kx-answer{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================ Build 1B article region, over the legacy layer ====
   kx-legacy.css is loaded FIRST and keeps the legacy components rendering. These
   rules express the approved Build 1B presentation for the things the contract
   named: H1, breadcrumb, and the reading measure. Anything not named here is
   deliberately left to the legacy component styling, which is already correct. */
.kx-shell .kx-main h1{color:var(--navy);font-size:clamp(30px,4vw,42px);font-weight:700;
  letter-spacing:-.03em;line-height:1.12;margin:0 0 2px}
.kx-shell .kx-main .k-crumb{font-size:13.5px;color:var(--ink-faint);margin:0 0 20px}
.kx-shell .kx-main .k-crumb a{color:var(--ink-faint)}
.kx-shell .kx-main .k-crumb a:hover{color:var(--cobalt-dark)}
/* E2 measure control. Capping the SECTIONS (`.kx-main>*`) put every table and diagram
   inside a section under the prose cap too, which is how a 1040px column still rendered
   798px tables. The cap moved onto the prose elements themselves, wherever they sit, so
   a section can span the full column while its paragraphs stay readable. */
.kx-shell .kx-main>*{max-width:none}
.kx-shell .kx-main p,
.kx-shell .kx-main h1,
.kx-shell .kx-main h2,
.kx-shell .kx-main h3,
.kx-shell .kx-main h4,
.kx-shell .kx-main ul,
.kx-shell .kx-main ol,
.kx-shell .kx-main dl,
.kx-shell .kx-main blockquote,
.kx-shell .kx-main .k-def,
.kx-shell .kx-main .k-crumb,
.kx-shell .kx-main .k-toc-inline,
.kx-shell .kx-main .k-sec.k-ans,
.kx-shell .kx-main .k-next,
.kx-shell .kx-main .k-ph{max-width:var(--read)}
/* Inside the answer block the paragraphs may fill it: the block is already held to
   the reading measure, and a second 62ch cap inside it left a third of the tinted
   box empty. */
.kx-shell .kx-main .k-sec.k-ans p{max-width:none}
/* Structured content opts out and uses the column the rail released. */
/* The wrapper fills the column and scrolls; the TABLE inside it may exceed the column.
   Releasing the wrapper's own max-width let it grow to the table's natural width and
   push the page sideways instead of scrolling - the horizontal-scroll affordance exists
   precisely so a matrix wider than the column stays inside the page. */
.kx-shell .kx-main .k-tw{max-width:100%}
.kx-shell .kx-main table,
.kx-shell .kx-main .k-tw ul,
.kx-shell .kx-main .k-tw ol,
.kx-shell .kx-main .k-tw p,
.kx-shell .kx-main .k-fig,
.kx-shell .kx-main .k-fig-w,
.kx-shell .kx-main figure,
.kx-shell .kx-main .k-pre,
.kx-shell .kx-main .k-kg-l,
.kx-shell .kx-main .k-kg-l li{max-width:none}
/* The ending belongs to the article, not to the table column: Keep exploring, the
   ActivateDigital bridge and the share block all sit on the reading measure so the page
   finishes on the same left-to-right rhythm it was read in. */
.kx-shell .kx-main .k-try,
.kx-shell .kx-main .k-shb{max-width:var(--read)}

/* The legacy figure wrapper already scrolls its diagram (.k-fig-w has overflow-x:auto)
   and .k-dgm carries a 520px min-width by design. In the new grid the wrapper was not
   width-constrained, so instead of scrolling it pushed 187px past the reading column.
   Constraining the wrapper lets the legacy design's own scrolling do its job. */
.kx-shell .kx-main .k-fig,
.kx-shell .kx-main .k-fig-w,
.kx-shell .kx-main .k-tw{max-width:100%}

/* The legacy inline "Navigate this page" list is superseded by the generated rail on
   desktop, so showing both is a duplicate. Below 1080px the rail is hidden and the
   inline list is the only in-page navigation there is, so it stays. */
/* E2: shown at every width. It used to be desktop-hidden because the rail did this job;
   with the rail gone it IS the job. Compact on desktop, roomier under a thumb. */
@media (min-width:1081px){
  .kx-shell .kx-main .k-toc-inline{max-width:var(--read);margin:22px auto 6px}
  .kx-shell .kx-main .k-toc-inline summary{padding:10px 14px;font-size:14px}
  .kx-shell .kx-main .k-toc-inline ul{padding:0 14px 10px;
    columns:2;column-gap:26px}
  .kx-shell .kx-main .k-toc-inline li{break-inside:avoid}
  .kx-shell .kx-main .k-toc-inline a{min-height:32px;font-size:13.5px}
}

/* ...and because it stays, it needs styling. The legacy rules for .k-toc-inline were
   dropped by build_legacy_css.py: its shell regex is `\.k-(shell|side|toc|...)\b`, and
   `\b` matches between "toc" and the hyphen, so .k-toc-inline was classified as old
   shell chrome. It is not - it is authored in-article markup on 65 of 66 pages, and
   without these rules it ships as a bare native <details> with an OS disclosure
   triangle. Restyled here in the kx vocabulary rather than re-imported from the
   legacy sheet, so the mobile in-page navigation matches the desktop rail. */
.kx-shell .kx-main .k-toc-inline{border:1px solid var(--rule);border-radius:var(--rsm);
  background:var(--surface);margin:0 0 28px;overflow:hidden}
.kx-shell .kx-main .k-toc-inline summary{display:flex;align-items:center;gap:10px;
  cursor:pointer;padding:13px 15px;font-size:13px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-subtle);list-style:none;min-height:46px}
.kx-shell .kx-main .k-toc-inline summary::-webkit-details-marker{display:none}
.kx-shell .kx-main .k-toc-inline summary::marker{content:""}
.kx-shell .kx-main .k-toc-inline summary::after{content:"";flex:none;margin-left:auto;
  width:7px;height:7px;border-right:1.5px solid var(--ink-subtle);
  border-bottom:1.5px solid var(--ink-subtle);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s var(--ease)}
.kx-shell .kx-main .k-toc-inline[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.kx-shell .kx-main .k-toc-inline summary:focus-visible{outline:2px solid var(--cobalt);
  outline-offset:-2px}
.kx-shell .kx-main .k-toc-inline ul{list-style:none;margin:0;padding:0 15px 12px;
  border-top:1px solid var(--rule)}
.kx-shell .kx-main .k-toc-inline li{margin:0}
.kx-shell .kx-main .k-toc-inline li::before{content:none}
.kx-shell .kx-main .k-toc-inline a{display:flex;align-items:center;min-height:40px;
  padding:9px 0;font-size:14.5px;line-height:1.4;color:var(--ink-faint);
  border-bottom:1px solid var(--rule)}
.kx-shell .kx-main .k-toc-inline li:last-child a{border-bottom:0}
.kx-shell .kx-main .k-toc-inline a:hover{color:var(--cobalt-dark);text-decoration:none}

/* ---- wide tabular content: a scroll affordance that needs no JavaScript --------
   Two pairs of backgrounds pinned to the scroll container. The white pair is
   attached `local` so it travels with the content and covers the shadow when there
   is nothing more to see; the shadow pair is attached `scroll` so it stays at the
   edge. The result is a soft edge shadow that appears only when the table actually
   overflows, and disappears when the reader reaches that end. Pure CSS: no script,
   no resize observer, and nothing to fail. */
.kx-shell .kx-main .k-tw,
.kx-shell .kx-main .kx-tw{
  background-image:
    linear-gradient(to right,var(--paper) 38%,rgba(255,255,255,0)),
    linear-gradient(to left,var(--paper) 38%,rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,rgba(10,26,48,.13),rgba(10,26,48,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(10,26,48,.13),rgba(10,26,48,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}
/* The container is focusable so a keyboard can scroll it, which is the accessibility
   requirement that a purely visual affordance would miss. */
.kx-shell .kx-main .k-tw:focus-visible,
.kx-shell .kx-main .k-fig-w:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .kx-shell .kx-main .k-tw{scroll-behavior:auto}
}


/* ==========================================================================
   E2: typography, hierarchy and link affordance.

   Written last and scoped to .kx-shell so it wins against kx-legacy.css without
   editing a generated stylesheet. Three things happen here and nothing else:
   the reading measure gets the type size it deserves, cobalt is used deliberately
   rather than everywhere, and links say what kind of link they are.
   ========================================================================== */

/* ---- reading measure and rhythm. The column is wider, so the type is larger:
   748px at 17px was a long line, and the same width at 17.5/1.68 is not. */
.kx-shell .kx-main p,
.kx-shell .kx-main li{font-size:18px;line-height:1.7}
.kx-shell .kx-main p{margin:20px 0 0}
.kx-shell .kx-main ul,
.kx-shell .kx-main ol{margin:20px 0 0}
.kx-shell .kx-main li{margin:9px 0}

/* ---- section rhythm. A section break should be legible from the scroll bar. */
.kx-shell .kx-main .k-sec{margin-top:56px}
.kx-shell .kx-main .k-sec:first-of-type{margin-top:0}
.kx-shell .kx-main .k-sec>h2{font-size:25px;font-weight:650;color:var(--navy);
  letter-spacing:-.024em;line-height:1.25;margin:0 0 8px}
.kx-shell .kx-main .k-sec h3{font-size:19px;font-weight:650;color:var(--navy);
  letter-spacing:-.014em;margin:32px 0 0}
/* the mono eyebrow on the answer block is a label, not a heading: left alone */

/* ---- ActivateDigital character. Cobalt on the answer and on what you can act on;
   navy on structure; charcoal on prose. Deliberate, not decorative. */
.kx-shell .kx-main h1,
.kx-shell .kx-main .k-ph h1{color:var(--cobalt-dark)}
.kx-shell .kx-main .k-sec.k-ans{border-left:3px solid var(--cobalt)}

/* ---- link affordance, four levels.
   1. inline internal - quiet but unmistakable: cobalt with a soft underline that
      firms up on hover. */
.kx-shell .kx-main p a,
.kx-shell .kx-main li a,
.kx-shell .kx-main td a,
.kx-shell .kx-main th a{color:var(--cobalt-dark);
  text-decoration:underline;text-decoration-color:var(--cobalt-100);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.kx-shell .kx-main p a:hover,
.kx-shell .kx-main li a:hover,
.kx-shell .kx-main td a:hover,
.kx-shell .kx-main th a:hover{text-decoration-color:var(--cobalt)}
/* 2. external evidence links in the sources block - authoritative, not decorative.
      A citation is a reference the reader scans, not a call to action: underlining every
      one of them across a 1040px column turned the provenance section into a wall of
      rules. The block keeps the reading measure and the "View official source" control
      carries the affordance. */
.kx-shell .kx-main .k-src{max-width:var(--read)}
.kx-shell .kx-main .k-src a{color:var(--navy);text-decoration:none}
.kx-shell .kx-main .k-src a:hover{color:var(--cobalt-dark);
  text-decoration:underline;text-decoration-color:var(--cobalt-100);text-underline-offset:3px}
.kx-shell .kx-main .k-src-l{color:var(--cobalt-dark);font-weight:600}
/* 3. next-question links - the most prominent thing after the answer itself. */
.kx-shell .kx-main .k-kg-a{text-decoration:none}
.kx-shell .kx-main .k-kg-a .k-kg-t{color:var(--cobalt-dark)}
.kx-shell .kx-main .k-kg-a:hover .k-kg-t{color:var(--cobalt)}
/* 4. navigation links carry no underline: they are chrome, not prose. */
.kx-nav a,.kx-bar a,.kx-head a,.kx-foot a{text-decoration:none}

/* ---- anchors on headings stay out of the way until wanted */
.kx-shell .kx-main .k-anch{text-decoration:none}

@media (max-width:860px){
  .kx-shell .kx-main p,
  .kx-shell .kx-main li{font-size:17px;line-height:1.65}
  .kx-shell .kx-main .k-sec>h2{margin-bottom:6px}
  .kx-shell .kx-main .k-sec{margin-top:42px}
  .kx-shell .kx-main .k-sec>h2{font-size:21px}
  .kx-shell .kx-main .k-sec h3{font-size:17.5px}
}

/* ---- E2: sticky-chrome clearance for every anchor target, not only headings.

   scroll-margin-top was set on .kx-main h2/h3, but the in-page navigation links point
   at SECTION ids, and a section carried no margin: on mobile a jump landed the heading
   105px underneath the site header and the sticky Knowledge bar, so the reader arrived
   at the middle of a paragraph with no idea which section they were in. Applied to the
   sections and to anything else addressable. */
.kx-shell .kx-main .k-sec,
.kx-shell .kx-main [id],
.kx-shell .kx-main h2[id],
.kx-shell .kx-main h3[id]{scroll-margin-top:calc(var(--head) + var(--bar) + 24px)}

/* ---- E2: one visible focus treatment, everywhere, including where a component
   previously relied on a box-shadow alone. */
.kx-shell a:focus-visible,
.kx-nav a:focus-visible,
.kx-nav button:focus-visible,
.kx-bar button:focus-visible,
.kx-head a:focus-visible,
.kx-foot a:focus-visible,
.kx-navsearch input:focus-visible,
.kx-search input:focus-visible,
.kx-starters a:focus-visible,
.kx-picks a:focus-visible,
.kx-terr a:focus-visible,
.kx-results a:focus-visible,
.kx-shell summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;
  border-radius:4px}

/* ---- E2: comfortable control sizes in the navigation and the article chrome. */
.kx-nav>ul>li>a{min-height:38px;display:flex;align-items:center}
.kx-shell .kx-main .k-shb-b,
.kx-shell .kx-main .k-sh-t{min-height:40px}

@media (prefers-reduced-motion:reduce){
  .kx-shell .kx-main .k-toc-inline summary::after{transition:none}
}


/* ==========================================================================
   E2 corrective pass: the left column recedes.

   A 216px rail with a filled cobalt active item, 14.5px labels and ten sub-entries
   competed with the article for attention. In a reference product the index should be
   findable and quiet - you look at it when you want it, not while you are reading. So:
   narrower, smaller, lower contrast, a hairline instead of a fill on the current
   territory, and a search field that reads as a utility rather than a form.
   ========================================================================== */
.kx-nav{font-size:13.5px}
.kx-nav-h{font-size:11px;letter-spacing:.11em;color:var(--ink-subtle);margin:22px 0 8px}

.kx-nav>ul>li>a{padding:6px 10px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  min-height:34px;letter-spacing:-.004em}
.kx-nav>ul>li.is-here>a{background:none;color:var(--cobalt-dark);font-weight:650;
  box-shadow:inset 2px 0 0 var(--cobalt);border-radius:0 var(--rsm) var(--rsm) 0}
.kx-nav>ul>li>a:hover{background:var(--surface-2);color:var(--navy)}

.kx-nav .kx-sub2{margin:2px 0 8px 10px;padding-left:10px}
.kx-nav .kx-sub2 a{padding:5px 8px;font-size:12.5px;line-height:1.38;color:var(--ink-faint)}
.kx-nav .kx-sub2 a[aria-current="page"]{color:var(--navy);font-weight:600;
  background:var(--surface-2)}

.kx-home-link{padding:6px 10px;margin:0 0 8px;font-size:13.5px;font-weight:600;
  color:var(--ink-soft)}
.kx-home-link svg{width:14px;height:14px;color:var(--ink-subtle)}
.kx-home-link:hover{background:var(--surface-2);color:var(--cobalt-dark)}
.kx-home-link:hover svg{color:var(--cobalt)}

.kx-navsearch input{font-size:13px;padding:7px 10px 7px 30px;
  border-color:var(--rule);background:var(--surface-2)}
.kx-navsearch input:focus{background:var(--paper)}
.kx-navsearch svg{left:10px;width:14px;height:14px}
.kx-navresults .t{font-size:13px}
.kx-navresults .m{font-size:11.5px}

/* The article is the subject. A hairline separates the index from it without drawing
   a box around either. */
@media (min-width:1181px){
  .kx-nav{border-right:1px solid var(--rule);padding-right:18px;
    margin-right:calc(var(--gap) * -0.5)}
}


/* ==========================================================================
   E2 corrective pass: one centring rule, applied last.

   Centring was first done by putting `margin:auto` on every prose element, which also
   caught the breadcrumb's own <ol> and the date <dl> inside their flex parents and left
   them floating in the middle of the header. Centring is a property of the article
   FLOW, so it belongs on the flow's direct children and nowhere else: the blocks that
   sit in the column, and the prose that sits in a section. Anything nested inside a
   component keeps that component's own alignment.
   ========================================================================== */
/* .kx-main.kx-main is not a typo: component rules are written as
   `.kx-shell .kx-main .k-crumb` (three classes) and would otherwise out-specify a
   two-class centring rule, which is exactly how the breadcrumb and the page navigation
   ended up hard against the column edge while everything around them was centred.
   Repeating the class matches their specificity, and being last wins the tie. */
.kx-shell .kx-main.kx-main > *,
.kx-shell .kx-main.kx-main > .k-sec > *{margin-left:auto;margin-right:auto}

/* ==========================================================================
   E2.5 — ARTICLE VISUAL-INFORMATION SYSTEM
   --------------------------------------------------------------------------
   Human review of E3 accepted the shell and rejected the article interior:
   "well-formatted documents placed on a webpage" rather than a knowledge
   product. Diagnosis, measured rather than felt: 61 of 97 pages carried no
   component of any kind, 52 of those were table-heavy, and every table on the
   estate - a seven-term status glossary, a twenty-two row regulatory
   chronology, a nine-column category matrix - rendered through one 13.5px
   bordered box. The structure was in the content and nothing in the page
   showed it.

   Seven families answer seven questions: what is true (Direct Answer), what
   the status is (status token + reference), when it happens (timeline), how
   things compare (matrix), what proves it (evidence), what it means (key
   point), what to ask next (connected knowledge).

   TRANSFORMS ARE ATTRIBUTE-ONLY. The converter adds classes and data-*
   attributes; it never moves, rewrites or replaces content, and the only
   words it adds are the six declared relationship labels. A table stays a
   <table> with its cells intact, so "no cell was lost" is true by
   construction rather than by inspection, and explicit ARIA roles are not
   needed because no element's display type is changed away from its own
   role's expectations without them (see .kc-def / .kc-tl, which restate
   role on every part they re-lay-out).

   Nothing here alters --shell, --read, --nav, --gap or --pad. The E2
   corrected frame is not reopened.
   ========================================================================== */

:root{
  --kc-label-s:9.5px; --kc-label-t:.1em;
  --st-now-bg:#E7F4EC;   --st-now-fg:#166B3C;
  --st-later-bg:#EAF2FC; --st-later-fg:#0757B8;
  --st-dev-bg:#FBF2DE;   --st-dev-fg:#8A6516;
  --st-other-bg:#EEF3F9; --st-other-fg:#3F5570;
  --st-none-bg:#F2F3F5;  --st-none-fg:#5C6779;
}

/* --- shared micro-label ------------------------------------------------- */
.kx-main .kc-l{display:block;font-family:var(--mono);font-size:var(--kc-label-s);
  font-weight:600;letter-spacing:var(--kc-label-t);text-transform:uppercase;
  color:var(--ink-subtle)}

/* --- A. direct answer ---------------------------------------------------
   The pattern is strategically right and stays exactly as it is structurally.
   What was missing was hierarchy inside it: the sentence that IS the answer
   was set at body size and body weight, so the panel announced "direct
   answer" and then did not look like one. The paragraph immediately after
   the heading is that sentence on all 71 pages that carry the section. */
/* .k-sec.k-ans, not .k-ans: the legacy layer sets .kx-main .k-sec.k-ans p at 17px,
   which outranks a two-class selector. The first version of this rule was a silent
   no-op and the gate passed it, because the threshold had been written from the
   value this rule was SUPPOSED to produce rather than from a measurement. */
.kx-main .k-sec.k-ans>h2+p{font-size:19px;line-height:1.5;color:var(--navy);
  letter-spacing:-.011em}
.kx-main .k-sec.k-ans>h2+p strong{font-weight:640}
@media (max-width:640px){.kx-main .k-sec.k-ans>h2+p{font-size:18px}}

/* --- B. status token ----------------------------------------------------
   Seven controlled terms, four tones, five marker shapes. The term itself is
   always written out, so the tone and the shape are reinforcement and never
   the only carrier of the meaning. */
.kx-main .kc-st{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.002em;
  padding:3.5px 10px 3.5px 9px;border-radius:999px;white-space:normal;
  border:1px solid transparent;vertical-align:baseline}
.kx-main .kc-st::before{content:"";width:6px;height:6px;flex:none;
  background:currentColor}
.kx-main .kc-st[data-st="now"]{background:var(--st-now-bg);color:var(--st-now-fg)}
.kx-main .kc-st[data-st="now"]::before{border-radius:50%}
.kx-main .kc-st[data-st="later"]{background:var(--st-later-bg);color:var(--st-later-fg)}
.kx-main .kc-st[data-st="later"]::before{border-radius:1.5px}
.kx-main .kc-st[data-st="dev"]{background:var(--st-dev-bg);color:var(--st-dev-fg)}
.kx-main .kc-st[data-st="dev"]::before{border-radius:1px;transform:rotate(45deg)}
.kx-main .kc-st[data-st="draft"]{background:var(--st-dev-bg);color:var(--st-dev-fg);
  border-color:rgba(138,101,22,.42);border-style:dashed}
.kx-main .kc-st[data-st="draft"]::before{border-radius:1px;background:none;
  box-shadow:inset 0 0 0 1.5px currentColor;transform:rotate(45deg)}
.kx-main .kc-st[data-st="other"]{background:var(--st-other-bg);color:var(--st-other-fg)}
.kx-main .kc-st[data-st="other"]::before{border-radius:50%;background:none;
  box-shadow:inset 0 0 0 1.5px currentColor,inset 0 0 0 3.5px transparent}
.kx-main .kc-st[data-st="none"]{background:var(--st-none-bg);color:var(--st-none-fg)}
.kx-main .kc-st[data-st="none"]::before{border-radius:50%;background:none;
  box-shadow:inset 0 0 0 1.5px currentColor}
.kx-main .kc-st[data-st="na"]{background:var(--st-none-bg);color:var(--st-none-fg)}
.kx-main .kc-st[data-st="na"]::before{height:1.5px;width:8px;border-radius:1px}
/* a token standing alone in a matrix cell should not inherit the cell's bold */
.kx-main .kc-mx .kc-st,.kx-main .kc-def .kc-st{font-weight:600}

/* --- C. status / definition reference -----------------------------------
   A two-column table whose left column is a term and whose right column
   explains it is a glossary, not a comparison. It loses the scroll box, the
   border and the 13.5px type, and becomes a calm reference list at reading
   size. Every cell, the header included, stays in the document. */
.kx-main .k-tw.kc-defw{overflow:visible;border:none;border-radius:0;margin:0 0 20px;
  max-width:1040px}
.kx-main table.kc-def{min-width:0;width:100%;font-size:15px;border-collapse:collapse;
  display:block}
.kx-main table.kc-def>thead,.kx-main table.kc-def>tbody{display:block;width:100%}
.kx-main table.kc-def caption{display:block;width:100%;padding:0 0 13px;font-size:13px;
  color:var(--ink-faint);line-height:1.6}
.kx-main table.kc-def>thead>tr,.kx-main table.kc-def>tbody>tr{
  display:grid;grid-template-columns:minmax(140px,var(--kc-t,228px)) minmax(0,1fr);
  gap:2px 30px;align-items:baseline}
.kx-main table.kc-def>thead>tr{padding:0 0 9px;border-bottom:1px solid var(--rule-mid)}
.kx-main table.kc-def>thead>tr>th{padding:0;border:none;background:none;
  font-family:var(--mono);font-size:var(--kc-label-s);font-weight:600;
  letter-spacing:var(--kc-label-t);text-transform:uppercase;color:var(--ink-subtle)}
.kx-main table.kc-def>tbody>tr{padding:14px 0 15px;border-bottom:1px solid var(--rule)}
.kx-main table.kc-def>tbody>tr:last-child{border-bottom:none}
.kx-main table.kc-def>tbody>tr>th,.kx-main table.kc-def>tbody>tr>td{
  padding:0;border:none;line-height:1.55}
.kx-main table.kc-def>tbody>tr>*:first-child{font-weight:600;color:var(--navy);
  font-size:15.5px;letter-spacing:-.008em}
.kx-main table.kc-def>tbody>tr>*:first-child strong{font-weight:600}
.kx-main table.kc-def>tbody>tr>td{color:var(--ink-soft)}
.kx-main table.kc-def>tbody>tr:hover{background:linear-gradient(90deg,var(--cobalt-050),transparent 62%)}
/* long left-hand terms (a full question) need the width, not the ellipsis */
.kx-main table.kc-def.is-wide{--kc-t:330px}
.kx-main table.kc-def.is-stack>thead>tr,.kx-main table.kc-def.is-stack>tbody>tr{
  display:block}
.kx-main table.kc-def.is-stack>tbody>tr>td{margin-top:5px}
.kx-main table.kc-def.is-stack>thead>tr>th+th::before{content:" · ";color:var(--rule-mid)}
.kx-main table.kc-def.is-stack>thead>tr>th{display:inline}

/* --- the one authored status guide: a strong-led list, same language ----- */
.kx-main .kc-sg{list-style:none;margin:10px 0 20px;padding:0;border-top:1px solid var(--rule-mid)}
.kx-main .kc-sg>li{display:grid;grid-template-columns:minmax(150px,252px) minmax(0,1fr);
  gap:2px 30px;align-items:baseline;padding:13px 0 14px;border-bottom:1px solid var(--rule);
  font-size:15px;color:var(--ink-soft);line-height:1.55}
.kx-main .kc-sg>li>strong:first-child{font-weight:600;color:var(--navy);font-size:15.5px}
.kx-main .kc-sg>li:hover{background:linear-gradient(90deg,var(--cobalt-050),transparent 62%)}
.kx-main .kc-sg-h{margin:26px 0 0;font-family:var(--mono);font-size:var(--kc-label-s);
  font-weight:600;letter-spacing:var(--kc-label-t);text-transform:uppercase;
  color:var(--ink-subtle)}
.kx-main .kc-sg-h strong{font-weight:600}

/* --- D. timeline / milestones -------------------------------------------
   Chronology read as a rail rather than a grid. Cells are placed by the job
   the converter proved they do - date, subject, commentary - so a source
   table that writes "Milestone | Date | What it means" and one that writes
   "Date / period | Meaning" render identically without either being
   reordered in the document. A solid node is a date fixed in law; a hollow
   dashed node is Commission timing that has been indicated and not fixed,
   which the row also states in words. */
.kx-main .k-tw.kc-tlw{overflow:visible;border:none;border-radius:0;margin:0 0 22px;
  max-width:1040px}
.kx-main table.kc-tl{min-width:0;width:100%;font-size:15px;border-collapse:collapse;display:block}
.kx-main table.kc-tl>thead,.kx-main table.kc-tl>tbody{display:block;width:100%}
.kx-main table.kc-tl caption{display:block;width:100%;padding:0 0 15px;font-size:13px;
  color:var(--ink-faint);line-height:1.6}
.kx-main table.kc-tl>thead>tr,.kx-main table.kc-tl>tbody>tr{display:grid;
  grid-template-columns:var(--kc-d,178px) minmax(0,1fr);gap:3px 26px}
.kx-main table.kc-tl>thead>tr{padding:0 0 9px 26px;border-bottom:1px solid var(--rule-mid)}
.kx-main table.kc-tl>thead>tr>th{padding:0;border:none;background:none;
  font-family:var(--mono);font-size:var(--kc-label-s);font-weight:600;
  letter-spacing:var(--kc-label-t);text-transform:uppercase;color:var(--ink-subtle)}
.kx-main table.kc-tl>thead>tr>[data-kc-c="d"]{grid-column:1;grid-row:1}
.kx-main table.kc-tl>thead>tr>[data-kc-c="t"]{grid-column:2;grid-row:1}
.kx-main table.kc-tl>thead>tr>[data-kc-c="m"]{display:none}
.kx-main table.kc-tl>tbody>tr{position:relative;padding:16px 0 17px 26px;border:none}
.kx-main table.kc-tl>tbody>tr::before{content:"";position:absolute;left:3px;top:0;
  bottom:0;width:1px;background:var(--rule-mid)}
.kx-main table.kc-tl>tbody>tr:first-child::before{top:22px}
.kx-main table.kc-tl>tbody>tr:last-child::before{bottom:auto;height:22px}
.kx-main table.kc-tl>tbody>tr::after{content:"";position:absolute;left:0;top:20px;
  width:7px;height:7px;border-radius:50%;background:var(--cobalt);
  box-shadow:0 0 0 3px var(--paper)}
.kx-main table.kc-tl>tbody>tr[data-kc-w="indicative"]::after{background:var(--paper);
  box-shadow:0 0 0 3px var(--paper),inset 0 0 0 1.5px var(--st-dev-fg)}
.kx-main table.kc-tl>tbody>tr>th,.kx-main table.kc-tl>tbody>tr>td{
  padding:0;border:none;line-height:1.55}
.kx-main table.kc-tl>tbody>tr>[data-kc-c="d"]{grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--navy);letter-spacing:-.01em;
  line-height:1.45;padding-top:1px}
.kx-main table.kc-tl>tbody>tr>[data-kc-c="t"]{grid-column:2;grid-row:1;
  color:var(--navy);font-weight:560;font-size:15.5px;letter-spacing:-.008em}
.kx-main table.kc-tl>tbody>tr>[data-kc-c="m"]{grid-column:2;color:var(--ink-soft);
  font-size:14.5px}
.kx-main table.kc-tl>tbody>tr>[data-kc-c="m"]::before{content:attr(data-kc-h);
  display:block;font-family:var(--mono);font-size:var(--kc-label-s);font-weight:600;
  letter-spacing:var(--kc-label-t);text-transform:uppercase;color:var(--ink-subtle);
  margin:8px 0 2px}
.kx-main table.kc-tl>tbody>tr:hover>[data-kc-c="t"]{color:var(--cobalt-dark)}

/* --- E. comparison matrix -----------------------------------------------
   Tables that really are multidimensional stay tables and stay scrollable.
   What changes is legibility: 14.5px instead of 13.5, a quiet header band, a
   first column that holds its own on a wide scroll, and a final explanatory
   column set as secondary so the comparison reads before the commentary. */
.kx-main .k-tw.kc-mxw{border-color:var(--rule-mid);border-radius:var(--r);
  position:relative;background:var(--paper)}
.kx-main table.kc-mx{font-size:14.5px}
.kx-main table.kc-mx thead th{font-size:10.5px;color:var(--ink-faint);
  background:var(--surface-2);border-bottom:1px solid var(--rule-mid);
  padding:11px 15px;vertical-align:bottom}
.kx-main table.kc-mx th,.kx-main table.kc-mx td{padding:13px 15px;line-height:1.55}
.kx-main table.kc-mx tbody th{font-weight:620;color:var(--navy);font-size:15px;
  letter-spacing:-.008em;position:sticky;left:0;background:var(--paper);z-index:1}
.kx-main table.kc-mx tbody tr:hover th{background:var(--cobalt-050)}
.kx-main table.kc-mx tbody tr:hover td{background:var(--cobalt-050)}
.kx-main table.kc-mx tbody th::after{content:"";position:absolute;top:0;right:0;
  bottom:0;width:1px;background:var(--rule)}
.kx-main table.kc-mx td[data-kc-note]{color:var(--ink-faint);font-size:13.5px;
  line-height:1.6}
.kx-main table.kc-mx caption{padding:14px 16px 2px;font-size:13px}

/* --- F. evidence / legal basis -------------------------------------------
   One language for provenance inside the argument. The end-of-page source
   ledger is untouched and stays last. */
.kx-main .k-prov.kc-ev{padding:9px 0 0;border-top:1px solid var(--rule);
  margin-top:13px;font-size:13px}
.kx-main .kc-ev-s{border-left:2px solid var(--cobalt-100);padding:2px 0 2px 20px;
  margin:26px 0}
.kx-main .kc-ev-s>h2,.kx-main .kc-ev-s>h3{color:var(--navy)}
.kx-main .kc-ev-s>ol,.kx-main .kc-ev-s>ul{color:var(--ink-soft);font-size:15.5px}

/* --- G. key point / practical meaning ------------------------------------
   The estate's authors already marked their load-bearing propositions with a
   blockquote whose whole paragraph is strong. That structural signal is the
   component: no paragraph is reinterpreted, and the label is CSS-generated
   reinforcement of a sentence that already reads on its own. */
.kx-main blockquote.kc-key{border-left:none;background:var(--surface);
  border:1px solid var(--cobalt-100);border-radius:var(--r);
  padding:15px 20px 17px;margin:28px 0}
.kx-main blockquote.kc-key::before{content:attr(data-kc-l);display:block;
  font-family:var(--mono);font-size:var(--kc-label-s);font-weight:600;
  letter-spacing:var(--kc-label-t);text-transform:uppercase;color:var(--cobalt-dark);
  margin-bottom:8px}
.kx-main blockquote.kc-key p{font-size:16.5px;line-height:1.55;color:var(--navy);
  letter-spacing:-.008em}
.kx-main blockquote.kc-key p strong{font-weight:600}
.kx-main blockquote.kc-key[data-kc-k="caution"]{background:#FDFAF2;
  border-color:rgba(138,101,22,.28)}
.kx-main blockquote.kc-key[data-kc-k="caution"]::before{color:var(--st-dev-fg)}
.kx-main blockquote.kc-key p+p{margin-top:9px;font-size:15px;color:var(--ink-soft)}
/* a key point inside the Direct Answer panel would otherwise be a tinted card on a
   tinted card, which reads as a rendering accident rather than as emphasis */
.kx-main .k-ans blockquote.kc-key,.kx-main .k-lim blockquote.kc-key,
.kx-main .k-act blockquote.kc-key{background:var(--paper)}

/* --- H. connected knowledge ----------------------------------------------
   The relationship, not just the destination. Six labels, derived from route
   ancestry and territory rather than written per link, so the reader can see
   why the next page follows from this one. */
.kx-main .kc-rel{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:var(--kc-label-s);font-weight:600;
  letter-spacing:var(--kc-label-t);text-transform:uppercase;color:var(--cobalt-dark)}
.kx-main .kc-rel::before{content:"";width:11px;height:1.5px;background:currentColor;
  flex:none;opacity:.55}
.kx-main .kc-rel[data-rel="deeper"]::before{width:4px;height:4px;border-radius:50%;
  box-shadow:6px 0 0 0 currentColor;opacity:.75}
.kx-main .kc-rel[data-rel="broader"]::before{width:9px;height:9px;border-radius:50%;
  background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.kx-main .kc-rel[data-rel="compare"]::before{width:10px;height:4px;background:none;
  border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.kx-main .kc-rel[data-rel="evidence"]::before{width:8px;height:8px;
  transform:rotate(45deg);border-radius:1px}
.kx-main .kc-rel[data-rel="do"]::before{width:0;height:0;background:none;
  border-left:7px solid currentColor;border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent}
.kx-main .k-kg-a .kc-rel{margin-bottom:9px}
.kx-main .k-kg-k{color:var(--ink-subtle);letter-spacing:.085em;margin-bottom:7px}
.kx-main .k-kg-a:hover .kc-rel{color:var(--cobalt)}
.kx-main .k-kg-1 .kc-rel{font-size:10px}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:820px){
  .kx-main table.kc-def{--kc-t:200px}
  .kx-main table.kc-def.is-wide{--kc-t:240px}
  .kx-main table.kc-tl{--kc-d:150px}
}
@media (max-width:640px){
  /* a <tr> set to display:block leaves its <th>/<td> as table-cells, and an
     anonymous table row puts them back side by side. Every part has to be
     blockified explicitly or the stacked layout silently does not happen. */
  .kx-main table.kc-def>thead>tr,.kx-main table.kc-def>tbody>tr,
  .kx-main .kc-sg>li{display:block}
  .kx-main table.kc-def>tbody>tr>th,.kx-main table.kc-def>tbody>tr>td{display:block}
  .kx-main table.kc-def>thead>tr>th{display:inline}
  .kx-main table.kc-def>thead>tr>th+th::before{content:" · ";color:var(--rule-mid)}
  .kx-main .kc-sg>li>strong:first-child{display:block}
  .kx-main table.kc-def>tbody>tr>td{margin-top:5px}
  .kx-main table.kc-def>tbody>tr>*:first-child{font-size:16px}
  .kx-main .kc-sg>li{padding:13px 0 15px}
  .kx-main table.kc-def>tbody>tr:hover,.kx-main .kc-sg>li:hover{background:none}
  .kx-main table.kc-tl>thead>tr,.kx-main table.kc-tl>tbody>tr{display:block}
  .kx-main table.kc-tl>tbody>tr>th,.kx-main table.kc-tl>tbody>tr>td{display:block}
  .kx-main table.kc-tl>tbody>tr>[data-kc-c="t"]{margin-top:3px;font-size:16px}
  .kx-main table.kc-tl>tbody>tr>[data-kc-c="d"]{font-size:12.5px}
  .kx-main table.kc-tl>thead>tr>[data-kc-c="d"],
  .kx-main table.kc-tl>thead>tr>[data-kc-c="t"]{display:inline}
  .kx-main table.kc-tl>thead>tr>[data-kc-c="t"]::before{content:" · ";color:var(--rule-mid)}
  .kx-main table.kc-tl>tbody>tr::after{top:19px}
  .kx-main blockquote.kc-key{padding:14px 16px 16px;margin:24px 0}
  .kx-main blockquote.kc-key p{font-size:15.5px}
  .kx-main table.kc-mx tbody th{position:static}
  .kx-main table.kc-mx tbody th::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kx-main table.kc-def>tbody>tr,.kx-main .kc-sg>li{transition:none}
}

/* --- C2. reference with more than two columns -----------------------------
   The status guide the human review singled out - Stage / What has happened /
   What may be said - is a three-column glossary, and a glossary rendered as a
   grid makes the reader compare rows that were never meant to be compared.
   The term takes the left band; everything said about it stacks in the right
   one under its own column heading, which the header row keeps for the
   document and CSS repeats where it is actually needed. */
.kx-main table.kc-def.is-multi>thead>tr>[data-kc-c="v"]{display:none}
.kx-main table.kc-def.is-multi>tbody>tr{gap:0 30px}
.kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="k"]{grid-column:1;grid-row:1}
.kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]{grid-column:2;
  color:var(--ink-soft);font-size:14.5px}
.kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]:first-of-type{
  color:var(--ink);font-size:15px}
.kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]::before{
  content:attr(data-kc-h);display:block;font-family:var(--mono);
  font-size:var(--kc-label-s);font-weight:600;letter-spacing:var(--kc-label-t);
  text-transform:uppercase;color:var(--ink-subtle);margin:0 0 3px}
.kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]+[data-kc-c="v"]{margin-top:11px}

/* a blockquote whose whole content is one controlled status term is a status
   statement, not a proposition: it gets the token and no label of its own. */
.kx-main blockquote.kc-key[data-kc-k="status"]{background:none;border:none;
  border-radius:0;padding:0;margin:16px 0 22px}
.kx-main blockquote.kc-key[data-kc-k="status"]::before{content:none}
.kx-main blockquote.kc-key[data-kc-k="status"] p{font-size:15px}
.kx-main blockquote.kc-key[data-kc-k="status"] .kc-st{font-size:14px;
  padding:6px 15px 6px 13px;gap:9px}
.kx-main blockquote.kc-key[data-kc-k="status"] .kc-st::before{width:7px;height:7px}
@media (max-width:640px){
  .kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]{margin-top:9px}
  .kx-main table.kc-def.is-multi>thead>tr>[data-kc-c="k"]{display:inline}
  .kx-main table.kc-def.is-multi>tbody>tr>[data-kc-c="v"]+[data-kc-c="v"]{margin-top:9px}
}

/* ==========================================================================
   E2.6 — TERRITORY BROWSE SURFACES
   --------------------------------------------------------------------------
   Persistent navigation is orientation; these pages are complete access. The
   left rail caps a territory at nine entries and the site dropdown carries six
   links, so before E2.6 the only route to the other thirty-seven Digital
   Product Passport resources was the search box. A 97-link menu is not the
   answer to that, and neither is a dashboard: these are reading surfaces built
   from the same type, spacing and cobalt hierarchy as an article, so the
   estate still feels like one product when you step out of an article to look
   around it.

   The page type is `main.kx-browse`, a third alongside `.kx-main` (article)
   and `.kx-home` (discovery). It sits in the same .kx-shell grid beside the
   same navigation, so no layout token is touched and the E2 frame assertions
   hold unchanged.
   ========================================================================== */

/* ONE LINK GRAMMAR FOR THE WHOLE KNOWLEDGE SHELL.

   Two link jobs exist here and they look different on purpose. Prose inside the
   reading column is underlined, because a link in a sentence has to be visible
   without being read as a button. Everything that is a NAVIGATION LABEL - a
   catalogue title, a section heading that leads somewhere, a card, the rail, the
   bar, a doorway - is not underlined at rest and underlines on hover and focus,
   because a hundred underlined titles in one column is a wall of blue rather than
   a catalogue.

   `.kx-home` was missing from this declaration, so the All Knowledge catalogue -
   the same component, the same classes - rendered underlined on /knowledge and
   clean on /knowledge/all. One component must not have two appearances depending
   on which page it lands on; that is the difference between a design system and a
   pile of page styles. The G2 visual gate now asserts it on both surfaces. */
.kx-main a,.kx-browse a,.kx-home a{color:var(--cobalt);text-decoration:none}
.kx-browse a:hover,.kx-home a:hover{text-decoration:underline;text-underline-offset:3px}
.kx-browse h1,.kx-browse h2,.kx-browse h3{
  color:var(--navy);letter-spacing:-.021em;line-height:1.18;margin:0}
.kx-shell .kx-browse{min-width:0;padding:38px 0 96px;max-width:none;margin:0}
.kx-shell .kx-browse .k-crumb{font-size:13.5px;color:var(--ink-faint);margin:0 0 20px}
.kx-shell .kx-browse .k-crumb a{color:var(--ink-faint)}
.kx-shell .kx-browse .k-crumb a:hover{color:var(--cobalt-dark)}
.kx-shell .kx-browse .k-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;
  margin:0;padding:0}
.kx-shell .kx-browse .k-crumb i{font-style:normal;margin-right:7px;color:var(--rule-mid)}

.kx-br-ph{max-width:var(--read);margin:0 0 40px}
.kx-browse h1{font-size:clamp(30px,4vw,42px);font-weight:700;letter-spacing:-.03em;
  line-height:1.12;color:var(--cobalt-dark);margin:0 0 12px}
.kx-br-d{font-size:19px;line-height:1.55;color:var(--navy);letter-spacing:-.008em;
  margin:0 0 10px}
.kx-br-l{font-size:16.5px;line-height:1.65;color:var(--ink-faint);margin:0}

/* --- start here: curation, imported from the homepage, not re-decided --- */
.kx-br-start{margin:0 0 46px;max-width:1040px}
.kx-browse h2{font-size:20px;font-weight:640;letter-spacing:-.016em;margin:0 0 16px}
.kx-br-n{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:var(--ink-subtle);letter-spacing:.04em;vertical-align:.16em;margin-left:7px}
.kx-br-sl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.kx-br-sl>li{padding:14px 0 15px;border-bottom:1px solid var(--rule)}
.kx-br-sl>li>a{font-size:16.5px;font-weight:600;color:var(--cobalt-dark);
  letter-spacing:-.01em}
.kx-br-sl .kx-br-s{display:block;margin-top:4px}

/* --- the full territory: a calm grid, not a wall of cards ---------------- */
.kx-br-sec{margin:0 0 44px}
.kx-br-grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  background:var(--rule);border:1px solid var(--rule)}
.kx-br-c{background:var(--paper);padding:17px 19px 19px;display:flex;
  flex-direction:column;gap:5px}
.kx-br-c:hover{background:var(--cobalt-050)}
.kx-br-h{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin:0}
.kx-br-h a{color:var(--cobalt-dark);display:inline}
.kx-br-go{display:inline-block;margin-left:6px;color:var(--cobalt);
  transform:translateX(0);transition:transform .18s var(--ease)}
.kx-br-c:hover .kx-br-go,.kx-br-sl>li:hover .kx-br-go{transform:translateX(3px)}
.kx-br-s{font-size:14px;line-height:1.55;color:var(--ink-faint);margin:0}
.kx-br-m{margin:auto 0 0;padding-top:9px;font-family:var(--mono);font-size:11px;
  color:var(--ink-subtle);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kx-br-ml{text-transform:uppercase;letter-spacing:.09em;font-weight:600;margin-right:6px}

/* --- the complete catalogue --------------------------------------------- */
.kx-br-jump{margin:0 0 40px;padding:16px 20px 17px;background:var(--surface);
  border-radius:var(--r);max-width:1040px}
.kx-br-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 26px}
.kx-br-jump a{font-size:15px;font-weight:560;color:var(--cobalt-dark)}
.kx-br-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
  columns:2;column-gap:44px;max-width:1240px}
.kx-br-list>li{break-inside:avoid;padding:11px 0 12px;border-bottom:1px solid var(--rule)}
.kx-br-list>li>a{font-size:15.5px;font-weight:560;color:var(--cobalt-dark);
  letter-spacing:-.008em}
.kx-br-list .kx-br-s{display:block;margin-top:3px}
.kx-browse .kx-br-sec>h2>a,.kx-all .kx-br-sec>h2>a{color:var(--navy)}
.kx-browse .kx-br-sec>h2>a:hover,.kx-all .kx-br-sec>h2>a:hover{color:var(--cobalt-dark)}

/* The consent control the canonical consent script places in this footer. It is the
   same button the commercial footer gets; this only tells it what a Knowledge footer
   looks like, so it stops arriving at body size in body colour. */
.kx-foot-in .k-ft-ck{margin:10px 0 0;width:100%;text-align:center}
.kx-foot .ad-ck-link{font:inherit;font-size:13px;color:var(--ink-faint);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-mid)}
.kx-foot .ad-ck-link:hover{color:var(--ink)}
.kx-foot .ad-ck-link:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;
  border-radius:3px}

/* ------------------------------------------------- All Knowledge on /knowledge
   The complete catalogue, rendered by the same code as /knowledge/all so the two can
   never disagree. It borrows that surface's card treatment wholesale; what it adds is
   only the frame that makes it a section of the homepage rather than a page. */
.kx-all{max-width:1240px;margin:56px auto 0;padding:0 24px}
.kx-all-h{border-top:1px solid var(--rule);padding-top:26px}
.kx-all h2{font-size:20px;font-weight:650;letter-spacing:-.018em;margin:0}
.kx-all .kx-all-d{color:var(--ink-faint);font-size:15px;margin:8px 0 20px}
.kx-all .kx-br-jump{margin:0 0 34px}
.kx-all .kx-br-sec{margin:0 0 40px}
.kx-all .kx-br-sec>h2{font-size:17px;margin:0 0 4px}
@media (max-width:860px){
  .kx-all{padding:0 20px;margin-top:44px}
}

/* --- the way out -------------------------------------------------------- */
.kx-br-other{margin:52px 0 0;padding:22px 0 0;border-top:1px solid var(--rule-mid);
  max-width:1040px}
.kx-br-oh{font-family:var(--mono);font-size:var(--kc-label-s,9.5px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-subtle);margin:0 0 11px}
.kx-br-other ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:9px 26px}
.kx-br-other a{font-size:15px;color:var(--cobalt-dark)}
.kx-br-all{margin:16px 0 0;font-size:15px;font-weight:560}

/* --- homepage see-all routes -------------------------------------------- */
.kx-seeall{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:560;
  color:var(--cobalt-dark)}
.kx-seeall span{display:inline-block;margin-left:5px;transition:transform .18s var(--ease)}
.kx-seeall:hover span{transform:translateX(3px)}
.kx-browseall{margin:34px 0 0;text-align:center;font-size:15px}
.kx-browseall a{color:var(--ink-faint);border-bottom:1px solid var(--rule-mid);
  padding-bottom:2px}
.kx-browseall a:hover{color:var(--cobalt-dark);border-color:var(--cobalt-100);
  text-decoration:none}

@media (max-width:760px){
  .kx-br-list{columns:1}
}
@media (max-width:640px){
  .kx-shell .kx-browse{padding:24px 0 72px}
  .kx-br-grid{grid-template-columns:1fr}
  .kx-br-ph{margin-bottom:30px}
  .kx-br-d{font-size:17.5px}
  .kx-br-l{font-size:15.5px}
  .kx-br-jump{padding:14px 16px 15px}
  .kx-br-c:hover{background:var(--paper)}
}
@media (prefers-reduced-motion:reduce){
  .kx-br-go,.kx-seeall span{transition:none}
  .kx-br-c:hover .kx-br-go,.kx-seeall:hover span{transform:none}
}

/* ==========================================================================
   G2 PROVISIONAL — reading progress and persistent context
   --------------------------------------------------------------------------
   Both are marked in the G2 commission as decisions a person makes, not gates.
   Each is emitted only when its flag in knowledge_render.py is on, and every rule
   below is keyed to the attribute that flag writes - so rejecting one removes its
   markup, its styling and its behaviour together, and leaves no dead CSS behind.

   Neither adds an element to the layout. The progress indicator is drawn on the
   1px rule the sticky header already has, and the context line sits in the empty
   middle of that same header between the logo and the site nav. No new sticky
   element, no second header, no height change anywhere, so neither can shift
   layout or move the reading position.

   With JavaScript off the bar stays at zero width and the context stays hidden.
   ========================================================================== */

/* --- reading progress: 2px, on the chrome/article boundary ------------------
   Relocated by the tactical pass. It used to be an absolutely positioned child of the
   Knowledge-specific header; that header is gone and the canonical ActivateDigital
   header is a shared component this estate does not inject into. Fixed at the bottom
   edge of the sticky chrome instead - the header alone on desktop, the header plus the
   Knowledge bar on mobile, which --bar already describes. Fixed means it takes no
   layout, so it still cannot shift anything. */
.kx-prog{position:fixed;left:0;right:0;top:calc(var(--head) + var(--bar) - 2px);
  height:2px;overflow:hidden;pointer-events:none;z-index:2001}
.kx-prog>i{display:block;height:100%;width:100%;background:var(--cobalt);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.kx-js .kx-prog>i{transition:transform .12s linear}
/* An article shorter than a screen and a half has nothing to indicate progress
   through, and a bar that only ever sits near full is noise. The behaviour adds
   this attribute; the indicator is simply absent rather than stuck. */
.kx-prog[data-kx-short]>i{display:none}
@media (prefers-reduced-motion:reduce){
  .kx-js .kx-prog>i{transition:none}
}
/* On mobile the sticky chrome is two rows, not one: the site header and the
   Knowledge bar beneath it. The indicator belongs on the boundary between chrome
   and article, so below 861px it moves to the bar's bottom edge rather than
   sitting between the two rows, where it reads as a stray rule. It is still the
   same absolutely positioned 2px child of the header, so nothing gains height and
   no element is added. */


/* --- persistent context: the top of the Knowledge rail --------------------
   Also relocated. Same restraint, same article-only scope, same behaviour - it appears
   once the H1 has left and goes when it returns - but in Knowledge's own sticky rail
   rather than inside the shared header. Mobile is unchanged: it still swaps the text
   of the Knowledge bar, which is where G2 put it and where it was accepted. */
.kx-ctx{display:none}
@media (min-width:861px){
  .kx-ctx{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 14px;
    font-size:13px;line-height:1.35;color:var(--ink-faint);letter-spacing:-.004em;
    opacity:0;transform:translateY(2px);pointer-events:none;
    transition:opacity .18s var(--ease),transform .18s var(--ease)}
  .kx-ctx>b{font-weight:600;color:var(--navy);white-space:nowrap}
  .kx-ctx>i{font-style:normal;color:var(--rule-mid)}
  .kx-ctx>span{color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:42ch}
  .kx-ctx.is-on{opacity:1;transform:none}
}
/* Mobile keeps the sticky Knowledge bar it already has. The behaviour swaps the
   territory for this article's own label once the H1 has gone; nothing is added. */
.kx-bar-t.is-here>i{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .kx-ctx{transition:none}
}

/* ==========================================================================
   G2 — THE KNOWLEDGE VISUAL SYSTEM
   ==========================================================================
   Four primitives, three scales. A NODE is a fact, a FIELD is a value, a FRAME
   is a governed record, a PATH is a relationship. The icons are those primitives
   at 20px, the heroes are the same primitives at 320px, and the diagrams are the
   same primitives at reading width. That is what makes this one product rather
   than one hundred and one pages.

   Nothing here uses colour to carry meaning. A five-colour territory taxonomy
   would make the five territories look like five products; they are five doors
   into one.
   ========================================================================== */

:root{
  /* Motion tokens. Every similar interaction in the estate uses the same numbers,
     so hover on a card and hover on a link feel like the same hand made them. */
  --kx-t-fast:130ms;      /* colour, opacity, focus rings                       */
  --kx-t-med:220ms;       /* movement a reader notices: lifts, slides           */
  --kx-t-slow:420ms;      /* things that resolve: copy confirmations, context   */
  --kx-lift:1px;          /* how far anything ever rises under a pointer        */
  --kx-nudge:3px;         /* how far a directional arrow ever travels           */
  --kx-cycle:12s;         /* one hero loop, slow enough to read                 */
}

/* ------------------------------------------------------------- semantic icons */
.kx-ic{width:18px;height:18px;flex:none;vertical-align:-3px}
.kx-ui{width:17px;height:17px;flex:none;vertical-align:-3px}
/* An icon in a heading is punctuation, not a second heading: it takes the muted
   weight and lets the words carry. */
.kx-ic-h{color:var(--cobalt);opacity:.9}

/* Section headings that carry a semantic mark. The mark hangs in the left margin
   at reading widths so the text edge stays straight - a heading that starts 26px
   further right than every other heading is a worse page, not a branded one. */
.kx-sec-ic{display:inline-flex;align-items:center;gap:9px}
.kx-sec-ic>svg{color:var(--cobalt);opacity:.92}
@media (min-width:1101px){
  .kx-main .kx-sec-ic{position:relative}
  .kx-main .kx-sec-ic>svg{position:absolute;left:-30px;top:.32em}
}

/* ---------------------------------------------------------------------- heroes */
.kx-hero-fig{margin:0;flex:none;pointer-events:none}
.kx-hero-svg{display:block;width:100%;height:auto;overflow:visible}
.kx-hero-svg *{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* The three roles a stroke can have. Latent is the structure that was always
   there; live is what is happening; frame and node are what it resolves into. */
.kx-hero-svg .kx-h-latent *{stroke:var(--rule-mid);stroke-width:1.1}
.kx-hero-svg .kx-h-loose *{stroke:var(--ink-subtle);stroke-width:1.4}
.kx-hero-svg .kx-h-live *{stroke:var(--cobalt-400);stroke-width:1.4}
.kx-hero-svg .kx-h-frame *{stroke:var(--navy);stroke-width:1.4}
.kx-hero-svg .kx-h-frame path{stroke:var(--rule-mid)}
.kx-hero-svg .kx-h-node *{stroke:var(--cobalt);stroke-width:1.6}
.kx-hero-svg .kx-h-open{stroke-dasharray:4 5;opacity:.75}

/* Motion primitives. Four, and no hero uses more than three. */
@keyframes kxDraw{
  0%,4%{stroke-dashoffset:var(--kx-len,240)}
  34%,88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:var(--kx-len,240)}
}
@keyframes kxLand{
  0%,4%{opacity:0;transform:translate3d(0,6px,0) scale(.94)}
  30%,88%{opacity:1;transform:none}
  100%{opacity:0;transform:translate3d(0,6px,0) scale(.94)}
}
@keyframes kxAlign{
  0%,10%{transform:translate3d(var(--kx-from,-14px),0,0);opacity:.55}
  40%,88%{transform:none;opacity:1}
  100%{transform:translate3d(var(--kx-from,-14px),0,0);opacity:.55}
}
@keyframes kxConfirm{
  0%,30%{stroke-dashoffset:26;opacity:0}
  52%,88%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:26;opacity:0}
}
.kx-hero-svg .kx-draw{stroke-dasharray:var(--kx-len,240);
  animation:kxDraw var(--kx-cycle) var(--ease) infinite both}
.kx-hero-svg .kx-land{transform-box:fill-box;transform-origin:50% 50%;
  animation:kxLand var(--kx-cycle) var(--ease) infinite both}
.kx-hero-svg .kx-align{animation:kxAlign var(--kx-cycle) var(--ease) infinite both}
.kx-hero-svg .kx-confirm{stroke-dasharray:26;
  animation:kxConfirm var(--kx-cycle) var(--ease) infinite both}
.kx-d1{animation-delay:0s}      .kx-d2{animation-delay:.28s}
.kx-d3{animation-delay:.56s}    .kx-d4{animation-delay:.84s}
.kx-d5{animation-delay:1.12s}   .kx-d6{animation-delay:1.4s}
.kx-d7{animation-delay:1.68s}   .kx-d8{animation-delay:1.96s}

/* The static state is the RESOLVED state, so the picture still says the thing.
   Reduced motion does not mean no picture. */
@media (prefers-reduced-motion:reduce){
  .kx-hero-svg .kx-draw,.kx-hero-svg .kx-land,
  .kx-hero-svg .kx-align,.kx-hero-svg .kx-confirm{
    animation:none;stroke-dashoffset:0;opacity:1;transform:none}
}

/* Mobile is a composition, not a shrink: the dense parts are dropped and what is
   left still reads left to right as the same sentence. */
@media (max-width:700px){
  .kx-hero-svg .kx-h-dense{display:none}
}

/* ------------------------------------------------- the discovery surface header */
.kx-idh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:40px;align-items:center}
.kx-idh-t{min-width:0}
.kx-idh-e{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;
  font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-subtle);margin:0 0 10px}
.kx-idh-e svg{color:var(--cobalt);width:16px;height:16px}
@media (max-width:900px){
  .kx-idh{grid-template-columns:minmax(0,1fr);gap:20px}
  .kx-idh-fig{order:-1;max-width:300px}
}

/* --------------------------------------------------------- micro-interactions */
.kx-br-list>li>a,.kx-kg-a,.kx-picks a,.kx-aud-go,.kx-explore{
  transition:color var(--kx-t-fast) var(--ease)}
.kx-br-list>li{transition:transform var(--kx-t-med) var(--ease)}
.kx-br-list>li:hover{transform:translate3d(2px,0,0)}
/* ROUTE CONTINUES: a directional arrow moves exactly --kx-nudge, everywhere. */
.kx-explore span,.kx-aud-go span,.kx-seeall span,.k-kg-go{
  display:inline-block;transition:transform var(--kx-t-med) var(--ease)}
a:hover>.k-kg-go,a:hover span[aria-hidden="true"],
.kx-explore:hover span,.kx-aud-go:hover span{transform:translate3d(var(--kx-nudge),0,0)}
@media (prefers-reduced-motion:reduce){
  .kx-br-list>li,.kx-explore span,.kx-aud-go span,.kx-seeall span,.k-kg-go{
    transition:none}
  .kx-br-list>li:hover,a:hover>.k-kg-go{transform:none}
}

/* ------------------------------------------------- continue reading: two modes
   Where F established a genuine reading sequence the control says Previous and Next,
   because the page is a chapter. Everywhere else it says "Previous in Evidence &
   Trust", because the page is not one, and the difference is the whole point: a
   reader should never be told they are in a course when they are in a territory. */
.kx-pn{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--rule)}
.kx-pn-c{margin:0 0 14px;font-size:11.5px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-subtle)}
.kx-pn-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kx-pn-a{display:flex;flex-direction:column;gap:7px;padding:16px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--rsm,10px);
  text-decoration:none;transition:border-color var(--kx-t-fast) var(--ease),
  transform var(--kx-t-med) var(--ease)}
.kx-pn-a:hover{border-color:var(--cobalt-100);transform:translate3d(0,calc(-1 * var(--kx-lift)),0)}
.kx-pn-a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.kx-pn-n{text-align:right}
.kx-pn-l{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink-faint);letter-spacing:-.004em}
.kx-pn-n .kx-pn-l{flex-direction:row-reverse}
.kx-pn-l svg{color:var(--cobalt);transition:transform var(--kx-t-med) var(--ease)}
.kx-pn-p:hover .kx-pn-l svg{transform:translate3d(calc(-1 * var(--kx-nudge)),0,0)}
.kx-pn-n:hover .kx-pn-l svg{transform:translate3d(var(--kx-nudge),0,0)}
.kx-pn-t{font-size:15.5px;font-weight:560;line-height:1.4;color:var(--cobalt-dark)}
.kx-pn-a:hover .kx-pn-t{color:var(--cobalt)}
.kx-pn-end .kx-pn-t{color:var(--ink-soft)}
@media (max-width:700px){
  .kx-pn-in{grid-template-columns:minmax(0,1fr)}
  .kx-pn-n{text-align:left}
  .kx-pn-n .kx-pn-l{flex-direction:row}
}
@media (prefers-reduced-motion:reduce){
  .kx-pn-a,.kx-pn-l svg{transition:none}
  .kx-pn-a:hover{transform:none}
  .kx-pn-p:hover .kx-pn-l svg,.kx-pn-n:hover .kx-pn-l svg{transform:none}
}

/* The audience collection's hero sits under its H1 rather than beside it: this page
   is read as an article and the visual is an opening statement, not furniture. */
.kx-art-hero{margin:6px 0 26px;max-width:420px}

/* ------------------------------------------- Navigate this page: where you are now
   Progressive enhancement over the existing list. With JavaScript off it is exactly
   the anchor list it has always been. */
.k-toc-inline a[aria-current="true"]{color:var(--cobalt-dark);font-weight:600}
.k-toc-inline a[aria-current="true"]::before{content:"";position:absolute;left:-11px;
  top:.55em;width:3px;height:3px;border-radius:50%;background:var(--cobalt)}
.k-toc-inline li{position:relative}

/* ---------------------------------------------------------- explanatory diagrams
   Same alphabet as the icons and the heroes, at reading width: a FRAME is a thing
   the page names, a PATH is a relationship the page states, and nothing on the
   canvas is a claim the article does not already make. Every diagram ships with the
   same content as text, because a picture that is the only carrier of a meaning is
   a meaning some readers do not get. */
.kx-dg{margin:26px 0 30px;padding:22px 22px 18px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--rmd,12px)}
.kx-dg-svg{display:block;width:100%;height:auto;overflow:visible}
.kx-dg-svg rect{fill:var(--paper);stroke:var(--rule-mid);stroke-width:1.2}
.kx-dg-svg text{font-family:var(--sans);font-size:13.5px;fill:var(--navy);
  font-weight:550;letter-spacing:-.006em}
.kx-dg-svg .kx-dg-lb{font-size:11.5px;fill:var(--ink-faint);font-weight:450;
  letter-spacing:0}
.kx-dg-svg .kx-dg-n{font-family:var(--mono);font-size:11px;fill:var(--cobalt);
  font-weight:600}
.kx-dg-svg .kx-dg-p{fill:none;stroke:var(--cobalt-400);stroke-width:1.3;
  stroke-linecap:round}
.kx-dg-svg .kx-dg-ax path:first-child{stroke:var(--rule-mid);stroke-width:1.1}
.kx-dg-svg .kx-dg-hub rect{fill:var(--cobalt-050);stroke:var(--cobalt-100)}
.kx-dg-svg .kx-dg-end rect{stroke-dasharray:5 4}
.kx-dg-c{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-faint)}
/* The text equivalent. Present for assistive technology and for print, folded away
   visually because the same content is on the canvas beside it. */
.kx-dg-alt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:700px){
  .kx-dg{padding:16px 14px 12px;margin:22px -6px 26px}
  .kx-dg-svg text{font-size:15px}
  .kx-dg-svg .kx-dg-lb{font-size:12.5px}
}
@media print{
  .kx-dg-alt{position:static;width:auto;height:auto;clip:auto;white-space:normal;
    margin:10px 0 0}
}

/* Placement B for the persistent context, kept switchable beside placement A so the
   two could be compared on screen rather than argued about. A zero-height sticky
   strip at the top of the article column: the line can appear over the reading frame
   and can never push a word of it down, which is the property that rules out every
   other frame-aligned idea. */
.kx-ctx-fr{position:sticky;top:calc(var(--head) + var(--bar) + 10px);height:0;
  overflow:visible;z-index:40}
.kx-ctx-fr .kx-ctx{margin:0;background:var(--paper);padding:5px 10px;border-radius:7px;
  box-shadow:0 1px 10px rgba(16,22,35,.06);border:1px solid var(--rule)}

/* ---------------------------------------------------------------------- print
   No print button ships. A control that duplicates something every browser already
   has is chrome for the sake of a checklist, and section 69 says not to ship it if
   it adds clutter. What ships is the output: Ctrl-P on any article now produces the
   article - title, text, tables, diagrams and sources - and none of the navigation,
   because the thing worth fixing was the page that came out, not the way to ask
   for it. */
@media print{
  .sig-hdr,.sig-drawer,.sig-scrim,.kx-bar,.kx-scrim,.kx-nav,.kx-foot,
  .kx-prog,.kx-ctx,.k-sh,.k-shb,.k-try,.kx-pn,.k-toc-inline,.kx-skip{display:none!important}
  .kx-shell{display:block;padding:0}
  .kx-main{max-width:none;padding:0}
  a[href^="/"]::after{content:" (activatedigital.ai" attr(href) ")";
    font-size:10px;color:#555}
  .k-src a[href^="http"]::after{content:" " attr(href);font-size:9.5px;word-break:break-all}
  .kx-dg{break-inside:avoid;background:none;border:1px solid #ccc}
  table,figure,.k-sec{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  body{font-size:11pt;color:#000}
}