/* ==========================================================================
   KODEUS , Design System
   The Operating System for AI-Native Applications
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ==========================================================================
     Kodeus brand tokens. Brand System v0.1.
     Reference the token, never the hex. Dark is the default and only mode for
     the product and this site; light mode exists for documents and print.
     ========================================================================== */

  --color-page: #0b0e0d;
  --color-surface: #141a17;
  --color-hairline: #232b27;
  --color-text: #f4f7f5;
  --color-muted: #8a968f;

  --accent-primary: #46fea7; /* Mint  · CTAs, accent word, live states */
  --accent-support: #74cda3; /* Sage  · secondary emphasis, series two */
  --accent-deep: #1f8f5e; /* pressed states, dense charts */
  --status-error: #e5484d; /* the only non-brand hue in the system */

  --mint-900: #0e5e3c;
  --mint-700: #1f8f5e;
  --mint-500: #46fea7;
  --mint-300: #8cffcb;
  --mint-100: #d6ffec;

  /* Accent at opacity. Mint is rgb(70, 254, 167). */
  --accent-06: rgba(70, 254, 167, 0.06);
  --accent-12: rgba(70, 254, 167, 0.12);
  --accent-20: rgba(70, 254, 167, 0.2);
  --accent-32: rgba(70, 254, 167, 0.32);
  --accent-55: rgba(70, 254, 167, 0.55);

  /* Chart and diagram series. Two accents, then the muted ramp. No third hue. */
  --series-1: var(--accent-primary);
  --series-2: var(--accent-support);
  --series-3: #8a968f;
  --series-4: #5c665f;

  /* --------------------------------------------------------------------
     Legacy aliases. Older rules still reference these names; every one
     resolves to a brand token so there is a single source of truth.
     -------------------------------------------------------------------- */
  --bg: var(--color-page);
  --bg-2: var(--color-page);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface);
  --surface-3: var(--color-surface);
  --overlay: rgba(11, 14, 13, 0.86);

  --text: var(--color-text);
  --text-2: var(--color-text);
  --text-3: var(--color-muted);
  --text-4: var(--color-muted);

  --line: var(--color-hairline);
  --line-2: var(--color-hairline);
  --line-3: #313a35;
  --grid: transparent;

  --lime: var(--accent-primary);
  --lime-dim: var(--accent-deep);
  --lime-fill: var(--accent-primary);
  --lime-ink: var(--color-page);
  --lime-06: var(--accent-06);
  --lime-12: var(--accent-12);
  --lime-20: var(--accent-20);
  --lime-32: var(--accent-32);
  --lime-55: var(--accent-55);

  --violet: var(--series-3);
  --cyan: var(--accent-support);
  --amber: var(--series-4);

  --layer-exec: var(--series-1);
  --layer-system: var(--series-2);
  --layer-coord: var(--series-3);
  --layer-econ: var(--series-4);

  /* --------------------------------------------------------------------
     Type. Four families, each with one job. Bricolage never below 24px,
     Geist for anything read at length, mono for machine output.
     -------------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout. 12 col, 1200 content, 8px baseline, 2px radius, 1px stroke. */
  --gutter: clamp(24px, 4vw, 120px);
  --max: 1200px;
  --max-prose: 720px;
  --section-y: clamp(64px, 8vw, 128px);
  --radius: 4px;
  --radius-lg: 4px;
  --radius-sm: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* No shadow, glow, bevel or outline anywhere in this system. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-2);
  background-color: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--lime);
  color: var(--lime-ink);
}

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

/* Scrollbar */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: #0a0b0d;
}
::-webkit-scrollbar-thumb {
  background: #23282d;
  border-radius: var(--radius);
  border: 3px solid #0a0b0d;
}
::-webkit-scrollbar-thumb:hover {
  background: #333a41;
}

/* --------------------------------------------------------------------------
   3. Typography
   Bricolage for display only and never below 24px. Geist for everything read
   at length. Mono marks machine output. Tracking is a percentage of the size.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

/* display/hero · 72 · 100% · -4% */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* "Operating Layer" is pinned to one line, so on a 320px screen it sets the
   minimum width of the whole page. At the 40px clamp floor it lands 2px wider
   than the container, so step the display size down below 360px rather than
   let the headline decide the page can scroll sideways. */
/* Keep a hyphenated compound whole. Browsers treat a hyphen as a legal break
   point, so "AI-Native" splits across lines and reads as a dangling "AI-".
   Wrap the compound, do not add a non-breaking hyphen character. */
.nb {
  white-space: nowrap;
}

/* display/h1 · 56 · 100% · -4% */
.t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* display/h2 · 40 · 105% · -3% */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* display/h3 · 32 · 110% · -3% */
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* display/sheet · 24 · 115% · -3% · the smallest Bricolage is allowed to go */
.t-sheet {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* Below 24px the display family is not permitted, so card and row headings
   are Geist. ui/label at SemiBold. */
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ui/body-lg · 18 · 150% */
.t-lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

/* ui/body · 16 · 150% */
.t-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* ui/body-sm · 14 · 140% */
.t-sm {
  font-size: 14px;
  line-height: 1.4;
}

/* ui/caption · 12 · 130% */
.t-xs {
  font-size: 12px;
  line-height: 1.3;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "zero" 1;
}

.dim {
  color: var(--color-muted);
}
.dimmer {
  color: var(--color-muted);
}
.bright {
  color: var(--color-text);
}

/* accent/primary. One accent word per display headline, and never on body. */
.accent {
  color: var(--accent-primary);
}

strong,
b {
  color: var(--color-text);
  font-weight: 600;
}

/* mono/eyebrow · 12 · 120% · +8% · uppercase */
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* No leading rule before the label. It was drawn as a 16px hairline, not a
   character, but on screen it read as an em dash, which the site does not use.
   Do not reintroduce it. */

.kicker--violet,
.kicker--cyan {
  color: var(--accent-support);
}

/* mono/label · 12 · 120% */
.filetag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface);
  align-self: flex-start;
}

.filetag::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-wide {
  max-width: 1440px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section-tight {
  padding-block: clamp(48px, 6vw, 88px);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.section-head.is-center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.rule {
  height: 1px;
  background: var(--color-hairline);
  border: 0;
}

.grid {
  display: grid;
  gap: 16px;
}
.g-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.g-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
}
.gap-6 {
  gap: 6px;
}
.gap-10 {
  gap: 10px;
}
.gap-14 {
  gap: 14px;
}
.gap-18 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.gap-32 {
  gap: 32px;
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 1000px) {
  .g-4,
  .g-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .g-2,
  .g-3,
  .g-4,
  .g-5 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Texture must be a shader-generated dither marking a boundary. A drawn grid
   is not that, so the backdrop is off until the dither shader is ported. */
.gridlines {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 16px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.22s var(--ease),
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease);
}

.btn:hover {
  transform: translateY(-1.5px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--color-page);
}

.btn-primary:hover {
  background: var(--mint-300);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.028);
  border-color: var(--line-2);
  color: var(--text);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-3);
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  padding-inline: 4px;
}
.btn-quiet:hover {
  color: var(--text);
}

.btn-lg {
  padding: 16px 24px;
  font-size: 1rem;
}

.btn .arw {
  transition: transform 0.3s var(--ease);
}
.btn:hover .arw {
  transform: translateX(3px);
}

/* Inline text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--lime);
  font-weight: 500;
  font-size: 0.94rem;
  width: fit-content;
  transition: gap 0.25s var(--ease);
}
.tlink:hover {
  gap: 0.75em;
  color: var(--lime);
}
.tlink::after {
  content: "→";
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   6. Cards & panels
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease),
    background 0.3s var(--ease);
  overflow: hidden;
}

.card-hover:hover {
  border-color: var(--line-3);
  transform: translateY(-3px);
  background: var(--color-surface);
}

.card-lift {
  background: var(--surface);
  border-color: var(--line-2);
}

.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: var(--color-surface);
  overflow: hidden;
}

.panel-pad {
  padding: clamp(24px, 4vw, 48px);
}

/* Numbered index on a card */
.idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-4);
}

/* Icon tile */
.tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--lime);
  flex: none;
}
.tile svg {
  width: 19px;
  height: 19px;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--lime-32);
  background: var(--lime-06);
  color: var(--lime);
  white-space: nowrap;
  align-self: flex-start;
}

.badge-quiet {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Capability status
   The manifesto is careful to separate what runs today from what the design
   extends to. The site keeps that distinction visible rather than flattening
   it into one confident present tense.
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius);
  white-space: nowrap;
  flex: none;
  align-self: flex-start;
}

.chip-now {
  border: 1px solid var(--lime-32);
  background: var(--lime-06);
  color: var(--lime);
}

.chip-next {
  border: 1px dashed rgba(182, 168, 255, 0.4);
  background: transparent;
  color: rgba(182, 168, 255, 0.85);
}

/* A list whose items each carry a status */
.slist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.slist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-3);
}

.slist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.slist .chip {
  margin-top: 1px;
}

@media (max-width: 460px) {
  .slist li {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

/* Legend explaining the two states */
.status-key {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.016);
  width: fit-content;
}

.status-key span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--text-4);
}

/* Bullet list */
.blist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.blist li {
  position: relative;
  padding-left: 24px;
  color: var(--text-3);
  font-size: 0.95rem;
  line-height: 1.55;
}

.blist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lime);
  opacity: 0.75;
}

.blist--check li::before {
  content: "✓";
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: none;
  color: var(--lime);
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  opacity: 1;
}

/* Pull quote / principle callout */
.principle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 24px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--lime-20);
  background: var(--color-surface);
}

.principle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: var(--radius);
  background: var(--accent-primary);
}

.principle .principle-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime);
}

.principle p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--text);
  font-weight: 500;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.014);
  -webkit-overflow-scrolling: touch;
}

table.kt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.94rem;
}

table.kt th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.022);
  white-space: nowrap;
}

table.kt td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  vertical-align: top;
  line-height: 1.55;
}

table.kt tr:last-child td {
  border-bottom: 0;
}

table.kt tbody tr {
  transition: background 0.2s var(--ease);
}
table.kt tbody tr:hover {
  background: rgba(255, 255, 255, 0.018);
}

table.kt td:first-child {
  color: var(--text);
  font-weight: 500;
  width: 30%;
}

/* --------------------------------------------------------------------------
   8. Code
   -------------------------------------------------------------------------- */
.code {
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: #0a0c0e;
  overflow: hidden;
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.code-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius);
  background: #23282d;
  flex: none;
}

.code-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-4);
  margin-left: 4px;
}

.code pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-2);
  tab-size: 2;
}

.c-key {
  color: var(--cyan);
}
.c-str {
  color: var(--lime);
}
.c-com {
  color: var(--text-4);
}
.c-fn {
  color: var(--violet);
}
.c-ok {
  color: var(--lime);
}
.c-prompt {
  color: var(--text-4);
  user-select: none;
}

/* --------------------------------------------------------------------------
   8b. Pre-launch announcement bar
   Sits above the header so the availability caveat is the first thing read,
   rather than a surprise after someone clicks a CTA.
   -------------------------------------------------------------------------- */
html:not(.js) .annc {
  display: none;
}

.annc {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 101;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.4;
}

.annc-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 40px;
  padding: 9px calc(var(--gutter) + 32px) 9px var(--gutter);
  max-width: 1440px;
  margin-inline: auto;
  text-align: center;
}

.annc b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  flex: none;
}

.annc a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.annc a:hover {
  color: var(--accent-primary);
}

.annc-x {
  position: absolute;
  right: calc(var(--gutter) - 6px);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  opacity: 0.6;
}

.annc-x:hover {
  opacity: 1;
  color: var(--color-text);
  background: transparent;
}

.annc-x svg {
  width: 14px;
  height: 14px;
}

/* Everything below shifts down while the bar is up. */
body.has-annc .hdr {
  top: var(--annc-h, 40px);
}

body.has-annc .mnav {
  top: calc(68px + var(--annc-h, 40px));
}

body.has-annc .hero,
body.has-annc .phead {
  padding-top: calc(104px + var(--annc-h, 40px));
}

@media (max-width: 700px) {
  .annc-in {
    font-size: 0.78rem;
  }
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.hdr.is-stuck {
  background: rgba(9, 10, 13, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

/* Wordmark minimum is 96px wide on screen. At 1378x316 that is 23px tall. */
.brand img {
  height: 23px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  transition: filter 0.25s var(--ease);
}

.brand:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(200, 255, 77, 0.5));
}

/* Below the phone breakpoint the wordmark competes with the CTA, so the
   short mark takes over. */
.brand .mark {
  display: none;
  height: 22px;
}

@media (max-width: 460px) {
  .brand .wordmark {
    display: none;
  }
  .brand .mark {
    display: block;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}

.nav a {
  position: relative;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-3);
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1.5px;
  border-radius: var(--radius);
  background: var(--lime);
}

.hdr-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdr-cta .btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* One accent action per view. The hero owns the accent, so the header CTA
   takes the secondary role: hairline border, text label, no accent. */
.hdr-cta .btn-primary {
  background: transparent;
  border-color: var(--color-hairline);
  color: var(--color-text);
}

.hdr-cta .btn-primary:hover {
  background: transparent;
  border-color: var(--line-3);
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  place-items: center;
  color: var(--text);
}

.burger svg {
  width: 17px;
  height: 17px;
}

.mnav {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 99;
  background: rgba(8, 9, 11, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
  overflow-y: auto;
}

.mnav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mnav a {
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnav a span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-4);
  letter-spacing: 0.1em;
}

.mnav .btn {
  margin-top: 24px;
}

@media (max-width: 1080px) {
  .nav,
  .hdr-cta .btn-ghost {
    display: none;
  }
  .burger {
    display: grid;
  }
  .hdr-cta {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .hdr-cta .btn-primary {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 132px;
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}

.hero-glow {
  display: none;
}

/* Mobile first: copy stacked above the diagram, both centred. */
.hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero h1 {
  /* 15ch cut the measure 22px short of "The Operating Layer for", which forced
     a greedy break that left "Applications" alone on a third line. 16ch gives
     the line room; balance then keeps the remaining lines even instead of
     packing the first one full. */
  max-width: 16ch;
  text-wrap: balance;
}

/* Phones: "The Operating Layer" must hold on one line, otherwise "The" is
   orphaned above the mint phrase. 7.6vw keeps that line inside the 24px
   gutters from 320px up, and the 40px cap hands back to the clamp above. */
@media (max-width: 560px) {
  .hero h1 {
    font-size: min(7.6vw, 40px);
    max-width: none;
  }
}

.hero .t-lead {
  max-width: 58ch;
  color: var(--text-3);
}

/* Laptop and up: copy left, diagram right, sized to fit one viewport. */
@media (min-width: 961px) {
  .hero {
    padding-top: 104px;
    padding-bottom: clamp(40px, 4.5vw, 72px);
  }

  .hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(32px, 4vw, 62px);
    align-items: center;
    text-align: left;
  }

  .hero-copy {
    align-items: flex-start;
    text-align: left;
  }

  /* Steps down from the full display size: the headline now lives in half the
     width, so the uncapped scale would run to five lines. */
  .hero h1 {
    font-size: clamp(2.3rem, 3.7vw, 3.6rem);
    /* Same 16ch as the stacked layout. The copy column has room for it, and
       anything narrower re-breaks "AI-Native Applications" onto two lines. */
    max-width: 16ch;
  }

  .hero .t-lead {
    max-width: 46ch;
  }

  .hero-cta,
  .hero-note {
    justify-content: flex-start;
  }

  .kernel {
    margin-top: 0;
  }

  /* Height-driven rather than aspect-driven, so the hero always clears the
     fold on a 768px-tall laptop screen. */
  .kernel-stage {
    aspect-ratio: auto;
    height: clamp(340px, 50vh, 470px);
    max-width: none;
  }
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 6px;
}

.hero-note i {
  width: 3px;
  height: 3px;
  border-radius: var(--radius);
  background: var(--text-4);
  display: inline-block;
}

/* Announcement pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 7px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.028);
  font-size: 0.82rem;
  color: var(--text-2);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.pill:hover {
  border-color: var(--lime-32);
  background: var(--lime-06);
}

.pill b {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 600;
}

.pill span {
  color: var(--text-4);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   11. Kernel visualization (hero)
   -------------------------------------------------------------------------- */
.kernel {
  position: relative;
  margin-top: clamp(16px, 3vw, 32px);
  width: 100%;
}

.kernel-stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  aspect-ratio: 16 / 9.6;
  min-height: 320px;
}

.kernel-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Caption that reacts to the focused service. Static, below the canvas. */
.kernel-cap {
  width: min(460px, 100%);
  margin: 22px auto 0;
  min-height: 82px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}

.kernel-cap-layer {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  transition: color 0.4s var(--ease);
}

.kernel-cap-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kernel-cap-desc {
  font-size: 0.855rem;
  line-height: 1.5;
  color: var(--text-3);
  text-wrap: pretty;
}

.kernel-cap.is-swap .kernel-cap-name,
.kernel-cap.is-swap .kernel-cap-desc {
  opacity: 0;
  transform: translateY(5px);
}

.kernel-cap .kernel-cap-name,
.kernel-cap .kernel-cap-desc {
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}

/* Layer legend */
.kernel-legend {
  list-style: none;
  padding: 0;
  margin: clamp(4px, 2vw, 18px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.kernel-legend button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-4);
  cursor: pointer;
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.kernel-legend button:hover,
.kernel-legend button.is-on {
  color: var(--text);
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.05);
}

.kernel-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius);
  background: currentColor;
  flex: none;
}

.kernel-legend li:nth-child(1) .dot {
  background: var(--layer-exec);
}
.kernel-legend li:nth-child(2) .dot {
  background: var(--layer-system);
}
.kernel-legend li:nth-child(3) .dot {
  background: var(--layer-coord);
}
.kernel-legend li:nth-child(4) .dot {
  background: var(--layer-econ);
}

@media (max-width: 620px) {
  .kernel-stage {
    aspect-ratio: 1 / 1.02;
  }
  .kernel-cap {
    width: 92%;
  }
}

/* --------------------------------------------------------------------------
   12. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 16px;
  background: rgba(255, 255, 255, 0.012);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: kdMarquee 48s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
}

.marquee-track span i {
  color: var(--lime);
  font-style: normal;
}

@keyframes kdMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   13. Kernel stack (layer diagram, used on Kernel page + home)
   -------------------------------------------------------------------------- */
.stack-layer {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--color-surface);
  padding: 24px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
  overflow: hidden;
}

.stack-layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lc, var(--lime));
  opacity: 0.55;
}

.stack-layer:hover {
  border-color: var(--line-3);
  background: var(--color-surface);
}

.stack-layer .sl-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-layer .sl-name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}

.stack-layer .sl-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc, var(--lime));
}

.svc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.016);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.svc:hover {
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.svc-name {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.svc-name::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2px; /* marker glyph, not a surface: exempt from --radius */
  background: var(--lc, var(--lime));
  flex: none;
}

.svc-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-4);
}

@media (max-width: 820px) {
  .stack-layer {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   14. Lifecycle rail
   -------------------------------------------------------------------------- */
.rail {
  position: relative;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rail::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 21px;
  height: 1px;
  background: var(--color-hairline);
}

.rail-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-dot {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  position: relative;
  z-index: 1;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.rail-step:hover .rail-dot {
  border-color: var(--lime-55);
  color: var(--lime);
}

@media (max-width: 980px) {
  .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rail::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. Resource cards (the four managed resources)
   -------------------------------------------------------------------------- */
.res {
  position: relative;
  padding: 24px 24px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.res::after {
  content: "";
  position: absolute;
  inset: -40% 50% 50% -40%;
  background: var(--rc, var(--accent-primary));
  opacity: 0.09;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.res:hover {
  border-color: var(--line-3);
  transform: translateY(-4px);
}

.res:hover::after {
  opacity: 0.2;
}

.res-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--rc, var(--lime));
}

.res h3 {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   16. Stats
   -------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}

.stat-n {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}

.stat-n em {
  font-style: normal;
  color: var(--lime);
}

.stat-l {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-4);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-block: 1px solid var(--line);
}

.stat-row .stat + .stat {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

@media (max-width: 700px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-row .stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   17. Module cards (optional capability modules)
   -------------------------------------------------------------------------- */
.module {
  position: relative;
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, 0.014);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}

.module:hover {
  border-color: var(--mc, var(--violet));
  background: rgba(255, 255, 255, 0.03);
}

.module-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--mc, var(--violet));
  color: var(--mc, var(--violet));
  background: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   18. Flywheel
   -------------------------------------------------------------------------- */
.fly {
  display: grid;
  gap: 12px;
}

.fly-step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.016);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}

.fly-step:hover {
  transform: translateX(6px);
  border-color: var(--lime-32);
  background: var(--lime-06);
}

.fly-n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--lime);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--lime-20);
  overflow: hidden;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
  background: var(--color-surface);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta::before {
  content: none;
}

.cta > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 76px) 32px;
  margin-top: clamp(48px, 7vw, 96px);
}

.ftr-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
}

.ftr-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 320px;
}

/* The short mark, not the wordmark , the copyright line already says Kodeus.
   align-self keeps flex from stretching the image and squashing its ratio. */
.ftr-brand a {
  display: inline-flex;
  align-self: flex-start;
  flex: none;
}

.ftr-brand img {
  height: 26px;
  width: auto;
  align-self: flex-start;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.2s var(--ease);
}

.ftr-brand a:hover img,
.ftr-brand a:focus-visible img {
  opacity: 1;
}

.ftr-col h4 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 16px;
}

.ftr-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ftr-col a {
  font-size: 0.9rem;
  color: var(--text-3);
  transition: color 0.2s var(--ease);
  width: fit-content;
}

.ftr-col a:hover {
  color: var(--lime);
}

.ftr-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-4);
}

.ftr-bot .row {
  gap: 20px;
}

@media (max-width: 900px) {
  .ftr-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .ftr-brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   21. Page header (interior pages)
   -------------------------------------------------------------------------- */
.phead {
  position: relative;
  padding-top: 126px;
  padding-bottom: clamp(32px, 5vw, 60px);
  overflow: hidden;
}

.phead-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 860px;
}

.phead::after {
  content: none;
}

/* --------------------------------------------------------------------------
   21b. Page-header variants
   Each page gets its own opening rhythm so the site doesn't read as one
   template repeated five times.
   -------------------------------------------------------------------------- */

/* Centered , every page header uses this. The page's own visual sits
   centered beneath it, which is what keeps the pages from feeling identical
   without pulling the headline off-axis. */
.phead--center .phead-in {
  max-width: 920px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* Interior headlines sit a step below the home hero, so the longest line
   ("Controlled enough for production.") holds on one line inside a centered
   measure instead of breaking into three. */
.phead .t-h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.25rem);
}

.phead--center::after {
  left: 50%;
  top: -70%;
  transform: translateX(-50%);
}

/* The page's signature visual, centered under the header */
.phead-visual {
  width: 100%;
  max-width: var(--pv, 820px);
  margin: clamp(26px, 4vw, 46px) auto 0;
}

/* A rail of jump-links under a centered header */
.pill-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.pill-rail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition:
    color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    background 0.22s var(--ease);
}

.pill-rail a:hover {
  color: var(--text);
  border-color: var(--lime-32);
  background: var(--lime-06);
}

.pill-rail i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius);
  background: var(--pc, var(--lime));
  flex: none;
}

/* --------------------------------------------------------------------------
   21c. Layer slab stack , the Kernel page's own visual
   -------------------------------------------------------------------------- */
.slabs {
  display: flex;
  flex-direction: column;
  gap: 11px;
  perspective: 1400px;
}

.slab {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: var(--color-surface);
  transform: rotateX(7deg) translateZ(0);
  transform-origin: 50% 100%;
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.slab:hover {
  transform: rotateX(0deg) translateY(-2px);
  border-color: var(--sc);
}

.slab-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.slab-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.slab-n {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc);
}

.slab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.slab-chips span {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  color: var(--text-3);
  white-space: nowrap;
}

/* The kernel plinth the slabs sit on */
.slab-base {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--lime-32);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}

.slab-base::before,
.slab-base::after {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--accent-32);
}

/* --------------------------------------------------------------------------
   21c-2. Governance flow , the Enterprise page's own visual
   -------------------------------------------------------------------------- */
.flow {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

/* The spine that connects one step to the next */
.flow::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--color-hairline);
}

.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  z-index: 1;
}

.flow-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

.flow-row + .flow-row {
  border-top: 1px solid var(--line);
}

.flow-dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  border: 1px solid var(--fc, var(--line-3));
  background: var(--bg-2);
  color: var(--fc, var(--text-3));
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  flex: none;
}

.flow-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
  display: block;
}

.flow-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-4);
  display: block;
  margin-top: 2px;
}

.flow-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fc, var(--text-4));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 9px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .flow-tag {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   21d. Section rhythm helpers
   -------------------------------------------------------------------------- */

/* Full-bleed band , breaks a run of identical white-space sections */
.band {
  background: var(--color-surface);
  border-block: 1px solid var(--color-hairline);
}

.band,
.band-accent {
  background: var(--color-surface);
  border-block: 1px solid var(--color-hairline);
}

.band-accent {
  background: var(--color-surface);
  border-block: 1px solid var(--color-hairline);
}

/* Heading column that stays put while its content scrolls */
.sec-side {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

.sec-side-head {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A heading in a narrow sticky column needs to step down a size, or it
   wraps into a tall stack of two-word lines. */
.sec-side-head .t-h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  letter-spacing: -0.028em;
}

@media (max-width: 940px) {
  .sec-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-side-head {
    position: static;
  }
}

/* Asymmetric grid , the first card carries more weight */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feat-grid > :first-child {
  grid-column: span 2;
}

@media (max-width: 940px) {
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .feat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .feat-grid > :first-child {
    grid-column: auto;
  }
}

/* Numbered editorial list , an alternative to yet another card grid */
.numlist {
  display: grid;
  gap: 0;
  counter-reset: nl;
}

.numlist > li {
  list-style: none;
  counter-increment: nl;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 4px;
  border-top: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}

.numlist > li:last-child {
  border-bottom: 1px solid var(--line);
}

.numlist > li:hover {
  background: rgba(255, 255, 255, 0.018);
}

.numlist > li::before {
  content: "0" counter(nl);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-4);
  padding-top: 3px;
}

.numlist > li:hover::before {
  color: var(--lime);
}

@media (max-width: 560px) {
  .numlist > li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   22. Long-form chapter layout
   -------------------------------------------------------------------------- */
.chap {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 32px;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}

.chap-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-4);
  padding-top: 8px;
}

.chap-num b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--line-3);
  line-height: 1;
  transition: color 0.3s var(--ease);
}

.chap:hover .chap-num b {
  color: var(--lime);
}

.chap-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chap-body p {
  color: var(--text-3);
  text-wrap: pretty;
}

.chap-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.36;
  letter-spacing: -0.024em;
  color: var(--text);
  font-weight: 500;
}

/* Table of contents */
.toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 32px;
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 10px;
  border-radius: var(--radius);
  font-size: 0.93rem;
  color: var(--text-3);
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.toc a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.toc a b {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--lime);
  font-weight: 500;
  flex: none;
}

@media (max-width: 720px) {
  .chap {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .chap-num {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-top: 0;
  }
  .chap-num b {
    font-size: 1.5rem;
  }
  .toc {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   23. Pricing
   -------------------------------------------------------------------------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: var(--color-surface);
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
}

.plan.is-feature {
  border-color: var(--lime-32);
  background: var(--color-surface);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--text);
  line-height: 1;
}

.plan-price small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-4);
  font-weight: 400;
}

.plan-flag {
  position: absolute;
  top: -10px;
  left: 28px;
}

/* --------------------------------------------------------------------------
   23b. Forms
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.022);
  color: var(--text);
  font-size: 0.94rem;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
  appearance: none;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.55;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a968f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: calc(100% - 15px) center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field select option {
  background: #14171b;
  color: var(--text);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime-55);
  background: rgba(200, 255, 77, 0.035);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   23c. Marketing components
   -------------------------------------------------------------------------- */

/* Proof bar , real, checkable facts directly under the hero */
.proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 24px clamp(20px, 3.5vw, 40px);
  text-align: center;
  flex: 1 1 190px;
  min-width: 0;
}

.proof-item + .proof-item {
  border-left: 1px solid var(--line);
}

.proof-n {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.1;
}

.proof-l {
  font-size: 0.82rem;
  color: var(--text-4);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .proof-item {
    flex-basis: 50%;
  }
  .proof-item:nth-child(3) {
    border-left: 0;
  }
}

/* Numbered how-it-works steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.step:hover {
  border-color: var(--lime-32);
  transform: translateY(-3px);
}

.step-n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--lime);
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* FAQ , native disclosure, no JS */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--lime);
}

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-4);
  flex: none;
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--lime);
}

.faq details > p {
  padding: 0 4px 24px;
  max-width: 74ch;
  color: var(--text-3);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Benefit card with a leading rule in the layer colour */
.benefit {
  position: relative;
  padding: 24px 24px 24px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: var(--radius);
  background: var(--bc, var(--lime));
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}

.benefit:hover {
  border-color: var(--line-3);
  transform: translateY(-3px);
}

.benefit:hover::before {
  opacity: 1;
}

.benefit h3 {
  font-size: 1.04rem;
  letter-spacing: -0.018em;
}

/* --------------------------------------------------------------------------
   23c-2. Capability browser
   The full capability list is long. Showing one layer at a time, with an
   "available now" filter, turns a wall of cards into something you scan.
   -------------------------------------------------------------------------- */
.captabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}

.captab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.captab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-3);
  white-space: nowrap;
  transition:
    color 0.22s var(--ease),
    background 0.22s var(--ease);
}

.captab i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius);
  background: var(--c, var(--lime));
  opacity: 0.45;
  flex: none;
  transition: opacity 0.22s var(--ease);
}

.captab:hover {
  color: var(--text);
}

.captab.is-on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.captab.is-on i {
  opacity: 1;
}

.capnow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
  padding: 8px 4px;
}

.capnow input {
  appearance: none;
  width: 34px;
  height: 19px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  cursor: pointer;
  flex: none;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.capnow input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: var(--radius);
  background: var(--text-3);
  transition:
    transform 0.22s var(--ease),
    background 0.22s var(--ease);
}

.capnow input:checked {
  background: var(--lime-20);
  border-color: var(--lime-55);
}

.capnow input:checked::after {
  transform: translateX(15px);
  background: var(--lime);
}

.capnow:hover {
  color: var(--text);
}

.cappanel {
  display: none;
}

.cappanel.is-on {
  display: block;
  animation: capFade 0.32s var(--ease);
}

@keyframes capFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.cappanel-note {
  font-size: 0.92rem;
  color: var(--text-3);
  margin-bottom: 16px;
  max-width: 78ch;
}

/* "Available now only" hides the maturing rows, and any card left empty. */
.cappanels.is-nowonly li[data-status="next"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cappanel.is-on {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   24. Reveal on scroll
   -------------------------------------------------------------------------- */
/* Scroll reveals are progressive enhancement, never a precondition for the
   content existing. The .js class is set by an inline script in <head>, so if
   scripting is off or site.js fails to load, every .rv element renders
   normally instead of sitting at opacity 0 forever. */
html.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}

html.js .rv.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.center {
  text-align: center;
}
.mt-auto {
  margin-top: auto;
}
.w-full {
  width: 100%;
}
.rel {
  position: relative;
}
.z1 {
  position: relative;
  z-index: 1;
}
.nowrap {
  white-space: nowrap;
}
.max-prose {
  max-width: var(--max-prose);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.split-sticky {
  position: sticky;
  top: 108px;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-sticky {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   26. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .marquee-track {
    animation: none;
  }
}