/* ── KRYONEX SHARED STYLES ───────────────────────────────────────────────
One stylesheet for all pages. Linked via
inside each page's (dc-runtime clones into ; support.js:1332).
Edit the design system ONCE here instead of per-page inline copies. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--kx-bg);}
body{color:var(--kx-fg);font-family:'Sora',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;}
::selection{background:var(--kx-orange);color:var(--kx-bg);}
a{color:inherit;text-decoration:none;}
input,textarea{font-family:'Sora',sans-serif;}
@keyframes kx-in{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes kx-bar{0%,100%{transform:scaleY(.8);}50%{transform:scaleY(1);}}
@keyframes kx-blink{0%,100%{opacity:.2;}50%{opacity:1;}}
@keyframes kx-pulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.14);}}
@keyframes kx-cue{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(8px);opacity:1;}}
@keyframes kx-menu-in{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
.kx-hamburger{display:none;}
.kx-bar{display:block;width:20px;height:2px;background:var(--kx-fg);border-radius:2px;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s ease;}
.kx-hamburger[data-open="true"] .kx-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.kx-hamburger[data-open="true"] .kx-bar:nth-child(2){opacity:0;}
.kx-hamburger[data-open="true"] .kx-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:768px){
.kx-nav-desktop{display:none !important;}
.kx-hamburger{display:inline-flex !important;}
}
@media (max-width:900px){
.kx-split{grid-template-columns:1fr !important;}
.kx-split-3d{min-height:46vh !important;}
.kx-bento{grid-template-columns:1fr !important;grid-auto-rows:auto !important;}
/* The cards are flex columns with justify-content:space-between, and with 2 children that means
"separation == free space". The flagship is sized for a TWO-ROW slot (426px), where ~90px of free
space becomes a comfortable gap; the line above collapses it to one auto row, free space drops to
2px, and the "// in practice" box slams into the last line of the paragraph. gap is a MINIMUM, and
space-between subtracts it before distributing — so separation stays (free - gap) + gap = free
wherever free space already exceeds it. It only bites where the collision is. */
.kx-bento > div{grid-column:auto !important;grid-row:auto !important;min-height:168px;gap:18px;}
}
/* "[ 01 ]" is 6 chars of JetBrains Mono at 11px with .1em tracking = 46.2px, and the mobile
.kx-inc-row gives its column 44px — so it wrapped, dropping the "]" onto a second line. The 2px
overflow lands in the 20px column gap. Declared here rather than in the six services-*.dc.html