/* ═══════════════════════════════════════════
   Kasten Technologies · site styles
═══════════════════════════════════════════ */

/* Tokens */
:root {
  --bg: #05080c;
  --bg-1: #080d13;
  --bg-2: #0c121a;
  --panel: #0d141c;

  --line: #17212c;
  --line-2: #213040;
  --line-3: #324456;

  --ink: #edf1f5;
  --text: #b3bec9;
  --muted: #8794a2;
  --faint: #56636f;
  --steel: #93a4b6;

  --cyan: #5ec4dd;
  --cyan-dim: rgba(94, 196, 221, .12);
  --amber: #e2a53c;
  --red: #e0583f;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1240px;
  --gut: 20px;
  --nav-h: 64px;
}
@media (min-width: 720px)  { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 48px; } }

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: rgba(94, 196, 221, .3); color: #fff; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 1px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--bg); padding: .75rem 1rem;
  font-weight: 600; text-decoration: none; border-radius: 2px;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* Typography */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .idx { color: var(--cyan); }
.eyebrow .rule { width: 28px; height: 1px; background: var(--line-3); flex: none; }

.display {
  font-weight: 600; font-stretch: 90%;
  font-size: clamp(2.3rem, 1.25rem + 3.6vw, 4.25rem);
  line-height: 1.03; letter-spacing: -.028em;
  color: var(--ink); text-wrap: balance;
}
.h2 {
  font-weight: 600; font-stretch: 92%;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.07; letter-spacing: -.024em;
  color: var(--ink); text-wrap: balance;
}
.h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.58; color: var(--ink); opacity: .88; max-width: 38em; }
.body { font-size: 1rem; line-height: 1.68; color: var(--text); max-width: 40em; }
.lede + .body { margin-top: 1rem; }
.num { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
.mini-h {
  font: 500 .7rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .9rem 1.35rem;
  font: 600 .9375rem/1 var(--font); letter-spacing: .005em;
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: #05080c; }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-3); }
.btn-ghost:hover { border-color: var(--steel); background: rgba(255, 255, 255, .03); }
.btn-sm { min-height: 40px; padding: .65rem 1rem; font-size: .875rem; }
.btn[disabled] { opacity: .6; cursor: progress; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ═══════════════ NAV ═══════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 8, 12, .88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.k-mark { width: 22px; height: 22px; fill: currentColor; flex: none; }
.brand-word { font: 600 .8rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.brand-word span { color: var(--muted); font-weight: 500; }
@media (min-width: 400px) { .brand-word { font-size: .875rem; } }

.nav-links { display: none; }
@media (min-width: 960px) {
  .nav-links { display: flex; align-items: center; gap: 2rem; }
}
.nav-links a:not(.btn) {
  position: relative; padding: .5rem 0;
  font-size: .9rem; color: var(--text); text-decoration: none;
  transition: color .16s;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.nav-links a:not(.btn):hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -6px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer;
}
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
@media (min-width: 960px) { .menu-btn { display: none; } }

.mobile-menu { border-top: 1px solid var(--line); background: var(--bg); }
.mobile-menu a {
  display: block; padding: 1rem var(--gut);
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 1.05rem;
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--cyan); }
@media (min-width: 960px) { .mobile-menu { display: none !important; } }

/* ═══════════════ HERO ═══════════════ */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 42%, rgba(77, 126, 168, .14), transparent 65%),
    url("../img/chart-bg.svg") center / cover no-repeat;
}
.hero-grid {
  position: relative; display: grid; gap: 3rem; align-items: center;
  padding: clamp(3rem, 7vw, 6.5rem) var(--gut) clamp(3.5rem, 6vw, 5.5rem);
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; }
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  padding: .5rem .75rem;
  font: 500 .7rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(13, 20, 28, .6);
  transition: border-color .18s, color .18s;
}
.hero-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }
.hero-tag:hover { border-color: var(--line-3); color: var(--ink); }
.hero .display { margin-top: 1.75rem; }
.hero .lede { margin-top: 1.5rem; }
.hero .cta-row { margin-top: 2.25rem; }

.domains {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 3rem; border-top: 1px solid var(--line-2);
}
.domains li {
  padding: .9rem .75rem .9rem 0;
  font: 500 .68rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 560px) {
  .domains { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .domains li + li { padding-left: .75rem; border-left: 1px solid var(--line); }
}

/* ═══════════════ PLATES (figures) ═══════════════ */
.plate {
  position: relative;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(12, 18, 26, .92), rgba(7, 11, 16, .92));
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--steel); border-style: solid; opacity: .7;
}
.plate::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.plate::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.plate-head {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--line);
  font: 500 .64rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.plate-head span:last-child { color: var(--faint); text-align: right; }
.plate .fig { width: 100%; height: auto; }
.plate-cap {
  padding: .8rem .9rem; border-top: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
}

.legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem;
  padding: .85rem .9rem; border-top: 1px solid var(--line);
  font: 500 .64rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 640px) { .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legend li { display: flex; align-items: center; gap: .55rem; }
.sw { display: inline-block; flex: none; width: 16px; height: 10px; }
.sw-nominal, .sw-degraded { width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; }
.sw-nominal { background: var(--cyan); }
.sw-degraded { background: var(--amber); }
.sw-conf { border: 1px solid var(--cyan); border-radius: 50%; background: var(--cyan-dim); }
.sw-track { height: 0; border-top: 1.5px solid var(--ink); }
.sw-zone {
  border: 1px dashed rgba(226, 165, 60, .55);
  background: repeating-linear-gradient(45deg, rgba(226, 165, 60, .45) 0 1px, transparent 1px 4px);
}
.sw-link { height: 0; border-top: 1px dashed var(--steel); }

/* SVG figure primitives */
.fx-grid { fill: none; stroke: #9fb3c8; stroke-opacity: .055; stroke-width: 1; }
.fx-land { fill: #0b131b; stroke: #26384a; stroke-width: 1; }
.fx-contour path { fill: none; stroke: #7f9bb5; stroke-opacity: .17; stroke-width: 1; }
.fx-contour .dash { stroke-dasharray: 3 5; }
.fx-hatch { stroke: #e2a53c; stroke-opacity: .2; stroke-width: 1; }
.fx-zone-fill { opacity: .9; }
.fx-zone { fill: none; stroke: #e2a53c; stroke-opacity: .3; stroke-dasharray: 3 5; }
.fx-link { stroke: var(--steel); stroke-opacity: .6; stroke-dasharray: 2 4; }
.fx-link-pulse { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 6 210; stroke-linecap: round; stroke-opacity: .9; }
.fx-vessel { fill: var(--ink); }
.fx-vessel-2 { fill: none; stroke: var(--steel); stroke-width: 1.4; }
.fx-wake { stroke: var(--ink); stroke-opacity: .22; fill: none; }
.fx-src { fill: none; stroke-width: 1; }
.fx-src.b { stroke-dasharray: 6 4; }
.fx-src.c { stroke-dasharray: 1 4; stroke-linecap: round; }
.fx-src-d { fill: none; stroke-width: 1.2; stroke-dasharray: 4 4; }
.fx-track { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.fx-conf { stroke: var(--cyan); stroke-opacity: .75; stroke-width: 1; }
.fx-conf-outer { fill: none; stroke: var(--cyan); stroke-opacity: .22; stroke-dasharray: 2 4; }
.fx-dot-n { fill: var(--cyan); }
.fx-dot-d { fill: var(--amber); }
.fx-dot-s { fill: var(--steel); }
.fx-d-ring { fill: none; stroke: var(--amber); stroke-opacity: .55; stroke-dasharray: 2 3; }
.fx-north path { fill: var(--steel); fill-opacity: .7; }
.fx-leader { fill: none; stroke: var(--faint); stroke-width: 1; }
.fx-label { font: 500 10px var(--mono); letter-spacing: .08em; fill: var(--muted); }
.fx-label-lg { font-size: 12px; }
.fx-label-d { fill: var(--amber); }
.fx-label-a { fill: var(--amber); fill-opacity: .85; }
.fx-label-zone { fill: var(--amber); fill-opacity: .6; }
.fx-label-ink { fill: var(--ink); }
.fx-assessed { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.fx-hull { fill: rgba(147, 164, 182, .04); stroke: var(--steel); stroke-opacity: .6; stroke-width: 1; }
.fx-wire { fill: none; stroke: var(--steel); stroke-opacity: .45; }
.fx-node { fill: var(--cyan-dim); stroke: var(--cyan); stroke-opacity: .8; }
.fx-node-r { fill: none; stroke: var(--steel); stroke-opacity: .5; stroke-dasharray: 3 3; }
.fx-link-e { fill: none; stroke: var(--steel); stroke-opacity: .6; stroke-width: 1.2; }
.fx-link-gap { stroke: var(--amber); stroke-opacity: .9; }
.fx-ok { stroke: var(--cyan); stroke-width: 2; }

/* Callouts are legible on wide plates only; the HTML legend covers small screens */
@media (max-width: 719px) { .callout { display: none; } }

/* Figure motion */
.anim-breathe { transform-box: fill-box; transform-origin: center; animation: breathe 7s ease-in-out infinite; }
.anim-drift { animation: drift 10s ease-in-out infinite; }
.anim-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.4s ease-in-out infinite; }
.fx-link-pulse { animation: dash-run 4.5s linear infinite; }
.fx-link-gap { animation: intermittent 6s steps(1, end) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 4px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes dash-run { to { stroke-dashoffset: -216; } }
@keyframes intermittent { 0%, 30% { opacity: 1; } 31%, 46% { opacity: 0; } 47%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }

/* Fig. 02 sequence: agreement → divergence → confidence adjusted (18s loop) */
.ap-d { animation: ap-move 18s cubic-bezier(.45, 0, .25, 1) infinite; }
.ap-d-dot { fill: var(--cyan); animation: ap-dot 18s linear infinite; }
.ap-d-ring { fill: none; stroke-width: 1; stroke-dasharray: 2 3; stroke: var(--cyan); stroke-opacity: .7; animation: ap-ring 18s linear infinite; }
.ap-d-letter { fill: var(--muted); }
.ap-d-note { fill: var(--amber); opacity: 0; animation: ap-note 18s linear infinite; }
.ap-trail { stroke: var(--amber); stroke-opacity: .5; stroke-dasharray: 3 4; opacity: 0; animation: ap-trail 18s linear infinite; }
@keyframes ap-move {
  0%, 18% { transform: translate(0, 0); opacity: 1; }
  55%, 86% { transform: translate(136px, -118px); opacity: 1; }
  92% { transform: translate(136px, -118px); opacity: 0; }
  93% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes ap-dot { 0%, 26% { fill: #5ec4dd; } 42%, 92% { fill: #e2a53c; } 93%, 100% { fill: #5ec4dd; } }
@keyframes ap-ring {
  0%, 26% { stroke: #5ec4dd; stroke-opacity: .7; }
  42% { stroke: #e2a53c; stroke-opacity: .6; }
  60%, 92% { stroke: #e2a53c; stroke-opacity: .16; }
  93%, 100% { stroke: #5ec4dd; stroke-opacity: .7; }
}
@keyframes ap-note { 0%, 58% { opacity: 0; } 62%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes ap-trail { 0%, 24% { opacity: 0; } 50%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }

.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ph {
  display: grid; gap: .3rem; align-content: start;
  padding: .85rem .9rem .95rem;
  border-top: 2px solid transparent; margin-top: -1px;
}
.ph + .ph { border-left: 1px solid var(--line); }
.ph-n { font: 500 .64rem/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.ph-t { font: 500 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ph-s { font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.ph1 { animation: ph1 18s linear infinite; }
.ph2 { animation: ph2 18s linear infinite; }
.ph3 { animation: ph3 18s linear infinite; }
@keyframes ph1 { 0%, 18% { opacity: 1; border-top-color: #5ec4dd; } 20%, 93% { opacity: .38; border-top-color: transparent; } 95%, 100% { opacity: 1; border-top-color: #5ec4dd; } }
@keyframes ph2 { 0%, 18% { opacity: .38; border-top-color: transparent; } 20%, 54% { opacity: 1; border-top-color: #e2a53c; } 56%, 100% { opacity: .38; border-top-color: transparent; } }
@keyframes ph3 { 0%, 54% { opacity: .38; border-top-color: transparent; } 56%, 92% { opacity: 1; border-top-color: #5ec4dd; } 94%, 100% { opacity: .38; border-top-color: transparent; } }
@media (max-width: 479px) {
  .phases { grid-template-columns: 1fr; }
  .ph + .ph { border-left: 0; border-top-width: 1px; border-top-color: var(--line); }
  .ph { grid-template-columns: 2rem 1fr; column-gap: .5rem; padding: .7rem .9rem; }
  .ph-n { grid-row: span 2; padding-top: .15rem; }
}

/* Paused when offscreen (set by JS) */
[data-anim].is-paused .anim,
[data-anim].is-paused .anim-breathe,
[data-anim].is-paused .anim-drift,
[data-anim].is-paused .anim-pulse { animation-play-state: paused; }

/* ═══════════════ SECTIONS ═══════════════ */
.section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; border-top: 1px solid var(--line); }
.hero + .section { border-top: 0; }
.sec-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .eyebrow { margin-bottom: 1.25rem; }
.sec-head:not(.split) .eyebrow { margin-bottom: 0; }
@media (min-width: 960px) {
  .sec-head.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
  .sec-head.split .h2 { max-width: 14em; }
}

/* Cell grids (hairline separated) */
.cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell { background: var(--bg); padding: 1.75rem 1.5rem 2rem; transition: background-color .2s; }
.cell p { font-size: .9375rem; line-height: 1.62; color: var(--text); }
.cells-3 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cells-cap { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cells-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cells-cap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.icon { width: 44px; height: 44px; }
.i-s, .i-c, .i-a { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.i-s { stroke: var(--steel); }
.i-c { stroke: var(--cyan); }
.i-a { stroke: var(--amber); }
.i-cf { fill: var(--cyan); }
.i-c.dash { stroke-dasharray: 2 3; }

.cell-label {
  margin: 1.5rem 0 .6rem;
  font: 500 .78rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}

.cap { padding: 1.75rem 1.5rem 2.25rem; }
.cap:hover { background: var(--bg-2); }
.cap-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.75rem; }
.cap .h3 { margin-bottom: .65rem; }

.cap-ai {
  display: grid; gap: .75rem 3rem;
  margin-top: -1px; padding: 1.5rem;
  border: 1px solid var(--line); background: var(--bg-1);
}
@media (min-width: 860px) { .cap-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; } }
.cap-ai-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.cap-ai p { font-size: .9375rem; line-height: 1.62; color: var(--text); }
.tag {
  font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); padding: .4rem .5rem; border-radius: 2px;
}

/* ═══════════════ APNT ═══════════════ */
.apnt { background: var(--bg-1); overflow: hidden; }
.apnt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(159, 179, 200, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 179, 200, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%);
}
.apnt-grid { position: relative; display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .apnt-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
  .apnt-fig { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.product { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0 1.5rem; }
.product-name { font: 600 1.25rem/1 var(--font); letter-spacing: -.005em; color: var(--ink); }
.status-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
  font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line-3); border-radius: 2px;
}
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.status.s-dev i { background: var(--steel); }
.apnt-copy .h2 { margin-bottom: 1.5rem; }

.outcomes { margin: 2.5rem 0 2rem; border-top: 1px solid var(--line-2); }
.outcomes > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.outcomes dt { font: 500 .72rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); padding-top: .1rem; }
.outcomes dd { color: var(--ink); font-size: 1rem; line-height: 1.55; }
@media (max-width: 420px) { .outcomes > div { grid-template-columns: 1fr; gap: .25rem; } }

.note {
  margin-bottom: 2rem; padding-left: 1rem;
  border-left: 2px solid var(--cyan);
  font-size: .9375rem; line-height: 1.6; color: var(--text); max-width: 36em;
}

/* ═══════════════ INTEGRATION FLOW ═══════════════ */
.flow-plate { margin-bottom: 2.5rem; }
.flow { display: grid; gap: 0; padding: 1.5rem; }
.flow-t {
  font: 500 .66rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}
.flow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.flow-list li {
  display: flex; align-items: center;
  padding: .75rem .85rem; min-height: 48px;
  border: 1px solid var(--line-2); background: var(--bg);
  font-size: .9rem; line-height: 1.3; color: var(--ink);
}
.flow-out li { border-color: rgba(94, 196, 221, .28); }
.flow-link { display: flex; justify-content: center; padding: .5rem 0; }
.flow-link .lk-h { display: none; }
.flow-link .lk-v { width: 20px; height: 44px; }
.lk { fill: none; stroke: var(--steel); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lk-flow { fill: none; stroke: var(--cyan); stroke-width: 1.25; stroke-dasharray: 4 14; vector-effect: non-scaling-stroke; animation: lk-run 2.6s linear infinite; }
@keyframes lk-run { to { stroke-dashoffset: -36; } }
.flow-core {
  position: relative; padding: 1.5rem;
  border: 1px solid rgba(94, 196, 221, .55);
  background: linear-gradient(180deg, rgba(94, 196, 221, .08), rgba(94, 196, 221, .02));
}
.flow-core .k-mark { width: 26px; height: 26px; color: var(--ink); margin-bottom: 1rem; }
.flow-core-t { font: 600 1.15rem/1.2 var(--font); color: var(--ink); margin-bottom: 1rem; }
.flow-core ul { display: grid; gap: .5rem; }
.flow-core li {
  padding: .55rem .7rem; border: 1px solid var(--line-3); background: rgba(5, 8, 12, .6);
  font: 500 .66rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.flow-t-out { margin-top: 0; }

@media (min-width: 900px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.05fr) 72px minmax(0, 1fr);
    grid-template-areas:
      "tin . . . tout"
      "in l1 core l2 out";
    padding: 1.75rem 1.75rem 2rem;
  }
  .flow-t-in { grid-area: tin; }
  .flow-t-out { grid-area: tout; }
  .flow-in { grid-area: in; }
  .flow-out { grid-area: out; }
  .l1 { grid-area: l1; }
  .l2 { grid-area: l2; }
  .flow-core { grid-area: core; align-self: center; }
  .flow-list { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 0; }
  .flow-list li { margin: 5px 0; }
  .flow-link { padding: 0; align-self: stretch; }
  .flow-link .lk-h { display: block; width: 100%; height: 100%; }
  .flow-link .lk-v { display: none; }
}

.int-notes .cell { padding: 1.5rem; }
.int-notes .h3 { font-size: 1rem; margin-bottom: .5rem; }

/* ═══════════════ ENGINEERING ═══════════════ */
.eng-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .eng-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; }
  .edge-fig { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.principles { border-top: 1px solid var(--line-2); }
.principles li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem;
  padding: 1.6rem 0 1.75rem; border-bottom: 1px solid var(--line);
}
.principles .num { color: var(--cyan); padding-top: .3rem; }
.principles .h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.principles p { color: var(--text); line-height: 1.65; max-width: 36em; }

/* ═══════════════ COMPANY ═══════════════ */
.co-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .co-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: end; } }
.co-grid .h2 { margin: 1.25rem 0 2rem; max-width: 16em; }
.co-copy .body { margin-top: 1.25rem; }
.tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tags li {
  background: var(--bg); padding: 1rem;
  font: 500 .68rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}

/* ═══════════════ PARTNERS ═══════════════ */
.partners { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partners li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } .partners li:last-child { grid-column: auto; } }
.partners li {
  display: grid; gap: 1.5rem; align-content: space-between;
  min-height: 7.5rem; padding: 1.25rem;
  background: var(--bg); color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.35;
}
@media (max-width: 639px) { .partners li { min-height: 0; grid-template-columns: 2rem 1fr; gap: .5rem; } }

.engage .num { display: block; margin-bottom: 1.5rem; color: var(--cyan); }
.engage .h3 { margin-bottom: .5rem; }

/* ═══════════════ CONTACT ═══════════════ */
.contact { background: var(--bg-1); }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; } }
.contact-copy .h2 { margin: 1.25rem 0 1.5rem; }
.contact-copy .body { margin-top: 1rem; }
.handling { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.handling .mini-h { margin-bottom: .5rem; }
.handling p:last-child { font-size: .9375rem; line-height: 1.6; color: var(--text); max-width: 30em; }

.form-panel { border: 1px solid var(--line-2); background: var(--bg); padding: clamp(1.25rem, 3vw, 2.25rem); }
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: 1 / -1; }
}
.field label {
  display: block; margin-bottom: .5rem;
  font: 500 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.field label span[aria-hidden] { color: var(--cyan); }
.field label #captcha-prompt { color: var(--ink); white-space: nowrap; }
.field input, .field textarea {
  width: 100%; padding: .85rem .95rem;
  font: 400 1rem/1.5 var(--font); color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 2px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { min-height: 156px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); background: var(--bg-2);
  box-shadow: 0 0 0 3px rgba(94, 196, 221, .18);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red); }
.captcha input { max-width: 12rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.req-note { font-size: .8125rem; color: var(--muted); }

.form-resp:empty { display: none; }
.fm { margin-top: 1.25rem; padding: .85rem 1rem; border: 1px solid; border-radius: 2px; font-size: .9375rem; line-height: 1.5; }
.fm[hidden] { display: none; }
.fm.loading { border-color: var(--line-3); color: var(--muted); }
.fm.error { border-color: rgba(224, 88, 63, .6); color: #f2b4a7; background: rgba(224, 88, 63, .08); }
.fm.sent { border-color: rgba(94, 196, 221, .6); color: var(--ink); background: var(--cyan-dim); }

/* ═══════════════ FOOTER ═══════════════ */
.footer { border-top: 1px solid var(--line); padding: 3rem 0 2rem; }
.footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-tag { margin-top: 1rem; font: 500 .68rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.footer-nav a { color: var(--text); text-decoration: none; font-size: .9rem; padding: .35rem 0; }
.footer-nav a:hover { color: var(--ink); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--muted);
}

/* ═══════════════ REVEAL ═══════════════ */
.js .rv { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .06s; } .d2 { transition-delay: .12s; }
.d3 { transition-delay: .18s; } .d4 { transition-delay: .24s; }

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .anim, .anim-breathe, .anim-drift, .anim-pulse, .lk-flow, .fx-link-pulse, .fx-link-gap { animation: none !important; }
  .fx-link-pulse, .lk-flow { display: none; }
  /* Fig. 02 shown statically in its diverged state */
  .ap-d { transform: translate(136px, -118px); }
  .ap-d-dot { fill: var(--amber); }
  .ap-d-ring { stroke: var(--amber); stroke-opacity: .2; }
  .ap-d-note, .ap-trail { opacity: 1; }
  .ph { opacity: 1; }
  .ph3 { border-top-color: var(--cyan); }
  .btn .arr, .nav-links a::after { transition: none; }
}