/* Inztinct — layout concept: a clean engineering-paper white world with one pixel-cube accent;
   dark "vault" sections hold everything about the Guard. Stepped (pixel) corners come from the logo. */
:root {
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #EBEFF5;
  --ink: #0A0C11;
  --ink-2: #4B5363;
  --ink-3: #7A8292;
  --line: #DCE1EA;
  --blue: #1766E5;
  --blue-ink: #FFFFFF;
  --blue-soft: #E3EDFD;
  --vault: #06080C;
  --vault-2: #0D1118;
  --vault-ink: #EDF1F7;
  --vault-ink-2: #9AA4B5;
  --vault-line: #1C2431;
  --vault-blue: #4D8EFF;
  --ok: #0E8F5B;
  --warn: #B87000;
  --bad: #D63B3B;
  --show-d: block;
  --show-l: none;
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1280px;
  --gut: clamp(16px, 4vw, 56px);
  --px: 8px;
  --trail: color-mix(in srgb, var(--blue) 45%, transparent);
  --trail2: color-mix(in srgb, var(--blue) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080A0F;
    --surface: #0F131A;
    --surface-2: #161B25;
    --ink: #F1F4F9;
    --ink-2: #A3ACBB;
    --ink-3: #6F7889;
    --line: #1F2632;
    --blue: #4D8EFF;
    --blue-ink: #06080C;
    --blue-soft: #0F1B33;
    --vault: #030406;
    --vault-2: #090C11;
    --ok: #35C48A;
    --warn: #E7A93A;
    --bad: #FF6B6B;
    --show-d: none;
    --show-l: block;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #080A0F;
  --surface: #0F131A;
  --surface-2: #161B25;
  --ink: #F1F4F9;
  --ink-2: #A3ACBB;
  --ink-3: #6F7889;
  --line: #1F2632;
  --blue: #4D8EFF;
  --blue-ink: #06080C;
  --blue-soft: #0F1B33;
  --vault: #030406;
  --vault-2: #090C11;
  --ok: #35C48A;
  --warn: #E7A93A;
  --bad: #FF6B6B;
  --show-d: none;
  --show-l: block;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

img,
video,
svg {
  max-width: 100%
}

a {
  color: inherit
}

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px
}

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

.sec {
  padding-block: clamp(64px, 9vw, 128px)
}

.mono {
  font-family: var(--mono)
}

.logo-d {
  display: var(--show-d)
}

.logo-l {
  display: var(--show-l)
}

/* type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--blue);
  box-shadow: -5px 5px 0 -1px var(--trail), -10px 10px 0 -2px var(--trail2);
  margin-left: 10px
}

.display {
  font-weight: 600;
  font-size: clamp(46px, 8.2vw, 124px);
  line-height: .94;
  letter-spacing: -.055em;
  margin: 0;
  text-wrap: balance
}

.h1 {
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: .97;
  letter-spacing: -.05em;
  margin: 0;
  text-wrap: balance
}

.h2 {
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0;
  text-wrap: balance
}

.h3 {
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0
}

.lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0
}

.muted {
  color: var(--ink-2)
}

p {
  margin: 0
}

.blue {
  color: var(--blue)
}

.sechead {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(36px, 5vw, 64px);
  max-width: 920px
}

/* stepped (pixel) corners */
.px {
  clip-path: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)))
}

.px-sm {
  --px: 5px
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font: 500 13px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  transition: transform .2s, background .2s
}

.btn:hover {
  background: var(--blue);
  color: var(--blue-ink);
  transform: translateY(-2px)
}

.btn.blue {
  background: var(--blue);
  color: var(--blue-ink)
}

.btn.blue:hover {
  background: var(--ink);
  color: var(--bg)
}

.btn.soft {
  background: var(--surface-2);
  color: var(--ink)
}

.btn.soft:hover {
  background: var(--ink);
  color: var(--bg)
}

.btn.onvault {
  background: var(--vault-ink);
  color: var(--vault)
}

.btn.onvault:hover {
  background: var(--vault-blue);
  color: var(--vault)
}

.btn svg {
  width: 14px;
  height: 14px
}

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

.tag {
  display: inline-block;
  padding: 6px 10px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-2)
}

.tag.b {
  background: var(--blue-soft);
  color: var(--blue)
}

/* nav */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line)
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px
}

.nav .brand img {
  height: 24px;
  width: auto
}

.nav .brand img.logo-d {
  display: var(--show-d)
}

.nav .brand img.logo-l {
  display: var(--show-l)
}

.nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav ul a {
  display: block;
  padding: 10px 14px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s
}

.nav ul a:hover,
.nav ul a[aria-current="page"] {
  color: var(--ink)
}

.nav ul a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--blue)
}

.nav .tools {
  display: flex;
  gap: 10px;
  align-items: center
}

.iconbtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer
}

.iconbtn:hover {
  border-color: var(--ink)
}

.menubtn {
  display: none
}

@media (max-width:980px) {
  .menubtn {
    display: grid
  }

  .nav ul {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px;
    display: none
  }

  .nav ul.open {
    display: flex
  }

  .nav ul a {
    padding: 16px 0;
    font-size: 14px
  }

  .nav .cta {
    display: none
  }
}

/* hero */
.hero {
  position: relative;
  overflow: hidden
}

.hero canvas.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}

.hero .wrap {
  position: relative;
  z-index: 1
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px)
}

.hero-copy {
  display: grid;
  gap: 30px;
  min-width: 0
}

.hero h1 em {
  font-style: normal;
  position: relative;
  color: var(--blue)
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 6px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.hero-meta b {
  color: var(--ink);
  font-weight: 500
}

.film {
  position: relative;
  aspect-ratio: 9/14.5;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  background: #0b0d12;
  overflow: hidden
}

.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.film .hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 20px 18px;
  background: linear-gradient(transparent, rgba(5, 7, 11, .82));
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  font: 500 11px/1.35 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase
}

.film .rec {
  display: flex;
  align-items: center;
  gap: 8px
}

.film .rec i {
  width: 8px;
  height: 8px;
  background: #4D8EFF;
  animation: blink 1.6s steps(2) infinite
}

.film .corner {
  position: absolute;
  top: 16px;
  left: 16px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(5, 7, 11, .55);
  padding: 7px 9px
}

@keyframes blink {
  50% {
    opacity: .15
  }
}

@media (max-width:860px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .film {
    max-width: 340px
  }
}

.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface)
}

.ticker .track {
  display: flex;
  width: max-content;
  animation: tick 42s linear infinite
}

.ticker span {
  padding: 18px 30px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 30px
}

.ticker span::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--blue)
}

@keyframes tick {
  to {
    transform: translateX(-50%)
  }
}

/* cards / grids */
.grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px)
}

.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

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

  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:640px) {

  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 32px);
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0
}

.card .k {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue)
}

.card p {
  color: var(--ink-2);
  font-size: 15px
}

.spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  background: var(--surface)
}

.spec>div {
  padding: 26px clamp(14px, 2vw, 28px);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 8px;
  min-width: 0
}

.spec>div:last-child {
  border-right: 0
}

.spec b {
  font: 600 clamp(26px, 3vw, 40px)/1 var(--font);
  letter-spacing: -.04em
}

.spec small {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2)
}

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

  .spec>div:nth-child(2) {
    border-right: 0
  }

  .spec>div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line)
  }
}

/* module stage */
.mod {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr) minmax(220px, .9fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--surface)
}

.mod-list {
  display: grid;
  align-content: center;
  border-right: 1px solid var(--line)
}

.mod-list button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 26px 22px;
  border-bottom: 1px solid var(--line);
  transition: background .2s
}

.mod-list button:last-child {
  border-bottom: 0
}

.mod-list button:hover {
  background: var(--surface-2)
}

.mod-list button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px
}

.mod-list button[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg)
}

.mod-list .z {
  font: 600 18px/1 var(--mono);
  letter-spacing: -.02em;
  grid-row: span 2
}

.mod-list .z i {
  font-style: normal;
  color: var(--blue)
}

.mod-list button[aria-selected="true"] .z i {
  color: var(--vault-blue)
}

.mod-list strong {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em
}

.mod-list small {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7
}

.mod-stage {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px, var(--bg)
}

.mod-stage img {
  margin-top: 30px;
  position: relative;
  z-index: 1;
  height: min(430px, 56vw);
  width: auto;
  max-width: 86%;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(10, 20, 40, .18));
  transition: opacity .25s, transform .45s cubic-bezier(.2, .8, .2, 1)
}

.mod-stage img.out {
  opacity: 0;
  transform: translateY(-26px)
}

.mod-stage .ring {
  position: absolute;
  bottom: 56px;
  left: 50%;
  width: 62%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 40%, transparent), transparent);
  filter: blur(6px)
}

.mod-stage .lab {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 2;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.mod-info {
  padding: 28px;
  display: grid;
  gap: 18px;
  align-content: start;
  border-left: 1px solid var(--line)
}

.mod-info h3 {
  margin: 0
}

.mod-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px
}

.mod-info li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: var(--ink-2)
}

.mod-info li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--blue);
  transform: translateY(-2px)
}

@media (max-width:980px) {
  .mod {
    grid-template-columns: 1fr
  }

  .mod-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .mod-list button {
    grid-template-columns: 1fr;
    padding: 14px 8px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    text-align: center;
    justify-items: center
  }

  .mod-list small,
  .mod-list strong {
    display: none
  }

  .mod-list .z {
    grid-row: auto
  }

  .mod-info {
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .mod-stage {
    min-height: 420px
  }
}

/* vault (dark) sections */
.vault {
  background: var(--vault);
  color: var(--vault-ink);
  position: relative;
  overflow: hidden
}

.vault .muted,
.vault .lead,
.vault .card p {
  color: var(--vault-ink-2)
}

.vault .eyebrow {
  color: var(--vault-ink-2)
}

.vault .eyebrow::before {
  background: var(--vault-blue);
  box-shadow: -5px 5px 0 -1px rgba(77, 142, 255, .45), -10px 10px 0 -2px rgba(77, 142, 255, .18)
}

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

.vault .card .k {
  color: var(--vault-blue)
}

.vault .blue {
  color: var(--vault-blue)
}

.vault .tag {
  background: #111826;
  color: var(--vault-ink-2)
}

.vault .tag.b {
  background: #0E1D3A;
  color: var(--vault-blue)
}

/* simulator */
.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 1px solid var(--vault-line);
  background: var(--vault-2)
}

.sim-left {
  padding: clamp(18px, 2.4vw, 32px);
  display: grid;
  gap: 18px;
  align-content: start;
  border-right: 1px solid var(--vault-line)
}

.sim-btns {
  display: grid;
  gap: 8px
}

.sim-btns button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--vault-line);
  display: grid;
  gap: 4px;
  transition: border-color .2s, background .2s
}

.sim-btns button:hover {
  border-color: #34425a
}

.sim-btns button:focus-visible {
  outline: 2px solid var(--vault-blue);
  outline-offset: 2px
}

.sim-btns button[aria-pressed="true"] {
  border-color: var(--vault-blue);
  background: #0B1730
}

.sim-btns b {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em
}

.sim-btns small {
  font-size: 13px;
  color: var(--vault-ink-2);
  line-height: 1.4
}

.sim-btns .n {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vault-blue)
}

.sim-right {
  padding: clamp(18px, 2.4vw, 32px);
  display: grid;
  gap: 18px;
  min-width: 0
}

.stack {
  display: grid;
  gap: 8px
}

.layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--vault-line);
  background: var(--vault);
  transition: border-color .3s, background .3s
}

.layer .i {
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--vault-ink-2)
}

.layer strong {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em
}

.layer .t {
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vault-ink-2)
}

.layer .msg {
  grid-column: 2/4;
  font-size: 13px;
  color: var(--vault-ink-2);
  min-height: 19px;
  transition: color .3s
}

.layer .st {
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1px solid var(--vault-line);
  color: var(--vault-ink-2);
  transition: all .3s
}

.layer.ok {
  border-color: #1B4636
}

.layer.ok .st {
  color: #35C48A;
  border-color: #1B4636
}

.layer.warn {
  border-color: #5a4318
}

.layer.warn .st {
  color: #E7A93A;
  border-color: #5a4318
}

.layer.bad {
  border-color: #5d2323;
  background: #150a0a
}

.layer.bad .st {
  color: #FF6B6B;
  border-color: #5d2323
}

.layer.bad .msg {
  color: #ffb4b4
}

.layer.hold {
  border-color: var(--vault-blue);
  background: #0B1730
}

.layer.hold .st {
  color: var(--vault-blue);
  border-color: var(--vault-blue)
}

.layer.hold .msg {
  color: #cfe0ff
}

.gauge {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--vault-line);
  background: var(--vault)
}

.gauge .scale {
  position: relative;
  height: 28px;
  background: repeating-linear-gradient(90deg, #141b27 0 2px, transparent 2px 10%)
}

.gauge .bar {
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  background: var(--vault-blue);
  width: 0;
  transition: width .6s cubic-bezier(.2, .8, .2, 1)
}

.gauge .cmd {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #FF6B6B;
  left: 0;
  transition: left .6s cubic-bezier(.2, .8, .2, 1)
}

.gauge .cmd::after {
  content: "command";
  position: absolute;
  top: -17px;
  left: -4px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FF6B6B;
  white-space: nowrap
}

.gauge .read {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vault-ink-2);
  padding-top: 6px
}

.gauge .read b {
  color: var(--vault-ink);
  font-weight: 500
}

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

.ladder div {
  padding: 10px 8px;
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--vault-line);
  color: #566176;
  transition: all .3s
}

.ladder div.on {
  color: var(--vault);
  background: var(--vault-blue);
  border-color: var(--vault-blue)
}

.log {
  font: 400 12px/1.7 var(--mono);
  color: var(--vault-ink-2);
  min-height: 86px;
  padding: 14px 16px;
  border: 1px dashed var(--vault-line);
  margin: 0;
  list-style: none;
  display: grid;
  align-content: start
}

.log li::before {
  content: "› ";
  color: var(--vault-blue)
}

.note {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--vault-ink-2)
}

@media (max-width:980px) {
  .sim {
    grid-template-columns: 1fr
  }

  .sim-left {
    border-right: 0;
    border-bottom: 1px solid var(--vault-line)
  }

  .ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

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

.split.rev>:first-child {
  order: 2
}

@media (max-width:860px) {
  .split {
    grid-template-columns: 1fr
  }

  .split.rev>:first-child {
    order: 0
  }
}

.plate {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(14px, 2vw, 26px);
  position: relative
}

.plate img {
  display: block;
  width: 100%;
  height: auto
}

.plate .cap {
  position: absolute;
  left: 14px;
  top: 12px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.hot {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: var(--blue);
  border: 0;
  cursor: pointer;
  color: var(--blue-ink);
  font: 600 12px/1 var(--mono);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 25%, transparent);
  transition: transform .2s
}

.hot:hover,
.hot[aria-pressed="true"] {
  transform: scale(1.2);
  background: var(--ink);
  color: var(--bg)
}

.hotlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line)
}

.hotlist button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line)
}

.hotlist button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px
}

.hotlist .n {
  font: 500 12px/1.5 var(--mono);
  color: var(--blue)
}

.hotlist b {
  font-weight: 600;
  letter-spacing: -.01em
}

.hotlist p {
  grid-column: 2;
  font-size: 14px;
  color: var(--ink-2);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s
}

.hotlist button[aria-pressed="true"] p {
  max-height: 120px;
  padding-top: 4px
}

.hotlist button[aria-pressed="true"] b {
  color: var(--blue)
}

/* table */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface)
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14px
}

th,
td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top
}

th {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2)
}

tr:last-child td {
  border-bottom: 0
}

td:first-child {
  font-weight: 600;
  white-space: nowrap
}

.vault .tablewrap {
  background: var(--vault-2);
  border-color: var(--vault-line)
}

.vault th {
  background: #0e141e;
  color: var(--vault-ink-2)
}

.vault th,
.vault td {
  border-color: var(--vault-line)
}

.vault td {
  color: var(--vault-ink-2)
}

.vault td:first-child {
  color: var(--vault-ink)
}

/* silicon */
.die {
  width: 100%;
  height: auto;
  display: block
}

.die .blk {
  fill: #0f1624;
  stroke: #25324a;
  stroke-width: 1.5;
  transition: fill .25s, stroke .25s;
  cursor: pointer
}

.die .blk:hover,
.die .blk:focus,
.die .blk.on {
  fill: #10224a;
  stroke: #4D8EFF
}

.die .blk.rom {
  fill: #0c2150;
  stroke: #4D8EFF
}

.die text {
  font: 500 11px var(--mono);
  letter-spacing: .08em;
  fill: #c8d3e6;
  text-transform: uppercase;
  pointer-events: none
}

.die text.s {
  fill: #7d8aa3;
  font-size: 9px
}

.die .pad {
  fill: #1a2538
}

.die .trace {
  stroke: #2a4a85;
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 5;
  animation: dash 6s linear infinite
}

@keyframes dash {
  to {
    stroke-dashoffset: -64
  }
}

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

.stage {
  padding: 26px 22px;
  border-right: 1px solid var(--vault-line);
  display: grid;
  gap: 12px;
  align-content: start;
  position: relative
}

.stage:last-child {
  border-right: 0
}

.stage .s {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vault-blue)
}

.stage h4 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.02em;
  font-weight: 600
}

.stage p {
  font-size: 14px;
  color: var(--vault-ink-2)
}

.stage.now {
  background: #0B1730
}

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

  .stage:nth-child(2) {
    border-right: 0
  }

  .stage:nth-child(-n+2) {
    border-bottom: 1px solid var(--vault-line)
  }
}

@media (max-width:560px) {
  .stages {
    grid-template-columns: 1fr
  }

  .stage {
    border-right: 0;
    border-bottom: 1px solid var(--vault-line)
  }

  .stage:last-child {
    border-bottom: 0
  }
}

/* timeline / lists */
.lines {
  display: grid;
  border-top: 1px solid var(--line)
}

.lines>div {
  display: grid;
  grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr);
  gap: 16px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line)
}

.lines dt,
.lines .l {
  font: 500 12px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue)
}

.lines dd,
.lines .r {
  margin: 0;
  color: var(--ink-2)
}

.lines .r strong {
  color: var(--ink);
  font-weight: 600
}

@media (max-width:640px) {
  .lines>div {
    grid-template-columns: 1fr
  }
}

.vault .lines,
.vault .lines>div {
  border-color: var(--vault-line)
}

.vault .lines dd,
.vault .lines .r {
  color: var(--vault-ink-2)
}

.vault .lines .r strong {
  color: var(--vault-ink)
}

.vault .lines .l {
  color: var(--vault-blue)
}

.cols2 {
  columns: 2;
  column-gap: 40px
}

@media (max-width:760px) {
  .cols2 {
    columns: 1
  }
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15px
}

.checks li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: var(--blue)
}

.checks.no li::before {
  background: transparent;
  border: 2px solid var(--ink-3)
}

.vault .checks li {
  color: var(--vault-ink-2)
}

.vault .checks li::before {
  background: var(--vault-blue)
}

.vault .checks.no li::before {
  background: transparent;
  border-color: #4a566b
}

.quote {
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
  max-width: 20ch
}

/* film strip */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.strip figure {
  margin: 0;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--surface-2)
}

.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s
}

.strip figure:hover img {
  transform: scale(1.05)
}

.strip figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 30px 14px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(5, 7, 11, .8));
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase
}

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

/* CTA + footer */
.cta-band {
  background: var(--blue);
  color: var(--blue-ink);
  position: relative;
  overflow: hidden
}

.cta-band .h1 {
  color: var(--blue-ink)
}

.cta-band p {
  color: color-mix(in srgb, var(--blue-ink) 82%, transparent);
  max-width: 46ch
}

.cta-band .btn {
  background: var(--blue-ink);
  color: var(--blue)
}

.cta-band .btn:hover {
  background: var(--vault);
  color: #fff
}

footer.foot {
  background: var(--vault);
  color: var(--vault-ink);
  padding-top: clamp(48px, 7vw, 96px);
  overflow: hidden
}

footer .cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 32px
}

footer h5 {
  margin: 0 0 14px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vault-ink-2)
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px
}

footer a {
  text-decoration: none;
  color: var(--vault-ink);
  font-size: 15px
}

footer a:hover {
  color: var(--vault-blue)
}

footer .fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 28px;
  border-top: 1px solid var(--vault-line);
  margin-top: 48px;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vault-ink-2)
}

footer .big {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(32px, 5vw, 64px);
  opacity: .96
}

@media (max-width:860px) {
  footer .cols {
    grid-template-columns: 1fr 1fr
  }
}

/* page hero (inner) */
.phero {
  padding-block: clamp(48px, 7vw, 104px) clamp(36px, 5vw, 72px);
  position: relative;
  overflow: hidden
}

.phero .wrap {
  display: grid;
  gap: 28px
}

.phero.vault .h1 {
  color: var(--vault-ink)
}

/* forms */
.field {
  display: grid;
  gap: 8px
}

.field label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 16px;
  padding: 14px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  width: 100%
}

.field textarea {
  min-height: 120px;
  resize: vertical
}

.copyline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 500 15px/1.3 var(--mono)
}

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px)
}

@media (max-width:760px) {
  .compare {
    grid-template-columns: 1fr
  }
}

.dim {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 30px 26px;
  display: grid;
  gap: 18px
}

.dimbox {
  position: relative;
  height: 150px;
  margin: 18px 30px 30px
}

.dimbox .r {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--blue) 8%, transparent)
}

.dimbox .w,
.dimbox .l,
.dimbox .hh {
  position: absolute;
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--blue)
}

.dimbox .w {
  left: 0;
  right: 0;
  bottom: -26px;
  text-align: center;
  border-top: 1px solid var(--blue);
  padding-top: 8px
}

.dimbox .l {
  right: -10px;
  top: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  border-left: 1px solid var(--blue);
  padding-left: 8px;
  transform: translateX(100%);
  text-align: center
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important
  }

  .ticker .track {
    animation: none
  }
}

#dieinfo b {
  font: 600 20px/1.2 var(--font);
  letter-spacing: -.02em;
  color: var(--vault-ink)
}

#dieinfo span {
  font-size: 15px;
  color: var(--vault-ink-2)
}

.vault .card h3,
.vault .h3 {
  color: var(--vault-ink)
}

.phero.vault {
  background: var(--vault)
}

/* blog */
.posts {
  display: grid;
  border-top: 1px solid var(--line)
}

.post {
  display: grid;
  grid-template-columns: minmax(110px, .16fr) minmax(0, 1fr) auto;
  gap: 12px 32px;
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  align-items: start;
  transition: padding .25s
}

.post:hover {
  padding-left: 14px
}

.post:hover h3 {
  color: var(--blue)
}

.post .d {
  font: 500 12px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.post h3 {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.035em;
  transition: color .2s;
  text-wrap: balance
}

.post p {
  color: var(--ink-2);
  max-width: 62ch
}

.post .go {
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 8px
}

@media (max-width:760px) {
  .post {
    grid-template-columns: 1fr
  }

  .post .go {
    padding-top: 0
  }
}

.prose {
  max-width: 68ch;
  margin-inline: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.72
}

.prose p {
  margin: 0 0 1.15em;
  color: var(--ink-2)
}

.prose h2 {
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 1.9em 0 .6em;
  color: var(--ink)
}

.prose ul {
  margin: 0 0 1.3em;
  padding-left: 1.2em;
  color: var(--ink-2)
}

.prose li {
  margin-bottom: .5em
}

.prose strong {
  color: var(--ink);
  font-weight: 600
}

.prose a {
  color: var(--blue)
}

.callout {
  margin: 1.8em 0;
  padding: 20px 22px;
  background: var(--blue-soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6
}

.sources {
  max-width: 68ch;
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line)
}

.sources h4 {
  margin: 0 0 14px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15px
}

.sources a {
  color: var(--blue)
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.pager {
  max-width: 68ch;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.pager a {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none
}

.pager a:hover {
  border-color: var(--blue)
}

.pager small {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.pager b {
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25
}

.pager a:last-child {
  text-align: right
}

@media (max-width:560px) {
  .pager {
    grid-template-columns: 1fr
  }

  .pager a:last-child {
    text-align: left
  }
}

.credits {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 80ch
}

/* ---------- mining drone page ---------- */
.plate.lt{background:#EEF1F7;border-color:#D9DFEA}
.plate.lt .cap{color:#6B7487}
.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,28px);align-items:end}
.views figure{margin:0;display:grid;gap:10px;justify-items:center}
.views figcaption{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6B7487}
@media (max-width:640px){.views{grid-template-columns:1fr}}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.partners a{background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:30px;min-height:130px;transition:border-color .2s,transform .2s}
.partners a:hover{border-color:var(--blue);transform:translateY(-2px)}
.partners img{display:block;max-height:64px;width:auto;max-width:100%;height:auto}

/* ---------- on-device section ---------- */
.edge-d{display:grid;gap:14px;margin-top:8px}
.ed-cloud{border:1px dashed var(--ink-3);background:var(--surface);padding:16px 20px;display:grid;gap:6px;justify-self:end;max-width:560px}
.ed-cloud p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.ed-flow{display:grid;grid-template-columns:minmax(0,.7fr) 32px minmax(0,2fr) 32px minmax(0,.7fr);gap:0;align-items:stretch}
.ed-node{border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:8px;align-content:center}
.ed-node p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.ed-arrow{display:grid;place-items:center;color:var(--blue);font:600 18px/1 var(--mono)}
.ed-arrow::before{content:"\2192"}
.ed-machine{border:1px solid var(--blue);background:var(--blue-soft);padding:18px;display:grid;gap:10px}
.ed-layer{background:var(--surface);border:1px solid var(--line);padding:14px 16px;display:grid;gap:4px}
.ed-layer b{font-weight:600;font-size:15px}
.ed-layer small{color:var(--ink-2);font-size:13px;line-height:1.45}
.ed-layer.core{background:var(--vault);border-color:var(--vault);color:var(--vault-ink)}
.ed-layer.core small{color:var(--vault-ink-2)}
.ed-path{display:grid;gap:0;border:1px solid var(--line);background:var(--surface)}
.ed-path>div{padding:20px 22px;display:grid;gap:8px;justify-items:start;border-bottom:1px solid var(--line)}
.ed-path>div:last-child{border-bottom:0}
.ed-path p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
@media (max-width:760px){
  .ed-flow{grid-template-columns:1fr}
  .ed-arrow{height:28px}
  .ed-arrow::before{display:inline-block;transform:rotate(90deg)}
  .ed-cloud{justify-self:stretch}
}
.edge-d .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* ---------- boot loader ---------- */
html.inz-booting body{background:#06080C}
html.inz-booting body>div:not(#inz-load){visibility:hidden;animation:inzfs 0s 4s forwards}
@keyframes inzfs{to{visibility:visible}}
#inz-load{position:fixed;inset:0;z-index:9999;background:#06080C;color:#EDF1F7;display:grid;place-items:center;transition:background 0s}
#inz-load.out{background:transparent}
#inz-load .ld-in{width:min(440px,86vw);display:grid;gap:34px;transition:opacity .2s}
#inz-load.out .ld-in{opacity:0}
.ld-logo{height:30px;width:auto;justify-self:start;display:block}
.ld-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ld-list li{display:grid;grid-template-columns:22px 108px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.35;animation:ldrow .01s calc(var(--i)*300ms + 150ms) forwards}
.ld-list .n{color:#4D8EFF}
.ld-list .t{color:#EDF1F7}
.ld-list .b{height:8px;background:#1C2431;display:block;overflow:hidden}
.ld-list .b i{display:block;height:100%;width:100%;background:#4D8EFF;transform-origin:left;transform:scaleX(0);animation:ldbar 260ms steps(8,end) calc(var(--i)*300ms + 150ms) forwards}
.ld-list .o{grid-column:2/4;color:#9AA4B5;letter-spacing:.08em;visibility:hidden;animation:ldok .01s calc(var(--i)*300ms + 410ms) forwards}
.ld-note{margin:0;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9AA4B5}
@keyframes ldrow{to{opacity:1}}
@keyframes ldbar{to{transform:scaleX(1)}}
@keyframes ldok{to{visibility:visible}}
.ld-tiles{position:absolute;inset:0;display:grid;pointer-events:none}
.ld-tiles i{background:#06080C;opacity:1;transition:opacity .16s steps(2,end)}
.ld-tiles.go i{opacity:0}
@media (prefers-reduced-motion:reduce){#inz-load{display:none}}

/* ---------- Inztinct layers: subnav, flow chart, sense demo, learn pipeline ---------- */
.subnav{border-bottom:1px solid var(--line);background:var(--surface)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:0}
.subnav a{padding:14px 16px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.three .lay{border:1px solid var(--line);background:var(--surface);padding:26px;display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit}
.three .lay .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.three .lay h3{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em}
.three .lay .tagline{margin:0;font-weight:600;font-size:17px;line-height:1.3}
.three .lay ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2);font-size:15px;line-height:1.45}
.three .lay li{padding-left:16px;position:relative}
.three .lay li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--blue)}
.three .lay.core{background:var(--vault);border-color:var(--vault);color:var(--vault-ink)}
.three .lay.core ul{color:var(--vault-ink-2)}
.three .lay.core .k{color:var(--vault-blue)}
.three .lay.core li::before{background:var(--vault-blue)}
.three .lay .more{font-weight:600;color:var(--blue);margin-top:4px}
.three .lay.core .more{color:var(--vault-blue)}
@media (max-width:900px){.three{grid-template-columns:1fr}}

.flow{display:grid;gap:14px}
.fl-row{display:grid;grid-template-columns:minmax(0,.8fr) 26px minmax(0,1.2fr) 26px minmax(0,1.2fr) 26px minmax(0,1.2fr) 26px minmax(0,.8fr);align-items:stretch}
.fl-box{border:1px solid var(--line);background:var(--surface);padding:16px 16px 14px;display:grid;gap:8px;align-content:start}
.fl-box .k{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fl-box b{font-weight:600;font-size:16px;line-height:1.2}
.fl-box small{color:var(--ink-2);font-size:13px;line-height:1.5}
.fl-box .rel{margin-top:4px;padding-top:10px;border-top:1px dashed var(--line);font:500 10.5px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.fl-box.sense{border-color:var(--blue);background:var(--blue-soft)}
.fl-box.sense .k{color:var(--blue)}
.fl-box.core{background:var(--vault);border-color:var(--vault);color:var(--vault-ink)}
.fl-box.core .k{color:var(--vault-blue)}
.fl-box.core small{color:var(--vault-ink-2)}
.fl-box.core .rel{border-top-color:var(--vault-line);color:#ff9b9b}
.fl-ar{display:grid;place-items:center;color:var(--blue);font:600 18px/1 var(--mono);font-style:normal}
.fl-ar::before{content:"\2192"}
.fl-learn{border:1px solid var(--blue);border-style:dashed;padding:18px 18px 16px;display:grid;gap:12px}
.fl-learn .k{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fl-steps{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.fl-steps span{border:1px solid var(--line);background:var(--surface);padding:7px 10px;font-size:13px;line-height:1.2}
.fl-steps span.gate{border-color:var(--blue);color:var(--blue)}
.fl-steps i{font-style:normal;color:var(--ink-3);font:500 13px/1 var(--mono)}
.fl-learn p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.fl-own{font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){
  .fl-row{grid-template-columns:1fr}
  .fl-ar{height:26px}
  .fl-ar::before{display:inline-block;transform:rotate(90deg)}
}

.sv-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sv-wrap figure{margin:0;border:1px solid var(--line);background:var(--surface);padding:14px;display:grid;gap:8px}
.sv-wrap svg{width:100%;height:auto;display:block}
.sv-wrap figcaption{font-size:13px;line-height:1.45;color:var(--ink-2)}
.sv-wrap figcaption b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.sv-t{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:2}
.sv-leg{fill:var(--ink-2)}
.sv-floor{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.sv-path{fill:none;stroke:var(--blue);stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round}
.sv-bot{fill:var(--blue)}
.sv-ball{fill:#E5484D}
.sv-tx{font:500 11px var(--mono, monospace);fill:var(--ink-3);letter-spacing:.08em}
@media (max-width:620px){.sv-wrap{grid-template-columns:1fr}}

.lim{display:grid;gap:16px;border:1px solid var(--line);background:var(--surface);padding:22px}
.lim-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.lim-top b{font:600 15px/1.2 var(--mono)}
.lim-opts{display:grid;gap:8px}
.lim-opts label{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);cursor:pointer;font-size:15px}
.lim-opts label:hover{border-color:var(--blue)}
.lim-opts label span.v{margin-left:auto;font:500 13px/1 var(--mono);color:var(--ink-2)}
.lim-opts input{accent-color:var(--blue);width:18px;height:18px}
.lim-bar{position:relative;height:22px;background:var(--surface-2);border:1px solid var(--line)}
.lim-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--blue);transition:width .35s ease}
.lim-bar em{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink)}
.lim-read{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 13px/1.4 var(--mono);color:var(--ink-2)}
.lim-read b{color:var(--ink)}
.lim-msg{min-height:1.5em;margin:0;font-size:14px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.lim-bar i{transition:none}}

.pipe{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);background:var(--surface);counter-reset:p}
.pipe li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:start;padding:20px 22px;border-bottom:1px solid var(--line);counter-increment:p}
.pipe li:last-child{border-bottom:0}
.pipe li::before{content:counter(p,decimal-leading-zero);font:500 13px/1.6 var(--mono);color:var(--blue)}
.pipe b{display:block;font-size:17px;line-height:1.25;margin-bottom:4px}
.pipe p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.pipe .tag{align-self:start}
@media (max-width:620px){.pipe li{grid-template-columns:36px minmax(0,1fr);gap:12px}.pipe .tag{grid-column:2;justify-self:start}}
.statusrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.statusrow{grid-template-columns:1fr}}
.three .lay .more svg{width:14px;height:14px;margin-left:8px;vertical-align:-1px}