/* ByteSlicer — futonica product page
   Palette and wordmark are the app's own: the peer colours below are the ABGR literals
   from db_skeleton/source/app/byteslicer/PeerColors.cpp read back as RGB, so a person
   who is amber in the app is amber here. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        #08080a;
  --ink-soft:   #121216;
  --ink-line:   #26262e;
  --paper:      #ffffff;
  --paper-soft: #f4f4f6;
  --paper-line: #e2e2e8;

  --fg-dark:    #f5f5f7;
  --fg-dark-2:  rgba(245,245,247,.62);
  --fg-dark-3:  rgba(245,245,247,.38);
  --fg-light:   #08080a;
  --fg-light-2: rgba(8,8,10,.62);
  --fg-light-3: rgba(8,8,10,.40);

  --accent:     #00d0ff;   /* cyan  — peer palette */
  --amber:      #ffb000;   /* amber — peer palette */
  --green:      #4ce04c;
  --magenta:    #ff5fd0;
  --violet:     #9c7bff;
  --sky:        #6fa8ff;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter,
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --r: 18px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* ── Layout ──────────────────────────────────────────────────────────── */

section { position: relative; padding: clamp(88px, 13vh, 160px) var(--gut); scroll-margin-top: 58px; }
.wrap  { max-width: var(--maxw); margin: 0 auto; }
.narrow{ max-width: 860px; margin: 0 auto; }

.on-light { background: var(--paper); color: var(--fg-light); }
.on-light .dim { color: var(--fg-light-2); }
.on-soft  { background: var(--paper-soft); color: var(--fg-light); }
.on-soft .dim { color: var(--fg-light-2); }
.dim { color: var(--fg-dark-2); }

/* ── Type ────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }

.eyebrow {
  font: 400 12px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5;
}
.on-light .eyebrow, .on-soft .eyebrow { color: #0072a3; }

.display { font-size: clamp(38px, 6.6vw, 86px); letter-spacing: -0.04em; }
.h2      { font-size: clamp(30px, 4.4vw, 60px); }
.h3      { font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -0.02em; }

.lede {
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.45;
  letter-spacing: -0.017em;
  max-width: 42em;
}
p { margin: 1em 0; }
.mono { font-family: var(--mono); }

.hl { color: var(--accent); }
.on-light .hl, .on-soft .hl { color: #0072a3; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s, border-color .22s, box-shadow .22s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent); color: #002430;
  box-shadow: 0 8px 30px rgba(0,208,255,.28);
}
.btn-primary:hover { box-shadow: 0 14px 44px rgba(0,208,255,.42); }
.btn-ghost { border-color: rgba(245,245,247,.28); color: var(--fg-dark); }
.btn-ghost:hover { border-color: rgba(245,245,247,.6); background: rgba(255,255,255,.05); }
.on-light .btn-ghost, .on-soft .btn-ghost { border-color: rgba(8,8,10,.22); color: var(--fg-light); }
.on-light .btn-ghost:hover, .on-soft .btn-ghost:hover { background: rgba(0,0,0,.04); border-color: rgba(8,8,10,.5); }
.btn .arw { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw { transform: translateX(4px); }

.arw-d { display: inline-block; animation: arwDrift 3s ease-in-out infinite; }
@keyframes arwDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* One beat, once, if the reader has stalled at the top — the page noticing, not nagging. */
.btn-down.nudge { animation: nudge 1s cubic-bezier(.2,.7,.3,1); }
@keyframes nudge {
  0%   { box-shadow: 0 8px 30px rgba(0,208,255,.28); transform: translateY(0); }
  35%  { box-shadow: 0 16px 54px rgba(0,208,255,.62); transform: translateY(3px); }
  100% { box-shadow: 0 8px 30px rgba(0,208,255,.28); transform: translateY(0); }
}

/* Held back until the first section has proved the claim (see app.js). Visibility rather
   than opacity alone, so it is out of the tab order while it is out of sight. */
.nav-cta {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1), visibility 0s .4s;
}
.nav-cta.in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gut); height: 58px;
  background: rgba(8,8,10,0);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.solid { background: rgba(8,8,10,.72); border-bottom-color: rgba(255,255,255,.08); }
.nav-mark { display: flex; align-items: baseline; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.nav-mark svg { width: 74px; color: var(--fg-dark); display: block; }
.nav-mark .slash { color: var(--fg-dark-3); font: 300 15px/1 var(--sans); }
.nav-mark .prod  { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: 13.5px; color: var(--fg-dark-2); text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--fg-dark); }
.nav .btn { padding: 8px 18px; font-size: 13.5px; }
@media (max-width: 860px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 120px var(--gut) 190px;
  overflow: hidden;
}
.hero-glow {
  position: absolute; left: 50%; top: 34%; width: 1200px; height: 700px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(0,208,255,.14), rgba(0,208,255,0) 62%);
  pointer-events: none;
}

/* The wordmark, rebuilt as the app draws it: two lines emerging from a hairline rule. */
.logo { position: relative; z-index: 2; }
.logo-band { overflow: hidden; display: flex; justify-content: center; }
.logo-maker { align-items: flex-end; }
.logo-maker svg { width: clamp(96px, 12vw, 150px); color: var(--fg-dark); display: block; }
.logo-rule {
  height: 1.5px; width: clamp(220px, 30vw, 380px);
  background: var(--fg-dark); margin: 9px auto 8px; opacity: .9;
  transform: scaleX(0); transform-origin: center;
  animation: ruleIn .9s cubic-bezier(.2,.8,.2,1) .12s forwards;
}
.logo-name {
  font-size: clamp(46px, 8.6vw, 116px);
  font-weight: 600; letter-spacing: -0.045em; line-height: 1.06;
}
.logo-maker > *, .logo-name > * { display: block; }
.reveal-up   { transform: translateY(110%); animation: slideOut 1s cubic-bezier(.16,.9,.24,1) .55s forwards; }
.reveal-down { transform: translateY(-110%); animation: slideOut 1s cubic-bezier(.16,.9,.24,1) .55s forwards; }
@keyframes slideOut { to { transform: translateY(0); } }
@keyframes ruleIn   { to { transform: scaleX(1); } }

.hero-copy { position: relative; z-index: 2; opacity: 0; animation: fadeUp .9s ease-out 1.35s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-sub {
  margin: 30px auto 0;
  font-size: clamp(19px, 2.4vw, 30px);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.32;
  max-width: 17em; color: var(--fg-dark);
}
.hero-sub b { font-weight: 600; }
.hero-note { margin: 18px auto 0; max-width: 34em; font-size: 16px; color: var(--fg-dark-2); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-badge {
  margin-top: 22px; font: 400 12px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dark-3);
}

/* The byte stream along the bottom of the hero. */
.hero-stream {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
          mask-image: linear-gradient(to bottom, transparent, #000 45%);
  opacity: 0; animation: fadeUp 1.2s ease-out 1.7s forwards;
}
.stream-row {
  display: flex; gap: 10px; font: 400 13px/2 var(--mono);
  color: rgba(245,245,247,.20); white-space: nowrap;
}
.stream-row span.lit { color: var(--accent); }
.stream-row span.warm { color: var(--amber); }

/* ── Reveal on scroll ────────────────────────────────────────────────── */

.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv-2 { transition-delay: .09s; }
.rv-3 { transition-delay: .18s; }
.rv-4 { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .reveal-up, .reveal-down { transform: none; animation: none; }
  .logo-rule { transform: scaleX(1); animation: none; }
  .hero-copy, .hero-stream { opacity: 1; animation: none; }
  .arw-d, .btn-down.nudge { animation: none; }
}

/* ── Stat strip ──────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: var(--r); overflow: hidden; }
.on-light .stats, .on-soft .stats { background: var(--paper-line); border-color: var(--paper-line); }
.stat { background: var(--ink); padding: 30px 24px; }
.on-light .stat { background: var(--paper); }
.on-soft .stat { background: var(--paper-soft); }
.stat b { display: block; font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.035em; }
.stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--fg-dark-2); }
.on-light .stat span, .on-soft .stat span { color: var(--fg-light-2); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Demo chrome (shared by the interactive panels) ──────────────────── */

.panel {
  border: 1px solid var(--ink-line); border-radius: var(--r);
  background: linear-gradient(180deg, #101015, #0b0b0e);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.on-light .panel, .on-soft .panel {
  border-color: rgba(8,8,10,.10);
  box-shadow: 0 30px 70px -34px rgba(8,8,10,.35);
}
.panel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--ink-line);
  font: 400 12px/1 var(--mono); color: var(--fg-dark-3);
  background: rgba(255,255,255,.02);
}
.dots { display: flex; gap: 6px; margin-right: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b2b33; display: block; }
.panel-bar .grow { flex: 1; }
.tag {
  font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.tag-live   { color: var(--green); }
.tag-build  { color: var(--amber); }

/* Grid and flex items default to a min-content floor, which a `white-space: pre` hex
   dump would happily push past the viewport. Every track that holds one opts out. */
.row > *, .demo-grid > *, .collab-body > *, .struct > *, .tiers > *, .cards > *, .usecases > * {
  min-width: 0;
}

.hex {
  font: 400 clamp(11px, 1.05vw, 13px)/1.75 var(--mono);
  padding: 18px 16px; color: rgba(245,245,247,.78);
  white-space: pre;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.hex::-webkit-scrollbar { height: 6px; }
.hex::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.hex::-webkit-scrollbar-track { background: transparent; }
.hex .addr { color: rgba(245,245,247,.32); }
.hex .b    { transition: color .18s, background .18s; }
.hex .zero { color: rgba(245,245,247,.24); }
.hex .asc  { color: rgba(245,245,247,.42); }
.hex .sel  { background: rgba(0,208,255,.22); color: #dffaff; border-radius: 2px; }
.hex .hot  { background: rgba(255,176,0,.22); color: #ffe6b0; border-radius: 2px; }

/* ── Paged-read demo ─────────────────────────────────────────────────── */

.demo-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
@media (max-width: 940px) { .demo-grid { grid-template-columns: 1fr; } }

.scrub-wrap { padding: 16px 18px 22px; border-top: 1px solid var(--ink-line); }
.scrub-head { display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--fg-dark-3); margin-bottom: 12px; }
.scrub {
  position: relative; height: 46px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 2px, rgba(255,255,255,.02) 2px 4px);
  border: 1px solid var(--ink-line); cursor: ew-resize; touch-action: none;
}
.scrub-map { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; }
.scrub-map i { position: absolute; top: 0; bottom: 0; background: rgba(0,208,255,.18); }
.scrub-head-mark {
  position: absolute; top: -4px; bottom: -4px; width: 12px; margin-left: -6px;
  border: 1.5px solid var(--accent); border-radius: 6px;
  background: rgba(0,208,255,.14);
  box-shadow: 0 0 22px rgba(0,208,255,.45);
  transition: left .12s linear;
}
.scrub-legend { display: flex; gap: 20px; margin-top: 12px; font: 400 11.5px/1 var(--mono); color: var(--fg-dark-3); flex-wrap: wrap; }
.scrub-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

.readout { display: grid; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: 14px; overflow: hidden; }
.readout div { background: #0b0b0e; padding: 15px 18px; display: flex; justify-content: space-between; gap: 12px; font: 400 12.5px/1.4 var(--mono); }
.readout span:first-child { color: var(--fg-dark-3); }
.readout b { font-weight: 400; color: var(--fg-dark); }
.readout b.good { color: var(--green); }

/* ── Feature rows ────────────────────────────────────────────────────── */

.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: center; }
.row.flip .row-media { order: -1; }
@media (max-width: 940px) { .row, .row.flip .row-media { grid-template-columns: 1fr; order: 0; } }

.feature-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--fg-dark-2); }
.on-light .feature-list li, .on-soft .feature-list li { color: var(--fg-light-2); }
.feature-list li b { color: var(--fg-dark); font-weight: 500; }
.on-light .feature-list li b, .on-soft .feature-list li b { color: var(--fg-light); }
.feature-list .tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.on-light .feature-list .tick, .on-soft .feature-list .tick { color: #0072a3; }

/* ── Structure demo ──────────────────────────────────────────────────── */

.struct { display: grid; grid-template-columns: 250px 1fr; min-height: 300px; }
@media (max-width: 700px) { .struct { grid-template-columns: 1fr; } }
.tree { border-right: 1px solid var(--ink-line); padding: 14px 10px; font: 400 12.5px/1.9 var(--mono); }
@media (max-width: 700px) { .tree { border-right: 0; border-bottom: 1px solid var(--ink-line); } }
.tree button {
  display: flex; width: 100%; gap: 8px; align-items: baseline;
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: rgba(245,245,247,.66);
  padding: 4px 10px; border-radius: 7px; transition: background .16s, color .16s;
}
.tree button:hover { background: rgba(255,255,255,.05); color: var(--fg-dark); }
.tree button.on { background: rgba(0,208,255,.14); color: #cdf4ff; }
.tree button .k { color: var(--fg-dark-3); margin-left: auto; font-size: 11.5px; }
.tree .depth1 { padding-left: 26px; }
.tree .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dark-3); padding: 6px 10px 4px; }

/* ── Collaboration demo ──────────────────────────────────────────────── */

.collab { position: relative; }
.cursors { position: absolute; inset: 0; pointer-events: none; }
.peer-caret {
  position: absolute; width: 2px; height: 20px; border-radius: 2px;
  transition: transform .9s cubic-bezier(.4,.1,.2,1), opacity .4s;
}
.peer-caret::after {
  content: attr(data-name);
  position: absolute; left: 0; top: -20px;
  font: 400 10.5px/1 var(--mono); letter-spacing: .04em;
  padding: 4px 7px; border-radius: 5px 5px 5px 0;
  background: var(--pc, #00d0ff); color: #08080a; white-space: nowrap;
}

/* Hex on the left, the file map beside it, named ranges on the right — the three
   things a shared session actually shows you. */
.collab-body { display: grid; grid-template-columns: auto 54px minmax(280px, 1fr); align-items: stretch; }
@media (max-width: 940px) { .collab-body { grid-template-columns: 1fr; } }
.collab-body .hex { min-width: 0; }

.map {
  position: relative; border-left: 1px solid var(--ink-line); border-right: 1px solid var(--ink-line);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,.015) 2px 5px);
  overflow: hidden;
}
@media (max-width: 940px) { .map { display: none; } }
.map .paged { position: absolute; left: 0; right: 0; background: rgba(0,208,255,.16); }
.map .view {
  position: absolute; left: 3px; right: 3px; height: 46px; border-radius: 5px;
  border: 1.5px solid rgba(0,208,255,.75); background: rgba(0,208,255,.10);
  animation: mapDrift 14s ease-in-out infinite alternate;
}
@keyframes mapDrift { from { top: 16%; } to { top: 58%; } }
.map .who {
  position: absolute; left: 2px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}
@media (prefers-reduced-motion: reduce) { .map .view { animation: none; top: 30%; } }

.annos { border-left: 1px solid var(--ink-line); padding: 14px 16px; min-width: 0; }
.annos .lbl {
  font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dark-3); padding: 4px 2px 12px;
}
.anno { display: flex; gap: 10px; padding: 9px 2px; border-top: 1px solid rgba(255,255,255,.05); }
.anno i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; margin-top: 6px; }
.anno .txt { min-width: 0; }
.anno .rng { font: 400 11.5px/1.5 var(--mono); color: var(--fg-dark-3); }
.anno .nm  { font-size: 13.5px; color: var(--fg-dark); }
.peer-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ink-line); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--ink-line); background: rgba(255,255,255,.03);
  font: 400 12px/1 var(--mono); color: var(--fg-dark-2);
}
.chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; color: #08080a; font-weight: 700; }
.chip .live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Timeline demo ───────────────────────────────────────────────────── */

.tl { padding: 20px 18px 24px; border-top: 1px solid var(--ink-line); }
.tl-track { position: relative; height: 3px; background: var(--ink-line); border-radius: 3px; margin: 34px 8px 0; }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.tl-node {
  position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: #0b0b0e; border: 2px solid var(--ink-line);
  cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tl-node:hover { transform: scale(1.25); }
.tl-node.on { border-color: var(--accent); box-shadow: 0 0 16px rgba(0,208,255,.6); }
.tl-node.done { border-color: rgba(0,208,255,.55); }
.tl-labels { display: flex; justify-content: space-between; margin: 18px 4px 0; font: 400 11px/1.5 var(--mono); color: var(--fg-dark-3); gap: 8px; }
.tl-entry { padding: 16px 18px; border-top: 1px solid var(--ink-line); font: 400 13px/1.6 var(--mono); color: var(--fg-dark-2); min-height: 76px; }
.tl-entry b { color: var(--fg-dark); font-weight: 400; }
.tl-entry .who { color: var(--amber); }

/* ── Cards ───────────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
  border: 1px solid var(--paper-line); border-radius: var(--r);
  padding: 30px 28px; background: var(--paper);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(8,8,10,.4); border-color: rgba(8,8,10,.22); }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg-light-2); }
.card .ic { width: 34px; height: 34px; color: #0072a3; margin-bottom: 18px; display: block; }

.usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 54px; }
@media (max-width: 800px) { .usecases { grid-template-columns: 1fr; } }
.uc {
  border: 1px solid var(--ink-line); border-radius: var(--r); padding: 32px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.uc .who { font: 400 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.uc h3 { margin: 16px 0 12px; font-size: 22px; }
.uc p { margin: 0; color: var(--fg-dark-2); font-size: 15.5px; line-height: 1.6; }

/* ── Tables ──────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; margin-top: 44px; border-radius: var(--r); border: 1px solid var(--paper-line); }
.on-dark .tablewrap { border-color: var(--ink-line); }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
th, td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.on-dark th, .on-dark td { border-bottom-color: var(--ink-line); }
thead th { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-light-3); background: rgba(0,0,0,.02); }
.on-dark thead th { color: var(--fg-dark-3); background: rgba(255,255,255,.025); }
tbody tr:last-child td { border-bottom: 0; }
td.name { font-weight: 500; white-space: nowrap; }
td.us { background: rgba(0,208,255,.06); }
.yes { color: #0a8a3c; font-weight: 500; }
.on-dark .yes { color: var(--green); }
.no  { color: var(--fg-light-3); }
.on-dark .no { color: var(--fg-dark-3); }
.mini { display: block; font-size: 13px; color: var(--fg-light-2); font-weight: 400; margin-top: 5px; }
.on-dark .mini { color: var(--fg-dark-2); }

/* ── Pricing ─────────────────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 54px; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tiers { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--ink-line); border-radius: var(--r); padding: 28px 26px;
  display: flex; flex-direction: column; background: rgba(255,255,255,.02);
}
.tier.feature { border-color: rgba(0,208,255,.45); background: rgba(0,208,255,.05); }
.tier h3 { font-size: 19px; }
.tier .price { margin: 14px 0 4px; font-size: 15px; color: var(--accent); font-family: var(--mono); }
.tier .who2 { font-size: 13.5px; color: var(--fg-dark-3); }
.tier ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.tier li { font-size: 14.5px; line-height: 1.45; color: var(--fg-dark-2); padding-left: 20px; position: relative; }
.tier li::before { content: "·"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }

/* ── CTA ─────────────────────────────────────────────────────────────── */

.cta { text-align: center; overflow: hidden; }
.cta .display { max-width: 16em; margin: 0 auto; }
.cta-glow {
  position: absolute; left: 50%; top: 50%; width: 1100px; height: 620px; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(0,208,255,.16), rgba(0,208,255,0) 62%);
  pointer-events: none;
}
.cta .btn-primary { font-size: 18px; padding: 18px 34px; }
.cta-sub { margin-top: 22px; font: 400 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dark-3); }

/* ── Footer ──────────────────────────────────────────────────────────── */

footer { padding: 74px var(--gut) 54px; border-top: 1px solid var(--ink-line); }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-end; }
.foot-mark svg { width: 132px; color: var(--fg-dark); display: block; }
.foot-mission { margin-top: 14px; font-size: clamp(19px, 2.4vw, 27px); font-weight: 500; letter-spacing: -0.025em; }
.foot-links { display: flex; gap: 30px; flex-wrap: wrap; }
.foot-links a { font-size: 14px; color: var(--fg-dark-2); text-decoration: none; }
.foot-links a:hover { color: var(--fg-dark); }
.foot-note {
  margin: 40px 0 0; max-width: 780px;
  padding-top: 22px; border-top: 1px solid var(--ink-line);
  font-size: 13px; line-height: 1.6; color: var(--fg-dark-3);
}
.foot-note b { color: var(--fg-dark-2); font-weight: 500; }

.foot-bottom { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--fg-dark-3); }

/* ── Misc ────────────────────────────────────────────────────────────── */

.note {
  margin-top: 40px; padding: 22px 26px; border-radius: 14px;
  border: 1px solid var(--ink-line); background: rgba(255,255,255,.025);
  font-size: 15px; color: var(--fg-dark-2); line-height: 1.6;
}
.on-light .note, .on-soft .note { border-color: var(--paper-line); background: rgba(0,0,0,.02); color: var(--fg-light-2); }
.note b { color: var(--fg-dark); font-weight: 500; }
.on-light .note b, .on-soft .note b { color: var(--fg-light); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; align-items: center; font-size: 13px; color: var(--fg-dark-3); }
.on-light .legend, .on-soft .legend { color: var(--fg-light-3); }

/* Hero stream drift — the rows are doubled in JS, so a 50% translation loops seamlessly. */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-stream .stream-row { will-change: transform; }
.tl-node { padding: 0; }