/* ============================================================
   KLYPIX — marketing site styles
   ============================================================ */

/* Critical Sans 400/500/700/900 faces are preloaded from the real document
   head. Keep swap as the resilient fallback for extreme network failures;
   hiding first-paint text to disguise a slow font is not an acceptable fix. */
@font-face { font-family:'Thmanyah Sans'; font-weight:300; src:url('/fonts/thmanyah/thmanyahsans-Light.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; font-weight:400; src:url('/fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; font-weight:500; src:url('/fonts/thmanyah/thmanyahsans-Medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; font-weight:700; src:url('/fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; font-weight:900; src:url('/fonts/thmanyah/thmanyahsans-Black.woff2') format('woff2'); font-display:swap; }

@font-face { font-family:'Thmanyah Serif'; font-weight:300; src:url('/fonts/thmanyah/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Serif'; font-weight:400; src:url('/fonts/thmanyah/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Serif'; font-weight:500; src:url('/fonts/thmanyah/thmanyahserifdisplay-Medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Serif'; font-weight:700; src:url('/fonts/thmanyah/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Thmanyah Serif'; font-weight:900; src:url('/fonts/thmanyah/thmanyahserifdisplay-Black.woff2') format('woff2'); font-display:swap; }

:root{
  --bg:#070807;
  --bg-2:#0c0e0c;
  --bg-card:rgba(255,255,255,.025);
  --ink:#f4f6f4;
  --ink-2:rgba(244,246,244,.60);
  --ink-3:rgba(244,246,244,.38);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --brand:#1fbf0d;
  --brand-bright:#46e62a;
  --brand-deep:#0f7d08;
  --brand-soft:rgba(40,200,18,.14);
  --brand-glow:rgba(50,220,30,.55);
  --accent-text:var(--brand-bright);
  --dot:rgba(255,255,255,.045);
  --card-glow-op:.32; /* @kind other */

  --serif:'Thmanyah Serif', Georgia, serif; /* @kind font */
  --sans:'Thmanyah Sans','Segoe UI',system-ui,-apple-system,sans-serif; /* @kind font */

  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1); /* @kind other */
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"]{
  --bg:#f3f6f1;
  --bg-2:#eaeee7;
  --bg-card:rgba(10,30,10,.025);
  --ink:#0c130c;
  --ink-2:rgba(12,19,12,.64);
  --ink-3:rgba(12,19,12,.46);
  --line:rgba(8,30,8,.10);
  --line-2:rgba(8,30,8,.16);
  --brand:#16a307;
  --brand-deep:#0c7a05;
  --brand-soft:rgba(22,163,7,.12);
  --brand-glow:rgba(40,200,18,.40);
  --accent-text:var(--brand-deep);
  --dot:rgba(10,40,10,.07);
  --card-glow-op:.16; /* @kind other */
}
[data-theme="light"] ::selection{color:#fff;}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--brand);color:#04140a;}

::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
#scene{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  transition:opacity .6s ease;
}
.page{position:relative; z-index:2;}
section{position:relative;}

h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.02em;}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-text);
  box-shadow:0 0 10px var(--brand-glow);}
.crop.tl{top:0;left:0;} .crop.tl::before{top:0;left:0;} .crop.tl::after{top:0;left:0;}
.crop.br{bottom:0;right:0;} .crop.br::before{bottom:0;right:0;} .crop.br::after{bottom:0;right:0;}

/* ---------- big feature cards grid ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){ .cards{grid-template-columns:1fr;} }
.agent-bar .ttl{margin-left:8px; font-size:12.5px; color:var(--ink-3);}
.metric .v{font-family:var(--serif); font-size:clamp(34px,4vw,52px); color:var(--ink); line-height:1;}
.metric .v em{color:var(--accent-text); font-style:normal;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 40px; position:relative; z-index:2;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
.type{
  display:flex; align-items:center; gap:13px; padding:17px 18px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--line);
  transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.type:hover{border-color:var(--line-2); transform:translateY(-3px); background:rgba(255,255,255,.045);}
[data-theme="light"] .type:hover{background:rgba(10,40,10,.035);}
.type .ti{flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--accent-text);}
.type .ti svg{width:19px;height:19px;}
.type .tt{font-family:var(--sans); font-size:14.5px; font-weight:600; line-height:1.2;}
.type .ts{font-size:12px; color:var(--ink-3); margin-top:2px;}
@keyframes dash{to{stroke-dashoffset:-20;}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ---------- audience choice below the hero ---------- */
.kx-journey-chooser{
  background:#f7f9f8;
  border-top:1px solid rgba(15,23,20,.08);
  padding:92px 0;
  scroll-margin-top:80px;
}
.kx-journey-chooser-inner{
  width:min(1040px,100%);
  margin:0 auto;
  padding:0 32px;
}
.kx-journey-chooser-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
}
.kx-journey-chooser-head h2{
  max-width:15ch;
  margin:0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(28px,3.2vw,44px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.kx-journey-chooser-head p{
  max-width:38ch;
  margin:0;
  /* Two sentences of body copy: --ink-soft (10.3:1), not --ink-muted (5.3:1),
     which WEBSITE_THEME.md reserves for captions and hints. */
  color:#33403a;
  font-size:15.5px;
  line-height:1.6;
}

/* ---------- real product proof ---------- */
.kx-product-proof{
  background:#eef7f2;
  border-top:1px solid rgba(15,23,20,.08);
  border-bottom:1px solid rgba(15,23,20,.08);
  padding:104px 0;
}
.kx-product-proof-inner{
  width:min(1240px,100%);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
  gap:clamp(42px,6vw,82px);
  align-items:center;
}
.kx-product-proof-copy h2{
  max-width:14ch;
  margin:0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(30px,3.2vw,46px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.016em;
  text-wrap:balance;
}
.kx-product-proof-copy p{
  max-width:52ch;
  margin:20px 0 0;
  color:#33403a;
  font-size:16.5px;
  line-height:1.68;
}
.kx-product-proof-points{
  margin-top:30px;
  border-top:1px solid rgba(15,23,20,.13);
}
.kx-product-proof-points div{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid rgba(15,23,20,.13);
}
.kx-product-proof-points strong{
  color:#065f46;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
}
.kx-product-proof-points span{
  color:#5c6b64;
  font-size:13.5px;
  line-height:1.55;
}
.kx-product-proof-media{
  margin:0;
  padding:10px;
  border:1px solid rgba(15,23,20,.13);
  border-radius:16px;
  background:#fff;
  box-shadow:0 26px 70px rgba(20,40,30,.16);
}
.kx-showcase-video{position:relative;overflow:hidden;border-radius:11px;background:#0b100f;}
.kx-product-proof-media video{
  display:block;
  width:100%;
  /* Native 1920x1080. Keep the full desktop frame visible: this film explains
     spatial relationships, so cropping would remove product evidence. */
  aspect-ratio:16/9;
  border-radius:inherit;
  background:#0b100f;
  object-fit:contain;
}
.kx-showcase-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:0;border-radius:inherit;background:linear-gradient(180deg,rgba(5,15,11,.04),rgba(5,15,11,.36));color:#fff;cursor:pointer;font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;font-size:15px;font-weight:700;transition:background 180ms ease,opacity 180ms ease;}
.kx-showcase-play:hover{background:linear-gradient(180deg,rgba(5,15,11,.08),rgba(5,15,11,.48));}
.kx-showcase-play:focus-visible{outline:3px solid #34d399;outline-offset:-6px;}
.kx-showcase-play[hidden]{display:none;}
.kx-showcase-play-mark{display:grid;place-items:center;width:64px;height:64px;padding-inline-start:4px;border-radius:50%;background:#10b981;color:#07130e;box-shadow:0 12px 32px rgba(5,15,11,.35);font-size:25px;line-height:1;transition:transform 180ms cubic-bezier(.16,1,.3,1),background 180ms ease;}
.kx-showcase-play:hover .kx-showcase-play-mark{transform:scale(1.06);background:#34d399;}
.kx-showcase-play:active .kx-showcase-play-mark{transform:scale(.97);}
.kx-showcase-play-label{padding:9px 12px;border-radius:9px;background:rgba(5,15,11,.78);box-shadow:0 8px 24px rgba(5,15,11,.24);}
.kx-video-controls{--kx-player-accent:#34d399;--kx-player-accent-hi:#a7f3d0;--kx-player-buffered:rgba(167,243,208,.34);--kx-player-rail:rgba(236,253,245,.18);--kx-player-thumb:13px;--kx-player-thumb-offset:-5px;position:absolute;inset-inline:6px;bottom:6px;z-index:3;display:flex;align-items:center;gap:5px;min-height:38px;padding:11px 6px 5px;border:1px solid rgba(167,243,208,.16);border-radius:8px;background:linear-gradient(180deg,rgba(8,27,19,.92),rgba(5,15,11,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(3,12,8,.24);color:#f8fafc;opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity 160ms ease,transform 160ms ease;}
.kx-showcase-video[data-kx-controls-visible="true"] .kx-video-controls{opacity:1;transform:translateY(0);pointer-events:auto;}
.kx-video-controls::before{content:attr(data-kx-scrub-label);position:absolute;left:var(--kx-scrub-x,20px);top:-31px;z-index:4;min-width:38px;padding:4px 7px;border:1px solid rgba(167,243,208,.22);border-radius:6px;background:rgba(5,15,11,.96);box-shadow:0 6px 18px rgba(3,12,8,.22);color:#d1fae5;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-variant-numeric:tabular-nums;line-height:1.2;text-align:center;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity 120ms ease,transform 120ms ease;}
.kx-video-controls[data-kx-scrub-preview="true"]::before{opacity:1;transform:translate(-50%,0);}
.kx-video-control,.kx-video-time{position:relative;z-index:3;}
.kx-video-control{display:grid;place-items:center;min-height:28px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#ecfdf5;cursor:pointer;font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;font-size:10.5px;font-weight:700;white-space:nowrap;transition:background 160ms ease,border-color 160ms ease,transform 120ms ease;}
.kx-video-control:hover{background:rgba(52,211,153,.13);border-color:rgba(167,243,208,.15);}
.kx-video-control:active{transform:scale(.97);}
.kx-video-control:focus-visible{outline:2px solid #a7f3d0;outline-offset:1px;}
.kx-video-control[data-kx-video-toggle],.kx-video-control[data-kx-video-mute]{width:30px;padding:0;font-size:0;}
.kx-video-control svg{display:block;width:17px;height:17px;margin:auto;color:currentColor;}
.kx-video-time{min-width:62px;color:rgba(236,253,245,.78);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;}
.kx-video-timeline{-webkit-appearance:none;appearance:none;position:absolute;inset-inline:7px;top:0;z-index:2;width:calc(100% - 14px);height:28px;margin:0;transform:translateY(-50%);direction:ltr;border:0;border-radius:999px;background:linear-gradient(90deg,var(--kx-player-accent) 0 var(--kx-video-progress,0%),var(--kx-player-buffered) var(--kx-video-progress,0%) var(--kx-video-buffered,0%),var(--kx-player-rail) var(--kx-video-buffered,0%) 100%) center/calc(100% - var(--kx-player-thumb)) 3px no-repeat;cursor:pointer;touch-action:pan-y;user-select:none;}
.kx-video-timeline::-webkit-slider-runnable-track{height:3px;border:0;border-radius:999px;background:transparent;}
.kx-video-timeline::-webkit-slider-thumb{-webkit-appearance:none;width:var(--kx-player-thumb);height:var(--kx-player-thumb);margin-top:var(--kx-player-thumb-offset);border:2px solid #07130e;border-radius:50%;background:var(--kx-player-accent-hi);box-shadow:0 0 0 1px rgba(52,211,153,.42);transition:transform 120ms ease,box-shadow 120ms ease;}
.kx-video-timeline::-moz-range-track,.kx-video-timeline::-moz-range-progress{height:3px;border:0;border-radius:999px;background:transparent;}
.kx-video-timeline::-moz-range-thumb{width:var(--kx-player-thumb);height:var(--kx-player-thumb);border:2px solid #07130e;border-radius:50%;background:var(--kx-player-accent-hi);box-shadow:0 0 0 1px rgba(52,211,153,.42);transition:transform 120ms ease,box-shadow 120ms ease;}
.kx-video-timeline:focus-visible{outline:none;}
.kx-video-timeline:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #07130e,0 0 0 4px var(--kx-player-accent-hi);}
.kx-video-timeline:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #07130e,0 0 0 4px var(--kx-player-accent-hi);}
.kx-showcase-video[data-kx-scrubbing="true"] .kx-video-timeline::-webkit-slider-thumb{transform:scale(1.14);}
.kx-showcase-video[data-kx-scrubbing="true"] .kx-video-timeline::-moz-range-thumb{transform:scale(1.14);}
.kx-video-timeline:disabled{cursor:progress;opacity:.5;}
.kx-video-control[data-kx-video-mute]{margin-inline-start:auto;}
.kx-video-fullscreen{width:30px;padding:0;font-size:0;}
.kx-showcase-video:fullscreen{width:100vw;height:100vh;border-radius:0;background:#030806;}
.kx-showcase-video:fullscreen video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;}
.kx-showcase-video:fullscreen .kx-video-controls{inset-inline:16px;bottom:16px;}
@media (max-width:560px){.kx-showcase-play{gap:9px;font-size:13px;}.kx-showcase-play-mark{width:52px;height:52px;font-size:21px;}}
@media (max-width:560px){.kx-video-controls{inset-inline:4px;bottom:4px;gap:4px;min-height:37px;padding:11px 5px 4px;}.kx-video-time{min-width:54px;font-size:8.5px;}.kx-video-control{min-height:28px;padding:0 6px;font-size:10px;}.kx-video-control[data-kx-video-toggle],.kx-video-control[data-kx-video-mute],.kx-video-fullscreen{width:28px;padding:0;}.kx-video-timeline{inset-inline:6px;width:calc(100% - 12px);}}
@media (hover:hover) and (pointer:fine){.kx-video-timeline:hover::-webkit-slider-thumb{transform:scale(1.12);}.kx-video-timeline:hover::-moz-range-thumb{transform:scale(1.12);}}
@media (pointer:coarse){.kx-video-controls{--kx-player-thumb:17px;--kx-player-thumb-offset:-7px;padding-top:13px;}.kx-video-timeline{height:36px;}}
@media (prefers-reduced-transparency:reduce){.kx-video-controls{background:#07130e;}}
@media (forced-colors:active){.kx-video-timeline{-webkit-appearance:auto;appearance:auto;background:none;accent-color:Highlight;}.kx-video-controls::before{border:1px solid CanvasText;background:Canvas;color:CanvasText;}}
@media (prefers-reduced-motion:reduce){.kx-showcase-play,.kx-showcase-play-mark,.kx-video-controls,.kx-video-control,.kx-video-controls::before,.kx-video-timeline::-webkit-slider-thumb,.kx-video-timeline::-moz-range-thumb{transition:none!important;}}
.kx-product-proof-media figcaption{
  padding:12px 6px 3px;
  color:#5c6b64;
  font-size:12.5px;
  line-height:1.5;
}

/* ---------- in-place proof gallery ---------- */
.kx-proof-gallery{
  background:#0a0a0f;
  padding:112px 0 118px;
  scroll-margin-top:80px;
}
.kx-proof-gallery-inner{
  width:min(1240px,100%);
  margin:0 auto;
  padding:0 32px;
}
.kx-proof-gallery-head{max-width:760px;}
/* The sanctioned machine-label system (WEBSITE_THEME.md S3): Thmanyah 500-600,
   11-12px, .15-.2em. Poppins-at-10.5px was a second label family; there is only
   one. */
.kx-proof-gallery-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 13px;
  border:1px solid rgba(52,211,153,.35);
  border-radius:999px;
  background:rgba(52,211,153,.1);
  color:#34d399;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.kx-proof-gallery-eyebrow span{
  width:7px;
  height:7px;
  border-radius:2px;
  background:#34d399;
}
/* Deliberately NOT the largest type on the page any more. This heading names a
   tab chooser; the commercial argument (#coordination) outranks it, so it sits
   a full step below the section headings that carry a claim. */
.kx-proof-gallery-head h2{
  margin:20px 0 0;
  color:#f7f9f8;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(28px,3vw,42px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.kx-proof-gallery-head p{
  max-width:62ch;
  margin:16px 0 0;
  color:rgba(247,249,248,.66);
  font-size:16.5px;
  line-height:1.7;
}
.kx-proof-gallery-shell{margin-top:54px;}
.kx-proof-tabs{
  display:flex;
  gap:8px;
  padding-bottom:18px;
  overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.12);
  scrollbar-width:none;
}
.kx-proof-tabs::-webkit-scrollbar{display:none;}
.kx-proof-tabs button{
  appearance:none;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:#12121a;
  color:rgba(247,249,248,.62);
  cursor:pointer;
  flex:none;
  padding:10px 16px;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease;
}
.kx-proof-tabs button:hover{
  border-color:rgba(52,211,153,.38);
  color:#f7f9f8;
}
.kx-proof-tabs button[aria-selected="true"]{
  border-color:#34d399;
  background:#34d399;
  color:#071a12;
}
.kx-proof-tabs button:focus-visible{
  outline:3px solid rgba(167,139,250,.75);
  outline-offset:3px;
}
.kx-proof-panels{padding-top:44px;}
.kx-case-panel{
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(470px,1.22fr);
  gap:clamp(44px,6vw,78px);
  align-items:center;
}
.kx-case-panel[hidden]{display:none!important;}
/* Machine label, not costume mono: JetBrains Mono is reserved for code inside
   product depictions (WEBSITE_THEME.md S3) and is the brand's own listed
   anti-reference when used as a label face. */
.kx-case-kicker{
  color:#34d399;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.kx-case-copy h3{
  max-width:16ch;
  margin:14px 0 0;
  color:#f7f9f8;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(26px,2.7vw,38px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.kx-case-lede{
  max-width:52ch;
  margin:20px 0 0;
  color:rgba(247,249,248,.68);
  font-size:16.5px;
  line-height:1.7;
}
.kx-case-compare{
  display:grid;
  gap:16px;
  margin-top:30px;
}
/* Was a 2px `border-left` accent - a side stripe, which the design system bans
   outright, and which needed a hand-maintained RTL mirror to survive Arabic.
   A full hairline plus a surface tint says the same thing in both directions
   with no mirror to keep in sync. */
.kx-case-compare>div{
  padding:13px 15px;
  border:1px solid rgba(247,249,248,.14);
  border-radius:12px;
  background:rgba(247,249,248,.03);
}
.kx-case-compare>div:last-child{
  border-color:rgba(52,211,153,.42);
  background:rgba(52,211,153,.07);
}
.kx-case-compare strong{
  display:block;
  margin-bottom:5px;
  color:rgba(247,249,248,.5);
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:11.5px;
  font-weight:600;
}
.kx-case-compare>div:last-child strong{color:#34d399;}
.kx-case-compare p{
  margin:0;
  color:rgba(247,249,248,.76);
  font-size:14px;
  line-height:1.55;
}
.kx-case-media{
  min-width:0;
  min-height:620px;
  margin:0;
  padding:18px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#101017;
  box-shadow:0 30px 74px rgba(0,0,0,.42);
}
.kx-case-media>div{justify-self:center;}
.kx-case-media figcaption{
  margin:16px 2px 0;
  /* .46 measured 4.49:1 on #101017 - a hair under AA. .6 = 6.9:1. */
  color:rgba(247,249,248,.6);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
}
.kx-case-media--proof{padding:14px;}
.kx-case-media--proof .kx-proof-visual{
  width:min(100%,470px);
  min-height:570px;
}
.kx-case-app{
  width:min(100%,520px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#f7f9f8;
  box-shadow:0 20px 46px rgba(0,0,0,.28);
}
.kx-case-appbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,20,.1);
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
}
/* Logical property, so Arabic needs no hand-maintained mirror rule. */
.kx-case-appbar small{
  margin-inline-start:auto;
  color:#047857;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;
  font-weight:500;
}
.kx-case-appmark{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:8px;
  background:#10b981;
  color:#071a12;
  font-size:11px;
  font-weight:900;
}
.kx-case-question{
  margin:22px;
  padding:16px;
  border:1px solid rgba(15,23,20,.11);
  border-radius:12px;
  background:#fff;
}
.kx-case-question span,
.kx-case-answer-label,
.kx-case-sources>span{
  display:block;
  color:#047857;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kx-case-question strong{
  display:block;
  margin-top:8px;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:15px;
  line-height:1.4;
}
.kx-case-answer{
  margin:0 22px;
  padding:17px;
  border-radius:12px;
  background:#0a2417;
}
.kx-case-answer p{
  margin:8px 0 0;
  color:rgba(247,249,248,.86);
  font-size:13.5px;
  line-height:1.6;
}
.kx-case-sources{padding:20px 22px 24px;}
.kx-case-sources>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  color:#33403a;
  font-size:11.5px;
}
.kx-case-sources strong{
  overflow:hidden;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kx-case-sources small{color:#047857;}
.kx-renovation-poster{
  width:min(100%,540px);
  display:grid;
  grid-template-columns:minmax(150px,.78fr) 52px minmax(180px,1fr);
  align-items:center;
}
.kx-renovation-phone{
  overflow:hidden;
  padding:12px;
  border:5px solid #1a2744;
  border-radius:16px;
  background:#f7f9f8;
  box-shadow:0 18px 38px rgba(0,0,0,.28);
}
.kx-renovation-phonebar,
.kx-renovation-canvasbar{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#5c6b64;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px;
}
.kx-renovation-thumb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:9px;
  padding:10px;
  border:1px solid rgba(15,23,20,.1);
  border-radius:9px;
  background:#fff;
  color:#33403a;
  font-size:9.5px;
}
.kx-renovation-thumb--photo{
  min-height:58px;
  align-items:flex-end;
  background:#dfeee7;
}
.kx-renovation-thumb strong{
  color:#047857;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px;
}
.kx-renovation-send{
  margin-top:11px;
  padding:10px;
  border-radius:9px;
  background:#10b981;
  color:#071a12;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:9.5px;
  font-weight:700;
  text-align:center;
}
.kx-renovation-route{
  display:grid;
  justify-items:center;
  gap:8px;
  color:#34d399;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8px;
  text-transform:uppercase;
}
.kx-renovation-route span{
  width:1px;
  height:44px;
  border-left:1px dashed rgba(52,211,153,.6);
}
.kx-renovation-canvas{
  padding:15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:#181820;
  box-shadow:0 18px 38px rgba(0,0,0,.25);
}
.kx-renovation-canvasbar{
  padding-bottom:12px;
  color:rgba(247,249,248,.46);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kx-renovation-decision,
.kx-renovation-open{
  margin-top:12px;
  padding:13px;
  border-radius:10px;
  background:#f5a623;
  color:#33220c;
}
.kx-renovation-open{
  background:#272433;
  color:#f7f9f8;
}
.kx-renovation-decision small,
.kx-renovation-open small{
  display:block;
  margin-bottom:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px;
  text-transform:uppercase;
}
.kx-renovation-decision strong,
.kx-renovation-open strong{
  display:block;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:11.5px;
  line-height:1.35;
}
.kx-renovation-evidence{
  margin-top:12px;
  color:rgba(247,249,248,.48);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px;
  text-align:center;
}
.kx-agent-handoff{width:min(100%,520px);}
.kx-agent-path{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(247,249,248,.66);
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-weight:500;
  font-size:12.5px;
}
.kx-agent-path strong{
  padding:7px 12px;
  border:1px solid rgba(52,211,153,.34);
  border-radius:999px;
  color:#34d399;
  font-weight:600;
}
.kx-agent-path i{color:#a78bfa;font-style:normal;}
.kx-case-media .kx-brief-visual{
  margin:18px 0 0;
  padding:22px;
}
.kx-case-media .kx-brief-line{
  grid-template-columns:104px minmax(0,1fr);
  padding:15px 0;
  font-size:13px;
}
[dir="rtl"] .kx-agent-path i,
[dir="rtl"] .kx-renovation-send span{display:inline-block;transform:scaleX(-1);}

@media(max-width:980px){
  .kx-case-panel{
    grid-template-columns:1fr;
    gap:40px;
  }
  .kx-case-copy{max-width:700px;}
  .kx-case-copy h3{max-width:18ch;}
  .kx-case-media{min-height:560px;}
}

@media(prefers-reduced-motion:no-preference){
  .kx-case-panel:not([hidden]){animation:kx-case-enter 260ms cubic-bezier(.16,1,.3,1) both;}
  @keyframes kx-case-enter{
    from{opacity:.3;transform:translateY(8px);}
    to{opacity:1;transform:none;}
  }
}

@media(max-width:760px){
  .kx-journey-chooser{padding:0 0 72px;}
  .kx-journey-chooser-inner{padding:0 20px;}
  .kx-journey-chooser-head{display:block;}
  .kx-journey-chooser-head h2{max-width:16ch;}
  .kx-journey-chooser-head p{margin-top:14px;}
  .kx-product-proof{padding:76px 0;}
  .kx-product-proof-inner{
    padding:0 20px;
    grid-template-columns:1fr;
    gap:38px;
  }
  .kx-product-proof-copy h2{max-width:14ch;}
  .kx-product-proof-points div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .kx-product-proof-media{padding:7px;}
  .kx-proof-gallery{padding:78px 0 84px;}
  .kx-proof-gallery-inner{padding:0 20px;}
  .kx-proof-gallery-head p{font-size:16px;}
  .kx-proof-gallery-shell{margin-top:38px;}
  .kx-proof-tabs{
    margin-inline:-20px;
    padding:0 20px 15px;
    scroll-padding-inline:20px;
  }
  .kx-proof-tabs button{
    min-height:42px;
    padding:11px 15px;
  }
  .kx-proof-panels{padding-top:34px;}
  .kx-case-panel{gap:32px;}
  .kx-case-copy h3{
    max-width:16ch;
    font-size:clamp(25px,7.4vw,34px);
  }
  .kx-case-lede{font-size:15.5px;}
  .kx-case-media{
    min-height:0;
    padding:10px;
    border-radius:16px;
  }
  .kx-case-media--proof .kx-proof-visual{
    min-height:520px;
    border-radius:12px;
  }
  .kx-case-media figcaption{margin:13px 5px 4px;}
  .kx-renovation-poster{
    width:100%;
    grid-template-columns:1fr;
    gap:14px;
    padding:10px;
  }
  .kx-renovation-phone{
    width:min(230px,82%);
    justify-self:start;
  }
  [dir="rtl"] .kx-renovation-phone{justify-self:end;}
  .kx-renovation-route{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    width:78%;
    justify-self:center;
  }
  .kx-renovation-route span{
    width:100%;
    height:1px;
    border-top:1px dashed rgba(52,211,153,.6);
    border-left:0;
  }
  .kx-renovation-canvas{
    width:min(270px,86%);
    justify-self:end;
  }
  [dir="rtl"] .kx-renovation-canvas{justify-self:start;}
  .kx-agent-path{gap:6px;font-size:11px;}
  .kx-case-media .kx-brief-visual{padding:16px;}
  .kx-case-media .kx-brief-line{
    grid-template-columns:92px minmax(0,1fr);
    gap:9px;
    font-size:11.5px;
  }
  .kx-case-question{margin:14px;}
  .kx-case-answer{margin:0 14px;}
  .kx-case-sources{padding:16px 14px 18px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA SLOTS — one component behind every founder-supplied product capture
   ═══════════════════════════════════════════════════════════════════════════
   Spec + replacement instructions: docs/website/media-slot-guide.md.

   The stage owns an EXPLICIT aspect-ratio, so the page reserves the exact box
   before a single byte of media exists and nothing shifts when the founder
   drops the file in. Filling a slot is one markup line inside .kx-media-stage —
   an image, a video element with its poster, or both — and no layout, no CSS
   and no section copy has to change.

   An UNFILLED slot renders the branded plate below: the KLYPIX bracket motif
   over a soft emerald field, plus a mono label naming the sequence that will
   play there. It is deliberately NOT a mock interface and deliberately NOT a
   "coming soon" badge — the first would be a fabricated screenshot, the second
   would advertise the gap. Once real media is added the plate is simply
   covered; leaving it underneath costs nothing and is what makes a slow video
   degrade gracefully instead of flashing white.                            */
.kx-media{margin:0;}
.kx-media-stage{
  position:relative;
  width:100%;
  /* Per-slot override, set inline, so a founder swapping a 4:5 screenshot for a
     16:9 recording changes ONE value at ONE call site. */
  aspect-ratio:var(--kx-ratio,16/10);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,20,.13);
  background:linear-gradient(152deg,#ffffff,#e4f2ea 62%,#d7ebe1);
  box-shadow:0 22px 56px rgba(20,40,30,.15);
}
.kx-media-stage > img,
.kx-media-stage > video{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  /* `contain`, never `cover`: a future asset with a different ratio letterboxes
     VISIBLY instead of being silently centre-cropped. A landscape re-record
     would otherwise lose its left and right edges with no warning at all. */
  object-fit:contain;
  background:#0b100f;
}
.kx-media--illustration .kx-media-stage{
  background:#f7f9f8;
  box-shadow:0 18px 48px rgba(20,40,30,.11);
}
.kx-media--illustration .kx-media-stage > img{background:#f7f9f8;}

/* ---------- transparent infographic system v2 ----------
   One branded idea per asset, with the page itself providing the canvas.
   Alpha illustrations intentionally lose the old nested card, plate, caption,
   and decorative path overlay; the KLYPIX gaze/blink layers remain live. */
.kx-media-stage:has(>img[src^="/media/infographics-v2/"]){
  aspect-ratio:5/3;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.kx-media--illustration .kx-media-stage:has(>img[src^="/media/infographics-v2/"]),
.kx-media--dark .kx-media-stage:has(>img[src^="/media/infographics-v2/"]){
  border:0;
  background:transparent;
  box-shadow:none;
}
.kx-media-stage>img[src^="/media/infographics-v2/"]{
  background:transparent;
  object-fit:contain;
}
.kx-hero-proof .kx-media-stage,
.kx-journey-hero-visual .kx-media-stage{container-type:inline-size;}
.kx-hero-mascot-signature{
  position:absolute;
  z-index:6;
  color:#075f49;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:9px;
  font-size:clamp(8px,2.6cqi,11px);
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.kx-hero-proof .kx-hero-mascot-signature{left:34%;top:64.5%;}
[data-kx-slot="developers-hero-explainer"] .kx-hero-mascot-signature{left:29.7%;top:67.4%;}
[data-kx-slot="projects-hero-explainer"] .kx-hero-mascot-signature{left:50.8%;top:68.4%;}

/* Cross-document journey movement. The actual destinations remain distinct,
   crawlable pages; supporting browsers morph the shared mint indicator while
   the new hero settles in. All routes retain a normal navigation fallback. */
@view-transition{navigation:auto;}
.kx-journey-indicator{view-transition-name:kx-journey-indicator;}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-group(kx-journey-indicator){animation-duration:420ms;animation-timing-function:cubic-bezier(.16,1,.3,1);}
  ::view-transition-old(root){animation:kx-route-leave 150ms ease both;}
  ::view-transition-new(root){animation:kx-route-enter 440ms cubic-bezier(.16,1,.3,1) both;}
  #top .kx-hero-copy>[data-kx-show]{animation:kx-hero-copy-enter 560ms 40ms cubic-bezier(.16,1,.3,1) both;}
  #top .kx-hero-proof .kx-media-stage,
  #top .kx-journey-hero-visual .kx-media-stage{animation:kx-hero-visual-enter 660ms 110ms cubic-bezier(.16,1,.3,1) both;}
}
@keyframes kx-route-leave{to{opacity:.72;transform:translateY(-4px)}}
@keyframes kx-route-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kx-hero-copy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kx-hero-visual-enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.kx-media-stage:has(>img[src^="/media/infographics-v2/"])>.kx-media-plate,
.kx-media-stage:has(>img[src^="/media/infographics-v2/"])>.kx-motion-overlay,
.kx-media-stage:has(>img[src^="/media/infographics-v2/"])>.kx-github-mark,
.kx-media:has(img[src^="/media/infographics-v2/"])>figcaption{
  display:none;
}

/* ---------- unified infographic motion system ----------
   The illustrations share one still art direction; this layer gives every
   scene the same timing grammar without baking motion into heavy GIF/video
   files. SVG timelines are paused while off-screen by infographic-motion.js. */
.kx-motion-host{position:relative;isolation:isolate;}
.kx-motion-host > img{z-index:1;}
.kx-motion-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
.kx-motion-host.is-motion-active .kx-motion-overlay{opacity:1;}
.kx-motion-path{
  fill:none;
  stroke:#0fa878;
  stroke-width:3.2;
  stroke-linecap:round;
  opacity:.065;
}
.kx-motion-trace{
  fill:none;
  stroke:#0fa878;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:14 74;
  opacity:.48;
  filter:drop-shadow(0 2px 3px rgba(6,95,70,.12));
}
.kx-motion-orb{
  fill:#fffaf0;
  stroke:#0fa878;
  stroke-width:3.2;
  filter:drop-shadow(0 2px 5px rgba(6,95,70,.22));
}
.kx-motion-beat{filter:drop-shadow(0 3px 7px rgba(6,95,70,.12));}
.kx-motion-warning{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 5px 9px rgba(90,62,5,.16));}
.kx-motion-spark{
  fill:none;
  stroke:#f47761;
  stroke-width:4;
  stroke-linecap:round;
  opacity:.55;
  transform-box:fill-box;
  transform-origin:center;
}
.is-motion-active .kx-motion-spark--a{animation:kx-motion-spark 3.8s .3s ease-in-out infinite;}
.is-motion-active .kx-motion-spark--b{animation:kx-motion-spark 4.2s 1.4s ease-in-out infinite;}
@keyframes kx-motion-spark{
  0%,24%,100%{opacity:.18;transform:scale(.72) rotate(0deg)}
  34%{opacity:.8;transform:scale(1.08) rotate(45deg)}
  48%{opacity:.28;transform:scale(.82) rotate(90deg)}
}
@media(hover:hover){
  .kx-motion-host:hover .kx-motion-trace{stroke-width:4;opacity:.68;}
}
@media(prefers-reduced-motion:reduce){
  .kx-motion-overlay{transition:none;opacity:.72;}
  .kx-motion-trace{stroke-dasharray:none;opacity:.25;}
  .kx-motion-spark{animation:none!important;opacity:.28;}
}

/* ---------- KLYPIX character attention ----------
   The gaze layer replaces only the illustrated iris, so the approved character
   silhouette stays untouched. Paired eyes share a target while each character
   gets its own gaze rhythm; the blink layer then closes above it. */
.kx-gaze-layer,
.kx-blink-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.kx-gaze-layer{z-index:4;}
.kx-blink-layer{z-index:5;}
.kx-gaze-eye{
  position:absolute;
  left:calc(var(--kx-eye-x) * 1% - .12%);
  top:calc(var(--kx-eye-y) * 1% - .12%);
  width:calc(var(--kx-eye-w) * 1% + .24%);
  height:calc(var(--kx-eye-h) * 1% + .24%);
  display:block;
  overflow:hidden;
  border-radius:46% 46% 50% 50%;
  background:linear-gradient(180deg,#53c8ee 0%,#219fd7 52%,#0876b6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(5,74,105,.5),
    inset 0 1px 0 rgba(255,255,255,.62);
}
.kx-gaze-pupil{
  --kx-gaze-x:0%;
  --kx-gaze-y:0%;
  position:absolute;
  left:50%;
  top:52%;
  width:47%;
  height:58%;
  display:block;
  border-radius:48%;
  background:#063d32;
  transform:translate(calc(-50% + var(--kx-gaze-x)),calc(-50% + var(--kx-gaze-y)));
  transform-origin:center;
  transition:transform .26s cubic-bezier(.16,1,.3,1);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}
.kx-motion-host.is-motion-active .kx-gaze-pupil{will-change:transform;}
.kx-gaze-pupil::after{
  content:"";
  position:absolute;
  left:18%;
  top:14%;
  width:32%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.9);
}
.kx-gaze-layer.is-pointer-tracking .kx-gaze-pupil{transition-duration:.11s;}
.kx-blink-eye{
  position:absolute;
  left:calc(var(--kx-eye-x) * 1% - .18%);
  top:calc(var(--kx-eye-y) * 1% - .22%);
  width:calc(var(--kx-eye-w) * 1% + .36%);
  height:calc(var(--kx-eye-h) * 1% + .44%);
  display:block;
  overflow:hidden;
  border-radius:48% 48% 52% 52%;
  background:#fffdf7;
  opacity:0;
  transform:scaleY(.18);
  transform-origin:50% 50%;
  box-shadow:0 0 0 1px rgba(6,95,70,.06);
}
.kx-blink-eye::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:max(1px,10%);
  border-radius:999px;
  background:#073f31;
  transform:translateY(-50%);
}
.kx-blink-eye.is-blinking{animation:kx-eye-blink .196s cubic-bezier(.4,0,.2,1) both;}
@keyframes kx-eye-blink{
  0%{opacity:0;transform:scaleY(.16)}
  18%{opacity:1;transform:scaleY(.72)}
  42%,66%{opacity:1;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(.14)}
}

/* ---------- scroll-linked project thread ----------
   A fixed, edge-masked canvas layer makes the page feel continuous while
   keeping copy and product proof visually quiet. Modern browsers tie the path,
   grid and light fields directly to scroll progress; the section observer is
   the graceful fallback. */
.kx-ambient{
  --kx-ambient-green:#0fa878;
  position:fixed;
  inset:0;
  z-index:6;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 9%,transparent 30%,transparent 70%,rgba(0,0,0,.9) 91%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 9%,transparent 30%,transparent 70%,rgba(0,0,0,.9) 91%,#000 100%);
}
.kx-ambient-grid{
  position:absolute;
  inset:-120px 0;
  background-image:
    linear-gradient(rgba(6,95,70,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,95,70,.055) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.48;
  will-change:transform;
}
.kx-ambient-glow{
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  filter:blur(28px);
  opacity:.2;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .8s ease;
  will-change:transform;
}
.kx-ambient-glow--a{
  left:-285px;
  top:8%;
  background:radial-gradient(circle,rgba(15,168,120,.38),rgba(15,168,120,0) 70%);
}
.kx-ambient-glow--b{
  right:-300px;
  top:54%;
  background:radial-gradient(circle,rgba(74,143,191,.32),rgba(74,143,191,0) 70%);
}
.kx-pointer-light{
  display:none;
  position:fixed;
  left:0;
  top:0;
  z-index:7;
  width:560px;
  height:560px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-700px,-700px,0);
  transition:opacity 320ms ease;
  will-change:transform,opacity;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html[data-theme="light"] .kx-pointer-light{
    display:block;
    background:radial-gradient(circle,rgba(52,211,153,.22) 0%,rgba(45,212,191,.12) 30%,rgba(56,189,248,.055) 50%,rgba(56,189,248,0) 72%);
    filter:blur(14px) saturate(108%);
    mix-blend-mode:multiply;
  }
  html[data-theme="dark"] .kx-pointer-light{
    display:block;
    background:radial-gradient(circle,rgba(83,225,170,.14) 0%,rgba(83,225,170,.065) 34%,rgba(83,225,170,0) 70%);
    filter:blur(8px);
    mix-blend-mode:screen;
  }
  html[data-theme="light"].kx-pointer-light-active .kx-pointer-light{opacity:.78;}
  html[data-theme="dark"].kx-pointer-light-active .kx-pointer-light{opacity:1;}
}
.kx-ambient[data-kx-ambient-section="1"] .kx-ambient-glow--a{transform:translate3d(28px,24vh,0);opacity:.26;}
.kx-ambient[data-kx-ambient-section="1"] .kx-ambient-glow--b{transform:translate3d(-18px,-18vh,0);}
.kx-ambient[data-kx-ambient-section="2"] .kx-ambient-glow--a{transform:translate3d(8px,48vh,0);opacity:.18;}
.kx-ambient[data-kx-ambient-section="2"] .kx-ambient-glow--b{transform:translate3d(-34px,-34vh,0);opacity:.27;}
.kx-ambient[data-kx-ambient-section="3"] .kx-ambient-glow--a{transform:translate3d(32px,12vh,0);}
.kx-ambient[data-kx-ambient-section="3"] .kx-ambient-glow--b{transform:translate3d(-8px,12vh,0);opacity:.2;}
.kx-ambient-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.kx-ambient-rail,.kx-ambient-progress{fill:none;vector-effect:non-scaling-stroke;}
.kx-ambient-rail{stroke:rgba(6,95,70,.13);stroke-width:2;stroke-dasharray:5 10;}
.kx-ambient-progress{
  stroke:var(--kx-ambient-green);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  filter:drop-shadow(0 2px 4px rgba(6,95,70,.16));
}
.kx-ambient-progress--right{stroke:#4a8fbf;}
.kx-ambient-nodes circle{
  fill:#fffaf0;
  stroke:var(--kx-ambient-green);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 3px 7px rgba(6,95,70,.16));
}
.kx-ambient-nodes circle:nth-child(n+3){stroke:#4a8fbf;}
@keyframes kx-ambient-path-scroll{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kx-ambient-grid-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-216px,0)}}
@keyframes kx-ambient-glow-a-scroll{from{transform:translate3d(0,-14vh,0)}to{transform:translate3d(36px,48vh,0)}}
@keyframes kx-ambient-glow-b-scroll{from{transform:translate3d(0,22vh,0)}to{transform:translate3d(-42px,-42vh,0)}}
@supports(animation-timeline:scroll()){
  .kx-ambient-progress{
    animation:kx-ambient-path-scroll 1s linear both;
    animation-timeline:scroll(root block);
  }
  .kx-ambient-grid{
    animation:kx-ambient-grid-scroll 1s linear both;
    animation-timeline:scroll(root block);
  }
  .kx-ambient-glow--a{
    animation:kx-ambient-glow-a-scroll 1s linear both;
    animation-timeline:scroll(root block);
  }
  .kx-ambient-glow--b{
    animation:kx-ambient-glow-b-scroll 1s linear both;
    animation-timeline:scroll(root block);
  }
}
@media(max-width:700px){
  .kx-ambient{
    opacity:.48;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 24%,transparent 76%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 24%,transparent 76%,#000 100%);
  }
  .kx-ambient-grid{background-size:56px 56px;opacity:.38;}
}
@media(prefers-reduced-motion:reduce){
  .kx-gaze-layer,.kx-blink-layer{display:none;}
  .kx-ambient{opacity:.36;}
  .kx-ambient-grid,.kx-ambient-glow,.kx-ambient-progress{animation:none!important;transition:none;}
  .kx-ambient-progress{stroke-dashoffset:.42;opacity:.42;}
}
.kx-media-stage a{display:block;position:absolute;inset:0;z-index:2;border-radius:16px;}
.kx-media-stage a:focus-visible{outline:3px solid rgba(16,185,129,.55);outline-offset:3px;}
/* The plate. Sits at z-0, under any real media. */
.kx-media-plate{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:18px;
  padding:24px;
  text-align:center;
}
.kx-media-brackets{position:relative;width:96px;height:64px;opacity:.9;}
.kx-media-brackets svg{position:absolute;width:19px;height:19px;}
.kx-media-brackets svg:nth-child(1){left:0;top:0;}
.kx-media-brackets svg:nth-child(2){right:0;top:0;transform:rotate(90deg);}
.kx-media-brackets svg:nth-child(3){right:0;bottom:0;transform:rotate(180deg);}
.kx-media-brackets svg:nth-child(4){left:0;bottom:0;transform:rotate(270deg);}
.kx-media-plate span{
  max-width:34ch;
  color:#065f46;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.7;
}
.kx-media--dark .kx-media-stage{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(152deg,#12121a,#0d1f18 64%,#0a1a14);
  box-shadow:0 26px 66px rgba(0,0,0,.44);
}
.kx-media--dark .kx-media-plate span{color:#6ee7b7;}
.kx-media figcaption{
  margin-top:11px;
  color:#5c6b64;
  font-size:12.5px;
  line-height:1.5;
}
.kx-media--dark figcaption{color:rgba(247,249,248,.62);}
@media(max-width:640px){
  /* A 16:10 stage at 350px wide is 219px tall — too small to read a UI in.
     Mobile slots go taller unless the slot opts out. */
  .kx-media-stage{aspect-ratio:var(--kx-ratio-sm,var(--kx-ratio,4/3));}
}

/* ---------- #context — files travel, context breaks ---------- */
.kx-context{background:#fff;border-top:1px solid rgba(15,23,20,.08);padding:96px 0;}
.kx-context-inner{width:min(1240px,100%);margin:0 auto;padding:0 32px;}
.kx-context h2{
  max-width:16ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(32px,3.6vw,52px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.016em;
  text-wrap:balance;
}
.kx-context-lede{max-width:64ch;margin:20px 0 0;color:#33403a;font-size:17px;line-height:1.7;}
/* Two columns that are NOT peers: the left is what a folder already carries,
   the right is what it cannot. The arrow between them is the whole argument, so
   it is a real element rather than a gap the reader has to infer. */
.kx-context-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.12fr);
  gap:clamp(18px,3vw,34px);
  align-items:stretch;
  margin-top:40px;
}
.kx-context-col{
  display:flex;
  flex-direction:column;
  padding:26px 28px 28px;
  border-radius:16px;
  border:1px solid rgba(15,23,20,.12);
  background:#f7f9f8;
}
.kx-context-col h3{margin:0;}
.kx-context-list{display:grid;gap:11px;margin-top:18px;}
.kx-context-list div{
  position:relative;
  padding-inline-start:24px;
  color:#5c6b64;
  font-size:15px;
  line-height:1.55;
}
.kx-context-list div::before{
  position:absolute;
  inset-inline-start:0;
  top:-1px;
  content:"\2022";
  color:#8a968f;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:14px;
}
/* When a row carries a type emoji (.kx-ti), the emoji takes the bullet's slot. */
.kx-context-list div:has(.kx-ti)::before{content:none;}
.kx-context-list div .kx-ti{position:absolute;inset-inline-start:0;top:0;width:auto;}
.kx-context-col--needs{background:#f1f7f4;border-color:rgba(5,150,105,.24);}
.kx-context-col--needs .kx-context-list div{color:#14201b;font-weight:500;}
.kx-context-col--needs .kx-context-list div::before{content:"\2713";color:#047857;font-size:13px;}
.kx-context-arrow{align-self:center;color:#059669;flex:none;}
[dir="rtl"] .kx-context-arrow svg{transform:scaleX(-1);}
.kx-context-foot{
  margin:34px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(17px,1.7vw,21px);
  font-weight:700;
  line-height:1.45;
  text-wrap:balance;
}

/* ---------- #capture — from screen to project ---------- */
.kx-capture{background:#f7f9f8;border-top:1px solid rgba(15,23,20,.08);padding:100px 0;scroll-margin-top:80px;}
.kx-capture-inner{width:min(1240px,100%);margin:0 auto;padding:0 32px;}
.kx-capture h2{
  max-width:17ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(32px,3.6vw,52px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.016em;
  text-wrap:balance;
}
.kx-capture-lede{max-width:62ch;margin:20px 0 0;color:#33403a;font-size:17px;line-height:1.7;}
/* The four-beat rail. Horizontal on desktop, stacked on mobile — the connector
   is a pseudo-element on the step, so the RTL mirror is free (inset-inline). */
.kx-capture-rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:44px;
}
.kx-capture-beat{
  position:relative;
  padding:22px 22px 24px;
  border-radius:14px;
  border:1px solid rgba(15,23,20,.11);
  background:#fff;
  box-shadow:0 12px 30px rgba(20,40,30,.07);
}
.kx-capture-beat + .kx-capture-beat::before{
  position:absolute;
  top:40px;
  inset-inline-start:-15px;
  width:15px;
  border-top:1px dashed rgba(5,150,105,.55);
  content:"";
}
.kx-capture-beat strong{
  display:block;
  margin-top:12px;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.25;
}
.kx-capture-beat p{margin:8px 0 0;color:#5c6b64;font-size:14px;line-height:1.6;}
.kx-capture-body{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr);
  gap:clamp(40px,5vw,68px);
  align-items:start;
  margin-top:52px;
}
.kx-capture-rows{display:flex;flex-direction:column;border-top:1px solid rgba(15,23,20,.1);}
.kx-capture-row{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid rgba(15,23,20,.1);
}
.kx-capture-row > strong{flex:none;min-width:150px;color:#14201b;font-size:15px;font-weight:700;}
.kx-capture-row > span{flex:1;min-width:240px;color:#33403a;font-size:14.5px;line-height:1.6;}
.kx-key{display:inline-flex;gap:5px;flex:none;}
.kx-key kbd{
  border:1px solid rgba(15,23,20,.18);
  border-radius:6px;
  padding:3px 8px;
  background:#fff;
  color:#5c6b64;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  /* A keycap is a keycap in both directions; Arabic must not reorder "Alt +". */
  direction:ltr;
  unicode-bidi:isolate;
}
/* ---------- #capture — the find block ---------- */
.kx-find{margin-top:64px;padding-top:46px;border-top:1px solid rgba(15,23,20,.1);}
.kx-find h3{
  max-width:24ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(24px,2.5vw,34px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.kx-find > p{max-width:60ch;margin:16px 0 0;color:#33403a;font-size:16px;line-height:1.68;}
.kx-find-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
  margin-top:28px;
}
.kx-find-card{
  padding:18px 20px 20px;
  border-radius:13px;
  border:1px solid rgba(15,23,20,.11);
  background:#fff;
}
.kx-find-card strong{
  display:block;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:14.5px;
  font-weight:700;
  line-height:1.25;
}
.kx-find-card p{margin:7px 0 0;color:#5c6b64;font-size:13.5px;line-height:1.55;}
.kx-find-note{margin:22px 0 0;max-width:70ch;color:#5c6b64;font-size:14px;line-height:1.65;}

/* ---------- #applications — the three things people actually do ---------- */
.kx-apps{background:#fff;border-top:1px solid rgba(15,23,20,.08);padding:100px 0;scroll-margin-top:80px;}
.kx-apps-inner{width:min(1240px,100%);margin:0 auto;padding:0 32px;}
.kx-apps h2{
  max-width:19ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(30px,3.3vw,46px);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.kx-apps-lede{max-width:60ch;margin:18px 0 0;color:#33403a;font-size:17px;line-height:1.7;}
/* Three applications, one per row, each a real spread — NOT a tab strip and NOT
   a three-up icon grid. The first two are for anyone with a project; the third
   is the developer wedge and is the only one that links away. */
.kx-app{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:center;
  padding:44px 0;
  border-top:1px solid rgba(15,23,20,.1);
}
/* The third job carries a qualification box rather than a media slot, and a
   short centred box beside tall copy floats oddly — that one row stays top-aligned. */
.kx-app:last-of-type{align-items:start;}
.kx-app:first-of-type{margin-top:44px;}
.kx-app:last-of-type{border-bottom:1px solid rgba(15,23,20,.1);}
.kx-app h3{
  max-width:20ch;
  margin:12px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(24px,2.5vw,34px);
  font-weight:700;
  line-height:1.13;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.kx-app p{max-width:54ch;margin:16px 0 0;color:#33403a;font-size:16px;line-height:1.7;}
.kx-app-uses{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.kx-app-uses span{
  padding:5px 12px;
  border:1px solid rgba(15,23,20,.13);
  border-radius:999px;
  background:#f7f9f8;
  color:#33403a;
  font-size:13px;
  line-height:1.4;
}
.kx-app-note{
  margin-top:20px;
  padding:14px 16px;
  border-radius:11px;
  border:1px solid rgba(5,150,105,.2);
  background:#f1f7f4;
}
.kx-app-note p{margin:0;max-width:66ch;color:#14201b;font-size:14.5px;line-height:1.6;}
.kx-app-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  color:#065f46;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:14.5px;
  font-weight:700;
}
.kx-app-link:hover{color:#047857;text-decoration:underline;}

/* ---------- the answer -> project chain (#demo, home journey) ---------- */
.kx-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:26px;}
.kx-chain-step{
  flex:1 1 150px;
  padding:14px 15px 15px;
  border-radius:12px;
  border:1px solid rgba(15,23,20,.12);
  background:#fff;
}
.kx-chain-step small{
  display:block;
  color:#047857;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.kx-chain-step strong{
  display:block;
  margin-top:7px;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:14.5px;
  font-weight:600;
  line-height:1.3;
}
.kx-chain-step p{margin:6px 0 0;color:#5c6b64;font-size:12.5px;line-height:1.5;}

/* ---------- /developers — capture the issue once ---------- */
.kx-issue{background:#fff;border-top:1px solid rgba(15,23,20,.08);padding:96px 0;}
.kx-issue-inner{width:min(1240px,100%);margin:0 auto;padding:0 32px;}
.kx-issue h2{
  max-width:22ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(28px,3vw,44px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.kx-issue-lede{max-width:62ch;margin:18px 0 0;color:#33403a;font-size:16.5px;line-height:1.7;}
.kx-issue-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
  gap:clamp(38px,5vw,64px);
  align-items:start;
  margin-top:44px;
}
.kx-issue-steps{counter-reset:kxissue;display:grid;gap:2px;}
.kx-issue-step{
  position:relative;
  padding-block:13px;
  padding-inline:42px 0;
  border-bottom:1px solid rgba(15,23,20,.09);
  color:#33403a;
  font-size:15px;
  line-height:1.6;
}
.kx-issue-step::before{
  position:absolute;
  inset-inline-start:0;
  top:12px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(16,185,129,.12);
  color:#047857;
  counter-increment:kxissue;
  content:counter(kxissue);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;
}
.kx-issue-step:last-child{border-bottom:0;}
.kx-issue-step strong{color:#14201b;font-weight:700;}

@media(max-width:900px){
  .kx-context-grid{grid-template-columns:1fr;}
  .kx-context-arrow{transform:rotate(90deg);justify-self:center;}
  [dir="rtl"] .kx-context-arrow svg{transform:none;}
  .kx-capture-rail{grid-template-columns:1fr 1fr;}
  .kx-capture-beat + .kx-capture-beat::before{display:none;}
  .kx-capture-body,
  .kx-app,
  .kx-issue-body{grid-template-columns:1fr;}
  .kx-app{gap:28px;}
}
@media(max-width:640px){
  .kx-context,
  .kx-capture,
  .kx-apps,
  .kx-issue{padding:72px 0;}
  .kx-capture-rail{grid-template-columns:1fr;}
  .kx-find{margin-top:48px;padding-top:36px;}
  .kx-app{padding:34px 0;}
  .kx-chain-step{flex:1 1 100%;}
}

/* ---------- value-clarity pass additions ---------- */
/* The one-line proof under each root application. Not a pill, not a stat tile:
   a short sentence in brand ink that a reader can repeat afterwards. */
/* Scoped under .kx-app so it is (0,2,0) and beats `.kx-app p` (0,1,1) honestly.
   A bare `.kx-app-proof` lost the colour fight silently, and the !important
   flags that used to sit on margin and size hid that it was losing. */
.kx-app .kx-app-proof{
  max-width:46ch;
  margin-top:14px;
  color:#065f46;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
}
/* The demoted "From screen to project, in one shortcut." line. It was a heading
   in the previous pass; here it supports one. */
.kx-capture-sub{
  margin:12px 0 0;
  color:#065f46;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
}
/* The find block is a supporting sub-block now, not a pillar: one heading, one
   paragraph, no card grid and no eyebrow of its own. */
.kx-find h3{font-size:clamp(20px,2vw,26px);}
.kx-find > p{max-width:76ch;font-size:15.5px;}

/* ---------- #control — human control and trust ---------- */
.kx-control{background:#f7f9f8;border-top:1px solid rgba(15,23,20,.08);padding:96px 0;scroll-margin-top:80px;}
.kx-control-inner{width:min(1240px,100%);margin:0 auto;padding:0 32px;}
.kx-control h2{
  max-width:20ch;
  margin:14px 0 0;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:clamp(30px,3.3vw,46px);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.kx-control-lede{max-width:70ch;margin:20px 0 0;color:#33403a;font-size:17px;line-height:1.7;}
/* Six cards. auto-fit gave four across at 1240 and left two orphans on a second
   row; an explicit 3 makes it two full rows of three. */
.kx-control-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:38px;
}
@media(max-width:900px){ .kx-control-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .kx-control-grid{grid-template-columns:1fr;} }
.kx-control-card{
  padding:22px 24px 24px;
  border-radius:14px;
  border:1px solid rgba(15,23,20,.11);
  background:#fff;
}
.kx-control-card strong{
  display:block;
  color:#14201b;
  font-family:'Thmanyah Sans','Segoe UI',system-ui,sans-serif;
  font-size:15.5px;
  font-weight:700;
  line-height:1.25;
}
.kx-control-card p{margin:9px 0 0;color:#5c6b64;font-size:14px;line-height:1.6;}

@media(max-width:640px){
  .kx-control{padding:72px 0;}
}

/* ---------- unified KLYPIX infographic system (2026-08) ---------- */
/* The raster boards share one exact mascot model, palette, outline weight and
   flat 2D treatment. These wrappers keep them consistent across every journey. */
.kx-hero-creature{display:none!important;}
.kx-context-grid--legacy,
.kx-file-visual--legacy,
.kx-format-grid--legacy{display:none!important;}
.kx-context-illustration{max-width:1080px;margin:40px auto 0;}
.kx-app-visual{min-width:0;}
.kx-app-visual .kx-app-note{margin-top:14px;}
.kx-find-visual{max-width:980px;margin:30px auto 0;}
.kx-coordination-visual{max-width:1060px;margin:36px auto 0;}
.kx-file-illustration{margin:0;}
.kx-file-caption{margin:12px 0 0;color:#5c6b64;font-size:14px;line-height:1.55;}
.kx-answer-visual{margin-top:24px;}
.kx-chain{display:none;}
.kx-format-illustration{max-width:1080px;margin:34px auto 0;}
.kx-github-mark{
  position:absolute!important;
  inset:4.5% 1.5% auto auto!important;
  z-index:3!important;
  width:10.5%!important;
  height:auto!important;
  aspect-ratio:1;
  object-fit:contain!important;
  padding:1.4%;
  border-radius:50%;
  background:#fff!important;
}
.kx-control-card{overflow:hidden;}
.kx-control-icon{
  display:block;
  width:96px;
  height:96px;
  margin:-8px 0 14px;
  border-radius:0;
  object-fit:contain;
  mix-blend-mode:normal;
}
[dir="rtl"] .kx-control-icon{margin-inline:0;}
.kx-journey-visual{max-width:1040px;margin:32px auto 0;}
.kx-case-media>.kx-case-image{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:contain;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.09);
  background:#fbf8f0;
}
.kx-case-media>.kx-case-image~div{display:none!important;}
.kx-case-media:has(>.kx-case-image[src^="/media/infographics-v2/"]){
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.kx-case-media>.kx-case-image[src^="/media/infographics-v2/"]{
  aspect-ratio:5/3;
  max-height:none;
  border:0;
  border-radius:0;
  background:transparent;
  object-fit:contain;
}
.kx-case-media:has(>.kx-case-image[src^="/media/infographics-v2/"])>figcaption,
.kx-case-media:has(>.kx-case-image[src^="/media/infographics-v2/"])>.kx-motion-overlay{
  display:none;
}
.kx-drive-visual{max-width:1040px;margin:42px auto 0;}
.kx-local-visual~div,
.kx-local-visual~p{display:none!important;}
.kx-project-capture-visual{max-width:1040px;margin:0 auto;}
.kx-project-capture-visual~#kx-replica-anchor,
.kx-project-capture-visual~p{display:none!important;}

/* The four workflow boards now use the same light illustration language as the
   rest of the site, so their surrounding gallery is light as well. */
.kx-proof-gallery{background:#f7f9f8;border-block:1px solid rgba(15,23,20,.08);}
.kx-proof-gallery-head h2,.kx-case-copy h3{color:#14201b;}
.kx-proof-gallery-head p,.kx-case-lede{color:#33403a;}
.kx-proof-gallery-eyebrow{border-color:rgba(5,150,105,.3);background:#eef7f2;color:#047857;}
.kx-proof-gallery-eyebrow span{background:#10b981;}
.kx-proof-tabs{border-bottom-color:rgba(15,23,20,.12);}
.kx-proof-tabs button{border-color:rgba(15,23,20,.13);background:#fff;color:#5c6b64;}
.kx-proof-tabs button:hover{border-color:rgba(5,150,105,.38);color:#14201b;}
.kx-proof-tabs button[aria-selected="true"]{border-color:#10b981;background:#a7f3d0;color:#0a2417;}
.kx-case-kicker{color:#047857;}
.kx-case-compare>div{border-color:rgba(15,23,20,.12);background:#fff;}
.kx-case-compare>div:last-child{border-color:rgba(5,150,105,.32);background:#eef7f2;}
.kx-case-compare strong{color:#5c6b64;}
.kx-case-compare>div:last-child strong{color:#047857;}
.kx-case-compare p{color:#33403a;}
.kx-case-media{min-height:0;border-color:rgba(15,23,20,.12);background:#fff;box-shadow:0 24px 60px rgba(20,40,30,.12);}
.kx-case-media figcaption{color:#5c6b64;}

@media(max-width:900px){
  .kx-context-illustration,
  .kx-find-visual,
  .kx-coordination-visual,
  .kx-format-illustration,
  .kx-journey-visual,
  .kx-drive-visual,
  .kx-project-capture-visual{max-width:100%;}
}
@media(max-width:640px){
  .kx-control-icon{width:84px;height:84px;margin-top:-6px;}
  .kx-case-media>.kx-case-image{max-height:none;}
}

/* ---------- adaptive sticky story: the three real jobs ----------
   Desktop turns the existing approved spreads into a restrained sticky stack:
   each complete scene rises over the previous one, while its copy and real
   KLYPIX illustration remain together. There is no wheel interception and no
   synthetic scroll position. Touch devices, short viewports, and reduced-motion
   users retain the original natural document flow. */
@keyframes kx-story-card-arrive{
  from{opacity:.62;transform:translate3d(0,32px,0) scale(.987);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@media (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .kx-apps{
    padding-bottom:0;
    background:
      radial-gradient(circle at 8% 24%,rgba(16,185,129,.055),transparent 28%),
      linear-gradient(180deg,#fff 0%,#f7f9f8 100%);
  }
  .kx-apps-inner{position:relative;}
  .kx-apps-inner::after{
    content:"";
    display:block;
    height:clamp(131px,18.5dvh,194px);
  }
  .kx-apps-inner>.kx-app{
    --kx-stack-top:92px;
    position:sticky;
    top:var(--kx-stack-top);
    z-index:1;
    min-height:min(558px,calc(100dvh - var(--kx-stack-top) - 172px));
    margin-top:clamp(41px,6.2vh,65px);
    padding:clamp(25px,3.24vw,41px);
    align-items:center;
    border:1px solid rgba(15,23,20,.12);
    border-radius:16px;
    background:
      radial-gradient(circle at 88% 10%,rgba(16,185,129,.075),transparent 31%),
      #fff;
    box-shadow:0 28px 72px rgba(20,40,30,.13),0 2px 8px rgba(20,40,30,.07);
    overflow:hidden;
    isolation:isolate;
  }
  .kx-apps-inner>.kx-app:nth-of-type(2){
    --kx-stack-top:104px;
    z-index:2;
    background:
      radial-gradient(circle at 12% 88%,rgba(16,185,129,.065),transparent 30%),
      #f7f9f8;
    box-shadow:0 28px 72px rgba(20,40,30,.15),0 2px 8px rgba(20,40,30,.08);
  }
  .kx-apps-inner>.kx-app:nth-of-type(3){
    --kx-stack-top:116px;
    z-index:3;
    margin-bottom:0;
    background:
      radial-gradient(circle at 86% 14%,rgba(16,185,129,.12),transparent 34%),
      #eef7f2;
    box-shadow:0 30px 78px rgba(20,40,30,.17),0 2px 9px rgba(20,40,30,.09);
  }
  .kx-apps-inner>.kx-app>*{position:relative;z-index:1;}
  .kx-apps-inner>.kx-app .kx-media{margin:0;}
  .kx-apps-inner>.kx-app .kx-media-stage{
    border-color:rgba(15,23,20,.13);
    box-shadow:0 18px 44px rgba(20,40,30,.12);
  }
  .kx-apps-inner>.kx-app .kx-app-note{
    background:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  }
  @supports(animation-timeline:view()){
    .kx-apps-inner>.kx-app{
      animation:kx-story-card-arrive 1s linear both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 52%;
    }
  }
}

/* ---------- 77% desktop optical scale ----------
   The page previously read like a presentation at 100% browser zoom: 1240px
   rails, 50px home display type, 1040-1080px illustrations, and 720px story
   cards dominated laptop viewports. This is a selective cumulative 23% reduction
   of the elements that create that perception, including the founder-approved
   additional 10% refinement. It is not CSS zoom. Small labels, navigation, and
   body copy retain legible floors; mobile keeps its existing composition.

   Several route-authoritative values are inline in landing.html. The targeted
   important declarations below are the intentional external override boundary;
   they avoid touching the concurrently generated EN/AR route documents. */
@media (min-width:1024px){
  :root{
    --kx-desktop-rail:960px;
    --kx-desktop-gutter:25px;
  }

  /* 1240px rails become 960px. Route-specific 1040/860/1100px rails keep
     their own proportions rather than being expanded to the shared maximum. */
  #top>div,
  main section>div[style*="max-width:1240px"],
  footer>div[style*="max-width:1240px"],
  .kx-context-inner,
  .kx-capture-inner,
  .kx-apps-inner,
  .kx-issue-inner,
  .kx-product-proof-inner,
  .kx-proof-gallery-inner,
  .kx-control-inner,
  .kx-cta-inner{
    width:min(var(--kx-desktop-rail),100%);
    max-width:var(--kx-desktop-rail)!important;
    padding-inline:var(--kx-desktop-gutter)!important;
  }
  .kx-journey-chooser-inner{width:min(805px,100%);padding-inline:25px;}
  main section[data-screen-label="Bilingual moment"]>div[style*="max-width:1100px"]{max-width:851px!important;padding-inline:25px!important;}
  #faq>div[style*="max-width:860px"]{max-width:666px!important;padding-inline:25px!important;}

  /* Hero: 50 -> 39px on home, 74 -> 58px on the two journey pages. The proof
     art and copy minimum shrink with it so the composition remains side-by-side. */
  html[data-kx-journey] body #top .kx-hero-copy{min-width:min(434px,100%);margin-top:6px;}
  html[data-kx-journey] body #top>div>div{gap:25px!important;}
  html[data-kx-journey] body #top .kx-hero-title{font-size:clamp(33px,4.22vw,58px);}
  html[data-kx-journey="home"] body #top .kx-hero-title{font-size:clamp(31px,2.75vw,39px);}
  html[data-kx-journey] body #top .kx-hero-lede{max-width:57ch;margin-top:17px;font-size:15px;}
  html[data-kx-journey] body #top .kx-hero-note{margin-top:15px;font-size:15px;}
  html[data-kx-journey] body #top .kx-hero-devlink{margin-top:14px;font-size:13px;}
  html[data-kx-journey] body #top .kx-hero-proof{width:min(340px,27.9vw);margin-top:5px;}
  html[data-kx-journey] body #top .kx-journey-hero-visual{width:min(387px,31.8vw);}
  html[data-kx-journey] body #top .kx-hero-actions{margin-top:22px!important;}
  html[data-kx-journey] body #top .kx-download-primary,
  html[data-kx-journey] body #top .kx-download-secondary{
    padding:11px 16px;
    font-size:14px;
  }

  /* Section rhythm. Inline-authored sections need the explicit important
     boundary; class-authored sections are adjusted normally. */
  html body main #top{padding:114px 0 69px!important;}
  .kx-journey-chooser{padding:71px 0;}
  .kx-product-proof{padding:80px 0;}
  .kx-proof-gallery{padding:86px 0 91px;}
  .kx-context{padding:75px 0;}
  .kx-capture,.kx-apps{padding:77px 0;}
  .kx-issue,.kx-control{padding:75px 0;}
  .kx-cta-band{padding:50px 0;}
  html body main #coordination{padding:77px 0!important;}
  html body main #canvas{padding:80px 0!important;}
  html body main #formats{padding:75px 0!important;}
  html body main #flow{padding:84px 0!important;}
  html body main #product{padding:86px 0 75px!important;}
  html body main section[data-screen-label="The decision lifecycle"],
  html body main section[data-screen-label="The loop & the everyday layer"],
  html body main #files,
  html body main section[data-screen-label="Capture tooling - the overlay"],
  html body main #faq{padding:75px 0!important;}
  html body main #brain{padding-bottom:86px!important;}
  html body main #brain>div{padding-top:75px!important;}
  html body main section[data-screen-label="Bilingual moment"]{padding:101px 0 108px!important;}
  html body main #download{padding:93px 0 86px!important;}

  /* Display typography follows the cumulative 0.77 factor. Readable paragraphs stop
     at 15px instead of being mathematically pushed into caption territory. */
  .kx-journey-chooser-head h2{font-size:clamp(22px,2.48vw,34px);}
  .kx-product-proof-copy h2{font-size:clamp(23px,2.48vw,36px);}
  .kx-proof-gallery-head h2{font-size:clamp(22px,2.32vw,32px);}
  .kx-case-copy h3{font-size:clamp(20px,2.09vw,30px);}
  .kx-context h2,.kx-capture h2{font-size:clamp(25px,2.79vw,41px);}
  .kx-find h3{font-size:clamp(18px,1.55vw,20px);}
  .kx-apps h2,.kx-control h2{font-size:clamp(23px,2.56vw,36px);}
  .kx-app h3{font-size:clamp(19px,1.94vw,26px);}
  .kx-issue h2{font-size:clamp(22px,2.32vw,34px);}
  .kx-cta-line{font-size:clamp(18px,1.71vw,23px);}
  .kx-journey-chooser-head p,
  .kx-product-proof-copy p,
  .kx-proof-gallery-head p,
  .kx-case-lede,
  .kx-context-lede,
  .kx-capture-lede,
  .kx-apps-lede,
  .kx-issue-lede,
  .kx-control-lede{font-size:15px;}
  .kx-app p{font-size:15px;}
  .kx-app .kx-app-proof{font-size:15px;}
  .kx-app{gap:clamp(25px,3.48vw,50px);}

  /* Inline route headings are mapped individually so their original hierarchy
     survives the reduction instead of being flattened to one generic size. */
  html body main #coordination h2{font-size:clamp(30px,3.4vw,50px)!important;}
  html body main #coordination>div>p[style*="font-size:clamp"]{font-size:clamp(16px,1.62vw,22px)!important;}
  html body main #canvas h2{font-size:clamp(28px,3.18vw,45px)!important;}
  html body main #formats h2,
  html body main #flow h2{font-size:clamp(23px,2.48vw,36px)!important;}
  html body main #product h2{font-size:clamp(23px,2.48vw,37px)!important;}
  html body main section[data-screen-label="The decision lifecycle"] h2,
  html body main section[data-screen-label="The loop & the everyday layer"] h2{font-size:clamp(23px,2.4vw,36px)!important;}
  html body main section[data-screen-label="The decision lifecycle"] h3{font-size:clamp(18px,1.71vw,23px)!important;}
  html body main #files h2{font-size:clamp(23px,2.32vw,34px)!important;}
  html body main section[data-screen-label="Capture tooling - the overlay"] h2{font-size:clamp(22px,2.25vw,32px)!important;}
  html body main #brain h2{font-size:clamp(25px,2.63vw,37px)!important;}
  html body main section[data-screen-label="Bilingual moment"] h2{font-size:clamp(23px,2.63vw,39px)!important;}
  html body main section[data-screen-label="Bilingual moment"] p[lang="ar"]{font-size:clamp(26px,3.4vw,48px)!important;}
  html body main #faq h2{font-size:clamp(22px,2.32vw,32px)!important;}
  html body main #download h2{font-size:clamp(28px,3.1vw,47px)!important;}

  /* Illustration and proof geometry. These are the other half of the perceived
     scale, so shrinking type without shrinking art would leave the page lopsided. */
  .kx-context-illustration,.kx-format-illustration{max-width:836px;}
  .kx-find-visual{max-width:759px;}
  .kx-coordination-visual{max-width:821px;}
  .kx-journey-visual,.kx-drive-visual,.kx-project-capture-visual{max-width:805px;}
  .kx-case-media>.kx-case-image{max-height:434px;}
  .kx-case-media--proof .kx-proof-visual{width:min(100%,364px);min-height:441px;}
  .kx-case-app,.kx-agent-handoff{width:min(100%,402px);}
  .kx-renovation-poster{width:min(100%,418px);}
  .kx-control-icon{width:75px;height:75px;margin:-6px 0 11px;}

  /* Supporting card density follows the same optical rhythm without reducing
     hit targets or the sanctioned 11-12px machine-label system. */
  .kx-context-grid{margin-top:31px;}
  .kx-context-col{padding:20px 22px 22px;}
  .kx-capture-rail{margin-top:34px;}
  .kx-capture-beat{padding:17px 17px 19px;}
  .kx-capture-body{margin-top:41px;gap:clamp(31px,3.87vw,52px);}
  .kx-control-grid{margin-top:30px;gap:11px;}
  .kx-control-card{padding:17px 19px 19px;}
  .kx-proof-gallery-shell{margin-top:41px;}
  .kx-case-panel{gap:clamp(34px,4.64vw,60px);}
  html body main .kx-faq-item summary{padding:15px 19px;font-size:15px;}
  html body main .kx-faq-item p{padding:0 19px 17px 46px;font-size:15px;}
  html[dir="rtl"] body main .kx-faq-item p{padding:0 46px 17px 19px;}
}

/* The density pass above appears later in the cascade than the sticky block;
   re-assert the sticky section's intentional zero bottom padding only when the
   full desktop story is active. */
@media (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .kx-apps{padding-bottom:0;}
}

/* ---------- premium appearance system ----------
   Light remains the editorial paper default. Dark is a separately art-directed
   graphite environment: neutral surfaces, restrained emerald light, and the
   same information hierarchy rather than a mechanical color inversion. */
html[data-theme="light"]{
  color-scheme:light;
  --kx-nav-bg:rgba(247,249,248,.92);
  --kx-nav-border:rgba(15,23,20,.10);
  --kx-nav-shadow:0 8px 28px rgba(20,40,30,.08);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --kx-dark-canvas:#080b0a;
  --kx-dark-section:#0b100e;
  --kx-dark-tint:#0d1713;
  --kx-dark-surface:#111816;
  --kx-dark-raised:#16201c;
  --kx-dark-ink:#f0f6f2;
  --kx-dark-copy:#b5c3bc;
  --kx-dark-muted:#829189;
  --kx-dark-line:rgba(217,238,227,.12);
  --kx-dark-line-strong:rgba(217,238,227,.20);
  --kx-dark-brand:#53e1aa;
  --kx-nav-bg:rgba(8,11,10,.88);
  --kx-nav-border:rgba(217,238,227,.11);
  --kx-nav-shadow:0 14px 44px rgba(0,0,0,.38);
}

.kx-theme-toggle{
  position:relative;
  width:38px;
  height:38px;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(15,23,20,.14);
  border-radius:10px;
  background:rgba(255,255,255,.78);
  color:#33403a;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(20,40,30,.06);
  transition:color .22s ease,background .22s ease,border-color .22s ease,transform .18s cubic-bezier(.16,1,.3,1);
}
.kx-theme-toggle:hover{color:#065f46;background:#fff;border-color:rgba(5,150,105,.34);transform:translateY(-1px);}
.kx-theme-toggle:focus-visible{outline:3px solid rgba(16,185,129,.48);outline-offset:3px;}
.kx-theme-toggle svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1);}
.kx-theme-moon{fill:currentColor!important;stroke:none!important;}
.kx-theme-sun{opacity:0;transform:rotate(-35deg) scale(.65);}
html[data-theme="dark"] .kx-theme-moon{opacity:0;transform:rotate(25deg) scale(.65);}
html[data-theme="dark"] .kx-theme-sun{opacity:1;transform:rotate(0) scale(1);}

html[data-theme="dark"] body{
  background:var(--kx-dark-canvas)!important;
  color:var(--kx-dark-ink)!important;
}
html[data-theme="dark"] ::selection{background:#34d399;color:#06130d;}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--kx-dark-canvas)!important;}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(217,238,227,.18)!important;}

/* Section rhythm: adjacent chapters alternate by only a few luminance points,
   enough to orient a long page without turning it into stacked dark cards. */
html[data-theme="dark"] body #top,
html[data-theme="dark"] body .kx-journey-chooser,
html[data-theme="dark"] body .kx-apps,
html[data-theme="dark"] body #coordination,
html[data-theme="dark"] body #workspace,
html[data-theme="dark"] body #formats,
html[data-theme="dark"] body #files,
html[data-theme="dark"] body section[data-screen-label="The loop & the everyday layer"]{
  background:var(--kx-dark-canvas)!important;
  border-color:var(--kx-dark-line)!important;
}
html[data-theme="dark"] body .kx-context,
html[data-theme="dark"] body .kx-capture,
html[data-theme="dark"] body .kx-issue,
html[data-theme="dark"] body .kx-control,
html[data-theme="dark"] body .kx-proof-gallery,
html[data-theme="dark"] body #canvas,
html[data-theme="dark"] body #brain,
html[data-theme="dark"] body #faq,
html[data-theme="dark"] body section[data-screen-label="The decision lifecycle"],
html[data-theme="dark"] body section[data-screen-label="Capture tooling - the overlay"],
html[data-theme="dark"] body section[data-screen-label="Bilingual moment"]{
  background:var(--kx-dark-section)!important;
  border-color:var(--kx-dark-line)!important;
}
html[data-theme="dark"] body .kx-product-proof,
html[data-theme="dark"] body #flow{
  background:var(--kx-dark-tint)!important;
  border-color:var(--kx-dark-line)!important;
}
html[data-theme="dark"] body #product,
html[data-theme="dark"] body footer{background:#050706!important;}

/* Route markup contains deliberately explicit light values. These mappings are
   scoped to dark mode and beat inline authoring values without touching the
   self-contained product replica or the transparent illustration pixels. */
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background:#F7F9F8"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: #F7F9F8"]{background:var(--kx-dark-section)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background:#FFFFFF"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: #FFFFFF"]{background:var(--kx-dark-surface)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background:#EEF7F2"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background:#F1F7F4"]{background:var(--kx-dark-tint)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="linear-gradient(180deg,#FFFFFF,#F1F5F3)"]{background:linear-gradient(180deg,#16201c,#101714)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color:#14201B"]{color:var(--kx-dark-ink)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color:#33403A"]{color:var(--kx-dark-copy)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color:#5C6B64"]{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color:#065F46"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color:#047857"]{color:var(--kx-dark-brand)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="rgba(15,23,20"]{border-color:var(--kx-dark-line)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="box-shadow"][style*="20,40,30"]{box-shadow:0 18px 48px rgba(0,0,0,.25)!important;}

/* The design-component runtime assigns styles through DOM properties, which
   serializes authored hex colors to rgb() in the live tree. Mirror the mapping
   for those normalized values so dynamic and no-JS markup resolve identically. */
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: rgb(247, 249, 248)"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background-color: rgb(247, 249, 248)"]{background:var(--kx-dark-section)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background-color: rgb(255, 255, 255)"]{background:var(--kx-dark-surface)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: rgb(238, 247, 242)"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="background: rgb(241, 247, 244)"]{background:var(--kx-dark-tint)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color: rgb(20, 32, 27)"]{color:var(--kx-dark-ink)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color: rgb(51, 64, 58)"]{color:var(--kx-dark-copy)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color: rgb(92, 107, 100)"]{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color: rgb(6, 95, 70)"],
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="color: rgb(4, 120, 87)"]{color:var(--kx-dark-brand)!important;}
html[data-theme="dark"] body :not(#kx-replica):not(#kx-replica *)[style*="rgba(15, 23, 20"]{border-color:var(--kx-dark-line)!important;}

/* Typography roles. */
html[data-theme="dark"] .kx-hero-title,
html[data-theme="dark"] .kx-journey-chooser-head h2,
html[data-theme="dark"] .kx-product-proof-copy h2,
html[data-theme="dark"] .kx-proof-gallery-head h2,
html[data-theme="dark"] .kx-case-copy h3,
html[data-theme="dark"] .kx-context h2,
html[data-theme="dark"] .kx-capture h2,
html[data-theme="dark"] .kx-find h3,
html[data-theme="dark"] .kx-apps h2,
html[data-theme="dark"] .kx-app h3,
html[data-theme="dark"] .kx-issue h2,
html[data-theme="dark"] .kx-control h2,
html[data-theme="dark"] .kx-context-foot,
html[data-theme="dark"] .kx-product-proof-points strong,
html[data-theme="dark"] .kx-capture-row>strong,
html[data-theme="dark"] .kx-control-card strong,
html[data-theme="dark"] .kx-capture-beat strong,
html[data-theme="dark"] .kx-find-card strong,
html[data-theme="dark"] .kx-case-question strong,
html[data-theme="dark"] .kx-issue-step strong,
html[data-theme="dark"] .kx-chain-step strong{color:var(--kx-dark-ink)!important;}
html[data-theme="dark"] .kx-hero-lede,
html[data-theme="dark"] .kx-hero-note,
html[data-theme="dark"] .kx-journey-chooser-head p,
html[data-theme="dark"] .kx-product-proof-copy p,
html[data-theme="dark"] .kx-proof-gallery-head p,
html[data-theme="dark"] .kx-case-lede,
html[data-theme="dark"] .kx-case-compare p,
html[data-theme="dark"] .kx-context-lede,
html[data-theme="dark"] .kx-capture-lede,
html[data-theme="dark"] .kx-capture-row>span,
html[data-theme="dark"] .kx-find>p,
html[data-theme="dark"] .kx-apps-lede,
html[data-theme="dark"] .kx-app p,
html[data-theme="dark"] .kx-issue-lede,
html[data-theme="dark"] .kx-issue-step,
html[data-theme="dark"] .kx-control-lede,
html[data-theme="dark"] .kx-case-sources>div{color:var(--kx-dark-copy)!important;}
html[data-theme="dark"] .kx-product-proof-points span,
html[data-theme="dark"] .kx-case-media figcaption,
html[data-theme="dark"] .kx-context-list div,
html[data-theme="dark"] .kx-capture-beat p,
html[data-theme="dark"] .kx-find-card p,
html[data-theme="dark"] .kx-find-note,
html[data-theme="dark"] .kx-file-caption,
html[data-theme="dark"] .kx-app-uses span,
html[data-theme="dark"] .kx-chain-step p,
html[data-theme="dark"] .kx-control-card p{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] .kx-proof-tabs button,
html[data-theme="dark"] .kx-case-compare strong,
html[data-theme="dark"] .kx-key kbd{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] .kx-format-foot,
html[data-theme="dark"] .kx-app-note strong{color:var(--kx-dark-ink)!important;}
html[data-theme="dark"] .kx-path-copy,
html[data-theme="dark"] .kx-status-row,
html[data-theme="dark"] .kx-app-note p,
html[data-theme="dark"] .kx-principle-visual:not(.dark) .kx-ui-card{color:var(--kx-dark-copy)!important;}
html[data-theme="dark"] .kx-status-col--next .kx-status-head,
html[data-theme="dark"] .kx-status-col--next .kx-status-row,
html[data-theme="dark"] .kx-principle-visual:not(.dark) .kx-principle-top{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] .kx-case-kicker,
html[data-theme="dark"] .kx-case-compare>div:last-child strong,
html[data-theme="dark"] .kx-path-kicker,
html[data-theme="dark"] .kx-path-link{color:var(--kx-dark-brand)!important;}
html[data-theme="dark"] a,
html[data-theme="dark"] .kx-hero-devlink,
html[data-theme="dark"] .kx-app-link,
html[data-theme="dark"] .kx-mlabel--brand{color:var(--kx-dark-brand);}
html[data-theme="dark"] .kx-mlabel{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] .kx-mlabel--brand{color:var(--kx-dark-brand)!important;}
html[data-theme="dark"] .kx-mlabel--pain{color:var(--kx-dark-ink)!important;}

/* Surfaces and controls. */
html[data-theme="dark"] .kx-journey-switch,
html[data-theme="dark"] #kx-lang,
html[data-theme="dark"] .kx-path-card,
html[data-theme="dark"] .kx-principle-visual,
html[data-theme="dark"] .kx-flow-card,
html[data-theme="dark"] .kx-status-col,
html[data-theme="dark"] .kx-format-card,
html[data-theme="dark"] .kx-product-proof-media,
html[data-theme="dark"] .kx-proof-tabs button,
html[data-theme="dark"] .kx-case-compare>div,
html[data-theme="dark"] .kx-case-question,
html[data-theme="dark"] .kx-context-col,
html[data-theme="dark"] .kx-capture-beat,
html[data-theme="dark"] .kx-key kbd,
html[data-theme="dark"] .kx-find-card,
html[data-theme="dark"] .kx-app-uses span,
html[data-theme="dark"] .kx-chain-step,
html[data-theme="dark"] .kx-control-card,
html[data-theme="dark"] .kx-faq-item{
  background:var(--kx-dark-surface)!important;
  border-color:var(--kx-dark-line)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .kx-path-card--wedge,
html[data-theme="dark"] .kx-context-col--needs,
html[data-theme="dark"] .kx-case-compare>div:last-child,
html[data-theme="dark"] .kx-proof-tabs button[aria-selected="true"]{
  background:#12251d!important;
  border-color:rgba(83,225,170,.34)!important;
  color:var(--kx-dark-ink)!important;
}
html[data-theme="dark"] .kx-status-col--next{background:transparent!important;border-color:var(--kx-dark-line-strong)!important;}
html[data-theme="dark"] .kx-app-note{
  background:rgba(17,24,22,.92)!important;
  border-color:var(--kx-dark-line-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 34px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] .kx-hero-mascot-signature{color:var(--kx-dark-brand);}
html[data-theme="dark"] .kx-theme-toggle,
html[data-theme="dark"] .kx-nav-install-action{
  background:rgba(17,24,22,.84)!important;
  border-color:var(--kx-dark-line)!important;
  color:var(--kx-dark-copy)!important;
  box-shadow:none;
}
html[data-theme="dark"] .kx-theme-toggle:hover,
html[data-theme="dark"] .kx-nav-install-action:hover{background:var(--kx-dark-raised)!important;color:var(--kx-dark-ink)!important;border-color:rgba(83,225,170,.34)!important;}
html[data-theme="dark"] .kx-brand-word,
html[data-theme="dark"] .kx-nav-context a{color:var(--kx-dark-copy)!important;}
html[data-theme="dark"] .kx-nav-context a:hover{color:var(--kx-dark-ink)!important;}
html[data-theme="dark"] #kx-lang button{color:var(--kx-dark-muted)!important;}
html[data-theme="dark"] #kx-lang button[aria-pressed="true"]{color:#062218!important;}
html[data-theme="dark"] .kx-download-secondary{
  color:var(--kx-dark-brand)!important;
  background:rgba(17,24,22,.84)!important;
  border-color:rgba(83,225,170,.28)!important;
}
html[data-theme="dark"] .kx-download-secondary:hover{color:#9bf2d0!important;background:var(--kx-dark-raised)!important;border-color:rgba(83,225,170,.48)!important;}
html[data-theme="dark"] .kx-download-secondary svg{stroke:currentColor;}
html[data-theme="dark"] .kx-journey-switch a{color:var(--kx-dark-muted);}
html[data-theme="dark"] .kx-journey-switch a:hover{color:var(--kx-dark-ink);background:rgba(83,225,170,.08);}
html[data-theme="dark"][data-kx-journey="home"] .kx-journey-switch a[data-kx-route="home"],
html[data-theme="dark"][data-kx-journey="work"] .kx-journey-switch a[data-kx-route="work"],
html[data-theme="dark"][data-kx-journey="builders"] .kx-journey-switch a[data-kx-route="builders"]{background:#174d38;color:#d8faec;box-shadow:inset 0 0 0 1px rgba(83,225,170,.20);}
html[data-theme="dark"] .kx-journey-indicator{background:#174d38;box-shadow:inset 0 0 0 1px rgba(83,225,170,.20),0 4px 14px rgba(0,0,0,.18);}
html[data-theme="dark"][data-kx-journey] .kx-journey-switch.is-slider-ready a[aria-current="page"]{background:transparent;box-shadow:none;}
html[data-theme="dark"] .kx-proof-tabs button[aria-selected="true"]{color:#d8faec!important;}
html[data-theme="dark"] .kx-faq-item summary{color:var(--kx-dark-ink);}
html[data-theme="dark"] .kx-faq-item p{color:var(--kx-dark-copy);}
html[data-theme="dark"] .kx-faq-item summary::before{background:rgba(83,225,170,.12);color:var(--kx-dark-brand);}
html[data-theme="dark"] .kx-stale-banner{
  color:#f5c27a!important;
  background:rgba(245,158,11,.10)!important;
  border-color:rgba(251,191,36,.28)!important;
}

/* The desktop application story uses full-bleed sticky sheets in light mode.
   Give those sheets their own dark materials instead of inheriting paper. */
@media (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html[data-theme="dark"] .kx-apps{
    background:
      radial-gradient(circle at 8% 24%,rgba(83,225,170,.055),transparent 28%),
      linear-gradient(180deg,var(--kx-dark-canvas),var(--kx-dark-section))!important;
  }
  html[data-theme="dark"] .kx-apps-inner>.kx-app{
    background:
      radial-gradient(circle at 88% 10%,rgba(83,225,170,.075),transparent 31%),
      var(--kx-dark-surface)!important;
    border-color:var(--kx-dark-line)!important;
    box-shadow:0 28px 72px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18)!important;
  }
  html[data-theme="dark"] .kx-apps-inner>.kx-app:nth-of-type(2){
    background:
      radial-gradient(circle at 14% 10%,rgba(83,225,170,.06),transparent 30%),
      #101714!important;
  }
  html[data-theme="dark"] .kx-apps-inner>.kx-app:nth-of-type(3){
    background:
      radial-gradient(circle at 86% 12%,rgba(83,225,170,.09),transparent 32%),
      #12251d!important;
  }
  html[data-theme="dark"] .kx-apps-inner>.kx-app .kx-app-note{
    background:rgba(8,11,10,.58)!important;
    border-color:var(--kx-dark-line)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
}

/* Emerald CTAs intentionally keep dark ink in both themes for contrast. */
html[data-theme="dark"] .kx-nav-download-action,
html[data-theme="dark"] .kx-download-primary,
html[data-theme="dark"] .kx-cta-primary,
html[data-theme="dark"] .kx-skip,
html[data-theme="dark"] [style*="background:#10B981"],
html[data-theme="dark"] [style*="background:#34D399"]{color:#062218!important;}

/* Alpha art belongs to the page, not to a card. A small shadow separates the
   dark outline from graphite without inventing a new backdrop. */
html[data-theme="dark"] img[src^="/media/infographics-v2/"]{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
}
html[data-theme="dark"] .kx-control-icon{filter:drop-shadow(0 8px 12px rgba(0,0,0,.20));}
html[data-theme="dark"] .kx-ambient{mix-blend-mode:screen;opacity:.42;}
html[data-theme="dark"] .kx-ambient-rail{stroke:rgba(83,225,170,.16);}
html[data-theme="dark"] .kx-ambient-nodes circle{fill:#0b100e;}

@media(max-width:640px){
  .kx-theme-toggle{width:34px;height:34px;border-radius:9px;}
  .kx-theme-toggle svg{width:17px;height:17px;}
}
@media(max-width:370px){
  .kx-brand-word{display:none!important;}
}
@media(prefers-reduced-motion:no-preference){
  body,
  main>section,
  .kx-path-card,
  .kx-flow-card,
  .kx-context-col,
  .kx-control-card,
  .kx-faq-item{transition:background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease;}
}