/* ==========================================================================
   Design tokens
   Fonts: Inter + JetBrains Mono are free stand-ins. See fonts/README.md to
   switch to the licensed TT Interphases Pro / Input Mono.
   ========================================================================== */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink: #1d2a36;
  --ink-muted: #334352;
  --ink-subtle: #657482;
  --ink-disabled: #c0c9d1;

  --gray-0: #fcfcfc;
  --gray-50: #f5f6f7;
  --gray-100: #edf0f2;
  --gray-200: #e1e5e9;
  --gray-300: #d5dee5;
  --gray-400: #a6b0ba;
  --gray-500: #8794a1;
  --gray-600: #687887;
  --gray-700: #314352;
  --gray-800: #1a2b3b;
  --gray-900: #132030;
  --gray-1000: #171e29;
  --line: #edf1f5;
  --line-dark: rgba(255,255,255,.1);

  --mint: #31f2bf;
  --mint-soft: #bdffe6;
  --mint-deep: #007554;
  --acid: #e4ff33;
  --acid-soft: #f6ffbf;
  --sky: #34bcff;
  --orange: #ff5f33;
  --blue: #0070ff;

  --code-text: #bdc2c8;
  --code-comment: #8995a1;
  --code-string: #31f2cc;
  --code-keyword: #33bbff;
  --code-constant: #ddff33;

  --shadow-xl: 0 6px 8px rgba(12,25,39,.05), 0 16px 20px rgba(12,25,39,.06), 0 50px 60px rgba(12,25,39,.1);
  --shadow-btn: 0 1px 2px rgba(21,30,41,.05);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);

  --frame: 1160px;
  --pad: 24px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss02", "ss12"; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page frame: the vertical guide lines that run down the whole page */
.frame {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--pad);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.band { border-top: 1px solid var(--line); }
.band-dark .frame { border-color: var(--line-dark); }
.band-dark.band, .band-dark .band { border-color: var(--line-dark); }
@media (max-width: 640px) { :root { --pad: 16px; } }

/* Type */
.h-display { font-size: 40px; line-height: 48px; letter-spacing: -.02em; font-weight: 600; color: var(--ink); max-width: 768px; }
.h-section { font-size: 32px; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; color: var(--ink); max-width: 768px; }
.h-display .soft, .h-section .soft { font-weight: 400; color: var(--gray-600); }
.h-tile { font-size: 24px; line-height: 1.2; letter-spacing: -.004em; font-weight: 500; color: var(--ink); }
@media (max-width: 640px) {
  .h-display { font-size: 32px; line-height: 38px; }
  .h-section { font-size: 24px; }
  .h-tile { font-size: 20px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 8px;
  font-size: 16px; line-height: 20px; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-btn);
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
  white-space: nowrap;
}
.btn-mint { background: var(--mint); }
.btn-mint:hover { filter: brightness(.95); }
.btn-outline { background: #fff; border: 1px solid var(--gray-300); padding: 11px 15px; }
.btn-outline:hover { background: var(--gray-50); }
.btn-dark { background: var(--gray-800); color: #fff; font-size: 14px; padding: 8px 10px; line-height: 20px; }
.btn-dark:hover { background: var(--gray-900); }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.link svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out-quint); }
.link:hover svg { transform: translate(2px, -2px); }
.link-mint { color: var(--mint); }

/* Icon tile used in lists, menus and diagrams */
.itile {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff; border: 1px solid var(--gray-200); color: var(--ink-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.itile svg { width: 16px; height: 16px; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--frame); margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 48px;
  position: relative;
}
@media (max-width: 1208px) { .nav-inner { padding: 0 var(--pad); } }

.logo { display: inline-flex; align-items: center; }
/* Sized so the capital S is 14px, the same letter height as Increase's all-caps logo.
   The 2px nudge centers the letters (not the descender on the "p") in the 64px bar. */
.logo img { display: block; width: auto; height: 19px; transform: translateY(2px); }
.compare-us img { transform: none; }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 8px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-600);
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); background: var(--gray-100); }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-actions .signin { font-size: 14px; font-weight: 500; color: var(--gray-600); padding: 4px 8px; }
.nav-actions .signin:hover { color: var(--ink); }

/* Dropdown: one panel that morphs between panes (size + position animate) */
.menu {
  position: absolute; top: 60px; left: 0;
  width: var(--mw, 518px); height: var(--mh, 246px);
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: var(--shadow-xl);
  opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top center;
  visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .2s var(--ease-out-quint), visibility 0s linear .2s;
}
.menu.is-open {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .15s ease, transform .25s var(--ease-out-quint), visibility 0s,
    left .35s var(--ease-out-quint), width .35s var(--ease-out-quint), height .35s var(--ease-out-quint);
}
.menu-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.menu-pane {
  position: absolute; top: 0; left: 0; padding: 8px;
  opacity: 0; pointer-events: none; transform: translateX(var(--from, 0));
  transition: opacity .2s ease, transform .35s var(--ease-out-quint);
}
.menu-pane.is-active { opacity: 1; pointer-events: auto; transform: none; }

/* Products pane */
.pane-products { display: grid; grid-template-columns: 383px 309px; gap: 8px; width: 718px; }
.mp-item { display: flex; gap: 12px; align-items: center; height: 60px; padding: 12px; border-radius: 8px; transition: background-color .15s ease; }
.mp-item:hover { background: var(--gray-50); }
.mp-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: var(--gray-100); color: var(--gray-800); }
.mp-icon svg { width: 15px; height: 15px; }
.mp-item strong, .ms-item strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-800); }
.mp-item small, .ms-item small { display: block; font-size: 12px; line-height: 16px; color: var(--gray-700); }
.mp-features { display: grid; gap: 8px; }
.mp-feature { position: relative; overflow: hidden; display: block; height: 176px; padding: 16px; border-radius: 8px; background: var(--gray-50); transition: background-color .15s ease; }
.mp-feature:hover { background: #f0f2f4; }
.mp-feature-text { position: relative; z-index: 1; display: block; width: 92px; }
.mp-feature-text strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-800); }
.mp-feature-text small { display: block; font-size: 12px; line-height: 16px; color: var(--gray-700); }
.mp-art { position: absolute; left: 0; bottom: 0; width: 309px; height: 142px; }
.mp-art path:last-of-type, .mp-art path:nth-last-of-type(2) { transition: transform .5s var(--ease-out-quint); }
.mp-feature:hover .mp-art path:nth-last-of-type(-n+2) { transform: translateY(-3px); }
.mp-dots {
  position: absolute; inset: 0 0 0 100px;
  background-image: radial-gradient(#d5dbe1 1px, transparent 1.2px); background-size: 12px 12px;
  mask-image: linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.mp-card {
  position: absolute; left: 132px; top: 40px; width: 140px; height: 190px; border-radius: 12px;
  background: linear-gradient(150deg, #ffffff 0%, #f6f7f8 55%, #eceff2 100%);
  box-shadow: 0 1px 1px rgba(12,25,39,.04), 0 10px 20px rgba(12,25,39,.08), inset 0 0 0 1px rgba(12,25,39,.05);
  transform: rotate(-58deg) skewX(8deg); transform-origin: 50% 50%;
  transition: transform .6s var(--ease-out-quint);
}
.mp-feature:hover .mp-card { transform: rotate(-54deg) skewX(8deg) translate(4px, -6px); }
.mp-chip {
  position: absolute; left: 58px; top: 24px; width: 26px; height: 20px; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(0,0,0,.18) 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 30%, rgba(0,0,0,.14) 30% 36%, transparent 36% 64%, rgba(0,0,0,.14) 64% 70%, transparent 70%),
    linear-gradient(135deg, #b9bec6, #e9ecf0 45%, #98a0aa);
  transform: rotate(90deg);
}

/* Solutions pane: text only, two columns */
.pane-solutions { display: grid; grid-template-columns: 250px 250px; width: 518px; }
.ms-item { display: block; height: 76px; padding: 12px; border-radius: 8px; transition: background-color .15s ease; }
.ms-item:hover { background: var(--gray-50); }

/* Developers pane */
.pane-developers { display: grid; grid-template-columns: 312px 1fr; gap: 8px; width: 518px; }
.md-docs { position: relative; overflow: hidden; padding: 16px 16px 16px; border-radius: 8px; background: var(--gray-50); min-height: 236px; }
.md-binary {
  position: absolute; inset: -40px -60px -40px 60px;
  font-family: var(--font-mono); font-size: 9px; line-height: 11px; letter-spacing: 1px; color: #d5dbe1;
  word-break: break-all; transform: perspective(300px) rotateY(-24deg) rotate(-12deg);
  mask-image: radial-gradient(120% 90% at 100% 40%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 100% 40%, #000 30%, transparent 70%);
}
.md-docs-head { position: relative; display: block; padding-right: 40px; }
.md-docs-head strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-800); }
.md-docs-head small { display: block; font-size: 12px; line-height: 16px; color: var(--gray-700); }
.md-book { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 4px; background: #fff; display: grid; place-items: center; color: var(--gray-800); }
.md-book svg { width: 15px; height: 15px; }
.md-docs ul { position: relative; margin-top: 12px; }
.md-docs li a { display: block; font-size: 14px; line-height: 20px; color: var(--gray-700); }
.md-docs li a:hover { color: var(--gray-800); text-decoration: underline; text-underline-offset: 3px; }
.md-side { padding: 4px 0; }
.md-side a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 14px; line-height: 24px; color: var(--gray-800); border-radius: 6px; }
.md-side a:hover { background: var(--gray-50); }
.md-side svg { width: 16px; height: 16px; color: var(--gray-800); }
.status-dot { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(49,242,191,.2); }

/* Mobile nav */
.burger { display: none; width: 36px; height: 36px; margin-left: auto; position: relative; }
.burger span { position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out-quint), top .3s var(--ease-out-quint); }
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 21px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

.sheet {
  position: fixed; inset: 64px 0 0; z-index: 49; background: #fff;
  overflow-y: auto; padding: 8px var(--pad) 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .3s var(--ease-out-quint), visibility 0s linear .3s;
}
.sheet.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease-out-quint), visibility 0s; }
.sheet details { border-bottom: 1px solid var(--line); }
.sheet summary, .sheet > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; font-size: 18px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none;
}
.sheet > a { border-bottom: 1px solid var(--line); }
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out-quint); }
.sheet details[open] summary svg { transform: rotate(180deg); }
.sheet details ul { padding-bottom: 12px; }
.sheet details li a { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--ink-muted); }
.sheet details li .itile { width: 28px; height: 28px; background: var(--gray-50); }
.sheet .sheet-text a { display: block; padding: 8px 0; }
.sheet .sheet-text strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.sheet .sheet-text small { display: block; font-size: 13px; color: var(--ink-subtle); }
.sheet .sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }

@media (max-width: 960px) {
  .nav-links, .nav-actions, .menu { display: none; }
  .burger { display: block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero .frame { position: relative; min-height: 688px; padding-top: 64px; padding-bottom: 64px; }
.hero-copy { position: relative; z-index: 1; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--acid); color: var(--ink);
  font-size: 16px; line-height: 24px; font-weight: 600;
}
.badge svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out-quint); }
.badge:hover svg { transform: translate(2px, -2px); }
.hero h1 { margin-top: 24px; }
.hero-copy > h1:first-child { margin-top: 0; } /* no badge above it */
.hero-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
/* Lumber-stack hero art (see drawLumber in main.js) */
.lumber {
  position: absolute; z-index: 0; pointer-events: none;
  width: 1400px; aspect-ratio: 128 / 75; top: -48px; right: -160px;
  transform: rotate(-20deg); transform-origin: top right;
  container-type: inline-size;
}
.lumber-inner { position: absolute; inset: 0; }
.pile {
  --pitch: 2.4cqw; --board: 1.9cqw; --sticker: .5cqw;
  --side: color-mix(in srgb, var(--b) 80%, #1d2a36);
  --stick: color-mix(in srgb, var(--b) 58%, #1d2a36);
  position: absolute; bottom: 0; width: 13cqw;
  display: flex; flex-direction: column; gap: var(--sticker);
}
/* End view of each layer: two board ends with faint growth rings */
.pile-row {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .3cqw; height: var(--board);
  animation: board-settle .8s linear backwards;
  animation-delay: calc(var(--d) + var(--r) * var(--rs, .03s));
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* Sticker strip in the gap under every layer except the bottom one */
.pile-row:not(:last-child)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--sticker));
  height: var(--sticker); background: var(--stick);
}
.pile-row i {
  border-radius: .15cqw;
  background:
    repeating-radial-gradient(circle at var(--rx) var(--ry), transparent 0 .5cqw, rgba(255,255,255,.3) .5cqw .58cqw),
    linear-gradient(100grad, var(--a), var(--b));
}
/* Side face: the long edges of the boards receding up and to the right */
.pile-side {
  position: absolute; left: 100%; bottom: 0; width: 5.5cqw; height: 100%;
  background:
    repeating-linear-gradient(to top, transparent 0 var(--board), var(--stick) var(--board) var(--pitch)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px .9cqw),
    linear-gradient(100grad, var(--side), color-mix(in srgb, var(--side) 88%, #1d2a36));
  background-position: bottom;
  transform: skewY(-30deg); transform-origin: bottom left;
  /* Rises alongside its boards rather than appearing after them */
  animation: side-rise calc(var(--rows) * var(--rs, .03s) + .7s) cubic-bezier(.33, 1, .68, 1) backwards;
  animation-delay: calc(var(--d) + .15s);
  will-change: clip-path;
}
@keyframes board-drop { from { opacity: 0; transform: translateY(-160%); } }
@keyframes side-rise { from { clip-path: inset(100% 0 0 0); } }
/* Each board falls (accelerating), lands with a small bounce, then settles */
@keyframes board-settle {
  0% { opacity: 0; transform: translateY(-340%); animation-timing-function: cubic-bezier(.5, 0, .75, .35); }
  30% { opacity: 1; }
  62% { transform: translateY(0); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  76% { transform: translateY(-9%); animation-timing-function: cubic-bezier(.55, 0, .75, .5); }
  88% { transform: translateY(0); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  94% { transform: translateY(-2%); }
  100% { opacity: 1; transform: none; }
}
/* Homepage: piles stand upright, centered, resting on the line above the logos.
   The hero keeps its fixed height; the piles rise into the space beside the text. */
.hero .lumber {
  top: auto; right: auto; bottom: 0; left: 50%;
  width: 880px; aspect-ratio: 100 / 58; /* tallest pile (23 layers = 54.7cqw) plus its side face */
  transform: translateX(-50%);
}
/* Narrow screens: no room beside the text, so the piles sit under the buttons */
@media (max-width: 960px) {
  .hero .frame { min-height: 0; padding-bottom: 0; }
  .hero .lumber { position: relative; left: auto; width: min(880px, 100%); margin: 48px auto 0; transform: none; }
}
@media (max-width: 640px) {
  .hero .frame { padding-top: 48px; }
}

/* Logo strip */
.logos .frame { padding-top: 0; padding-bottom: 0; overflow: hidden; }
.logos-track { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 48px; }
.logos-track .clone { display: none; }
.wm { flex: none; color: var(--ink-muted); font-size: 24px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.wm svg { width: 22px; height: 22px; }
.wm-1 { font-weight: 800; font-style: italic; letter-spacing: -.04em; }
.wm-2 { font-weight: 400; letter-spacing: -.01em; }
.wm-3 { font-weight: 600; letter-spacing: -.03em; text-transform: lowercase; }
.wm-4 { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 18px; }
.wm-5 { font-weight: 300; letter-spacing: .02em; }
.wm-6 { font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.wm-7 { font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 960px) {
  .logos-track { justify-content: flex-start; width: max-content; animation: marquee 32s linear infinite; }
  .logos-track .clone { display: inline-flex; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 24px)); } }

/* Announcement */
.announce .frame { padding-top: 24px; padding-bottom: 24px; }
.announce-card {
  display: grid; grid-template-columns: 1fr 270px; overflow: hidden;
  border-radius: 8px; background: var(--gray-1000); color: #fff;
  box-shadow: 0 24px 40px -16px rgba(12,25,39,.3);
}
.announce-card > div:first-child { padding: 32px; }
.announce-card h3 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.announce-card p { margin-top: 8px; font-size: 18px; line-height: 28px; color: var(--ink-disabled); max-width: 540px; }
.announce-card .link { margin-top: 32px; font-size: 18px; color: var(--mint); }
.announce-card svg.scene { width: 100%; height: 100%; min-height: 216px; object-fit: cover; }
@media (max-width: 760px) {
  .announce-card { grid-template-columns: 1fr; }
  .announce-card svg.scene { height: 160px; min-height: 0; }
  .announce-card > div:first-child { padding: 24px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section .frame { padding-top: 96px; padding-bottom: 96px; }
.section-head { margin-bottom: 64px; }
@media (max-width: 640px) {
  .section .frame { padding-top: 64px; padding-bottom: 64px; }
  .section-head { margin-bottom: 40px; }
}

/* ==========================================================================
   Products bento
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--gray-50); border-radius: 16px;
  display: flex; flex-direction: column;
}
.tile > .h-tile { padding: 24px 24px 0; }
.tile-rails { grid-column: span 12; height: 420px; flex-direction: row; }
.tile-cards { grid-column: span 7; height: 376px; }
.tile-accounts { grid-column: span 5; height: 376px; }
.tile-kyc { grid-column: span 5; height: 480px; }
.tile-loans { grid-column: span 7; height: 480px; }
@media (max-width: 1024px) {
  .tile-rails { flex-direction: column; height: auto; }
  .tile-cards, .tile-accounts, .tile-kyc, .tile-loans { grid-column: span 12; }
}

/* Rails tile */
.rails-left { flex: 0 0 500px; padding: 24px; }
.rails-list { display: grid; grid-template-columns: 152px 1fr; gap: 32px 32px; margin-top: 64px; padding-left: 24px; }
.rail {
  display: flex; align-items: center; gap: 16px;
  font-size: 18px; line-height: 24px; color: var(--ink-muted); text-align: left;
  border-radius: 8px;
}
.rail:hover .itile { border-color: var(--gray-300); }
.rail[aria-pressed="true"] { color: var(--ink); }
.rail[aria-pressed="true"] .itile { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.rail .itile { background: var(--gray-50); }
.rail-progress { position: relative; }
.rails-right { position: relative; flex: 1; min-width: 0; }
.code-dark {
  position: absolute; top: 40px; left: 0; width: 500px; height: 306px;
  background: var(--gray-800); border-radius: 12px; overflow: hidden;
  padding: 20px 0;
}
.code-dark pre { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: #fff; white-space: pre; }
.code-dark .ln { display: inline-block; width: 42px; padding-right: 12px; text-align: right; color: var(--gray-600); user-select: none; }
.tk-k { color: var(--code-keyword); }
.tk-s { color: var(--code-string); }
.tk-n { color: var(--code-string); }
.tk-c { color: var(--code-comment); }
.tk-p { color: var(--code-comment); }

.txn-card {
  position: absolute; top: 122px; left: 40px; width: 500px; height: 330px;
  background: #fff; border: 1px solid var(--gray-100); border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(12,25,39,.04);
}
.txn-head { padding: 24px; border-bottom: 1px solid var(--gray-100); }
.txn-amount { font-size: 28px; line-height: 36px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.txn-type { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--ink-subtle); }
.txn-type svg { width: 16px; height: 16px; }
.timeline { position: relative; padding: 20px 24px; }
.timeline::before { content: ""; position: absolute; left: 28px; top: 28px; bottom: 0; width: 1px; background: var(--gray-200); }
.tl-row {
  position: relative; display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 0 4px 20px; font-size: 14px; line-height: 24px; color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .5s var(--ease-out-quint);
}
.tl-row.is-in { opacity: 1; transform: none; }
.tl-row::before { content: ""; position: absolute; left: 1px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.tl-row.pending::before { background: var(--acid); box-shadow: 0 0 0 3px rgba(228,255,51,.3); }
.tl-row time { color: var(--ink-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.swap { transition: opacity .25s ease; }
.swap.is-out { opacity: 0; }

@media (max-width: 1024px) {
  .rails-left { flex: none; }
  .rails-list { margin-top: 32px; padding-left: 0; grid-template-columns: 1fr 1fr; gap: 20px; }
  .rails-right { height: 380px; margin-left: 24px; }
}
@media (max-width: 640px) {
  .rail { font-size: 16px; gap: 12px; }
  .code-dark { width: 460px; }
  .txn-card { left: 16px; width: calc(100% - 16px); }
  .tl-row { flex-direction: column; gap: 0; }
  .tl-row time { font-size: 12px; line-height: 16px; }
  .timeline::before { display: none; }
}

/* Cards tile */
.cards-body { display: grid; grid-template-columns: 234px 1fr; gap: 16px; padding: 24px; flex: 1; min-height: 0; }
.card-stage {
  position: relative; border-radius: 12px 12px 0 0; overflow: hidden;
  background:
    linear-gradient(var(--gray-100) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--gray-100) 1px, #fff 1px) 0 0 / 16px 16px;
  border: 1px solid var(--gray-100); border-bottom: 0;
  display: grid; place-items: center; perspective: 800px;
  margin-bottom: -24px;
}
.pcard {
  position: relative; width: 212px; height: 134px; border-radius: 10px; overflow: hidden;
  padding: 14px 16px; color: #e7ecfa;
  box-shadow: 0 20px 30px -10px rgba(12,25,39,.45), 0 2px 4px rgba(12,25,39,.2);
  transform: rotateX(8deg) rotateY(-10deg);
  transition: background .6s ease, transform .8s var(--ease-out-quint);
}
.card-stage:hover .pcard { transform: rotateX(0) rotateY(0) translateY(-4px); }
.pcard::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.pcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.pcard-name { position: relative; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.pcard-name svg { width: 14px; height: 14px; }
.pcard-chip { position: relative; width: 30px; height: 22px; margin-top: 18px; border-radius: 4px; background: linear-gradient(135deg, #b9bec6, #e9ecf0 45%, #98a0aa); }
.pcard-foot { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
.pcard-foot .mono { font-size: 11px; letter-spacing: .12em; opacity: .7; }
.pcard-foot b { font-size: 16px; font-style: italic; font-weight: 800; letter-spacing: -.02em; }

.log {
  background: var(--gray-900); border-radius: 12px 12px 0 0; margin-bottom: -24px;
  padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--gray-500);
  overflow: hidden; min-width: 0;
}
.log-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-600); margin-bottom: 10px; }
.log-head .live { color: var(--mint); display: inline-flex; align-items: center; gap: 6px; }
.log-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.log-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s ease; }
.log-line.is-in { opacity: 1; }
.log-line .b { color: #fff; }
.log-line .ok { color: var(--mint); }
.log-line .dot { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--acid); vertical-align: 1px; }
.log-line.indent { padding-left: 16px; }
@media (max-width: 640px) { .cards-body { grid-template-columns: 1fr; } .card-stage { height: 200px; margin-bottom: 0; border-radius: 12px; border-bottom: 1px solid var(--gray-100); } .tile-cards { height: auto; } .log { height: 230px; } }

/* Accounts tile */
.acct {
  margin: 24px 0 0 24px; flex: 1; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-100); border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0;
  overflow: hidden;
}
.acct-head { padding: 20px 20px 0; }
.acct-bal { font-size: 28px; line-height: 36px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.entity { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.entity-mark { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; transition: background-color .4s ease; }
.entity strong { display: block; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink); }
.entity small { display: block; font-size: 12px; color: var(--gray-500); }
.acct svg.chart { flex: 1; width: 100%; min-height: 150px; margin-top: 12px; }
.chart .area { transition: d .9s var(--ease-out-quint); }
.chart .curve { transition: d .9s var(--ease-out-quint), stroke .4s ease; }

/* KYC tile */
.kyc {
  margin: 24px 24px 0; flex: 1; background: #fff; border: 1px solid var(--gray-100); border-bottom: 0;
  border-radius: 12px 12px 0 0; padding: 20px 24px; font-size: 13px; overflow: hidden;
}
.kyc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.kyc-head strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.kyc-head small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray-500); }
.kyc-head small .entity-mark { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 18px; background: var(--gray-100); color: var(--ink-subtle); white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.ok { background: #e3fdf4; color: var(--mint-deep); }
.kyc-rows { margin-top: 16px; }
.kyc-row { display: grid; grid-template-columns: 102px 1fr 16px; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--gray-50); color: var(--ink); }
.kyc-row > span:first-child { color: var(--gray-500); font-size: 11px; line-height: 20px; }
.kyc-row .state { display: block; width: 14px; height: 14px; margin-top: 3px; color: var(--gray-400); }
.kyc-row .state.spin { border: 1.5px solid var(--gray-200); border-top-color: var(--gray-500); border-radius: 50%; animation: spin .9s linear infinite; }
.kyc-row .state.done { color: var(--mint-deep); }
@keyframes spin { to { transform: rotate(360deg); } }
.file { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--gray-200); border-radius: 4px; font-size: 11px; color: var(--ink-muted); }
.file svg { width: 12px; height: 12px; }
.kyc-foot { margin-top: 14px; display: flex; gap: 10px; font-size: 11px; color: var(--ink-subtle); }
.kyc-foot .mono { color: var(--gray-500); }

/* Loans tile */
.loans {
  margin: 24px 0 0 24px; flex: 1; background: #fff; border: 1px solid var(--gray-100); border-right: 0; border-bottom: 0;
  border-radius: 12px 0 0 0; overflow: hidden; font-size: 13px;
}
.loans-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 14px 16px; border-bottom: 1px solid var(--gray-100); }
.loans-head strong { font-weight: 500; color: var(--ink); }
.loans-head .entity { margin: 0; gap: 8px; font-size: 13px; color: var(--ink); }
.loans table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.loans th { text-align: right; font-weight: 400; font-size: 11px; color: var(--gray-500); padding: 8px 24px 8px 0; border-bottom: 1px solid var(--gray-100); }
.loans th:first-child, .loans td:first-child { text-align: left; padding-left: 16px; }
.loans td { text-align: right; padding: 10px 24px 10px 0; border-bottom: 1px solid var(--gray-50); color: var(--ink-subtle); white-space: nowrap; }
.loans td:first-child { color: var(--ink); }
.loans td:nth-child(2) { color: var(--ink); font-weight: 600; }
.loans tbody tr { transition: background-color .2s ease; }
.loans tbody tr:hover { background: var(--gray-50); }
@media (max-width: 640px) { .loans th:nth-child(4), .loans td:nth-child(4) { display: none; } }

/* ==========================================================================
   Quote cards
   ========================================================================== */
.quote-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--gray-200); border-radius: 12px; padding: 32px;
  background: #fcffeb;
}
.quote-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 90% 80%, rgba(228,255,51,.35), transparent 70%);
}
.quote-card.blue { background: #fff; }
.quote-card.blue::before { background: radial-gradient(60% 130% at 100% 100%, rgba(52,140,255,.28), rgba(52,188,255,.08) 50%, transparent 75%); }
.quote-card > * { position: relative; }
.quote-logo { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; }
.quote-logo svg { width: 26px; height: 26px; }
.quote-card blockquote { margin-top: 40px; max-width: 740px; font-size: 18px; line-height: 30px; font-weight: 500; color: var(--ink-muted); }
.quote-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 32px; }
.quote-foot .mono { font-size: 15px; color: var(--ink-muted); }
.quote-foot .mono:last-child { text-align: right; font-size: 13px; line-height: 20px; color: var(--ink); }
.corner-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--gray-200); background: #fff; display: grid; place-items: center; transition: transform .3s var(--ease-out-quint); }
.corner-btn svg { width: 12px; height: 12px; }
.corner-btn:hover { transform: translate(2px, -2px); }
@media (max-width: 640px) { .quote-foot { flex-direction: column; align-items: flex-start; } .quote-foot .mono:last-child { text-align: left; } .quote-card { padding: 24px; } }

.quote-inline { max-width: 560px; margin-top: 48px; font-size: 18px; line-height: 30px; color: var(--ink-subtle); }
.quote-inline p { text-indent: -.45em; }
.person { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.avatar { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.avatar svg { width: 18px; height: 18px; }
.person strong { display: block; font-size: 14px; line-height: 18px; font-weight: 400; color: var(--ink); }
.person small { display: block; font-size: 12px; line-height: 16px; color: var(--gray-500); }
.quote-inline + .link { margin-top: 32px; }

/* Stats */
.stats .frame { padding-top: 80px; padding-bottom: 80px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stat-num { font-size: 40px; line-height: 48px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.stat-label { margin-top: 4px; color: var(--ink-subtle); }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ==========================================================================
   Dark platform section
   ========================================================================== */
.band-dark { background: var(--gray-1000); color: var(--gray-400); }
.band-dark .h-section { color: #fff; }
.band-dark .h-section .soft { color: var(--gray-400); }
.band-dark .section-head { margin-bottom: 0; }
.band-dark .btn-mint { margin-top: 32px; }

.pillar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; padding: 48px 0; }
.pillar-copy { display: flex; flex-direction: column; }
.pillar h3 { font-size: 22px; line-height: 29px; font-weight: 400; color: var(--gray-400); max-width: 540px; letter-spacing: -.01em; }
.pillar h3 b { font-weight: 600; color: #fff; }
.pillar .link { margin-top: 24px; }
.pillar .quote-inline { margin-top: auto; padding-top: 48px; font-size: 16px; line-height: 24px; color: var(--code-text); }
.pillar .person strong { color: #fff; }
.pillar .person small { color: var(--gray-600); }

.dotgrid {
  position: relative; min-height: 440px; border-radius: 4px;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  display: grid; place-items: center; padding: 24px;
}
.node {
  display: flex; align-items: center; gap: 10px;
  background: #1f2934; border: 1px solid #3a4652; border-radius: 8px;
  color: #fff; font-size: 14px; line-height: 20px;
}
.node .itile { width: 32px; height: 32px; background: #cdd2d8; border: 0; color: var(--ink); border-radius: 6px; }
.node .itile.acid { background: var(--acid); }
.node .itile.mint { background: var(--mint); }
.node .itile.sky { background: var(--sky); }

/* Diagram 1: primitives -> counterparties */
.dg-flow { display: grid; grid-template-columns: 160px 1fr 138px; width: 100%; max-width: 484px; align-items: center; }
.dg-flow .srcs { display: grid; gap: 8px; }
.dg-flow .srcs .node { padding: 7px 8px; }
.dg-flow .srcs .node:first-child { margin-bottom: 16px; }
.dg-flow .wires { display: grid; gap: 8px; height: 100%; }
.dg-flow .dsts { display: grid; gap: 12px; }
.dg-flow .dsts .node { flex-direction: column; justify-content: center; gap: 6px; text-align: center; font-size: 13px; }
.dg-flow .dsts .node svg { width: 16px; height: 16px; }
.dg-flow .dsts .node:first-child { height: 74px; }
.dg-flow .dsts .node:last-child { height: 158px; }
.wire { position: relative; height: 1px; background: #4a5663; align-self: center; }
.wire::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 6px solid #8794a1; border-right: 0; }
.wire i { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: packet 2.8s linear infinite; opacity: 0; }
@keyframes packet { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* Diagram 2: regions */
.dg-regions { display: grid; gap: 52px; width: 100%; max-width: 484px; }
.region { display: grid; grid-template-columns: 138px 1fr 138px; align-items: center; }
.region .node { height: 102px; flex-direction: column; justify-content: center; gap: 4px; font-size: 13px; }
.region .node b { font-size: 15px; letter-spacing: .1em; font-weight: 800; }
.region .node b.v { letter-spacing: -.02em; font-style: italic; font-size: 18px; }
.links { position: relative; display: grid; gap: 30px; }
.links div { position: relative; height: 1px; background: #4a5663; }
.links span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 2px 12px; border: 1px solid #4a5663; border-radius: 999px; background: var(--gray-1000);
  font-size: 11px; color: #fff; white-space: nowrap;
}
.links div::before, .links div::after { content: ""; position: absolute; top: -3px; border: 3.5px solid transparent; }
.links div::before { left: 0; border-right: 6px solid #8794a1; border-left: 0; }
.links div::after { right: 0; border-left: 6px solid #8794a1; border-right: 0; }
.links div i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 8px var(--sky); animation: packet 2.2s linear infinite; }
.links div:nth-child(2) i { animation-direction: reverse; animation-delay: -1.1s; }

/* Diagram 3: state machine */
.dg-states { display: grid; grid-template-columns: 210px 48px 210px; grid-template-rows: 46px 60px 46px 60px 46px; width: max-content; max-width: 100%; }
.state {
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: #1f2934; border: 1px solid #3a4652; border-radius: 8px;
  font-family: var(--font-mono); font-size: 14px; color: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--c, var(--acid)); }
.state.is-on { border-color: var(--c, var(--acid)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--acid)) 18%, transparent); background: #232f3b; }
.s-ps { grid-area: 1 / 1; --c: var(--acid); }
.s-pr { grid-area: 1 / 3; --c: var(--acid); }
.s-sub { grid-area: 3 / 1; --c: var(--mint); }
.s-rej { grid-area: 3 / 3; --c: var(--orange); }
.s-ret { grid-area: 5 / 1; --c: var(--sky); }
.v-arrow { position: relative; justify-self: center; width: 1px; background: #4a5663; }
.v-arrow::after { content: ""; position: absolute; bottom: 0; left: -3px; border: 3.5px solid transparent; border-top: 6px solid #8794a1; border-bottom: 0; }
.a1 { grid-area: 2 / 1; } .a2 { grid-area: 2 / 3; } .a3 { grid-area: 4 / 1; }
.h-arrows { grid-area: 1 / 2; display: grid; align-content: center; gap: 8px; padding: 0 6px; }
.h-arrows div { position: relative; height: 1px; background: #4a5663; }
.h-arrows div:first-child::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 6px solid #8794a1; border-right: 0; }
.h-arrows div:last-child::after { content: ""; position: absolute; left: 0; top: -3px; border: 3.5px solid transparent; border-right: 6px solid #8794a1; border-left: 0; }

@media (max-width: 1024px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar .quote-inline { padding-top: 32px; }
}
@media (max-width: 640px) {
  .dotgrid { min-height: 0; padding: 32px 0; }
  .dg-flow { grid-template-columns: 136px 1fr 96px; }
  .dg-flow .srcs .node { font-size: 12px; }
  .region { grid-template-columns: 96px 1fr 96px; }
  .links span { font-size: 9px; padding: 1px 6px; }
  .dg-states { grid-template-columns: 1fr 24px 1fr; width: 100%; }
  .state { font-size: 11px; gap: 8px; padding: 0 8px; }
}

/* ==========================================================================
   Segments
   ========================================================================== */
.segment + .segment { margin-top: 80px; }
.segment h3 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.features3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.features3 p { font-size: 16px; line-height: 24px; color: var(--ink-subtle); }
.features3 b { font-weight: 600; color: var(--ink); }
.segment .quote-card { margin-top: 32px; }
@media (max-width: 760px) { .features3 { grid-template-columns: 1fr; gap: 16px; } }

/* ==========================================================================
   Updates
   ========================================================================== */
.updates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.update-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.update-mark i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--gray-100); }
.update-mark i::after { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--gray-600); }
.update:first-child .update-mark i { background: #dcfdf2; }
.update:first-child .update-mark i::after { background: var(--mint); border-radius: 50%; }
.update-mark::after { content: ""; flex: 1; height: 2px; background: var(--gray-100); margin-right: -32px; }
.update:last-child .update-mark::after { margin-right: 0; }
.update h4 { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.update:hover h4 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gray-300); }
.update p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.update time { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-subtle); }
.updates + .btn { margin-top: 32px; }
@media (max-width: 960px) {
  .updates { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .update-mark::after { margin-right: 0; }
}
@media (max-width: 560px) { .updates { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--gray-1000); color: var(--gray-400); }
.footer-inner { max-width: var(--frame); margin: 0 auto; padding: 96px 24px 96px; }
/* The logo file is black; show it white on the dark footer */
.footer:not(.footer-light) .logo img { filter: brightness(0) invert(1); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.footer-cols h5 { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.footer-cols a { display: block; padding: 4px 0; font-size: 14px; color: var(--gray-400); transition: color .15s ease; }
.footer-cols a:hover { color: #fff; }
.footer-legal { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--gray-700); font-size: 14px; line-height: 20px; color: var(--gray-500); }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-inner { padding: 64px 16px; } }

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out-quint), transform .9s var(--ease-out-quint); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Subpages (products + solutions)
   ========================================================================== */
.subpage main > section { padding-left: 24px; padding-right: 24px; }
.phero-inner, .fgrid, .feat-inner, .compare-inner, .learn-card, .builders-inner,
.shero-inner, .netcard, .duo-inner, .center-inner, .case { max-width: 1110px; margin-left: auto; margin-right: auto; }

.h-page1 { font-size: 56px; line-height: 1.07; letter-spacing: -.035em; font-weight: 700; color: var(--ink); }
.h-page2 { font-size: 36px; line-height: 1.15; letter-spacing: -.03em; font-weight: 700; color: var(--ink); }
.h-page3 { font-size: 32px; line-height: 1.2; letter-spacing: -.03em; font-weight: 700; color: var(--ink); }
.lead { margin-top: 32px; font-size: 20px; line-height: 28px; color: var(--ink-muted); max-width: 520px; }
.lead-sm { margin-top: 32px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 460px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px rgba(228,255,51,.3); }
@media (max-width: 760px) {
  .h-page1 { font-size: 40px; }
  .h-page2, .h-page3 { font-size: 28px; }
  .lead { font-size: 18px; margin-top: 20px; }
}

.btn svg { width: 14px; height: 14px; }
.btn-ink { background: var(--ink); color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 6px; }
.btn-ink:hover { background: var(--gray-900); }
.btn-sm { font-size: 14px; padding: 9px 15px; border-radius: 6px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.acid-tile { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--acid); color: var(--ink); }
.acid-tile svg { width: 14px; height: 14px; }

/* Code windows */
.codewin { background: var(--gray-800); border-radius: 8px; overflow: hidden; }
.codewin pre { margin: 0; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 19.5px; color: #fff; }
.codewin .ln { display: inline-block; width: 22px; margin-right: 14px; text-align: right; color: var(--gray-600); user-select: none; }
.codewin .tk-f { color: var(--code-keyword); }
.codewin .tk-n { color: var(--code-constant); }
.codewin .tk-s { color: var(--code-string); }
.codewin-title { padding: 12px 24px 0; font-size: 11px; color: var(--gray-500); }
.codewin-hero { box-shadow: 0 50px 80px -30px rgba(12,25,39,.45), 0 20px 40px -20px rgba(12,25,39,.3); }
.codewin-lg { box-shadow: 0 30px 60px -30px rgba(12,25,39,.4); }
.codewin-attached { border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(12,25,39,.45); margin: -12px -24px 0; position: relative; }

/* Product hero */
.phero { padding-top: 136px; padding-bottom: 88px; }
.phero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.phero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--ink); }
.phero-visual { justify-self: end; width: 100%; max-width: 388px; }
@media (max-width: 960px) {
  .phero { padding-top: 64px; padding-bottom: 48px; }
  .phero-inner { grid-template-columns: minmax(0, 1fr); }
  .phero-visual { justify-self: stretch; max-width: none; }
}

/* 4x2 feature grid */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 48px; padding: 96px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.fgrid strong { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.fgrid p { font-size: 14px; line-height: 20px; color: var(--ink-subtle); max-width: 220px; }
@media (max-width: 960px) { .fgrid { grid-template-columns: 1fr 1fr; padding: 56px 0; gap: 32px 24px; } }

/* Feature sections */
.feat { padding-top: 104px; padding-bottom: 104px; }
.feat-gray { background: var(--gray-50); }
.feat-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.feat-text p { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 450px; }
.feat-bullets { margin-top: 28px; display: grid; gap: 12px; }
.feat-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.feat-bullets svg { width: 16px; height: 16px; }
.feat-visual { min-width: 0; }
@media (max-width: 960px) {
  .feat { padding-top: 64px; padding-bottom: 64px; }
  .feat-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feat-visual { overflow-x: auto; }
}

/* Visual: settlement window chart */
.vis-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 28px; box-shadow: 0 40px 80px -30px rgba(12,25,39,.25); }
.vis-window h4 { font-size: 20px; line-height: 25px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.vw-stage { position: relative; height: 250px; margin-top: -40px; }
.vw-mark { position: absolute; bottom: 60px; height: calc(var(--h) + 44px); border-left: 2px solid var(--ink); }
.vw-mark span { position: absolute; top: -24px; left: -2px; white-space: nowrap; font-size: 13px; color: var(--ink-subtle); }
.vw-mark b { font-weight: 600; color: var(--ink); }
.vw-window { position: absolute; bottom: 60px; height: 88px; border-left: 1.5px solid var(--gray-300); }
.vw-window span { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: 12px; color: var(--ink-subtle); }
.vw-window svg { position: absolute; top: 20px; left: -7px; width: 13px; height: 13px; color: var(--ink-subtle); background: #fff; }
.vw-bar { position: absolute; left: 0; right: 0; bottom: 60px; height: 44px; display: flex; overflow: hidden; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px; }
.vw-bar i { flex: 1; border-right: 1px solid var(--gray-100); }
.vw-span { position: absolute; top: 0; bottom: 0; background: var(--acid); transform-origin: left; }
.reveal.is-visible .vw-span { animation: grow 1.2s .3s var(--ease-out-quint) both; }
@keyframes grow { from { transform: scaleX(0); } }
.vw-axis { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-400); }
.vw-badge { position: absolute; top: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; background: var(--sky); color: #fff; font-weight: 600; }
.vw-badge svg { width: 14px; height: 14px; }

/* Visual: flow diagram */
.vis-flow { position: relative; border: 1px solid var(--gray-200); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--gray-50); background-image: radial-gradient(#dfe4e9 1px, transparent 1.2px); background-size: 12px 12px; overflow-x: auto; }
.vf-grid { position: relative; width: 536px; height: 310px; margin: 0 auto; font-size: 10px; line-height: 13px; color: var(--ink-muted); }
.vf-grid h4 { position: absolute; left: 24px; top: 22px; font-size: 14px; font-weight: 600; color: var(--ink); }
.vf-source { position: absolute; left: 24px; top: 60px; width: 100px; height: 90px; display: grid; place-items: center; text-align: center; border-radius: 4px; background: var(--acid); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); box-shadow: 0 4px 10px rgba(12,25,39,.08); }
.vf-acct { position: absolute; right: 24px; width: 100px; height: 90px; display: grid; place-items: center; text-align: center; border-radius: 4px; background: #fff; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); box-shadow: 0 4px 12px rgba(12,25,39,.08), 0 0 0 1px var(--gray-100); }
.vf-acct b { font-weight: 600; }
.vf-acct.t1 { top: 60px; } .vf-acct.t2 { top: 196px; }
.vf-step { position: absolute; width: 104px; text-align: center; }
.vf-step.s1 { left: 136px; top: 64px; } .vf-step.s2 { left: 296px; top: 64px; }
.vf-step.s3 { left: 136px; top: 122px; } .vf-step.s4 { left: 296px; top: 122px; }
.vf-arrow { position: absolute; top: 104px; width: 104px; height: 1.5px; background: var(--ink); }
.vf-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: rotate(45deg); }
.vf-arrow.a1 { left: 136px; } .vf-arrow.a2 { left: 296px; }
.vf-hub { position: absolute; left: 252px; top: 89px; width: 32px; height: 32px; border-radius: 50%; background: var(--sky); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(52,188,255,.2); }
.vf-hub svg { width: 15px; height: 15px; }
.vf-dash { position: absolute; left: 267px; top: 124px; width: 140px; height: 118px; border-left: 1.5px dashed var(--ink); border-bottom: 1.5px dashed var(--ink); border-bottom-left-radius: 10px; }
.vf-up { position: absolute; right: 73px; top: 156px; width: 1.5px; height: 34px; background: var(--ink); }
.vf-up::after { content: ""; position: absolute; left: -4px; top: 0; width: 8px; height: 8px; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); transform: rotate(45deg); }

/* Visual: dashboard lookup */
.vis-dash { max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 20px; box-shadow: 0 40px 80px -30px rgba(12,25,39,.3); }
.vd-search { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 14px; color: var(--ink); }
.vd-search svg { width: 15px; height: 15px; }
.vd-query { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.vd-query::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vd-label { font-size: 11px; color: var(--ink-subtle); }
.vd-item { margin-top: 16px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 8px; }
.vd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px; border-bottom: 1px solid var(--gray-100); }
.vd-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-subtle); }
.vd-kind svg { width: 14px; height: 14px; }
.vd-title, .vd-amount { font-size: 19px; line-height: 26px; color: var(--ink); white-space: nowrap; }
.vd-rows { padding: 12px 16px; }
.vd-row { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 6px 20px; font-size: 13px; color: var(--ink); }
.vd-row::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.vd-row time { color: var(--ink-subtle); white-space: nowrap; }
.reveal.is-visible .vd-row { animation: fadeUp .5s var(--ease-out-quint) both; }
.reveal.is-visible .vd-row:nth-child(2) { animation-delay: .2s; } .reveal.is-visible .vd-row:nth-child(3) { animation-delay: .4s; } .reveal.is-visible .vd-row:nth-child(4) { animation-delay: .6s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

/* Visual: card controls */
.vis-cardctl { display: grid; gap: 24px; justify-items: center; }
.pcard-lg { width: 300px; height: 190px; border-radius: 14px; padding: 20px; color: #fff; }
.pcard-lg .pcard-name { font-size: 16px; }
.pcard-lg .pcard-chip { width: 40px; height: 30px; margin-top: 28px; }
.pcard-lg .pcard-foot { left: 20px; right: 20px; bottom: 18px; }
.pcard-lg .pcard-foot b { font-size: 22px; }
.vc-rules { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 8px 16px; box-shadow: 0 30px 60px -30px rgba(12,25,39,.25); }
.vc-rule { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-50); font-size: 14px; color: var(--ink); }
.vc-rule:last-child { border-bottom: 0; }
.vc-rule .mono { font-size: 12px; color: var(--ink-subtle); }
.vc-rule .pill { justify-self: end; }
.pill.no { background: #ffeae3; color: #c2410c; }

/* Visual: check */
.vis-check {
  position: relative; max-width: 520px; margin: 0 auto; padding: 22px 26px 18px; border-radius: 8px;
  background: repeating-linear-gradient(135deg, #f4f8f7 0 6px, #eef4f2 6px 7px);
  border: 1px solid #d9e3e0; box-shadow: 0 40px 80px -30px rgba(12,25,39,.3); font-size: 13px; color: var(--ink);
  transform: rotate(-2deg);
}
.ck-top { display: flex; justify-content: space-between; }
.ck-top b { font-weight: 600; }
.ck-top small { display: block; font-size: 11px; color: var(--ink-subtle); }
.ck-top .mono { text-align: right; font-size: 12px; }
.ck-pay { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: end; margin-top: 22px; }
.ck-pay > span:first-child { font-size: 10px; line-height: 12px; color: var(--ink-subtle); }
.ck-pay b { border-bottom: 1px solid var(--gray-400); font-size: 16px; font-weight: 500; padding-bottom: 2px; }
.ck-amt { padding: 4px 10px; border: 1px solid var(--gray-400); background: #fff; font-size: 15px; }
.ck-words { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-bottom: 2px; border-bottom: 1px solid var(--gray-400); font-style: italic; }
.ck-words span { font-style: normal; font-size: 11px; color: var(--ink-subtle); }
.ck-bottom { display: flex; justify-content: space-between; align-items: end; margin-top: 20px; font-size: 11px; color: var(--ink-subtle); }
.ck-bottom u { color: var(--ink); text-decoration-color: var(--gray-400); }
.ck-sig { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 24px; color: #1e3a8a; border-bottom: 1px solid var(--gray-400); padding: 0 18px; }
.ck-micr { margin-top: 14px; font-size: 14px; letter-spacing: .12em; color: var(--ink); }

/* Visual: event stream */
.vis-events { max-width: 460px; margin: 0 auto; background: var(--gray-900); border-radius: 12px; padding: 18px 20px; box-shadow: 0 40px 80px -30px rgba(12,25,39,.5); font-size: 12px; line-height: 20px; }
.ve-head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11px; color: var(--gray-600); }
.ve-head .live { color: var(--mint); display: inline-flex; align-items: center; gap: 6px; }
.ve-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulse 1.6s ease-in-out infinite; }
.ve-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); color: var(--gray-500); }
.ve-row .b { color: #fff; }
.ve-dot { width: 7px; height: 7px; border-radius: 50%; }
.ve-dot.mint { background: var(--mint); } .ve-dot.sky { background: var(--sky); } .ve-dot.acid { background: var(--acid); }
.reveal.is-visible .ve-row { animation: fadeUp .5s var(--d) var(--ease-out-quint) both; }

/* Visual: accounts */
.vis-accts { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(12,25,39,.3); overflow: hidden; }
.va-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); }
.va-head .entity-mark { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; }
.va-head strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.va-head small { display: block; font-size: 12px; color: var(--ink-subtle); }
.va-row { display: grid; grid-template-columns: 1fr auto 130px; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--gray-50); font-size: 14px; color: var(--ink); }
.va-row:last-child { border-bottom: 0; }
.va-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.va-row svg { width: 15px; height: 15px; color: var(--ink-subtle); }
.va-row .mono { font-size: 12px; color: var(--ink-subtle); }
.va-bal { text-align: right; font-variant-numeric: tabular-nums; }

/* Visual: routing */
.vis-routing {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); align-items: center; gap: 0;
  padding: 32px 0; background-image: radial-gradient(#dfe4e9 1px, transparent 1.2px); background-size: 12px 12px;
}
.vr-in, .vr-out { display: grid; gap: 8px; }
.vr-inrow, .vr-outrow { position: relative; display: flex; align-items: center; height: 28px; }
.vr-inrow span { font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; padding: 0 6px; position: relative; z-index: 1; white-space: nowrap; }
.vr-inrow::after, .vr-outrow::after { content: ""; flex: 1; height: 1.5px; background: var(--ink-subtle); margin-left: 4px; }
.vr-inrow::before, .vr-outrow::before { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.5px solid var(--ink-subtle); border-right: 1.5px solid var(--ink-subtle); transform: rotate(45deg); }
.vr-acct { display: grid; place-items: center; gap: 6px; padding: 22px 8px; border-radius: 14px; background: var(--ink); color: #fff; text-align: center; box-shadow: 0 16px 30px -10px rgba(12,25,39,.5), inset 0 0 0 4px #334352; }
.vr-acct b { font-size: 14px; font-weight: 600; line-height: 18px; }
.vr-acct .mono { font-size: 13px; }
.vr-out { padding-left: 6px; }
.vr-outrow { flex-direction: row; }
.vr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vr-chip svg { width: 14px; height: 14px; }
.vr-chip.acid { background: var(--acid); } .vr-chip.mint { background: var(--mint); } .vr-chip.sky { background: var(--sky); color: #fff; } .vr-chip.violet { background: #9b5cff; color: #fff; }
@media (max-width: 560px) { .vis-routing { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); } .vr-inrow span, .vr-chip { font-size: 11px; } }

/* Visual: console mock */
.vis-console { position: relative; padding: 40px 150px 0; }
.vcs-win { display: grid; grid-template-columns: 124px 1fr; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px 12px 0 0; box-shadow: 0 40px 80px -40px rgba(12,25,39,.3); font-size: 10px; color: var(--ink); text-align: left; overflow: hidden;
  mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.vcs-win aside { padding: 14px 10px; border-right: 1px solid var(--gray-100); }
.vcs-org { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 20px; }
.vcs-org span { width: 16px; height: 16px; border-radius: 4px; background: var(--ink); }
.vcs-nav { padding: 3px 6px; border-radius: 4px; color: var(--ink-muted); }
.vcs-nav.on { background: var(--gray-100); color: var(--ink); font-weight: 500; }
.vcs-gap { height: 10px; }
.vcs-main { padding: 14px 18px 28px; }
.vcs-crumbs { color: var(--ink-subtle); font-size: 9px; }
.vcs-crumbs span { color: var(--gray-400); }
.vcs-amount { margin-top: 18px; font-size: 16px; font-weight: 600; }
.vcs-cols { display: grid; grid-template-columns: 1fr 180px; gap: 16px; margin-top: 14px; }
.vcs-h { font-weight: 600; margin-bottom: 8px; }
.vcs-ev { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--gray-50); color: var(--ink-muted); }
.vcs-ev time { color: var(--ink-subtle); white-space: nowrap; }
.vcs-dot { width: 5px; height: 5px; margin: 0 4px; border-radius: 50%; background: var(--mint); }
.vcs-tag { padding: 1px 5px; border-radius: 4px; background: var(--gray-100); font-size: 8.5px; }
.vcs-ev:first-of-type .vcs-tag { background: var(--ink); color: #fff; }
.vcs-kv { display: grid; grid-template-columns: 110px 1fr; padding: 4px 0; color: var(--ink-muted); }
.vcs-kv span:first-child { color: var(--gray-400); }
.vcs-summary { padding: 12px; border: 1px solid var(--gray-100); border-radius: 8px; align-self: start; }
.vcs-sk { padding: 6px 0; border-bottom: 1px solid var(--gray-50); }
.vcs-sk small { display: block; color: var(--gray-400); font-size: 8.5px; }
.vcs-sk span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcn { position: absolute; font-size: 11px; line-height: 15px; color: var(--ink-subtle); text-align: right; }
.vcn.n-top { top: 0; left: 50%; transform: translateX(-50%); }
.vcn.n-top::after { content: ""; position: absolute; left: 50%; top: 20px; height: 60px; border-left: 1px dashed var(--gray-400); }
.vcn.n-left { left: 0; top: 150px; }
.vcn.n-left::after { content: ""; position: absolute; left: 100%; top: 14px; width: 150px; border-top: 1px dashed var(--gray-400); transform: rotate(18deg); transform-origin: left; }
.vcn.n-right { right: 0; top: 330px; }
.vcn.n-right::before { content: ""; position: absolute; right: calc(100% + 8px); top: 8px; width: 260px; border-top: 1px dashed var(--gray-400); }
@media (max-width: 960px) { .vis-console { padding: 0; } .vcn { display: none; } .vcs-cols { grid-template-columns: 1fr; } .vcs-summary { display: none; } }

/* Comparison table */
.compare { background: var(--gray-50); padding-top: 96px; padding-bottom: 104px; }
.compare-head, .compare-row { display: grid; grid-template-columns: minmax(0, 1fr) 278px 278px; align-items: center; }
.compare-head { padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.compare-head .h-page2 { max-width: 460px; }
.compare-us, .compare-them { justify-self: center; align-self: end; font-size: 14px; }
.compare-us { font-size: 16px; }
.compare-them { color: var(--ink); font-weight: 500; }
.compare-row { padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.compare-row strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.compare-row code { display: inline-block; margin-top: 6px; padding: 1px 6px; border-radius: 4px; background: var(--gray-100); font-size: 12px; color: var(--ink-muted); }
.compare-row p { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-muted); max-width: 440px; }
.compare-row .yes, .compare-row .no { justify-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.compare-row .yes { background: var(--mint); color: #fff; }
.compare-row .no { background: var(--gray-300); color: #fff; }
.compare-row svg { width: 13px; height: 13px; stroke-width: 2.5; }
@media (max-width: 760px) {
  .compare-head, .compare-row { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .compare-us { font-size: 11px; } .compare-us svg { display: none; } .compare-them { font-size: 11px; text-align: center; }
}

/* Developer panel */
.devpanel-wrap { padding-top: 96px; padding-bottom: 0; }
.subpage main > .devpanel-wrap { padding-left: 80px; padding-right: 80px; }
.devpanel {
  max-width: 1280px; margin: 0 auto; padding: 96px 84px; border-radius: 12px; color: var(--gray-400);
  background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 24px 24px, #111b27;
  box-shadow: 0 40px 80px -30px rgba(12,25,39,.4);
}
.devpanel .h-page2 { color: #fff; font-size: 40px; }
.devpanel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 28px; }
.devpanel-left { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.dev-tabs { display: grid; gap: 4px; }
.dev-tab { text-align: left; padding: 8px 12px; border-radius: 4px; font-size: 16px; line-height: 24px; color: var(--gray-400); transition: background-color .2s ease, color .2s ease; }
.dev-tab:hover { color: #fff; }
.dev-tab[aria-selected="true"] { background: var(--mint); color: var(--ink); }
.dev-docs { display: flex; align-items: center; gap: 10px; padding: 32px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #fff; font-size: 16px; transition: border-color .2s ease; }
.dev-docs:hover { border-color: rgba(255,255,255,.3); }
.dev-docs svg { width: 16px; height: 16px; }
.dev-docs svg:first-child { color: var(--mint); }
.dev-docs svg:last-child { margin-left: auto; }
.dev-right { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #172230; overflow: hidden; }
.dev-pane[hidden] { display: none; }
.dev-pane .codewin { background: transparent; border-radius: 0; min-height: 248px; }
.dev-notes { padding: 24px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 24px; color: var(--code-text); }
.dev-notes li { display: flex; align-items: center; gap: 8px; }
.dev-notes svg { width: 15px; height: 15px; color: var(--mint); }
.dev-learn { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.06); color: #fff; font-size: 14px; }
.dev-learn svg { width: 13px; height: 13px; }
@media (max-width: 960px) {
  .subpage main > .devpanel-wrap { padding-left: 0; padding-right: 0; }
  .devpanel { padding: 56px 24px; border-radius: 0; }
  .devpanel .h-page2 { font-size: 28px; }
  .devpanel-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Learn card */
.learn-wrap { padding-top: 64px; }
.learn-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: end; padding: 32px 88px 0 40px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.learn-card h3 { font-size: 20px; font-weight: 500; color: var(--ink); }
.learn-card p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 490px; }
.learn-card > div:first-child { align-self: center; padding-bottom: 32px; }
.learn-file { background: #fff; border: 1px solid var(--gray-200); border-bottom: 0; border-radius: 8px 8px 0 0; }
.lf-bar { display: flex; align-items: center; gap: 6px; padding: 12px; border-bottom: 1px solid var(--gray-100); }
.lf-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); }
.lf-bar em { flex: 1; text-align: center; font-style: normal; font-size: 10px; color: var(--ink-subtle); margin-right: 30px; }
.learn-file pre { margin: 0; padding: 14px 12px 28px; font-size: 9.5px; line-height: 15px; white-space: pre-wrap; word-break: break-all; color: var(--ink); }
.learn-file mark { background: var(--acid); padding: 0 1px; }
@media (max-width: 760px) { .learn-card { grid-template-columns: minmax(0, 1fr); padding: 28px 20px 0; } }

/* Builders block */
.builders { position: relative; overflow: hidden; margin-top: 64px; padding-top: 112px; padding-bottom: 144px; background: linear-gradient(#fff, var(--gray-50) 160px); }
.builders-inner { position: relative; }
.builders-art { position: absolute; right: -300px; bottom: -144px; width: 1000px; height: 600px; pointer-events: none; }
.builders-art .lumber { top: auto; right: 0; bottom: 0; width: 100%; transform-origin: bottom right; }
.pgrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 48px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(12,25,39,.25); }
.pgrid-item { display: flex; flex-direction: column; min-height: 250px; padding: 20px 20px 28px; background: #fff; transition: background-color .15s ease; }
.pgrid-item:hover { background: var(--gray-0); }
.pgrid-item strong { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.pgrid-item p { font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.pgrid-item .learn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 500; color: var(--ink); }
.pgrid-item .learn svg { width: 13px; height: 13px; transition: transform .3s var(--ease-out-quint); }
.pgrid-item:hover .learn svg { transform: translateX(3px); }
@media (max-width: 960px) { .pgrid { grid-template-columns: 1fr 1fr; } .pgrid-item { min-height: 0; } }
@media (max-width: 520px) { .pgrid { grid-template-columns: 1fr; } }

/* Light footer used on subpages */
.footer-light { background: #fff; color: var(--ink-muted); }
.footer-light .logo, .footer-light .footer-cols h5 { color: var(--ink); }
.footer-light .footer-cols a { color: var(--ink-muted); }
.footer-light .footer-cols a:hover { color: var(--ink); }
.footer-light .footer-legal { border-color: var(--gray-100); color: var(--ink-subtle); }

/* Solution hero */
.shero { padding-top: 112px; padding-bottom: 80px; overflow: hidden; }
.shero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.shero-art { position: relative; height: 500px; perspective: 1400px; }
.shero-panel { position: absolute; left: 40px; top: 10px; width: 560px; height: 480px; border-radius: 14px; background: linear-gradient(160deg, #fff, #f8f9fa); border: 1px solid var(--gray-100); box-shadow: 0 60px 80px -40px rgba(12,25,39,.25), 0 0 0 1px rgba(12,25,39,.02); transform: rotateY(-10deg) rotateX(4deg) rotateZ(-1deg); overflow: hidden; }
.shero-panel svg { width: 100%; height: 100%; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 960px) {
  .shero { padding-top: 64px; }
  .shero-inner { grid-template-columns: minmax(0, 1fr); }
  .shero-art { height: 300px; }
  .shero-panel { left: 0; width: 100%; height: 300px; }
}

/* Network details card */
.netcard { position: relative; overflow: hidden; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; }
.netcard-body { display: flex; justify-content: space-between; gap: 48px; padding: 64px 64px 56px; }
.netcard-body p { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 470px; }
.netcard-body ul { display: grid; gap: 12px; align-content: start; }
.netcard-body li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.netcard-body li svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .netcard-body { flex-direction: column; padding: 32px 24px; } }

/* Two-column features */
.duo { padding-top: 104px; padding-bottom: 104px; }
.duo-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px 96px; }
.duo-col > p { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 460px; }
.duo-visual { margin-top: 40px; }
.duo-visual .vis-card { box-shadow: none; }
@media (max-width: 960px) { .duo-inner { grid-template-columns: minmax(0, 1fr); } .duo { padding-top: 64px; padding-bottom: 64px; } }

/* Centered section */
.center-sec { background: var(--gray-50); border-top: 1px solid var(--gray-100); padding-top: 104px; padding-bottom: 0; }
.center-inner { text-align: center; }
.center-inner > p { max-width: 460px; margin: 28px auto 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.center-visual { margin-top: 40px; }

/* Case study */
.case-wrap { padding-top: 80px; }
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 64px; border-radius: 12px; background: var(--case-bg); color: #fff; box-shadow: 0 40px 80px -40px rgba(12,25,39,.5); }
.case h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.03em; font-weight: 700; }
.case blockquote { font-size: 15px; line-height: 24px; color: rgba(255,255,255,.92); }
.case-logo { display: block; margin-top: 20px; text-align: right; font-size: 40px; font-weight: 700; letter-spacing: -.04em; }
@media (max-width: 760px) { .case { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; } .case h2 { font-size: 24px; } }
.vis-window.no-title .vw-stage { margin-top: 12px; }
.builders-title { max-width: 480px; font-size: 40px; }
@media (max-width: 760px) { .builders-title { font-size: 28px; } }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact { padding-top: 51px; padding-bottom: 80px; }
.contact-inner { max-width: 1110px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 600px); gap: 48px 80px; }
.contact h1 { letter-spacing: -.02em; }
.contact-intro p { margin-top: 32px; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.contact-intro p a { color: var(--ink); text-decoration: underline dashed var(--gray-400); text-underline-offset: 4px; }
.contact-links { margin-top: 28px; display: grid; gap: 0; }
.contact-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.contact-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-links svg { width: 15px; height: 15px; }

.contact-form { display: grid; gap: 32px; }
.field { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-800); }
.field > legend { margin-bottom: 4px; }
.field[data-group-required] { gap: 8px; }
/* Inputs match Increase: 36px tall, 8px radius, grey hover, mint focus ring */
.field input:not([type="checkbox"]), .field textarea, .field select {
  position: relative; display: block; width: 100%; height: 36px; padding: 8px 12px;
  font: inherit; font-size: 14px; line-height: 20px; color: var(--gray-800);
  background: transparent; border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(12,25,39,.04); outline: none;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.field textarea { height: 124px; resize: vertical; }
.field select { padding-right: 20px; cursor: pointer; }
.field ::placeholder { color: var(--gray-300); opacity: 1; }
.field input:not([type="checkbox"]):hover, .field textarea:hover, .field select:hover { background: var(--gray-50); }
.field input:not([type="checkbox"]):focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  z-index: 1; border-color: var(--gray-300); box-shadow: 0 0 0 3px var(--mint), 0 1px 2px rgba(12,25,39,.04);
}
.field-pair { display: flex; }
.field-pair input { flex: 1; min-width: 0; box-shadow: none !important; }
.field-pair input:first-child { border-radius: 8px 0 0 8px !important; }
.field-pair input:last-child { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; }
.field-pair input:focus-visible { box-shadow: 0 0 0 3px var(--mint) !important; }
.check { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; line-height: 20px; color: var(--gray-800); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--mint-deep); border-radius: 4px; }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mint); }
.field.is-invalid input:not([type="checkbox"]), .field.is-invalid textarea, .field.is-invalid select { border-color: #e5484d; }
.field > .field-error { font-size: 12px; line-height: 16px; font-weight: 400; color: #d4383d; }
.contact-submit {
  width: 100%; justify-content: center; margin-top: 16px; padding: 10px 15px;
  font-size: 14px; line-height: 20px; font-weight: 500; border-radius: 8px; background: var(--gray-800);
}
.contact-submit:hover { background: var(--gray-900); }
.contact-submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mint-soft); }
.contact-submit:disabled { opacity: .6; cursor: default; }
.form-status { margin-top: -12px; font-size: 13px; color: var(--ink-subtle); }
.form-status.ok { color: var(--mint-deep); }
@media (max-width: 860px) {
  .contact { padding-top: 40px; }
  .contact-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Solution page visuals: data table, bar chart, demo card, 3-up grid
   ========================================================================== */
.vis-table, .vis-bars {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden;
  font-size: 13px; color: var(--ink);
}
.vt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--gray-100); }
.vt-head strong { font-size: 14px; font-weight: 500; }
.vt-head span { font-size: 12px; color: var(--ink-subtle); }
.vis-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vis-table th { padding: 8px 16px; text-align: left; font-size: 11px; font-weight: 400; color: var(--gray-500); border-bottom: 1px solid var(--gray-100); }
.vis-table td { padding: 10px 16px; border-bottom: 1px solid var(--gray-50); color: var(--ink-muted); white-space: nowrap; }
.vis-table td:first-child { color: var(--ink); }
.vis-table tr:last-child td { border-bottom: 0; }
.vis-table .r { text-align: right; }
.vis-table tbody tr { transition: background-color .2s ease; }
.vis-table tbody tr:hover { background: var(--gray-50); }
.pill.warn { background: #fbffd6; color: #6b7000; }
.pill.bad { background: #ffeae3; color: #c2410c; }
.pill.muted { background: var(--gray-100); color: var(--ink-subtle); }
.t-ok { color: var(--mint-deep); }
.t-warn { color: #8a8f00; }
.t-bad { color: #c2410c; }
.t-muted { color: var(--gray-400); }

.vb-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; height: 220px; padding: 28px 20px 0; margin-bottom: 36px; }
.vb-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.vb-bar { width: 100%; max-width: 56px; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.vb-bar.mint { background: linear-gradient(100grad, #45F4BC, #33DFDF); }
.vb-bar.warn { background: linear-gradient(100grad, #DEFF34, #8CF97C); }
.vb-bar.bad { background: linear-gradient(100grad, #ff8a3d, #ff5f33); }
.vb-bar.sky { background: linear-gradient(100grad, #34C8F4, #34BCFF); }
.vb-bar.muted { background: var(--gray-200); }
.reveal.is-visible .vb-bar { animation: bar-grow .9s var(--ease-out-quint) backwards; animation-delay: calc(.2s + var(--i) * .08s); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.vb-val { margin-bottom: 6px; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.vb-label { position: absolute; bottom: -26px; font-size: 12px; color: var(--ink-subtle); white-space: nowrap; }
.vb-limit { position: absolute; left: 20px; right: 20px; height: 0; border-top: 1.5px dashed var(--gray-400); z-index: 1; }
.vb-limit span { position: absolute; right: 0; top: -18px; font-size: 10px; color: var(--gray-500); background: #fff; padding: 0 4px; }

.case-cta p { font-size: 16px; line-height: 24px; color: rgba(255,255,255,.85); }
.case-cta .btn { margin-top: 24px; }

.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .pgrid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pgrid-3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Solution pages: single-feature rows
   ========================================================================== */
.sfeat { padding-top: 104px; padding-bottom: 104px; }
.sfeat-gray { background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.sfeat-inner { max-width: 1110px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.sfeat-inner.flip .sfeat-copy { order: 2; }
.sfeat-copy > p { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 460px; }
.sfeat-visual { min-width: 0; }
@media (max-width: 960px) {
  .sfeat { padding-top: 64px; padding-bottom: 64px; }
  .sfeat-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sfeat-inner.flip .sfeat-copy { order: 0; }
}

/* ==========================================================================
   Solution hero art (src/hero-art.mjs). Everything animates on page load.
   ========================================================================== */
.ha { position: absolute; inset: 0; font-size: 14px; color: var(--ink); }
.ha .pill { font-size: 12px; }

/* Sales: estimate */
.ha-quote { padding: 40px 44px; }
.haq-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-subtle); }
.haq-status { position: relative; width: 120px; height: 22px; }
.haq-status .pill { position: absolute; right: 0; top: 0; }
.haq-status .pill:first-child { animation: fade-out .3s 2.9s forwards; }
.haq-status .pill.ok { opacity: 0; animation: pop-in .4s 3s var(--ease-out-quint) forwards; }
.haq-title { margin: 10px 0 18px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.haq-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); color: var(--ink-muted); animation: fadeUp .5s backwards; animation-delay: calc(.5s + var(--i) * .25s); }
.haq-line .mono, .haq-total .mono { color: var(--ink); }
.haq-total { display: flex; justify-content: space-between; padding-top: 14px; font-size: 16px; font-weight: 600; animation: fadeUp .5s 1.8s backwards; }
.haq-margin { margin-top: 24px; animation: fadeUp .5s 2s backwards; }
.haq-mlabel { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-subtle); margin-bottom: 8px; }
.haq-track { position: relative; height: 10px; border-radius: 999px; background: var(--gray-100); }
.haq-fill { position: absolute; inset: 0 auto 0 0; width: 63%; border-radius: 999px; background: linear-gradient(100grad, #45F4BC, #33DFDF); transform-origin: left; animation: grow-x 1s 2.1s var(--ease-out-quint) backwards; }
.haq-min { position: absolute; left: 40%; top: -5px; bottom: -5px; border-left: 2px dashed var(--ink-subtle); }
.haq-min span { position: absolute; top: 20px; left: -24px; font-size: 10px; color: var(--ink-subtle); white-space: nowrap; }

/* Production: machine schedule */
.ha-gantt { padding: 44px 32px; }
.hag-axis, .hag-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; }
.hag-axis { grid-template-columns: 96px repeat(6, 1fr); font-size: 11px; color: var(--gray-500); margin-bottom: 14px; }
.hag-row { height: 64px; }
.hag-name { font-size: 13px; font-weight: 500; }
.hag-lane { position: relative; height: 34px; border-radius: 6px; background: var(--gray-50); background-image: linear-gradient(90deg, var(--gray-100) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.hag-lane i { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; transform-origin: left; animation: grow-x .7s var(--ease-out-quint) backwards; animation-delay: calc(.4s + var(--i) * .12s); }
.hag-now { position: absolute; top: 72px; bottom: 36px; left: calc(128px + (100% - 160px) * .58); border-left: 2px solid var(--orange); animation: fadeUp .5s 2.2s backwards; }
.hag-now span { position: absolute; bottom: -20px; left: -12px; font-size: 11px; color: var(--orange); }

/* Finishing: board profile + stain swatches */
.ha-profile { padding: 56px 44px; }
.ha-profile svg { width: 100%; height: auto; overflow: visible; }
.hap-shape { stroke-dasharray: 1400; stroke-dashoffset: 1400; fill-opacity: 0; animation: draw 1.6s .3s var(--ease-out-quint) forwards, fill-in .8s 1.4s forwards; }
@keyframes fill-in { to { fill-opacity: .9; } }
.hap-dims { animation: fadeUp .5s 1.5s backwards; }
.hap-meta { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12px; color: var(--ink-subtle); }
.hap-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 32px; }
.hap-sw { animation: fadeUp .5s backwards; animation-delay: calc(1.8s + var(--i) * .12s); }
.hap-sw i { display: block; height: 72px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(12,25,39,.08); }
.hap-sw span { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-subtle); }

/* Inventory: yard map */
.ha-yard { padding: 40px 36px; }
.hay-head { display: flex; justify-content: space-between; align-items: baseline; }
.hay-head strong { font-size: 18px; font-weight: 600; }
.hay-head span { font-size: 12px; color: var(--ink-subtle); }
.hay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.hay-bay { position: relative; height: 164px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-100); animation: fadeUp .5s backwards; animation-delay: calc(.3s + var(--i) * .1s); }
.hay-bay.low { border-color: #ffc4ae; background: #fff8f5; }
.hay-pile { display: flex; flex-direction: column-reverse; gap: 3px; }
.hay-pile i { display: block; height: 14px; border-radius: 2px; animation: board-drop .5s var(--ease-out-quint) backwards; animation-delay: calc(.8s + var(--i) * .1s + var(--j) * .08s); }
.hay-label { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--ink-muted); }
.hay-label .mono { color: var(--ink); font-weight: 700; }
.hay-flag { position: absolute; top: 10px; right: 10px; animation: pop-in .4s 2s var(--ease-out-quint) backwards; }

/* Finance: invoice */
.ha-invoice { padding: 40px 52px; }
.hai-paper { position: relative; padding: 24px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 20px 40px -24px rgba(12,25,39,.25); animation: fadeUp .6s .2s backwards; }
.hai-head { display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; color: var(--ink-subtle); }
.hai-head strong { display: block; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.hai-to { margin: 16px 0 10px; }
.hai-to small { display: block; font-size: 11px; color: var(--gray-500); }
.hai-line, .hai-total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--ink-muted); border-bottom: 1px solid var(--gray-50); }
.hai-line.muted { color: var(--gray-500); }
.hai-total { border: 0; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hai-stamp { position: absolute; right: 20px; top: 64px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2px solid var(--mint-deep); border-radius: 6px; color: var(--mint-deep); background: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; transform: rotate(-8deg); animation: stamp .45s 1.4s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.hai-stamp svg { width: 15px; height: 15px; }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.8); } }
.hai-sync { display: flex; gap: 8px; margin-top: 16px; }
.hai-sync .pill { animation: pop-in .4s var(--ease-out-quint) backwards; }
.hai-sync .pill:nth-child(1) { animation-delay: 1.9s; } .hai-sync .pill:nth-child(2) { animation-delay: 2.05s; } .hai-sync .pill:nth-child(3) { animation-delay: 2.2s; }

/* Logistics: delivery route */
.ha-route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.har-path { animation: fade-in .8s .3s backwards; }
.har-stop { animation: pop-in .45s var(--ease-out-quint) backwards; animation-delay: calc(.8s + var(--i) * .3s); }
.har-truck { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 0 6px 14px rgba(12,25,39,.3); offset-rotate: 0deg; animation: drive 7s 1.6s linear infinite backwards; }
.har-truck svg { width: 16px; height: 16px; }
@keyframes drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.har-card { position: absolute; top: 28px; left: 28px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 10px 24px -12px rgba(12,25,39,.25); animation: fadeUp .5s 1.8s backwards; }
.har-card strong { font-size: 14px; font-weight: 600; }
.har-card span { font-size: 11px; color: var(--ink-subtle); }

@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* The panel artwork is laid out at 560x480; smaller screens scale the whole panel */
@media (max-width: 960px) {
  .shero-art { height: 400px; }
  .shero-panel { left: 0; width: 560px; height: 480px; transform: scale(.82); transform-origin: top left; }
}
@media (max-width: 640px) {
  .shero-art { height: 250px; }
  .shero-panel { transform: scale(.6); }
}

/* ==========================================================================
   Solution visuals: wizard, kanban, knife wear, stain recipe, pipeline, truck load
   ========================================================================== */
.vis-wizard, .vis-wear, .vis-recipe, .vis-load { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 30px 60px -36px rgba(12,25,39,.3); color: var(--ink); font-size: 13px; overflow: hidden; }

.vis-wizard { padding: 20px; }
.vw-steps { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100); }
.vw-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-subtle); }
.vw-step b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gray-100); font-size: 11px; color: var(--ink-subtle); }
.vw-step.done b { background: var(--mint); color: var(--ink); }
.vw-step.now { color: var(--ink); font-weight: 500; }
.vw-step.now b { background: var(--ink); color: #fff; }
.reveal.is-visible .vw-step { animation: fadeUp .4s backwards; animation-delay: calc(.2s + var(--i) * .15s); }
.vw-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-50); }
.vw-line strong { display: block; font-weight: 500; }
.vw-line small { font-size: 12px; color: var(--ink-subtle); }
.vw-line.flagged { margin: 0 -20px; padding: 10px 20px; background: #fff6f2; box-shadow: inset 3px 0 0 var(--orange); }
.vw-warn { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #ffeae3; color: #c2410c; }
.vw-warn svg { width: 15px; height: 15px; flex: none; }
.reveal.is-visible .vw-warn { animation: fadeUp .5s .9s backwards; }
.vw-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; color: var(--ink-subtle); }
.vw-send { padding: 8px 14px; border-radius: 6px; background: var(--gray-200); color: var(--gray-500); font-size: 13px; font-weight: 500; cursor: not-allowed; }

.vis-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vk-col { padding: 10px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-100); }
.vk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; color: var(--ink-subtle); }
.vk-card { margin-top: 8px; padding: 10px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-200); box-shadow: inset 3px 0 0 var(--mint); font-size: 12px; }
.vk-card.warn { box-shadow: inset 3px 0 0 #c9d400; }
.vk-card.bad { box-shadow: inset 3px 0 0 var(--orange); }
.vk-card strong { display: block; font-weight: 500; color: var(--ink); }
.vk-card small { color: var(--ink-subtle); }
.reveal.is-visible .vk-card { animation: fadeUp .45s backwards; animation-delay: calc(.2s + var(--i) * .12s); }
@media (max-width: 560px) { .vis-kanban { grid-template-columns: 1fr; } }

.vwr-row { padding: 12px 16px; border-bottom: 1px solid var(--gray-50); }
.vwr-row:last-child { border-bottom: 0; }
.vwr-top { display: flex; justify-content: space-between; gap: 12px; }
.vwr-top strong { font-weight: 500; }
.vwr-top .mono { font-size: 12px; color: var(--ink-subtle); }
.vwr-track { height: 8px; margin: 8px 0 6px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.vwr-fill { height: 100%; border-radius: 999px; transform-origin: left; }
.vwr-fill.ok { background: linear-gradient(100grad, #45F4BC, #33DFDF); }
.vwr-fill.warn { background: linear-gradient(100grad, #DEFF34, #8CF97C); }
.vwr-fill.bad { background: linear-gradient(100grad, #ff8a3d, #ff5f33); }
.reveal.is-visible .vwr-fill { animation: grow-x 1s var(--ease-out-quint) backwards; animation-delay: calc(.3s + var(--i, 0) * .12s); }
.vwr-row small, .vl-meter small { font-size: 12px; color: var(--ink-subtle); }

.vr-swatch { display: flex; flex-direction: column; justify-content: flex-end; height: 150px; padding: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.vr-swatch strong { font-size: 20px; font-weight: 600; }
.vr-swatch span { font-size: 12px; opacity: .9; }
.vr-mix { display: flex; gap: 2px; height: 12px; margin: 16px 18px 8px; border-radius: 999px; overflow: hidden; }
.vr-mix i { transform-origin: left; }
.reveal.is-visible .vr-mix i { animation: grow-x .7s var(--ease-out-quint) backwards; animation-delay: calc(.3s + var(--i) * .15s); }
.vr-parts { padding: 4px 18px 16px; }
.vr-parts div { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-50); }
.vr-parts div:last-child { border-bottom: 0; }
.vr-dot { width: 10px; height: 10px; border-radius: 3px; }
.vr-parts .mono { font-size: 12px; color: var(--ink-subtle); }

.vis-pipeline { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; }
.vp-stage { padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 16px 32px -24px rgba(12,25,39,.3); font-size: 12px; }
.vp-title { margin-bottom: 6px; font-size: 11px; color: var(--ink-subtle); }
.vp-item { padding: 6px 0; border-top: 1px solid var(--gray-50); color: var(--ink); }
.vp-arrow { position: relative; height: 1.5px; margin: 0 4px; background: var(--ink-subtle); }
.vp-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--ink-subtle); border-right: 1.5px solid var(--ink-subtle); transform: rotate(45deg); }
.reveal.is-visible .vp-stage, .reveal.is-visible .vp-arrow { animation: fadeUp .5s backwards; animation-delay: calc(.2s + var(--i) * .35s); }
@media (max-width: 560px) { .vis-pipeline { grid-template-columns: 1fr; gap: 16px; } .vp-arrow { display: none; } }

.vis-load { padding: 20px; }
.vl-truck { position: relative; height: 150px; }
.vl-bed { position: absolute; left: 4%; right: 19%; bottom: 36px; height: 96px; display: flex; align-items: flex-end; gap: 4px; }
.vl-bed i { position: relative; border-radius: 3px; transform-origin: bottom; }
.vl-bed i span { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--ink); }
.reveal.is-visible .vl-bed i { animation: board-drop .5s var(--ease-out-quint) backwards; animation-delay: calc(.3s + var(--i) * .15s); }
.vl-chassis { position: absolute; left: 2%; right: 16%; bottom: 24px; height: 12px; border-radius: 3px; background: var(--ink); }
.vl-cab { position: absolute; right: 1%; bottom: 24px; width: 15%; height: 74px; border-radius: 12px 6px 3px 3px; background: var(--ink); }
.vl-cab::after { content: ""; position: absolute; top: 10px; right: 10px; width: 45%; height: 24px; border-radius: 6px 3px 3px 3px; background: #9fd9f7; }
.vl-wheel { position: absolute; bottom: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); border: 6px solid #a6b0ba; transform: translateX(-50%); }
.vl-name { margin: 6px 0 10px; font-size: 12px; color: var(--ink-subtle); }
.vl-meter { margin-top: 10px; }

/* Track: row of cards along the bottom of a solution page's grey card */
.vis-track { padding: 0 64px 48px; }
.vtk-row { display: flex; align-items: stretch; gap: 12px; }
.vtk-card {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200);
  box-shadow: 0 14px 28px -22px rgba(12,25,39,.35); font-size: 13px; color: var(--ink);
}
.vtk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vtk-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--acid); color: var(--ink); }
.vtk-icon svg { width: 13px; height: 13px; }
.vtk-label { font-size: 11px; color: var(--ink-subtle); }
.vtk-card strong { font-size: 14px; font-weight: 500; }
.vtk-card small { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.vtk-card .pill { margin-top: auto; padding-top: 2px; }
.vtk-card small + .pill { margin-top: 8px; }
/* flow mode: arrows between cards that draw left to right */
.vtk-arrow { position: relative; flex: 0 0 28px; align-self: center; height: 2px; border-radius: 2px; background: var(--ink-muted); transform-origin: left; }
.vtk-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 2px solid var(--ink-muted); border-right: 2px solid var(--ink-muted); border-radius: 1px; transform: rotate(45deg); }
.vis-track.flow .vtk-row { gap: 8px; }
.reveal.is-visible .vtk-card { animation: fadeUp .5s var(--ease-out-quint) backwards; animation-delay: calc(.3s + var(--i) * .16s); }
.reveal.is-visible .vtk-arrow { animation: grow-x .35s var(--ease-out-quint) backwards; animation-delay: calc(.22s + var(--i) * .16s); }
.vtk-caption { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
.vtk-caption svg { width: 15px; height: 15px; color: var(--mint-deep); }
@media (max-width: 960px) {
  .vis-track { padding: 0 24px 32px; }
  .vtk-row { flex-direction: column; }
  .vtk-arrow { display: none; }
}

/* ==========================================================================
   Homepage hero: abstract lumber flow (drawMillFlow in main.js)
   ========================================================================== */
.millflow { position: absolute; left: 24px; right: 24px; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.fl-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; }
.fl-track { stroke: #cdd2d8; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fl-draw 1.2s .1s var(--ease-out-quint) forwards; }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
.fl-ticks path { stroke: #e1e5e9; stroke-width: 1; }
.fl-ticks { animation: fade-in .8s .5s backwards; }
.fl-arch { fill: none; stroke: #cdd2d8; stroke-width: 1.5; }
.fl-arch-lit { fill: none; stroke: var(--mint); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px rgba(49,242,191,.55)); }
.fl-scan { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; }
.fl-pill rect { fill: #fff; stroke: #cdd2d8; }
.fl-pill text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--ink); }
.fl-ok rect { fill: #e3fdf4; stroke: #9eeed2; }
.fl-ok text { fill: var(--mint-deep); }
.fl-spec { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-subtle); }
.fl-gate { animation: fl-in .7s var(--ease-out-quint) backwards; animation-delay: calc(.5s + var(--i) * .18s); }
.fl-in { animation: fl-in .7s .35s var(--ease-out-quint) backwards; }
@keyframes fl-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 960px) {
  .millflow { position: relative; left: auto; right: auto; aspect-ratio: 1110 / 288; margin-top: 32px; }
}