/* ==========================================================================
   JanusKS diagrams. Every drawn figure and architecture diagram is styled here,
   and its markup is in includes/diagrams/. Nothing here is Bootstrap, on purpose:
   when the theme changes, this file and those partials move across as they are.
   The brand tokens are below, so this file stands alone.
   ========================================================================== */

:root {
  /* Colour */
  --jks-paper: #F4F7F9;      /* page ground */
  --jks-white: #FFFFFF;      /* raised surface on paper */
  --jks-mist: #E6EEF3;       /* second tone step on paper */
  --jks-ink: #071E2C;        /* text and dark bands */
  --jks-ink-2: #0C2C40;      /* raised surface on dark bands */
  --jks-ink-3: #123850;      /* second tone step on dark */
  --jks-slate: #45596A;      /* secondary text on light */
  --jks-blue: #005581;       /* JanusKS blue: observed, known, "past" */
  --jks-blue-dark: #00466A;
  --jks-blue-soft: #E1EEF5;
  --jks-orange: #F47B20;     /* JanusKS orange: projected, scenario, "future" */
  --jks-orange-ink: #A64C09; /* orange for text on light grounds (AA contrast) */
  --jks-on-dark: #E9F0F5;
  --jks-on-dark-mute: #A9BFCE;
  --jks-graph-edge: #4F8DB3;    /* observed relationships on dark */
  --jks-graph-past: #0C2C40;    /* graph ground before NOW */
  --jks-graph-future: #10334A;  /* graph ground after NOW */
  --jks-graph-axis: #1D4A66;
  --jks-graph-edge-light: #7FB3D5; /* relationships on blue */
  --jks-blue-deep: #004B73;     /* second tone in industry figures */
  --jks-orange-light: #F7A35F;  /* orange text on dark */
  --jks-orange-pale: #FFD3B0;   /* orange text on blue */
  /* Colours that change with light and dark: use these for anything that sits on the page ground */
  --jks-ground: var(--jks-paper);
  --jks-surface: var(--jks-white);
  --jks-surface-hover: var(--jks-blue-soft);
  --jks-text: var(--jks-ink);
  --jks-text-mute: var(--jks-slate);
  --jks-accent: var(--jks-blue);
  --jks-future-text: var(--jks-orange-ink);
  /* Type: five working sizes plus the display */
  --jks-font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "PingFang SC", "Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK JP", "Noto Sans JP";
  --jks-font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, var(--jks-font-cjk), sans-serif;
  --jks-font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, var(--jks-font-cjk), sans-serif;
  --jks-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, var(--jks-font-cjk), monospace;
  --jks-size-small: .9375rem;   /* 15 */
  --jks-size-body: 1.0625rem;   /* 17 */
  --jks-size-lead: 1.3125rem;   /* 21 */
  --jks-size-h3: 1.5rem;        /* 24 */
  --jks-size-h2: clamp(2rem, 3.4vw, 3rem);
  --jks-size-display: clamp(2.125rem, 5.6vw, 5.25rem);
  /* Motion */
  --jks-ease: cubic-bezier(.2, .7, .2, 1);
}
/* Chinese, Japanese and Korean use the visitor's system fonts. The same character is drawn differently in each
   language, so the page's <html lang> picks the right fonts: it must change with the language shown. */
:root:lang(ja) { --jks-font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP"; }
:root:lang(ko) { --jks-font-cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR"; }
:root:lang(zh) { --jks-font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC"; }
:root:lang(zh-Hant), :root:lang(zh-TW), :root:lang(zh-HK) { --jks-font-cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC"; }

/* Dark bands, and the whole page when the system is in dark mode */
[data-bs-theme="dark"] {
  --jks-ground: var(--jks-ink);
  --jks-surface: var(--jks-ink-2);
  --jks-surface-hover: var(--jks-ink-3);
  --jks-text: var(--jks-on-dark);
  --jks-text-mute: var(--jks-on-dark-mute);
  --jks-accent: #8FC0DF;
  --jks-future-text: var(--jks-orange-light);
}
/* Whole page in dark mode: one step lighter than the dark bands, so sections stay separated by tone */
html[data-bs-theme="dark"] {
  --jks-ground: #0A2536;
  --jks-surface: var(--jks-ink-3);
  --jks-surface-hover: #1A4A68;
}


.jks-graph-figure { display: block; width: 100%; max-width: 100%; height: auto; }
.jks-graph-figure text { font-family: var(--jks-font-mono); paint-order: stroke; stroke: #0C2C40; stroke-width: 5px; stroke-linejoin: round; }
.jks-industry-fig svg text { paint-order: stroke; stroke: #005581; stroke-width: 5px; stroke-linejoin: round; }
.jks-kg-figure svg text { paint-order: stroke; stroke: #0C2C40; stroke-width: 5px; stroke-linejoin: round; }
.jks-graph-figure .sc-path { transition: opacity .35s var(--jks-ease), stroke-width .35s var(--jks-ease); }
.jks-graph-figure .sc { transition: opacity .35s var(--jks-ease); }
.jks-graph-figure [data-sc].is-dim { opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .jks-graph-figure .sc-path.is-on { animation: jks-flow 2.08s linear infinite; }
  .jks-now-ring { animation: jks-pulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes jks-flow { to { stroke-dashoffset: -26; } } /* two full dash cycles (7 + 6), so the loop is seamless */
@keyframes jks-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.25); } }
@media (max-width: 575.98px) {
  .jks-graph-figure .lbl-entity { display: none; }
}
.jks-industry-fig { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--jks-blue); overflow: hidden; }
.jks-industry-fig img, .jks-industry-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--jks-ease); }
a:hover .jks-industry-fig img, a:hover .jks-industry-fig svg { transform: scale(1.03); }
/* Product view: a real interface fragment (keeps its own UI conventions) */
.jks-ui { background: var(--jks-white); color: var(--jks-ink); font-family: var(--jks-font-body); font-size: .875rem; overflow-x: auto; }
.jks-ui-bar { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--jks-paper); font-weight: 600; }
.jks-ui-bar span:last-child { color: var(--jks-slate); font-weight: 400; }
.jks-ui-grid { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) repeat(6, minmax(0, 1fr)); }
.jks-ui-grid > div { padding: .45rem .6rem; min-height: 2.35rem; display: flex; align-items: center; }
.jks-ui-grid .h { color: var(--jks-slate); font-size: .75rem; background: var(--jks-white); padding-inline: .25rem; }
.jks-ui-grid .h.n { padding-inline: .6rem; }
@media (max-width: 575.98px) {
  .jks-ui { overflow-x: hidden; }
  .jks-ui-grid .h { font-size: .625rem; padding-inline: .1rem; }
}
.jks-ui-grid .n { font-weight: 600; line-height: 1.2; }
.jks-ui-grid > .jks-ui-bk { margin: .3rem 0; padding: 0 .55rem; font-size: .8125rem; font-weight: 600; color: #fff; background: var(--jks-blue); min-height: 1.75rem; display: block; line-height: 1.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jks-ui-grid > .jks-ui-bk.is-proj { background: transparent; color: var(--jks-orange-ink); box-shadow: inset 0 0 0 2px var(--jks-orange); }
.jks-kg-figure { background: var(--jks-ink-2); max-width: 100%; }
.jks-kg-figure svg { display: block; width: 100%; height: auto; }
.jks-kg-figure svg text { font-family: var(--jks-font-mono); }
.jks-kg-figure figcaption { padding: .9rem 1.25rem 1.1rem; font-size: var(--jks-size-small); color: var(--jks-on-dark-mute); }
/* Ingestion pipeline diagram (dark band) */
.jks-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem; }
.jks-flow > li { position: relative; display: flex; min-width: 0; }
.jks-flow > li + li::before { content: ""; position: absolute; left: -2.1rem; top: 50%; width: 1.6rem; height: 2px; background: var(--jks-graph-edge); }
.jks-flow > li + li::after { content: ""; position: absolute; left: -.95rem; top: calc(50% - 5px); width: 12px; height: 12px; border-top: 2px solid var(--jks-graph-edge); border-right: 2px solid var(--jks-graph-edge); transform: rotate(45deg); }
.jks-flow-card { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.25rem; background: var(--jks-ink-2); color: var(--jks-on-dark); text-decoration: none; transition: background-color .2s var(--jks-ease); }
a.jks-flow-card:hover { background: var(--jks-ink-3); color: var(--jks-on-dark); }
a.jks-flow-card:hover h3 { color: #8EC6E6; }
.jks-flow-card .n { font-family: var(--jks-font-mono); font-size: .8125rem; color: #8EC6E6; }
.jks-flow-card h3 { font-size: 1.1875rem; color: #fff; margin: 0; transition: color .2s; }
.jks-flow-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: var(--jks-size-small); color: var(--jks-on-dark-mute); }
.jks-flow-card ul li { position: relative; padding-left: 1rem; }
.jks-flow-card ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--jks-graph-edge); }
/* Sources sit loose and out of line: the fragmented starting point */
.jks-flow-src { background: transparent; box-shadow: inset 0 0 0 2px var(--jks-ink-3); }
.jks-flow-src ul li { width: fit-content; padding: .3rem .6rem; background: var(--jks-ink-3); color: var(--jks-on-dark); font-family: var(--jks-font-mono); font-size: .75rem; }
.jks-flow-src ul li::before { display: none; }
.jks-flow-src ul li:nth-child(2) { margin-left: .9rem; }
.jks-flow-src ul li:nth-child(3) { margin-left: .3rem; }
.jks-flow-src ul li:nth-child(4) { margin-left: 1.3rem; }
.jks-flow-out { margin: 2.5rem 0 0; max-width: none; font-size: var(--jks-size-lead); line-height: 1.45; }
.jks-flow-out { color: var(--jks-on-dark); }
.jks-flow-out a { color: #fff; text-decoration-color: var(--jks-orange); text-underline-offset: 4px; }
@media (max-width: 1199.98px) {
  .jks-flow { grid-template-columns: 1fr; gap: 2rem; }
  .jks-flow > li + li::before { left: 1.5rem; top: -1.7rem; width: 2px; height: 1.4rem; }
  .jks-flow > li + li::after { left: calc(1.5rem - 5px); top: -.95rem; transform: rotate(135deg); }
  .jks-flow-card ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
}
/* Hero figure: scattered sources resolving into one graph */
.jks-ing-figure .g-raw { stroke: var(--jks-on-dark-mute); stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; opacity: .7; }
.jks-ing-figure .g-src rect { fill: var(--jks-ink-3); stroke: var(--jks-graph-axis); stroke-width: 1.5; }
.jks-ing-figure .g-src-text { fill: var(--jks-on-dark); font-size: 13px; text-anchor: middle; }
.jks-ing-figure svg .g-src-text text { stroke: none; }
.jks-ing-figure .g-hub { fill: #fff; }
.jks-ing-figure .g-hub-ring { fill: none; stroke: var(--jks-graph-edge); stroke-width: 2; }
.jks-ing-figure .g-hub-text { fill: var(--jks-on-dark-mute); font-size: 12.5px; text-anchor: middle; }
/* ---------- Architecture diagrams (dark bands) ---------- */
.jks-dgm { --jks-gap: 8rem; max-width: 64rem; margin-inline: auto; }
.jks-node { background: var(--jks-ink-2); padding: 1.1rem 1.25rem; min-width: 0; }
.jks-node h3 { font-size: 1.125rem; color: #fff; margin: 0 0 .35rem; }
.jks-node p { margin: 0; max-width: none; font-size: var(--jks-size-small); line-height: 1.4; color: var(--jks-on-dark-mute); }
.jks-node ul { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; font-size: var(--jks-size-small); line-height: 1.35; color: var(--jks-on-dark-mute); }
.jks-node ul li { position: relative; padding-left: 1rem; }
.jks-node ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--jks-graph-edge); }
.jks-node.is-center { text-align: center; }
.jks-node.is-core { background: var(--jks-blue); }
.jks-node.is-core p { color: #D5E6F0; }
.jks-node.is-scenario { box-shadow: inset 0 0 0 2px var(--jks-orange); }
.jks-node.is-delta { background: transparent; box-shadow: inset 0 0 0 2px var(--jks-ink-3); }
.jks-node ul.jks-deploy { display: flex; justify-content: center; margin: .75rem 0 0; }
.jks-node ul.jks-deploy li { background: var(--jks-ink-3); padding: .3rem .65rem; color: var(--jks-on-dark); }
.jks-node ul.jks-deploy li::before { display: none; }
.jks-node.is-core ul.jks-deploy li { background: var(--jks-blue-deep); color: #fff; }
/* Connectors */
.jks-down { position: relative; flex: none; width: 2px; height: 2.75rem; margin-inline: auto; background: var(--jks-graph-edge); }
.jks-down::after { content: ""; position: absolute; left: -5px; bottom: 1px; width: 12px; height: 12px; border-right: 2px solid var(--jks-graph-edge); border-bottom: 2px solid var(--jks-graph-edge); transform: rotate(45deg); }
.jks-down > span, .jks-right > span { position: absolute; font-family: var(--jks-font-mono); font-size: .75rem; line-height: 1.25; color: var(--jks-on-dark-mute); }
.jks-down > span { left: .9rem; top: 50%; transform: translateY(-50%); width: max-content; max-width: 16rem; }
.jks-down.is-tall { height: 3.75rem; }
.jks-down.is-scenario { background: var(--jks-orange); }
.jks-down.is-scenario::after { border-color: var(--jks-orange); }
.jks-down.is-under-right { margin-left: calc(75% + var(--jks-gap) / 4 - 1px); }
.jks-down.is-under-right > span { left: auto; right: .9rem; text-align: right; }
.jks-right { position: relative; align-self: center; height: 2px; margin-inline: .6rem; background: var(--jks-graph-edge); }
.jks-right::after, .jks-right.is-both::before { content: ""; position: absolute; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--jks-graph-edge); border-right: 2px solid var(--jks-graph-edge); }
.jks-right::after { right: 1px; transform: rotate(45deg); }
.jks-right.is-both::before { left: 1px; transform: rotate(-135deg); }
.jks-right > span { left: 50%; bottom: .45rem; transform: translateX(-50%); white-space: nowrap; }
/* Layout pieces */
.jks-cols { display: grid; gap: .75rem; }
.jks-cols.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jks-cols.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jks-pair { display: grid; grid-template-columns: minmax(0, 1fr) var(--jks-gap) minmax(0, 1fr); }
.jks-panel { background: var(--jks-ink-2); padding: 1.25rem; }
.jks-panel > h3 { font-size: 1.125rem; color: #fff; text-align: center; margin: 0 0 1rem; }
.jks-panel .jks-node { background: var(--jks-ink-3); }
.jks-panel .jks-node ul.jks-deploy li { background: var(--jks-ink-2); }
.jks-panel .jks-down { height: 1.75rem; }
.jks-boundary { padding: clamp(1rem, 3vw, 2.25rem); border: 2px dashed var(--jks-graph-edge); }
.jks-boundary-label { font-family: var(--jks-font-mono); font-size: .8125rem; color: #8EC6E6; text-align: center; margin: 0 0 1.25rem; max-width: none; }
.jks-boundary-label { color: #8EC6E6; }
.jks-perimeter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jks-perimeter.is-one { grid-template-columns: minmax(0, 1fr); }
.jks-perimeter > div { position: relative; display: flex; align-items: center; justify-content: center; min-height: 4.25rem; text-align: center; }
.jks-perimeter > div::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed var(--jks-orange); }
.jks-perimeter span { position: relative; background: var(--jks-ink); padding: .25rem .6rem; font-family: var(--jks-font-mono); font-size: .75rem; line-height: 1.3; color: var(--jks-orange-light); }
.jks-outside { color: var(--jks-on-dark-mute); border-top: 6px double var(--jks-orange); padding-top: .9rem; margin: 0; max-width: none; text-align: center; font-family: var(--jks-font-mono); font-size: .8125rem; }
.jks-dgm-note { color: var(--jks-on-dark-mute); margin: 1.25rem 0 0; max-width: none; text-align: center; font-size: var(--jks-size-small); }
/* Knowledge Graph and Recommendations: variations on the pipeline diagram */
@media (min-width: 1200px) {
  .jks-flow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.jks-flow > li.is-split { flex-direction: column; gap: .75rem; }
.jks-flow-card.is-out { background: var(--jks-blue); }
.jks-flow-card.is-out .n { color: #D5E6F0; }
.jks-flow-card.is-out ul { color: #D5E6F0; }
.jks-flow-card.is-out ul li::before { background: #fff; }
.jks-flow-card > p { margin: 0; font-size: var(--jks-size-small); color: var(--jks-on-dark-mute); }
/* Insights: scrubber and overlay */
.jks-overlay { background: var(--jks-ink-2); padding: clamp(1.25rem, 3vw, 2rem); }
.jks-overlay > h3 { font-size: 1.125rem; margin: 0 0 1.25rem; }
.jks-scrub { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.jks-scrub .track { position: relative; flex: 1; height: 4px; background: var(--jks-ink-3); }
.jks-scrub .track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--jks-graph-edge); }
.jks-scrub .track::after { content: ""; position: absolute; left: 38%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--jks-blue); }
.jks-scrub .live { flex: none; padding: .2rem .55rem; background: var(--jks-orange); color: var(--jks-ink); font-family: var(--jks-font-mono); font-size: .75rem; font-weight: 500; }
.jks-vs h4 { font-size: var(--jks-size-small); font-weight: 600; letter-spacing: 0; margin: 0 0 .85rem; color: #8EC6E6; }
.jks-vs .is-now h4 { color: var(--jks-orange-light); }
.jks-vs dl { display: grid; gap: .8rem; margin: 0; }
.jks-vs dt { font-weight: 400; font-size: var(--jks-size-small); line-height: 1.3; color: var(--jks-on-dark-mute); }
.jks-vs dd { margin: .1rem 0 0; font-family: var(--jks-font-display); font-weight: 600; font-size: clamp(1.1875rem, 2.4vw, 1.625rem); line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
/* Scenario Planning: live line and branches */
.jks-live { position: relative; padding-bottom: 1rem; }
.jks-live .lbl { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--jks-font-mono); font-size: .8125rem; color: var(--jks-on-dark); margin-bottom: .6rem; }
.jks-live .lbl b { font-weight: 500; color: #8EC6E6; flex: none; }
.jks-live-bar { position: relative; height: 4px; background: var(--jks-graph-edge); }
.jks-live-bar::after { content: ""; position: absolute; right: 1px; top: -6px; width: 16px; height: 16px; border-top: 4px solid var(--jks-graph-edge); border-right: 4px solid var(--jks-graph-edge); transform: rotate(45deg); }
.jks-branch .jks-cols { gap: clamp(.75rem, 3vw, 2.5rem); margin-top: -1rem; }
.jks-branch .jks-cols > div { display: flex; flex-direction: column; }
.jks-branch .jks-cols .jks-down:first-child { height: 4rem; }
.jks-branch .jks-cols .jks-node { flex: 1; }
/* Fan-out from one engine to many tools, inside an article column */
.jks-fan { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem minmax(0, 1fr); align-items: center; background: var(--jks-ink); color: var(--jks-on-dark); padding: clamp(1rem, 3vw, 1.75rem); margin: 2rem 0; }
.jks-fan ul { list-style: none; padding: 0 0 0 1.25rem; margin: 0; display: grid; gap: .5rem; box-shadow: inset 2px 0 0 var(--jks-graph-edge); }
.jks-fan ul li { position: relative; background: var(--jks-ink-2); padding: .55rem .8rem; font-family: var(--jks-font-display); font-weight: 600; font-size: var(--jks-size-small); color: #fff; }
.jks-fan ul li::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; height: 2px; background: var(--jks-graph-edge); }
.jks-fan .jks-right { margin-inline: .6rem 0; }
@media (max-width: 767.98px) {
  .jks-dgm { --jks-gap: 3.5rem; }
  .jks-node { padding: .85rem .8rem; }
  .jks-node h3 { font-size: 1rem; }
  .jks-node p, .jks-node ul { font-size: .875rem; }
  .jks-fan { grid-template-columns: minmax(0, 1fr); }
  .jks-fan .jks-right { justify-self: center; align-self: auto; width: 2px; height: 3rem; margin: 0; }
  .jks-fan .jks-right::after { right: auto; left: -5px; top: auto; bottom: 1px; transform: rotate(135deg); }
  .jks-fan .jks-right > span { left: .9rem; bottom: auto; top: 50%; transform: translateY(-50%); }
  .jks-fan ul { padding: 0; box-shadow: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jks-fan ul li::before { display: none; }
}
@media (max-width: 575.98px) {
  .jks-cols.is-3 { grid-template-columns: minmax(0, 1fr); }
  .jks-right > span { font-size: .6875rem; }
  .jks-down > span { max-width: 9rem; font-size: .6875rem; }
  /* In two columns, arrows sit left so their labels fit inside the column */
  .jks-cols.is-2 .jks-down { margin-left: 1rem; }
  .jks-cols.is-2 .jks-down > span { left: .7rem; max-width: none; }
}
/* Hero figures on the Trust pages and the rest of the Platform pages */
.jks-kg-figure .g-zone { fill: none; stroke: var(--jks-graph-edge); stroke-width: 2; stroke-dasharray: 8 6; }
.jks-kg-figure .g-zone-fill { fill: var(--jks-ink-3); }
.jks-kg-figure .g-zone-text { fill: #8EC6E6; font-size: 13px; }
.jks-kg-figure .g-out { stroke: var(--jks-orange); stroke-width: 2; stroke-dasharray: 5 6; fill: none; }
.jks-kg-figure .g-x { stroke: var(--jks-orange); stroke-width: 3; fill: none; }
.jks-kg-figure .g-out-text { fill: var(--jks-orange-light); font-size: 13px; }
.jks-kg-figure .g-mute-text { fill: var(--jks-on-dark-mute); font-size: 13px; }
.jks-kg-figure .g-mute-box { fill: none; stroke: var(--jks-graph-axis); stroke-width: 2; }
.jks-kg-figure .g-axis { stroke: var(--jks-graph-axis); stroke-width: 2; fill: none; }
.jks-kg-figure .g-base { stroke: var(--jks-on-dark-mute); stroke-width: 2; stroke-dasharray: 3 6; fill: none; }
.jks-kg-figure .g-actual { stroke: var(--jks-graph-edge); stroke-width: 3; fill: none; }
.jks-kg-figure .g-live { stroke: var(--jks-graph-edge); stroke-width: 5; fill: none; }
.jks-kg-figure .g-scrub { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 5; }
.jks-kg-figure .g-handle { fill: #fff; stroke: var(--jks-blue); stroke-width: 4; }
.jks-kg-figure .g-actual-thin { stroke: var(--jks-graph-edge); stroke-width: 2.5; fill: none; }
.jks-kg-figure .g-face-past, .jks-kg-figure .g-face-future { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.jks-kg-figure .g-face-past { stroke: #8EC6E6; }
.jks-kg-figure .g-face-future { stroke: var(--jks-orange); }
.jks-kg-figure .g-led { fill: var(--jks-graph-edge); }
.jks-kg-figure .g-ping { fill: none; stroke: var(--jks-on-dark-mute); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 30; opacity: .75; }
.jks-kg-figure .g-root { fill: var(--jks-orange); }
.jks-kg-figure .g-root-ring { fill: none; stroke: var(--jks-orange); stroke-width: 2; }
.jks-kg-figure svg .g-plain text, .jks-kg-figure svg text.g-plain { stroke: none; }
/* ==========================================================================
   Drawn figures: every colour lives here, not in the HTML
   ========================================================================== */
/* Hero scenario graph */
.jks-graph-figure .g-past-bg { fill: var(--jks-graph-past); }
.jks-graph-figure .g-future-bg { fill: var(--jks-graph-future); }
.jks-graph-figure .g-axis { stroke: var(--jks-graph-axis); }
.jks-graph-figure .g-axis-main { stroke-width: 2; }
.jks-graph-figure .g-ticks text { fill: var(--jks-on-dark-mute); font-size: 15px; text-anchor: middle; }
.jks-graph-figure .g-now-line { stroke: var(--jks-on-dark); stroke-width: 1.5; stroke-dasharray: 3 6; }
.jks-graph-figure .g-now-text { fill: #fff; font-size: 15px; font-weight: 500; text-anchor: middle; }
.jks-graph-figure .g-edges { stroke: var(--jks-graph-edge); stroke-width: 2; fill: none; }
.jks-graph-figure .sc-path { fill: none; stroke: var(--jks-orange); stroke-width: 1.5; stroke-dasharray: 7 6; }
.jks-graph-figure .sc-path.is-on { stroke-width: 3; }
.jks-graph-figure .g-sc-node { fill: var(--jks-graph-past); stroke: var(--jks-orange); stroke-width: 2.5; }
.jks-graph-figure .g-sc-label { fill: var(--jks-on-dark); font-size: 15px; }
.jks-graph-figure .g-nodes { fill: var(--jks-ink); stroke: var(--jks-on-dark); stroke-width: 2.5; }
.jks-graph-figure .g-labels { fill: var(--jks-on-dark-mute); font-size: 15px; }
.jks-graph-figure .jks-now-ring { fill: none; stroke: var(--jks-orange); stroke-width: 2; }
.jks-graph-figure .g-now-dot { fill: #fff; }
.jks-graph-figure .sc-left.is-dim { opacity: 0; }
.jks-graph-figure .sc-ring { fill: none; stroke: var(--jks-orange); stroke-width: 2.5; }
.jks-graph-figure .sc-status { fill: var(--jks-orange-light); font-size: 15px; }
.jks-graph-figure .is-ok .sc-path { stroke: #8EC6E6; }
.jks-graph-figure .is-ok .sc-ring { stroke: #8EC6E6; }
.jks-graph-figure .is-ok .sc-status { fill: #8EC6E6; }
.jks-graph-figure .g-side { fill: var(--jks-on-dark-mute); font-size: 14px; }
/* Industry figures (stand-ins until photography is added) */
.jks-industry-fig .m-bg { fill: var(--jks-blue); }
.jks-industry-fig .m-bg-2 { fill: var(--jks-blue-deep); }
.jks-industry-fig .m-art { fill: none; stroke: #fff; stroke-opacity: .09; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.jks-industry-fig .m-edge { stroke: var(--jks-graph-edge-light); stroke-width: 2; }
.jks-industry-fig .m-edge-proj { stroke: var(--jks-orange); stroke-width: 2; stroke-dasharray: 6 5; }
.jks-industry-fig .m-node { fill: var(--jks-blue); stroke: #fff; stroke-width: 2.5; }
.jks-industry-fig .m-node-proj { fill: var(--jks-orange); stroke: #fff; stroke-width: 2.5; }
.jks-industry-fig text { font-family: var(--jks-font-mono); font-size: 14px; text-anchor: middle; }
.jks-industry-fig .m-label { fill: #fff; }
.jks-industry-fig .m-label-proj { fill: var(--jks-orange-pale); }
/* Knowledge Graph page figure */
.jks-kg-figure .g-edges { stroke: var(--jks-graph-edge); stroke-width: 2; fill: none; }
.jks-kg-figure .g-proj { stroke: var(--jks-orange); stroke-width: 2.5; stroke-dasharray: 7 6; fill: none; }
.jks-kg-figure .g-rel { fill: var(--jks-on-dark-mute); font-size: 12.5px; }
.jks-kg-figure .g-rel .g-rel-proj { fill: var(--jks-orange-light); }
.jks-kg-figure .g-nodes { fill: var(--jks-ink); stroke: var(--jks-on-dark); stroke-width: 2.5; }
.jks-kg-figure .g-node-proj { fill: var(--jks-ink); stroke: var(--jks-orange); stroke-width: 2.5; }
.jks-kg-figure .g-ent { fill: #fff; font-size: 14px; }
/* Product view: placement classes instead of inline styles */
.jks-ui-grid .row-2 { grid-row: 2; }
.jks-ui-grid .row-3 { grid-row: 3; }
.jks-ui-grid .row-4 { grid-row: 4; }
.jks-ui-grid .row-5 { grid-row: 5; }
.jks-ui-grid .start-2 { grid-column-start: 2; }
.jks-ui-grid .start-3 { grid-column-start: 3; }
.jks-ui-grid .start-4 { grid-column-start: 4; }
.jks-ui-grid .start-5 { grid-column-start: 5; }
.jks-ui-grid .span-2 { grid-column-end: span 2; }
.jks-ui-grid .span-3 { grid-column-end: span 3; }
.jks-ui-grid .span-4 { grid-column-end: span 4; }


/* Home page scenario picker and outcome */
.jks-outcome .delta { font-family: var(--jks-font-display); font-weight: 600; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--jks-orange); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.jks-outcome .delta small { display: block; font-size: var(--jks-size-small); font-weight: 500; letter-spacing: 0; color: var(--jks-on-dark-mute); margin-top: .4rem; }
.jks-outcome p { margin: 0; color: var(--jks-on-dark); font-size: var(--jks-size-lead); line-height: 1.45; }

/* Platform strip */
.jks-tense { display: flex; justify-content: space-between; font-size: var(--jks-size-small); font-weight: 600; color: var(--jks-accent); margin-bottom: .9rem; }
.jks-tense .future { color: var(--jks-future-text); }
.jks-pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.jks-pipeline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--jks-blue) 0 60%, var(--jks-orange) 60% 100%); }
.jks-step { position: relative; padding: 2rem 1.5rem 0 0; text-decoration: none; color: var(--jks-text); display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.jks-step::after { content: ""; position: absolute; top: -6px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--jks-ground); box-shadow: inset 0 0 0 3px var(--jks-blue); transition: background-color .2s, transform .2s var(--jks-ease); }
.jks-step:nth-child(n+4)::after { box-shadow: inset 0 0 0 3px var(--jks-orange); }
.jks-step h3 { font-size: 1.3125rem; margin: 0; transition: color .2s; }
.jks-step p { font-size: var(--jks-size-small); color: var(--jks-text-mute); margin: 0; }
.jks-step .icon-link { font-family: var(--jks-font-display); font-size: var(--jks-size-small); font-weight: 600; color: var(--jks-accent); margin-top: .5rem; }
/* Desktop: titles, descriptions and links share rows, so they line up across the steps */
@media (min-width: 992px) {
  .jks-pipeline { grid-template-rows: auto auto auto; }
  .jks-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .6rem; }
}
.jks-step:hover { color: var(--jks-text); }
.jks-step:hover h3 { color: var(--jks-accent); }
.jks-step:hover::after { background: var(--jks-blue); transform: scale(1.15); }
.jks-step:nth-child(n+4):hover::after { background: var(--jks-orange); }
.jks-step.is-current::after { background: var(--jks-blue); }
.jks-step.is-current h3 { color: var(--jks-accent); }
@media (max-width: 991.98px) {
  .jks-pipeline { grid-template-columns: 1fr; gap: 0; }
  .jks-pipeline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--jks-blue) 0 60%, var(--jks-orange) 60% 100%); }
  .jks-step { padding: 0 0 2rem 2.25rem; }
  .jks-step::after { top: .3rem; left: 0; }
  .jks-tense { display: none; }
}
/* The pipeline line is the one place a gradient is used: it is the past/future hand-over, not decoration. */
article .jks-step p, article .jks-step .icon-link { display: none; }
article .jks-step h3 { font-size: 1.0625rem; }
article .jks-step { padding-right: .75rem; }

/* Code examples */
.jks-ontology { background: var(--jks-ink); color: var(--jks-on-dark); padding: 1.5rem; overflow-x: auto; margin: 2rem 0; }
.jks-ontology pre { margin: 0; color: inherit; font-family: var(--jks-font-mono); font-size: .875rem; line-height: 1.9; white-space: pre; }
.jks-ontology .c { color: #7F9AAE; }
.jks-ontology .s { color: #8EC6E6; }
.jks-ontology .p { color: var(--jks-on-dark-mute); }
.jks-ontology .o { color: #fff; }
.jks-ontology .t { color: var(--jks-orange); }

/* Chips inside diagrams */
.jks-deploy { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2rem 0 0; list-style: none; }
.jks-deploy li { font-size: var(--jks-size-small); font-weight: 600; padding: .45rem .8rem; background: var(--jks-ink-2); color: var(--jks-on-dark); }

/* World map on Global Offices */
.jks-world { display: block; width: 100%; height: auto; }
.jks-world .m-dots { fill: none; stroke: var(--jks-graph-edge); stroke-opacity: .55; stroke-width: 5.5; stroke-linecap: round; }
.jks-world .m-office { fill: var(--jks-orange); }
.jks-world .m-ring { fill: var(--jks-orange); fill-opacity: .25; }
.jks-world text { fill: #fff; font-family: var(--jks-font-mono); font-size: 20px; paint-order: stroke; stroke: var(--jks-ink); stroke-width: 6px; stroke-linejoin: round; }