/* ============================================================
   Kodiac · v4 visual system (design test, homepage only)
   Structure from v3; roughly a quarter of v2's confidence.
   Light, spacious, black type, electric blue as the brand colour,
   acid lime only for live agentic activity and the dark CTA.
   Display type (Archivo, condensed) only for pivotal statements,
   section dividers and numbers. Everything read is Inter.
   No pills, no glass, no gradients, few cards, custom icons.
   ============================================================ */

:root {
  --p:     #FFFFFF;
  --p2:    #F4F5F7;
  --ink:   #0A0B0D;
  --dk2:   #15171C;
  --t2:    #4A4D55;   /* secondary on white 8.3:1 */
  --t3:    #7C7F87;   /* labels and metadata only */
  --ln:    rgba(10,11,13,0.12);
  --ln2:   rgba(10,11,13,0.30);
  --ln-d:  rgba(255,255,255,0.16);
  --blue:  #1D4FFF;   /* white on blue 5.6:1 */
  --blue-d:#1436C7;
  --blue-l:#7A96FF;   /* blue as text on ink 7.4:1 */
  --lime:  #C6FF3D;   /* ink on lime 16:1 · lime on ink 16:1 */
  --f:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fd: 'Archivo', 'Inter', system-ui, sans-serif;
  --pad: clamp(20px, 4vw, 48px);
  --nav: 72px;
  --r:  10px;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.v4 { margin: 0; background: var(--p); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h6, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display face: Archivo, narrowed, heavy. Short statements only. */
.d { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; letter-spacing: -0.02em; line-height: 0.98; text-wrap: balance; }

/* ------------------------------------------------------------
   Logo and icon family
   ------------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mark { width: 22px; height: 22px; flex-shrink: 0; }
/* The three layers, top to bottom: your enterprise, Kodiac, the agentic web */
.mark rect { fill: currentColor; }
.mark .mid { fill: var(--blue); }
.mark .bot { fill: var(--lime); }
.s--dark .mark .mid { fill: var(--blue-l); }
.wordmark { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }
/* Icons: one geometric weight, square caps, currentColor */
.ic { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; fill: none; }
.ic .f { fill: currentColor; stroke: none; }
.ic--lg { width: 36px; height: 36px; }

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav); z-index: 100; display: flex; align-items: center; gap: 40px; padding: 0 var(--pad); background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--ln); color: var(--ink); }
/* Site-wide header from the homepage build (1 October 2026): blue call-to-action button. */
.nav .b--sm.k-navbtn { background: var(--blue); border-color: var(--blue); color: #FFFFFF; min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.nav .b--sm.k-navbtn:hover { background: #1436C7; border-color: #1436C7; }
.nav__links { display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0; }
.nav__link { font-size: 14px; font-weight: 500; color: var(--t2); text-decoration: none; padding: 6px 0; transition: color 0.15s; }
.nav__link:hover, .nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link { color: var(--ink); }
.nav__item { position: relative; display: flex; align-items: center; height: var(--nav); }
.nav__cta { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.panel { position: absolute; left: -16px; top: calc(100% - 6px); width: 600px; padding: 8px; background: var(--p); border: 1px solid var(--ln); border-radius: 12px; box-shadow: 0 16px 48px rgba(10,11,13,0.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.nav__item:hover .panel, .nav__item:focus-within .panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.panel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.panel__item { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; text-decoration: none; padding: 12px 14px; border-radius: 8px; transition: background 0.15s; }
.panel__item:hover { background: var(--p2); }
.panel__item .ic { width: 24px; height: 24px; margin-top: 2px; color: var(--blue); }
.panel__item b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.panel__item small { display: block; margin-top: 2px; font-size: 13px; color: var(--t2); line-height: 1.4; }
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.burger { display: none; width: 40px; height: 40px; margin-left: auto; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform 0.25s ease, top 0.25s ease; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 24px; }
@media (max-width: 960px) {
  .nav { gap: 16px; }
  .burger { display: block; }
  .nav__links, .nav__cta { display: none; }
  .menu-toggle:checked ~ .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: var(--nav); left: 0; right: 0; bottom: 80px; background: var(--p); overflow-y: auto; padding: 12px var(--pad) 24px; }
  .menu-toggle:checked ~ .nav__cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; padding: 16px var(--pad); background: var(--p); border-top: 1px solid var(--ln); justify-content: space-between; }
  .menu-toggle:checked ~ .burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .menu-toggle:checked ~ .burger span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
  .nav__item { display: block; height: auto; }
  .nav__link { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--ln); }
  .panel { position: static; width: auto; padding: 4px 0 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .panel__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Sections, wrap, dividers
   ------------------------------------------------------------ */
.s { padding: clamp(72px, 9vw, 128px) 0; }
.s--soft { background: var(--p2); }
.s--dark { background: var(--ink); color: #FFFFFF; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.head { max-width: 46em; }
/* Section divider: number and label in the display face, then a rule */
.div { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
.div::after { content: ''; flex: 1; height: 1px; background: var(--ln); }
.s--dark .div { color: rgba(255,255,255,0.55); } .s--dark .div::after { background: var(--ln-d); }
.div b { color: var(--blue); font-weight: 700; } .s--dark .div b { color: var(--blue-l); }

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.s--dark .eyebrow { color: var(--blue-l); }
/* For the few sections whose brief asks for a neutral, not blue, section label */
.eyebrow--neutral { color: var(--t3); }
.s--dark .eyebrow--neutral { color: rgba(255,255,255,0.55); }
.h1 { font-size: clamp(46px, 6.6vw, 96px); }
.h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.st { font-size: clamp(40px, 5.6vw, 80px); }            /* pivotal statement */
.st--s { font-size: clamp(30px, 3.6vw, 52px); }         /* smaller statement */
.h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--t2); margin-top: 22px; max-width: 34em; }
.s--dark .lead { color: rgba(255,255,255,0.72); }
.strong { font-size: 18px; font-weight: 600; line-height: 1.4; margin-top: 18px; }
.fine { font-size: 14px; line-height: 1.5; color: var(--t3); margin-top: 14px; }
.s--dark .fine { color: rgba(255,255,255,0.55); }
.body { font-size: 15px; line-height: 1.55; color: var(--t2); }
.s--dark .body { color: rgba(255,255,255,0.7); }
.blue { color: var(--blue); } .s--dark .blue { color: var(--blue-l); }
.lime { color: var(--lime); }
.num { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; letter-spacing: -0.02em; line-height: 0.9; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Buttons and links: square-cornered, no pills
   ------------------------------------------------------------ */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 8px; background: var(--ink); color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid var(--ink); transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.b:hover { background: #24272E; border-color: #24272E; transform: translateY(-1px); }
.b:active { transform: translateY(0); }
.b--blue { background: var(--blue); border-color: var(--blue); }
.b--blue:hover { background: var(--blue-d); border-color: var(--blue-d); }
.b--line { background: transparent; color: var(--ink); border-color: var(--ln2); }
.b--line:hover { background: var(--p2); border-color: var(--ink); }
.b--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.b--lime:hover { background: #D6FF6B; border-color: #D6FF6B; }
.b--sm { padding: 9px 14px; font-size: 14px; border-radius: 7px; }
.s--dark .b--line { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.s--dark .b--line:hover { background: rgba(255,255,255,0.08); border-color: #FFFFFF; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 15px; font-weight: 600; text-decoration: none; }
.link::after { content: '\2192'; transition: transform 0.15s; }
.link:hover::after { transform: translateX(3px); }
.s--dark .link { color: var(--blue-l); }

/* Live indicator: the one place lime appears on light fields */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); }
.live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); }
/* The ring is carried by the loop, not by a permanent pulse: it rests invisible */
.live i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; }
.is-live .live i::after, .live.is-live i::after { animation: livePulse 10.8s ease-out infinite; }
.s--dark .live { color: rgba(255,255,255,0.7); } .s--dark .live i { box-shadow: 0 0 0 1.5px var(--ink); }
/* A single pulse once all three routes have run, at 8.6s of the 10.8s sequence */
@keyframes livePulse {
  0%, 79.63% { transform: scale(0.6); opacity: 0; }
  80.6% { opacity: 0.9; }
  85.19%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero { padding-top: calc(var(--nav) + clamp(56px, 8vw, 104px)); padding-bottom: clamp(56px, 7vw, 96px); }
/* A white section straight after the hero: let the hero padding alone set the gap, so the two paddings do not stack into dead space. */
.hero + .s:not(.s--soft):not(.s--dark) { padding-top: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__fig { position: relative; }
.hero__fig figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--t3); }
.hero__fig figcaption .live { white-space: nowrap; }

/* ------------------------------------------------------------
   Device 2: the connection layer
   Customers and agents on the left, Kodiac in the middle,
   the enterprise on the right. Signals run along the lines.
   ------------------------------------------------------------ */
.conn { width: 100%; height: auto; font-family: var(--f); }
.conn .box { fill: var(--p); stroke: var(--ink); stroke-width: 1.5; }
.s--soft .conn .box { fill: var(--p); }
.conn .kod { fill: var(--blue); }
.conn .lbl { font-size: 15px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }
.conn .sub { font-size: 11px; font-weight: 500; fill: var(--t3); letter-spacing: 0.06em; text-transform: uppercase; }
.conn .k-title { font-size: 26px; font-weight: 700; fill: #FFFFFF; letter-spacing: -0.02em; }
.conn .k-sub { font-size: 11px; font-weight: 600; fill: rgba(255,255,255,0.75); letter-spacing: 0.08em; text-transform: uppercase; }
.conn .k-row { font-size: 14px; font-weight: 600; fill: #FFFFFF; }
.conn .k-rule { stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.conn .ico { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: square; fill: none; }
.conn .ico-w { stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: square; fill: none; }
.conn .wire { fill: none; stroke: var(--ln2); stroke-width: 1.5; }
/* Connection layer. The dashed connectors are the static routes and never move:
   that is the diagram with no JavaScript, off screen and under reduced motion.
   `is-live` runs a 10.8s sequence over the top, one route at a time: a lime
   marker travels from a box into Kodiac, two capabilities light in turn, the
   marker carries on to the matching system, then a smaller, dimmer marker
   returns the same way. Routes run in order, the live dot pulses once, rest. */
.conn .sig { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 5 15; stroke-linecap: square; }

/* The marker: a lime core on the hairline-ink treatment the live dot already
   uses, over a soft lime halo, so it stays legible on the white field */
.conn .mk { opacity: 0; }
.conn .mk__halo { fill: var(--lime); opacity: 0.34; }
.conn .mk__core { fill: var(--lime); stroke: var(--ink); stroke-width: 1.2; }
/* The marker is drawn in user units, so it shrinks with the SVG. These steps keep
   it around 7-10px on screen from 1440px down to 390px. The circles sit at 0,0,
   so scaling them is about their own centre and does not disturb the route path. */
.conn { --mkS: 1; }
.conn .mk__core, .conn .mk__halo { transform: scale(var(--mkS)); }
@media (max-width: 1100px) and (min-width: 901px) { .conn--hero { --mkS: 1.2; } }
@media (max-width: 1000px) { .conn--full { --mkS: 1.3; } }
@media (max-width: 760px) { .conn--full { --mkS: 1.8; } }
@media (max-width: 560px) { .conn--full { --mkS: 2.6; } }
@media (max-width: 480px) { .conn--hero { --mkS: 1.4; } }
/* Route geometry: box edge to panel edge, then panel edge to box edge */
.conn--hero { --ax: 170px; --bx: 225px; --cx: 375px; --dx: 430px; }
.conn--full { --ax: 250px; --bx: 380px; --cx: 620px; --dx: 750px; }
.conn--hero .mk1 { --ay: 68px; --cy: 68px; }
.conn--hero .mk2 { --ay: 180px; --cy: 180px; }
.conn--hero .mk3 { --ay: 292px; --cy: 292px; }
.conn--full .mk1 { --ay: 136px; --cy: 94px; }
.conn--full .mk2 { --ay: 280px; --cy: 286px; }
.conn--full .mk3 { --ay: 424px; --cy: 478px; }
/* Capability response: the same lime as the signal, a soft wash with a hairline
   edge behind the row, so the marker's colour carries through the panel.
   The row itself is never dimmed. */
.conn .krow__bg { fill: var(--lime); fill-opacity: 0.2; stroke: var(--lime); stroke-opacity: 0.9; stroke-width: 1.5; opacity: 0; }

.is-live .conn .mk1 { animation: mkRun 10.8s linear 1s infinite; }
.is-live .conn .mk2 { animation: mkRun 10.8s linear 3.5s infinite; }
.is-live .conn .mk3 { animation: mkRun 10.8s linear 6s infinite; }
.is-live .conn .r1 .krow__bg { animation: actA 10.8s ease-in-out infinite; }
.is-live .conn .r2 .krow__bg { animation: actC 10.8s ease-in-out infinite; }
.is-live .conn .r3 .krow__bg { animation: actG 10.8s ease-in-out infinite; }
.is-live .conn .r4 .krow__bg { animation: actW 10.8s ease-in-out infinite; }
.is-live .conn .r1 .k-sub { animation: subA 10.8s ease-in-out infinite; }
.is-live .conn .r2 .k-sub { animation: subC 10.8s ease-in-out infinite; }
.is-live .conn .r3 .k-sub { animation: subG 10.8s ease-in-out infinite; }
.is-live .conn .r4 .k-sub { animation: subW 10.8s ease-in-out infinite; }
.is-live .conn .r1 .ico-w { animation: icoA 10.8s ease-in-out infinite; }
.is-live .conn .r2 .ico-w { animation: icoC 10.8s ease-in-out infinite; }
.is-live .conn .r3 .ico-w { animation: icoG 10.8s ease-in-out infinite; }
.is-live .conn .r4 .ico-w { animation: icoW 10.8s ease-in-out infinite; }
.is-paused .conn .mk, .is-paused .conn .krow__bg, .is-paused .conn .k-sub, .is-paused .conn .ico-w, .is-paused .live i::after, .live.is-paused i::after { animation-play-state: paused; }
/* Agent-first diagrams (.conn--agent): every route lands on the Agent row first,
   then the Content row it answers from. Audit and Workspace hold still. */
.is-live .conn--agent .r1 .krow__bg { animation-name: actP; }
.is-live .conn--agent .r2 .krow__bg { animation-name: actS; }
.is-live .conn--agent .r3 .krow__bg, .is-live .conn--agent .r4 .krow__bg { animation: none; }
.is-live .conn--agent .r1 .k-sub { animation-name: subP; }
.is-live .conn--agent .r2 .k-sub { animation-name: subS; }
.is-live .conn--agent .r3 .k-sub, .is-live .conn--agent .r4 .k-sub { animation: none; }
.is-live .conn--agent .r1 .ico-w { animation-name: icoP; }
.is-live .conn--agent .r2 .ico-w { animation-name: icoS; }
.is-live .conn--agent .r3 .ico-w, .is-live .conn--agent .r4 .ico-w { animation: none; }
@keyframes actP { 0%, 14.81% { opacity: 0; } 17.13%, 18.98% { opacity: 1; } 22.22%, 37.96% { opacity: 0; } 40.28%, 42.13% { opacity: 1; } 45.37%, 61.11% { opacity: 0; } 63.43%, 65.28% { opacity: 1; } 68.52%, 100% { opacity: 0; } }
@keyframes actS { 0%, 18.52% { opacity: 0; } 20.83%, 22.69% { opacity: 1; } 25.93%, 41.67% { opacity: 0; } 43.98%, 45.83% { opacity: 1; } 49.07%, 64.81% { opacity: 0; } 67.13%, 69% { opacity: 1; } 72.22%, 100% { opacity: 0; } }
@keyframes icoP { 0%, 14.81% { stroke: #FFFFFF; } 17.13%, 18.98% { stroke: #C6FF3D; } 22.22%, 37.96% { stroke: #FFFFFF; } 40.28%, 42.13% { stroke: #C6FF3D; } 45.37%, 61.11% { stroke: #FFFFFF; } 63.43%, 65.28% { stroke: #C6FF3D; } 68.52%, 100% { stroke: #FFFFFF; } }
@keyframes icoS { 0%, 18.52% { stroke: #FFFFFF; } 20.83%, 22.69% { stroke: #C6FF3D; } 25.93%, 41.67% { stroke: #FFFFFF; } 43.98%, 45.83% { stroke: #C6FF3D; } 49.07%, 64.81% { stroke: #FFFFFF; } 67.13%, 69% { stroke: #C6FF3D; } 72.22%, 100% { stroke: #FFFFFF; } }
@keyframes subP { 0%, 14.81% { fill: rgba(255,255,255,0.75); } 17.13%, 18.98% { fill: #FFFFFF; } 22.22%, 37.96% { fill: rgba(255,255,255,0.75); } 40.28%, 42.13% { fill: #FFFFFF; } 45.37%, 61.11% { fill: rgba(255,255,255,0.75); } 63.43%, 65.28% { fill: #FFFFFF; } 68.52%, 100% { fill: rgba(255,255,255,0.75); } }
@keyframes subS { 0%, 18.52% { fill: rgba(255,255,255,0.75); } 20.83%, 22.69% { fill: #FFFFFF; } 25.93%, 41.67% { fill: rgba(255,255,255,0.75); } 43.98%, 45.83% { fill: #FFFFFF; } 49.07%, 64.81% { fill: rgba(255,255,255,0.75); } 67.13%, 69% { fill: #FFFFFF; } 72.22%, 100% { fill: rgba(255,255,255,0.75); } }

/* One route, 2.6s: out 0 to 0.6s, Kodiac 0.6 to 0.95s, on to the system 0.95 to
   1.55s, then the quieter return 1.8 to 2.6s. Position jumps happen at opacity 0. */
@keyframes mkRun {
  0% { transform: translate(var(--ax), var(--ay)) scale(1); opacity: 0; }
  1% { opacity: 1; }
  4.6% { opacity: 1; }
  5.56% { transform: translate(var(--bx), var(--ay)) scale(1); opacity: 0; }
  8.8% { transform: translate(var(--cx), var(--cy)) scale(1); opacity: 0; }
  9.8% { opacity: 1; }
  13.4% { opacity: 1; }
  14.35% { transform: translate(var(--dx), var(--cy)) scale(1); opacity: 0; }
  16.67% { transform: translate(var(--dx), var(--cy)) scale(0.74); opacity: 0; }
  17.6% { opacity: 0.6; }
  19.4% { opacity: 0.6; }
  20.37% { transform: translate(var(--cx), var(--cy)) scale(0.74); opacity: 0; }
  21.3% { transform: translate(var(--bx), var(--ay)) scale(0.74); opacity: 0; }
  22.2% { opacity: 0.6; }
  23.2% { opacity: 0.6; }
  24.07% { transform: translate(var(--ax), var(--ay)) scale(0.74); opacity: 0; }
  100% { transform: translate(var(--ax), var(--ay)) scale(1); opacity: 0; }
}
/* Audit 1.6s, Content 2.0s and 4.1s, Agent 4.5s and 6.6s, Workspace 7.0s:
   the pair on each route is 400ms apart and the response walks down the panel */
@keyframes actA { 0%, 14.81% { opacity: 0; } 17.13%, 18.98% { opacity: 1; } 22.22%, 100% { opacity: 0; } }
@keyframes actC { 0%, 18.52% { opacity: 0; } 20.83%, 22.69% { opacity: 1; } 25.93%, 37.96% { opacity: 0; } 40.28%, 42.13% { opacity: 1; } 45.37%, 100% { opacity: 0; } }
@keyframes actG { 0%, 41.67% { opacity: 0; } 43.98%, 45.83% { opacity: 1; } 49.07%, 61.11% { opacity: 0; } 63.43%, 65.28% { opacity: 1; } 68.52%, 100% { opacity: 0; } }
@keyframes actW { 0%, 64.81% { opacity: 0; } 67.13%, 69% { opacity: 1; } 72.22%, 100% { opacity: 0; } }
/* The active capability's icon takes the signal's own lime */
@keyframes icoA { 0%, 14.81% { stroke: #FFFFFF; } 17.13%, 18.98% { stroke: #C6FF3D; } 22.22%, 100% { stroke: #FFFFFF; } }
@keyframes icoC { 0%, 18.52% { stroke: #FFFFFF; } 20.83%, 22.69% { stroke: #C6FF3D; } 25.93%, 37.96% { stroke: #FFFFFF; } 40.28%, 42.13% { stroke: #C6FF3D; } 45.37%, 100% { stroke: #FFFFFF; } }
@keyframes icoG { 0%, 41.67% { stroke: #FFFFFF; } 43.98%, 45.83% { stroke: #C6FF3D; } 49.07%, 61.11% { stroke: #FFFFFF; } 63.43%, 65.28% { stroke: #C6FF3D; } 68.52%, 100% { stroke: #FFFFFF; } }
@keyframes icoW { 0%, 64.81% { stroke: #FFFFFF; } 67.13%, 69% { stroke: #C6FF3D; } 72.22%, 100% { stroke: #FFFFFF; } }
/* The one element with headroom to brighten: the capability's sub-label */
@keyframes subA { 0%, 14.81% { fill: rgba(255,255,255,0.75); } 17.13%, 18.98% { fill: #FFFFFF; } 22.22%, 100% { fill: rgba(255,255,255,0.75); } }
@keyframes subC { 0%, 18.52% { fill: rgba(255,255,255,0.75); } 20.83%, 22.69% { fill: #FFFFFF; } 25.93%, 37.96% { fill: rgba(255,255,255,0.75); } 40.28%, 42.13% { fill: #FFFFFF; } 45.37%, 100% { fill: rgba(255,255,255,0.75); } }
@keyframes subG { 0%, 41.67% { fill: rgba(255,255,255,0.75); } 43.98%, 45.83% { fill: #FFFFFF; } 49.07%, 61.11% { fill: rgba(255,255,255,0.75); } 63.43%, 65.28% { fill: #FFFFFF; } 68.52%, 100% { fill: rgba(255,255,255,0.75); } }
@keyframes subW { 0%, 64.81% { fill: rgba(255,255,255,0.75); } 67.13%, 69% { fill: #FFFFFF; } 72.22%, 100% { fill: rgba(255,255,255,0.75); } }
.conn--hero { max-width: 560px; margin-left: auto; }

/* ------------------------------------------------------------
   Device 1: customer moments, as transcripts, not bubbles
   ------------------------------------------------------------ */
.moment { display: grid; grid-template-columns: 120px 1fr; gap: 12px 24px; align-items: start; }
.moment__role { font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); padding-top: 8px; display: flex; align-items: center; gap: 8px; }
.s--dark .moment__role { color: rgba(255,255,255,0.55); }
.moment__q { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; min-height: 2.4em; transition: opacity 0.35s ease, transform 0.35s ease; }
.moment__q.is-out { opacity: 0; transform: translateY(-6px); }
.moment__a { font-size: 17px; line-height: 1.5; color: var(--t2); padding-top: 6px; display: flex; align-items: baseline; gap: 12px; }
.s--dark .moment__a { color: rgba(255,255,255,0.72); }
.moment__a .d { font-size: 17px; }
.moment + .moment { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ln); }
.s--dark .moment + .moment { border-color: var(--ln-d); }
.dots { display: inline-flex; gap: 4px; transform: translateY(-2px); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) { .moment { grid-template-columns: 1fr; gap: 6px; } .moment__role { padding-top: 0; } }
.moments-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .moments-grid { grid-template-columns: 1fr; } }
/* Every supplied question is in the markup, so all of them read with no JS,
   under reduced motion and in print. Script cycles one at a time when it can. */
.asks .moment__q + .moment__q { margin-top: 12px; }
.asks.is-cycling .moment__q { display: none; }
.asks.is-cycling .moment__q.is-on { display: block; }
/* Customer decisions: the supplied questions as plain ruled lines, no chips */
.q-line { padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--ln); font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.s--dark .q-line { border-bottom-color: var(--ln-d); }

/* ------------------------------------------------------------
   Device 3: the journey as a changing state
   ------------------------------------------------------------ */
.j { margin-top: clamp(40px, 5vw, 64px); }
.j input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.j__rail { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ln); }
.j__rail label { position: relative; display: block; padding: 22px 0 26px; border-top: 3px solid transparent; margin-top: -1px; cursor: pointer; color: var(--t3); transition: color 0.2s; }
.j__rail label:hover { color: var(--ink); }
.j__rail .n { display: block; font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: 13px; letter-spacing: 0.12em; }
.j__rail .t { display: block; margin-top: 6px; font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.j__rail .w { display: block; margin-top: 4px; font-size: 13px; color: var(--t3); }
.j__rail label::after { content: ''; position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--blue); }
.j__panels { position: relative; margin-top: 8px; }
.j__panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 3vw, 40px); }
.j__panel .num { font-size: clamp(64px, 8vw, 120px); color: var(--blue); margin-bottom: 18px; }
.j__panel .h3 { font-size: clamp(24px, 2.4vw, 32px); }
.j__panel .strong { margin-top: 10px; }
.j__panel .body { margin-top: 14px; max-width: 30em; }
.j__panel .link { margin-top: 22px; }
#j1:checked ~ .j__rail label[for="j1"], #j2:checked ~ .j__rail label[for="j2"], #j3:checked ~ .j__rail label[for="j3"] { color: var(--ink); }
#j1:checked ~ .j__rail label[for="j1"]::after, #j2:checked ~ .j__rail label[for="j2"]::after, #j3:checked ~ .j__rail label[for="j3"]::after { width: 100%; }
.j.is-auto #j1:checked ~ .j__rail label[for="j1"]::after, .j.is-auto #j2:checked ~ .j__rail label[for="j2"]::after, .j.is-auto #j3:checked ~ .j__rail label[for="j3"]::after { animation: fill 6s linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
#j1:checked ~ .j__panels .j__panel:nth-child(1), #j2:checked ~ .j__panels .j__panel:nth-child(2), #j3:checked ~ .j__panels .j__panel:nth-child(3) { display: grid; animation: in 0.5s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .j__panel { grid-template-columns: 1fr; } .j__rail .w { display: none; } }
@media (max-width: 600px) { .j__rail { grid-template-columns: 1fr; border-top: 0; } .j__rail label { padding: 14px 0; border-top: 1px solid var(--ln); } .j__rail label::after { top: -1px; } }

/* ------------------------------------------------------------
   Device 6: product views, always with context
   ------------------------------------------------------------ */
.view { position: relative; }
.view img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--ln); }
.s--dark .view img { border-color: var(--ln-d); }
.view__cap { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; margin-top: 14px; font-size: 13px; color: var(--t2); }
.view__cap b { font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 4px 8px; border: 1px solid var(--ln2); border-radius: 5px; }
.s--dark .view__cap { color: rgba(255,255,255,0.65); } .s--dark .view__cap b { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.flows { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(48px, 6vw, 88px); }
.flow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.flow:nth-child(even) .view { order: 2; }
.flow .steps { margin-top: 20px; display: grid; gap: 0; border-top: 1px solid var(--ln); }
.flow .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); font-size: 15px; color: var(--t2); }
.flow .steps .num { font-size: 20px; color: var(--blue); padding-top: 2px; }
.flow .steps b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow:nth-child(even) .view { order: 0; } }

/* ------------------------------------------------------------
   Editorial grids: ruled columns and rows, not cards
   ------------------------------------------------------------ */
.cols { display: grid; gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col { padding-top: 22px; border-top: 1px solid var(--ink); }
.s--dark .col { border-color: rgba(255,255,255,0.4); }
.col .ic { color: var(--blue); margin-bottom: 18px; }
.s--dark .col .ic { color: var(--blue-l); }
.col .h3 { margin-bottom: 10px; }
.col .body { max-width: 26em; }
.col .close { font-size: 14px; font-weight: 600; margin-top: 14px; }
.col .lab { font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; }
/* Numbered working steps inside a ruled column */
.col .num { display: block; font-size: 22px; color: var(--blue); margin-bottom: 10px; }
.s--dark .col .num { color: var(--blue-l); }
@media (max-width: 1000px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 32px; } }
@media (max-width: 700px) { .cols--3, .cols--4 { grid-template-columns: 1fr; gap: 28px; } }

.rows { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ink); }
.s--dark .rows { border-color: rgba(255,255,255,0.4); }
.row { display: grid; grid-template-columns: 64px minmax(140px, 1.2fr) 3fr 3.4fr auto; gap: 10px clamp(20px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--ln); text-decoration: none; color: inherit; }
.s--dark .row { border-color: var(--ln-d); }
.row .num { font-size: 22px; color: var(--t3); }
.row .lab { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); }
.s--dark .row .lab { color: rgba(255,255,255,0.6); }
.row__title { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; transition: color 0.15s; }
.row__lead { font-size: 14px; font-weight: 500; color: var(--t2); margin-top: 3px; }
.s--dark .row__lead { color: rgba(255,255,255,0.6); }
.row__arrow { font-size: 20px; color: var(--t3); transition: color 0.15s, transform 0.15s; }
.row:hover .row__title { color: var(--blue); } .s--dark .row:hover .row__title { color: var(--blue-l); }
.row:hover .row__arrow { color: var(--blue); transform: translateX(3px); } .s--dark .row:hover .row__arrow { color: var(--blue-l); }
.rows--teams .row { grid-template-columns: 64px minmax(140px, 1.2fr) 3fr 3.4fr auto; }
@media (max-width: 900px) { .row { grid-template-columns: 44px 1fr auto; } .row .lab { grid-column: 2; } .row > div, .row .body { grid-column: 2; } .row__arrow { grid-column: 3; grid-row: 1; } .row .num { grid-row: 1 / span 3; align-self: start; } }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags span { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--ln-d); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); }

/* Journey rail: Discover to Engage */
.rail { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,0.4); }
.rail li { padding: 18px 16px 0 0; border-right: 1px solid var(--ln-d); }
.rail li:last-child { border-right: 0; }
.rail .num { font-size: 13px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); }
.rail .w { display: block; margin-top: 8px; font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 640px) { .rail { grid-template-columns: 1fr; border-top: 0; } .rail li { display: flex; gap: 16px; align-items: baseline; border-right: 0; border-top: 1px solid var(--ln-d); padding: 12px 0; } .rail .w { margin: 0; } }

/* Numbers strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); }
.stats .num { font-size: clamp(44px, 5vw, 72px); }
.stats p { margin-top: 10px; font-size: 14px; color: var(--t2); max-width: 16em; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Stack legend under the big connection graphic */
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(28px, 4vw, 44px); }
.legend div { padding-top: 16px; border-top: 1px solid var(--ink); }
.legend .lab { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.legend p { font-size: 15px; color: var(--t2); }
.legend div:nth-child(2) { border-top-color: var(--blue); } .legend div:nth-child(2) .lab { color: var(--blue); }
@media (max-width: 700px) { .legend { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer { border-top: 1px solid var(--ln); padding: clamp(48px, 6vw, 80px) 0 40px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer__col p { color: var(--t2); max-width: 22em; }
.footer__col h6 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 12px; }
.footer__col a { display: block; color: var(--t2); text-decoration: none; padding: 4px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__col a.logo { display: inline-flex; padding: 0; margin-bottom: 16px; color: var(--ink); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ln); color: var(--t3); font-size: 13px; }
.footer__bottom a { color: inherit; text-decoration: none; margin-right: 20px; }
.footer__legal { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--t3); }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__col:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .rv.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s !important; } .d2 { transition-delay: 0.16s !important; } .d3 { transition-delay: 0.24s !important; } .d4 { transition-delay: 0.32s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .conn .sig, .conn .mk, .conn .krow__bg, .conn .k-sub, .conn .ico-w, .dots i, .live i::after { animation: none !important; }
  .meter-fill, .meter-fill::after, .meter-buffer, .meter .tick { animation: none !important; }
  .j__rail label::after { animation: none !important; }
  .b:hover, .b:active { transform: none; }
  .link:hover::after, .row:hover .row__arrow { transform: none; }
}

/* ============================================================
   SITE-WIDE: converted pages (body.v4.cv)
   Legacy token aliases so page-specific styles keep resolving,
   content defaults for bare elements, and the components the
   inner pages use: tables, stats, forms, plans, legal, blog.
   ============================================================ */
:root {
  --bg: var(--p); --surface: var(--p); --surface-2: var(--p2); --surface-3: var(--p2);
  --ink-2: var(--t2); --ink-3: var(--t3); --ink-4: var(--t3);
  --navy: var(--p); --navy2: var(--p); --navy3: var(--p); --navy4: var(--p);
  --white: var(--ink); --off: var(--p); --text: var(--ink); --text-muted: var(--t2); --text-dim: var(--t3);
  --border: var(--ln); --border-strong: var(--ln2); --border-light: var(--ln); --gray: var(--t2); --gray2: var(--t3);
  --audit-color: var(--blue); --content-color: #15803D; --agent-color: #6D28D9; --workspace-color: #B45309;
  --blue2: var(--blue-d); --blue-lt: #EEF2FF;
  --teal: #15803D; --teal-l: #15803D; --teal-lt: #ECFDF3;
  --purple: #6D28D9; --purple-l: #6D28D9; --purple-lt: #F3EEFF;
  --orange: #B45309; --orange-l: #B45309; --orange-lt: #FFF4E5;
  --amber: #B45309; --green: #15803D; --red: #B91C1C;
  --font-display: var(--fd); --font-body: var(--f);
}

/* Content defaults */
.cv .s h2:not([class]) { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 16px; text-wrap: balance; }
.cv .s h3:not([class]), .cv .s h4:not([class]), .cv .col h3, .cv .col h4 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 8px; }
.cv .s p:not([class]) { font-size: 16px; line-height: 1.6; color: var(--t2); margin: 0 0 12px; }
.cv .s p:not([class]):last-child { margin-bottom: 0; }
.cv .s--dark p:not([class]), .cv .s--dark .col p, .cv .s--dark li, .cv .s--dark .col .fine { color: rgba(255,255,255,0.72); }
.cv .s--dark strong, .cv .s--dark b, .cv .s--dark h3, .cv .s--dark h4 { color: #FFFFFF; }
.cv .s ul:not([class]), .cv .s ol:not([class]) { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--t2); }
.cv .s ul:not([class]) li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.cv .s ul:not([class]) li::before { content: ''; position: absolute; left: 0; top: 0.66em; width: 12px; height: 2px; background: var(--blue); }
.cv .s--dark ul:not([class]) li::before { background: var(--blue-l); }
.cv .s ol:not([class]) { padding-left: 1.2em; list-style: decimal; }
.cv .s a:not([class]) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cv .s--dark a:not([class]) { color: var(--blue-l); }
.cv .s .h2 { margin-bottom: 16px; }
.cv .s .lead { margin-top: 0; margin-bottom: 18px; }
.cv .s .eyebrow { margin-bottom: 16px; }
.cv .s .strong { margin-top: 0; margin-bottom: 12px; }
.cv .s .actions { margin-top: 24px; margin-bottom: 8px; }
.cv .s address { font-style: normal; }
.cv .s > .wrap > div:not([class]) { max-width: 46em; }
.cv h6.eyebrow { margin-bottom: 6px; }
.cv .s .d.st--s { margin-bottom: 16px; }
.cv .st--s + p { margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--t2); max-width: 32em; }
.cv .s--dark .st--s + p { color: rgba(255,255,255,0.72); }

/* Hero on converted pages: text left, captioned product view right */
.cv .hero > .wrap > div:not([class]) { max-width: 46em; }
.cv .hero h1 { font-size: clamp(40px, 5.6vw, 84px); margin-bottom: 4px; }
.cv .hero .hero__grid > :first-child { container-type: inline-size; }
.cv .hero .hero__grid h1 { font-size: clamp(36px, 10.5cqw, 74px); }
.cv .hero .lead { margin-top: 20px; margin-bottom: 0; }
.cv .hero .strong { margin-top: 16px; }
.cv .hero .fine { margin-top: 14px; }
.cv .hero .actions { margin-top: 28px; }
.cv figure.view { margin: 0; }
.cv .s > .wrap > figure.view { margin-top: clamp(32px, 4vw, 48px); }

/* Ruled columns and stacks */
.cv .cols { margin-top: 28px; row-gap: 32px; }
.cv .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); align-items: start; }
.cv .cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cv .cols--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cv .cols--2, .cv .cols--5 { grid-template-columns: 1fr; } }
.cv .col { color: inherit; text-decoration: none; }
.cv .col .fine { font-size: 15px; line-height: 1.55; color: var(--t2); margin-top: 0; }
.cv .col > .eyebrow { font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 12px; letter-spacing: 0.12em; color: var(--t3); margin-bottom: 10px; }
.cv .s--dark .col > .eyebrow { color: rgba(255,255,255,0.55); }
.cv .col p:not([class]) { font-size: 15px; }
.cv .col .col { margin-top: 16px; }
.cv .stack { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; }
.cv .stack > .col { padding-top: 18px; }
.cv a.col:hover h3, .cv a.col:hover h4 { color: var(--blue); }
.cv .s--dark a.col:hover h3, .cv .s--dark a.col:hover h4 { color: var(--blue-l); }
.cv .cols--2 > .col > .col:first-child { margin-top: 0; }

/* Tables */
.cv .comparison-table { border: 1px solid var(--ln2); border-radius: 10px; overflow: auto; margin: 28px 0; }
.cv .comparison-table table { width: 100%; border-collapse: collapse; }
.cv .comparison-table th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ln2); color: var(--t2); }
.cv .comparison-table td { padding: 14px 16px; border-bottom: 1px solid var(--ln); font-size: 15px; line-height: 1.5; vertical-align: top; color: var(--t2); }
.cv .comparison-table td:first-child { font-weight: 600; color: var(--ink); }
.cv .comparison-table tr:last-child td { border-bottom: 0; }
.cv .comparison-table.kodiac-col th:nth-child(3) { color: var(--blue); }
.cv .comparison-table.kodiac-col td:nth-child(3) { background: #EEF2FF; color: var(--ink); font-weight: 500; }
.cv .s--dark .comparison-table { border-color: var(--ln-d); }
.cv .s--dark .comparison-table th { color: rgba(255,255,255,0.7); border-color: var(--ln-d); }
.cv .s--dark .comparison-table td { border-color: var(--ln-d); color: rgba(255,255,255,0.75); }
.cv .s--dark .comparison-table td:first-child { color: #FFFFFF; }
.cv .s--dark .comparison-table.kodiac-col th:nth-child(3) { color: var(--blue-l); }
.cv .s--dark .comparison-table.kodiac-col td:nth-child(3) { background: rgba(29,79,255,0.2); color: #FFFFFF; }

/* Stats */
.cv .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 32px 0; }
.cv .stat { border-top: 1px solid var(--ink); padding-top: 16px; }
.cv .stat-value { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(44px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.02em; color: var(--blue); }
.cv .stat-label { font-size: 15px; margin-top: 10px; line-height: 1.5; color: var(--t2); }
.cv .stat-source { font-size: 12px; color: var(--t3); margin-top: 6px; }
.cv .s--dark .stat { border-color: rgba(255,255,255,0.4); }
.cv .s--dark .stat-value { color: var(--blue-l); }
.cv .s--dark .stat-label { color: rgba(255,255,255,0.72); }
@media (max-width: 760px) { .cv .stat-row { grid-template-columns: 1fr; } }

/* Forms */
.cv form { border: 1px solid var(--ln2); border-radius: 12px; padding: clamp(24px, 3vw, 36px); background: var(--p); color: var(--ink); }
.cv form h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.cv form .sub { font-size: 14px; color: var(--t2); margin-bottom: 20px; }
.cv .form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cv .form-row label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); }
.cv .form-row input, .cv .form-row select, .cv .form-row textarea { border: 1px solid var(--ln2); border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 15px; background: var(--p); color: var(--ink); width: 100%; }
.cv .form-row input:focus, .cv .form-row select:focus, .cv .form-row textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.cv form .b { width: 100%; margin-top: 8px; }
.cv form .fine { margin-top: 12px; }
.cv .form-message, .cv .form-error, .cv .form-success { font-size: 14px; font-weight: 600; margin-top: 12px; }
.cv .form-error { color: var(--red); }

/* Long-form pages: legal documents and blog posts */
.cv .legal-doc, .cv .blog-post-container { max-width: 800px; margin: 0 auto; padding: calc(var(--nav) + clamp(48px, 8vw, 96px)) var(--pad) clamp(64px, 8vw, 120px) !important; }
.cv .legal-doc h1, .cv .blog-title { font-family: var(--fd); font-weight: 800 !important; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(40px, 6vw, 76px) !important; line-height: 0.98 !important; letter-spacing: -0.02em !important; margin: 0 0 20px; color: var(--ink) !important; }
.cv .legal-doc h2, .cv .blog-content h2 { font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 600 !important; letter-spacing: -0.025em; line-height: 1.15 !important; margin: 44px 0 14px !important; color: var(--ink) !important; }
.cv .legal-doc h3, .cv .blog-content h3 { font-size: 19px !important; font-weight: 600 !important; margin: 28px 0 10px !important; color: var(--ink) !important; }
.cv .legal-doc p, .cv .legal-doc li, .cv .blog-content { font-size: 16px; line-height: 1.65; color: var(--t2); }
.cv .legal-doc a, .cv .blog-content a { color: var(--blue) !important; text-decoration: underline; text-underline-offset: 3px; border: 0 !important; }
.cv .legal-doc .meta { color: var(--blue) !important; font-weight: 600; letter-spacing: 0.06em; }
.cv .legal-doc .toc, .cv .legal-doc .info-box, .cv .summary-card { background: var(--p2) !important; border: 0 !important; border-radius: 10px !important; }
.cv .summary-card { padding: 20px 24px; margin: 0 0 32px; }
.cv .blog-excerpt { border-bottom: 1px solid var(--ln2) !important; color: var(--t2) !important; }
.cv .blog-meta, .cv .back-link { color: var(--t3) !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px !important; }
.cv .blog-content blockquote { border-left: 3px solid var(--blue) !important; color: var(--t2) !important; }
.cv .loading-state { padding-top: calc(var(--nav) + 96px) !important; }
.cv .card { border: 1px solid var(--ln); border-radius: 10px; padding: 22px; background: var(--p); box-shadow: none; transition: border-color 0.15s; }
.cv .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0; }
.cv .card p { font-size: 15px; color: var(--t2); }
.cv .label-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.cv #blog-posts .card { cursor: pointer; }
.cv #blog-posts .card:hover { border-color: var(--ink); }

/* Pricing */
.cv .plan { background: var(--p) !important; border: 1px solid var(--ln2) !important; border-radius: 12px !important; padding: 28px 24px 24px !important; box-shadow: none !important; transform: none !important; }
.cv .plan::before { display: none !important; }
.cv .plan h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cv .plan-price { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(40px, 3.6vw, 52px) !important; letter-spacing: -0.02em; color: var(--ink); }
.cv .plan-price small { font-family: var(--f); font-weight: 500; font-size: 13px; color: var(--t3); letter-spacing: 0; }
.cv .plan-price .from { font-family: var(--f); font-size: 15px; font-weight: 500; color: var(--t2); letter-spacing: 0; }
.cv .plan-tokens { font-size: 14px; font-weight: 600; color: var(--ink); }
.cv .plan-included { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.cv .plan .dots, .cv .mini .dots { display: none; }
.cv .plan-for { border-top: 1px solid var(--ln) !important; color: var(--ink); }
.cv .plan-typical { color: var(--t2); }
.cv .plan-typical b { color: var(--ink); }
.cv .plan .b { margin-top: 14px; width: 100%; }
.cv .plan-note { color: var(--t3); }
.cv .plan:nth-child(5) { background: var(--ink) !important; border-color: var(--ink) !important; color: #FFFFFF; }
.cv .plan:nth-child(5) h3, .cv .plan:nth-child(5) .plan-price, .cv .plan:nth-child(5) .plan-tokens, .cv .plan:nth-child(5) .plan-for, .cv .plan:nth-child(5) .plan-typical b { color: #FFFFFF; }
.cv .plan:nth-child(5) .plan-typical, .cv .plan:nth-child(5) .plan-note, .cv .plan:nth-child(5) .plan-price small, .cv .plan:nth-child(5) .plan-price .from { color: rgba(255,255,255,0.7); }
.cv .plan:nth-child(5) .plan-for { border-color: var(--ln-d) !important; }
.cv .plan:nth-child(5) .plan-included { color: var(--blue-l); }
.cv .plan:nth-child(5) .b { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.cv .billing-toggle { border: 1px solid var(--ln2); border-radius: 8px; padding: 3px; background: var(--p); }
.cv .billing-toggle button { border-radius: 6px; font-weight: 600; color: var(--t2); }
.cv .billing-toggle button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.cv .billing-note { color: var(--t3); }
.cv .free-block { background: var(--p2) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
.cv .free-block::before { display: none !important; }
.cv .free-block h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.cv .free-block h3 { color: var(--blue) !important; font-weight: 600; }
.cv .free-block .big { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; letter-spacing: -0.02em; color: var(--blue); }
.cv .use-list li { padding-left: 22px !important; }
.cv .use-list li::before { width: 12px !important; height: 2px !important; border-radius: 0 !important; top: 11px !important; background: var(--blue) !important; }
/* Token usage examples: each activity beside its unit and rate */
.cv .usage-rows { border-top: 1px solid var(--ink); margin-top: clamp(28px, 3vw, 40px); }
.cv .usage-rows li { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--ln); font-size: 15px; line-height: 1.5; color: var(--ink); }
.cv .usage-rows li span { color: var(--t2); }
@media (max-width: 640px) { .cv .usage-rows li { grid-template-columns: 1fr; } }
.cv .meter { background: var(--p2); border-radius: 7px; }
.cv .s--dark .meter { background: rgba(255,255,255,0.12); }
/* The soft grey ground is the same value as the default track, so darken it there */
.cv .s--soft .meter { background: rgba(10,11,13,0.10); }
.cv .s--soft .meter .tick { box-shadow: 0 0 0 3px var(--p2); }
.cv .meter-fill { background: var(--blue); border-radius: 7px 0 0 7px; }
.cv .meter-buffer { background: repeating-linear-gradient(45deg, var(--t3) 0 4px, transparent 4px 8px); opacity: 0.55; border-radius: 0 7px 7px 0; }
/* The page's own stylesheet writes `.meter.tick`, so the four threshold markers
   were never positioned or sized. This is the descendant rule they needed. */
.cv .meter .tick { position: absolute; top: 50%; width: 12px; height: 12px; border: 0; border-radius: 50%; transform: translate(-50%, -50%); background: currentColor; --dim: var(--t3); color: var(--dim); box-shadow: 0 0 0 3px var(--p); }
.cv .s--dark .meter .tick { --dim: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px var(--ink); }
/* Leading edge of the fill, in the system's lime. Invisible unless the loop runs. */
.cv .meter-fill::after { content: ''; position: absolute; right: 0; top: -3px; bottom: -3px; width: 4px; border-radius: 2px; background: var(--lime); opacity: 0; }

/* One 9s pass: the allowance is consumed, each threshold lights as it is crossed,
   the 10% buffer opens, then the allowance resets. The static bar (full, with the
   buffer showing) is what renders with no JS, off screen and under reduced motion. */
.meter.is-live .meter-fill { animation: mtFill 9s linear infinite; }
.meter.is-live .meter-fill::after { animation: mtHead 9s linear infinite; }
.meter.is-live .meter-buffer { animation: mtBuf 9s linear infinite; }
.meter.is-live .tick:nth-of-type(1) { animation: mt1 9s linear infinite; }
.meter.is-live .tick:nth-of-type(2) { animation: mt2 9s linear infinite; }
.meter.is-live .tick:nth-of-type(3) { animation: mt3 9s linear infinite; }
.meter.is-live .tick:nth-of-type(4) { animation: mt4 9s linear infinite; }
.meter.is-paused .meter-fill, .meter.is-paused .meter-fill::after, .meter.is-paused .meter-buffer, .meter.is-paused .tick { animation-play-state: paused; }
@keyframes mtFill { 0%, 10% { width: 0; } 60%, 91.11% { width: 90.91%; } 96.67%, 100% { width: 0; } }
@keyframes mtHead { 0%, 10% { opacity: 0; } 14%, 57% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes mtBuf { 0%, 60% { clip-path: inset(0 100% 0 0); } 67.78%, 91.11% { clip-path: inset(0 0 0 0); } 95%, 100% { clip-path: inset(0 100% 0 0); } }
/* 50%, 80%, 100% and 110% of the allowance, lit as the fill reaches each one */
@keyframes mt1 { 0%, 35% { color: var(--dim); } 36.5%, 93% { color: var(--lime); } 96.67%, 100% { color: var(--dim); } }
@keyframes mt2 { 0%, 50% { color: var(--dim); } 51.5%, 93% { color: var(--lime); } 96.67%, 100% { color: var(--dim); } }
@keyframes mt3 { 0%, 60% { color: var(--dim); } 61.5%, 93% { color: var(--lime); } 96.67%, 100% { color: var(--dim); } }
@keyframes mt4 { 0%, 67.78% { color: var(--dim); } 69.3%, 93% { color: var(--lime); } 96.67%, 100% { color: var(--dim); } }
.cv .meter-legend i { border-radius: 2px !important; width: 14px !important; height: 4px !important; margin-top: 8px !important; }
.cv .founding { background: var(--ink) !important; border-radius: 12px !important; box-shadow: none !important; }
.cv .founding .label-tag, .cv .founding .eyebrow { color: var(--blue-l) !important; }
.cv .founding h2 { font-weight: 600 !important; letter-spacing: -0.03em; color: #FFFFFF !important; }
.cv .founding .b { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.cv .faq details { border-bottom: 1px solid var(--ln); padding: 18px 0; }
.cv .faq summary { font-size: 17px; font-weight: 600; color: var(--ink); }
.cv .faq summary::after { color: var(--blue); }
.cv .faq details p { font-size: 15px; color: var(--t2); }
.cv .product-strip { gap: 12px 28px !important; margin-top: 28px !important; }
.cv .pchip { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 10px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink) !important; }
.cv .pchip i { width: 22px !important; height: 4px !important; border-radius: 2px !important; background: var(--blue); }
.cv .pchip:nth-child(2) i { background: #15803D; }
.cv .pchip:nth-child(3) i { background: #6D28D9; }
.cv .pchip:nth-child(4) i { background: #B45309; }
.cv .pchip-note { font-size: 12px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3) !important; margin-left: 0 !important; }
.cv .token-tiles .col p { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--blue); }

/* Start free */
.cv .hero-facts { gap: 10px 28px !important; margin-top: 28px !important; color: var(--t2) !important; }
.cv .hero-facts span { font-size: 14px; }
.cv .hero-facts b { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: 22px; letter-spacing: -0.01em; color: var(--ink) !important; margin-right: 6px; }
.cv .reserve { background: var(--p2) !important; border: 0 !important; border-radius: 14px !important; }
.cv .reserve::before { display: none !important; }
.cv .reserve h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.cv .reserve .lead { font-size: 16px; color: var(--t2); max-width: none; }
.cv .big-stat .num { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(44px, 5vw, 64px); letter-spacing: -0.02em; color: var(--blue); }
.cv .big-stat .lbl { color: var(--t2); }
.cv .checklist { color: var(--t2); }
.cv .checklist li::before { content: '' !important; width: 12px; height: 2px; margin-top: 0.7em; background: var(--blue); flex-shrink: 0; }
.cv .reserve form { background: var(--p); border: 1px solid var(--ln2) !important; border-radius: 12px !important; box-shadow: none !important; }
@media (max-width: 700px) {
  .cv .reserve { grid-template-columns: minmax(0, 1fr) !important; padding: 24px 16px !important; }
  .cv .reserve > * { min-width: 0; }
  .cv .reserve form { padding: 20px 14px !important; }
}
.cv .mini { background: var(--p) !important; border: 1px solid var(--ln2) !important; border-radius: 12px !important; box-shadow: none !important; }
.cv .mini::before { display: none !important; }
.cv .mini.free { background: #EEF2FF !important; border-color: var(--blue) !important; }
.cv .mini .name h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cv .mini .price { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: 36px; letter-spacing: -0.02em; color: var(--ink); }
.cv .mini .price small { font-family: var(--f); font-weight: 500; font-size: 13px; color: var(--t3); }
.cv .mini .cad { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.cv .mini .tok { font-size: 14px; font-weight: 600; }
.cv .mini p { font-size: 14px; color: var(--t2); }
.cv .mini .inc { font-size: 13px; font-weight: 600; color: var(--t2); }
.cv .grad-text, .cv .grad-text-dark { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor; }
.cv .hero-stat-big { font-family: var(--fd); font-weight: 800; font-stretch: 80%; font-variation-settings: 'wdth' 80; font-size: clamp(64px, 8.5vw, 132px); line-height: 0.85; letter-spacing: -0.03em; color: var(--blue); white-space: nowrap; }
.cv .cols--2:has(> .hero-stat-big) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
.cv .s--dark .hero-stat-big { color: var(--blue-l); }

/* Question-and-answer blocks written as plain h3 + p pairs */
.cv .s div:not([class]) > div:not([class]) > h3:first-child:has(+ p) { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; padding-top: 20px; border-top: 1px solid var(--ln2); }
.cv .s--dark div:not([class]) > div:not([class]) > h3:first-child:has(+ p) { border-color: var(--ln-d); }
.cv .s div:not([class]) > div:not([class]) > h3:first-child:has(+ p) ~ p { max-width: 62em; }
.cv .s div:not([class]) > div:not([class]):has(> h3:first-child + p) + div:not([class]) { margin-top: 28px; }
.cv .s div:not([class]):has(> div:not([class]) > h3:first-child + p) { margin-top: 36px; max-width: none; }

@media (max-width: 480px) { .cv .hero h1, .cv .hero .hero__grid h1 { font-size: clamp(36px, 11vw, 52px); } }

/* ============================================================
   HOMEPAGE, 28 September 2026: your side of the AI conversation
   Text-only hero, the three-row shift, the system-to-system
   diagram, the staged path, use-case cards, the module cards
   with the Agent as the core, and print safety for revealed
   content.
   ============================================================ */
.hero__solo { max-width: 60em; }
.hero__solo .h1 { max-width: 12em; }
.hero__solo .strong { margin-top: 24px; }
.hero__sub { margin-top: 18px; font-size: 14px; color: var(--t2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.hero__sub .link { font-size: 14px; }
.lab { font-family: var(--fd); font-weight: 700; font-stretch: 85%; font-variation-settings: 'wdth' 85; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
.lab--blue { color: var(--blue); }
.head .strong { max-width: 34em; }

/* The shift: three rows, yesterday, today and next, each a left-to-right flow */
.shift { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ink); }
.shift__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ln); }
.shift__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.shift__node { padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--p); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.shift__node--soft { border: 1.5px dashed var(--ln2); color: var(--t2); font-weight: 500; }
.shift__arrow { color: var(--t3); font-size: 18px; line-height: 1; }
.shift__row--on { background: linear-gradient(90deg, rgba(29,79,255,0.06), transparent); margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); padding-right: var(--pad); }
.shift__row--on .lab { color: var(--blue); }
.shift__row--on .shift__node--kod { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.shift__row--on .shift__arrow { color: var(--blue); }
.shift__pull { margin-top: clamp(28px, 3vw, 40px); max-width: 34em; }
@media (max-width: 640px) { .shift__row { grid-template-columns: 1fr; gap: 8px; } }

/* How it works: three systems left to right, approval between the first two,
   a confirmed outcome returning along the bottom */
.sys { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1.1fr) 84px minmax(0, 1fr); gap: 0 10px; align-items: stretch; }
.sys__box { border: 1.5px solid var(--ink); border-radius: 10px; padding: 20px 22px; background: var(--p); }
.sys__box--kod { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.sys__box h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sys__box ul { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ln); display: grid; gap: 7px; font-size: 14px; line-height: 1.45; color: var(--t2); }
.sys__box ul li { position: relative; padding-left: 16px; }
.sys__box ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--blue); }
.sys__box--kod ul { border-top-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.88); }
.sys__box--kod ul li::before { background: var(--lime); }
.sys__gap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.sys__arrow { font-size: 22px; line-height: 1; color: var(--ink); }
.sys__badge { font-size: 11px; line-height: 1.35; font-weight: 600; color: var(--t2); padding: 7px 8px; border: 1px solid var(--ln2); border-radius: 6px; background: var(--p); }
.sys__return { grid-column: 1 / -1; margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 13px; color: var(--t2); }
.sys__return i { display: block; height: 0; border-top: 1.5px dashed var(--ln2); }
.sys__return .sys__arrow { font-size: 20px; }
.sys__cap { margin-top: 18px; }
@media (max-width: 860px) {
  .sys { grid-template-columns: 1fr; gap: 10px 0; }
  .sys__gap { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 4px 0; }
  .sys__arrow--down { transform: rotate(90deg); }
  .sys__badge { max-width: 30em; text-align: left; }
}

/* Journey strip and the staged path */
.stages { margin-top: clamp(40px, 5vw, 64px); }
.stages__line { display: block; width: 100%; height: auto; margin-bottom: 2px; }
.stages__line path { fill: none; stroke: var(--blue); stroke-width: 2; }
.stages__line circle { fill: var(--p); stroke: var(--blue); stroke-width: 2; }
.stages__line circle.on { fill: var(--blue); }
@media (max-width: 700px) { .stages__line { display: none; } }

/* Use cases: four cards, two by two */
.cases { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--ln2); border-radius: 12px; background: var(--p); }
.case .lab--blue { margin-bottom: 12px; }
.case__q { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.case__block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ln); }
.case__block .lab { margin-bottom: 6px; }
.case__block p { font-size: 15px; line-height: 1.55; color: var(--t2); }
.case__out { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 600; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } }

/* Supporting block beneath a grid: a heading on the left, the example on the right */
.support { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px clamp(24px, 4vw, 64px); align-items: start; }
.support .body { font-size: 16px; }
.support .fine { margin-top: 12px; }
@media (max-width: 800px) { .support { grid-template-columns: 1fr; } }

/* The platform: the Agent as the core, Content and Audit beneath it */
.mods { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mod { padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--ln2); border-radius: 12px; background: var(--p); }
.mod__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.mod__name { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.mod__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); padding: 4px 8px; border: 1px solid var(--ln2); border-radius: 5px; }
.mod .body { margin-top: 12px; }
.mod .link { margin-top: 18px; }
.mod--core { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); color: #FFFFFF; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 3.5vw, 44px); }
.mod--core .h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.mod--core .mod__name { color: var(--blue-l); }
.mod--core .mod__tag { color: var(--lime); border-color: var(--lime); }
.mod--core .body { color: rgba(255,255,255,0.75); margin-top: 0; }
.mod--core .link { color: var(--blue-l); }
.mods__note { margin-top: 24px; max-width: 46em; }
@media (max-width: 760px) { .mods { grid-template-columns: 1fr; } .mod--core { grid-template-columns: 1fr; } .mod--core .body { margin-top: 12px; } }

/* Everything revealed on scroll is visible on paper */
@media print {
  .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav { position: static; }
}

/* ============================================================
   Footer on ink (Homepage Build Spec v6, S9, 30 September 2026)
   Shared by every page.
   ============================================================ */
.footer { background: #0A0B0D; color: #B4B8C0; border-top: 0; padding: 72px 0 48px; font-size: 14px; }
.footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__col p { color: #B4B8C0; font-size: 15px; line-height: 1.5; margin-top: 16px; max-width: 22em; }
.footer__col h6 { color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0; margin: 0 0 10px; }
.footer__col a { color: #B4B8C0; font-size: 14px; padding: 5px 0; }
.footer__col a:hover { color: #FFFFFF; }
.footer__col a.logo { color: #FFFFFF; margin-bottom: 0; padding: 0; }
.footer .mark .mid { fill: #FFFFFF; }
.footer__bottom { margin-top: 56px; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,0.16); color: #A9ADB6; font-size: 13px; }
.footer__bottom a { color: #A9ADB6; }
.footer__bottom a:hover { color: #FFFFFF; }
.footer__legal { color: #A9ADB6; }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }