/* ============================================================
   CREWMOOT — neo-brutalist system
   paper / ink / acid accents / hard shadows / no apologies
   ============================================================ */

:root {
  --paper: #f7f1e5;
  --paper-dim: #efe7d7;
  --ink: #141414;
  --ink-soft: #3a3630;
  --yellow: #ffd02f;
  --pink: #ff5ca8;
  --blue: #2f6bff;
  --green: #1fcb7d;
  --orange: #ff7a29;
  --border: 3px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);
  --radius: 0;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  line-height: 1.05;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 3px;
}

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

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -60px; left: 12px;
  z-index: 100;
  background: var(--yellow);
  border: var(--border);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-ghost  { background: var(--paper); color: var(--ink); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; box-shadow: 4px 4px 0 var(--ink); }
.btn-sm:hover { box-shadow: 2px 2px 0 var(--ink); }

/* ---------- stickers ---------- */

.sticker {
  display: inline-block;
  border: var(--border);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.sticker-yellow { background: var(--yellow); }
.sticker-pink   { background: var(--pink); color: var(--ink); }
.sticker-green  { background: var(--green); }
.sticker-ink    { background: var(--ink); color: var(--paper); }
.sticker-paper  { background: var(--paper); color: var(--ink); }
.sticker-sm     { font-size: 0.68rem; padding: 3px 9px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--paper);
  border-bottom: var(--border);
  padding: 14px 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.wordmark-mark {
  width: 26px; height: 26px;
  background: var(--yellow);
  border: var(--border);
  transform: rotate(-6deg);
  transition: transform 0.2s ease;
}
.wordmark:hover .wordmark-mark { transform: rotate(6deg) scale(1.1); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
}
.site-nav a {
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover {
  border-bottom-color: var(--ink);
  background: var(--yellow);
}

.nav-drop { position: relative; display: flex; }
.nav-drop-btn::after { content: " \25BE"; font-size: 0.7em; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 215px;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 6px 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.nav-drop-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop-menu a {
  display: block;
  padding: 9px 16px;
  font-size: 0.86rem;
  border-bottom: none;
}
.nav-drop-menu a:hover { background: var(--yellow); border-bottom: none; }

/* mobile nav */
.nav-toggle, .nav-drawer { display: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--border);
  background:
    linear-gradient(var(--paper) 0 0),
    repeating-linear-gradient(
      to right,
      rgba(20, 20, 20, 0.07) 0 2px,
      transparent 2px 52px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(20, 20, 20, 0.07) 0 2px,
      transparent 2px 52px
    );
  padding: 110px 0 96px;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.hero-inner { position: relative; z-index: 2; min-width: 0; }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.hero-badges .sticker:last-child { transform: rotate(2deg); }

.hero-title {
  font-size: clamp(2.2rem, 7.2vw, 5.6rem);
  text-transform: uppercase;
  max-width: 14ch;
  margin-bottom: 24px;
}

.hl {
  display: inline-block;
  background: var(--yellow);
  border: var(--border);
  padding: 0 0.18em;
  box-shadow: var(--shadow-sm);
  transform: rotate(-1.2deg);
}

.hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 44px;
}

.hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.hero-stats li {
  border: var(--border);
  background: var(--paper);
  padding: 7px 13px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-stats strong { font-size: 0.95rem; }

/* ---------- ticker ---------- */

.ticker {
  overflow: hidden;
  border-bottom: var(--border);
  background: var(--yellow);
  padding: 13px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
}
.ticker-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.ticker-star { margin: 0 18px; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- sections ---------- */

.section { padding: 104px 0; }

.section-head { margin-bottom: 52px; }
.section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  text-transform: uppercase;
}
.section-note {
  font-family: var(--font-mono);
  font-size: 1rem;
  max-width: 44ch;
}

.kicker {
  display: inline-block;
  border: var(--border);
  padding: 6px 14px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.kicker-yellow { background: var(--yellow); }
.kicker-pink   { background: var(--pink); }
.kicker-green  { background: var(--green); }
.kicker-blue   { background: var(--blue); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.kicker-paper  { background: var(--paper); box-shadow: 3px 3px 0 var(--paper-dim); }

.section:has(> .section-head > .kicker-yellow) .section-note,
.section:has(> .section-head > .kicker-pink) .section-note,
.section:has(> .section-head > .kicker-green) .section-note,
.kicker-yellow + h2 + .section-note,
.kicker-pink + h2 + .section-note,
.kicker-green + h2 + .section-note { color: var(--ink); }

/* ---------- pitch ---------- */

.pitch-copy { max-width: 62ch; }
.pitch-copy p { font-size: 1.15rem; }

/* ---------- explainers (fake-UI demos) ---------- */

.xrow {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
  margin-top: 104px;
  margin-bottom: 104px;
}
.xrow:first-child { margin-top: 0; }
.xrow:last-child { margin-bottom: 0; }
.xrow.flip .xdemo { order: -1; }

.xnum {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
  margin-bottom: 12px;
}
.xtext h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.xtext p { font-size: 1.08rem; margin: 0; }

.xdemo {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--paper);
  margin-inline: 10px;
}
.xrow:nth-child(odd) .xdemo { transform: rotate(-0.7deg); }
.xrow:nth-child(even) .xdemo { transform: rotate(0.7deg); }

.demo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  border-bottom: var(--border);
}
.demo-bar span {
  width: 9px; height: 9px;
  border: 2px solid var(--paper);
  background: transparent;
}
.demo-bar span:first-child { background: var(--yellow); border-color: var(--yellow); }

.demo-body { position: relative; padding: 20px 18px; overflow: hidden; }

/* demo 01 — kanban */

.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
}
.bcol {
  border: 2.5px solid var(--ink);
  background: var(--paper-dim);
  min-height: 180px;
  padding: 6px;
}
.bcol h4 {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: 5px;
  margin: 0 0 7px;
}
.bcard {
  border: 2.5px solid var(--ink);
  background: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 6px 7px;
  margin-bottom: 7px;
  line-height: 1.35;
}
.bcard.dim { background: var(--paper); opacity: 0.75; }
.bcard.done { background: var(--green); opacity: 1; }

.bdock {
  border: 1.5px dashed var(--ink-soft);
  border-radius: 2px;
  min-height: 88px;
  margin-bottom: 7px;
  opacity: 0.55;
  background: transparent;
}
.mover {
  background: var(--yellow);
  font-size: 0.66rem;
}
/* flight is scoped to the demo board so the static .bcard.mover inside the
   board-inset mock (for-developers) stays in normal flow */
.demo-board-wrap .mover {
  position: absolute;
  top: 40px;
  left: 1.5%;
  width: 17.5%;
  z-index: 2;
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 1;
  animation: boardRun 11s infinite;
}
.mover-sub { display: block; font-weight: 400; font-size: 0.56rem; }
@keyframes boardRun {
  0%   { left: 1.5%; opacity: 0; transform: scale(0.92); }
  4%   { opacity: 1; transform: scale(1); }
  13%  { left: 1.5%; transform: scale(1); }
  15%  { transform: scale(1.1); }
  17%  { transform: scale(1); }
  24%  { left: 21.5%; transform: scale(1) rotate(1.5deg); opacity: 0.9; }
  26%  { transform: scale(1.1); }
  28%  { transform: scale(1); }
  36%  { left: 21.5%; }
  42%  { left: 41.5%; transform: scale(1) rotate(1.5deg); opacity: 0.9; }
  44%  { transform: scale(1.1) rotate(-2deg); }
  47%  { transform: scale(1) rotate(1.5deg); }
  50%  { transform: scale(1) rotate(0deg); }
  58%  { left: 41.5%; }
  64%  { left: 61.5%; transform: scale(1) rotate(1.5deg); opacity: 0.9; }
  66%  { transform: scale(1.1); }
  68%  { transform: scale(1); }
  76%  { left: 61.5%; background: var(--yellow); }
  82%  { left: 81.5%; background: var(--green); transform: scale(1) rotate(1.5deg); opacity: 0.9; }
  84%  { transform: scale(1.12); }
  86%  { transform: scale(1); }
  96%  { opacity: 1; }
  100% { left: 81.5%; opacity: 0; }
}

/* demo 02 — night shift console */

.demo-hb-wrap { text-align: left; }

.hb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.hb-clock {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.hb-ampm { font-size: 1rem; }
.hb-night { background: var(--ink); color: var(--paper); }

.ekg { width: 100%; height: 46px; margin-bottom: 12px; }
.ekg polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 70 370;
  animation: ekgRun 3s linear infinite;
}
@keyframes ekgRun {
  from { stroke-dashoffset: 440; }
  to   { stroke-dashoffset: 0; }
}

.hb-log { min-height: 66px; }
.hb-line {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 0;
  opacity: 1;
}
.log1 { animation: log1 12s infinite; }
.log2 { animation: log2 12s infinite; }
.log3 { animation: log3 12s infinite; }
@keyframes log1 {
  0% { opacity: 0; transform: translateX(-8px); }
  4%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes log2 {
  0%, 30% { opacity: 0; transform: translateX(-8px); }
  34%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes log3 {
  0%, 60% { opacity: 0; transform: translateX(-8px); }
  64%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.hb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hb-chip {
  border: 2.5px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  padding: 4px 9px;
  background: var(--paper);
}
.hb-chip.hb-ok { background: var(--green); }

/* demo 03 — org / hiring */

.demo-org-wrap { text-align: center; padding-block: 26px; }

.boss {
  display: inline-block;
  border: var(--border);
  background: var(--yellow);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 9px 16px;
  box-shadow: var(--shadow-sm);
}
.org-line {
  width: 3px;
  height: 18px;
  background: var(--ink);
  margin: 8px auto;
}
.org-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.worker {
  border: 2.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  padding: 6px 9px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: spawn 10s infinite;
  animation-delay: var(--d);
  opacity: 1;
  transform: rotate(var(--r));
}
.worker strong { display: block; font-size: 0.62rem; margin-bottom: 2px; }
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; }
.worker.hiring {
  border-style: dashed;
  background: var(--paper);
  animation: hiringBlink 10s infinite;
}
.worker.hired {
  background: var(--blue);
  color: var(--paper);
  animation: hiredPop 10s infinite;
  transform: scale(0);
  opacity: 0;
}
@keyframes hiringBlink {
  0%, 4%   { opacity: 0; }
  8%, 16%  { opacity: 1; }
  20%, 28% { opacity: 0.35; }
  32%, 42% { opacity: 1; }
  46%, 96% { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes hiredPop {
  0%, 44%  { transform: scale(0) rotate(-8deg); opacity: 0; }
  48%      { transform: scale(1.15) rotate(3deg); opacity: 1; }
  52%, 92% { transform: scale(1) rotate(var(--r)); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(6deg); opacity: 0; }
}
@keyframes spawn {
  0%, 9%  { transform: scale(0) rotate(-10deg); opacity: 0; }
  13%, 90% { transform: scale(1) rotate(var(--r)); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(6deg); opacity: 0; }
}
@keyframes blink { 50% { opacity: 0.35; } }

/* demo 04 — model failover */

.demo-chain-wrap { text-align: center; padding-block: 26px 20px; }

.chain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.model {
  position: relative;
  border: var(--border);
  background: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.66rem;
  padding: 10px 12px;
  box-shadow: 4px 4px 0 var(--ink);
}
.model .tag {
  display: block;
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-top: 3px;
  opacity: 0.7;
}
.model .strike {
  position: absolute;
  left: -5px; right: -5px;
  top: 50%;
  height: 3.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.model .bench {
  position: absolute;
  top: -13px; right: -10px;
  background: var(--pink);
  border: 2.5px solid var(--ink);
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px 6px;
  opacity: 0;
}

.m1 { animation: m1 12s infinite; }
@keyframes m1 {
  0%, 22%  { opacity: 1; }
  22%, 24% { transform: translateX(-2px); }
  24%, 26% { transform: translateX(3px); }
  26%, 28% { transform: translateX(-3px); }
  28%, 30% { transform: translateX(2px); }
  30%, 32% { transform: translateX(0); }
  36%, 70% { opacity: 0.35; }
  70%      { opacity: 0.35; }
  76%, 100% { opacity: 1; }
}
.m1 .strike { animation: strikeIn 12s infinite; }
.m1 .bench { animation: benchIn 12s infinite; }
@keyframes strikeIn {
  0%, 32% { transform: scaleX(0); }
  38%, 70% { transform: scaleX(1); }
  76%, 100% { transform: scaleX(0); }
}
@keyframes benchIn {
  0%, 33% { opacity: 0; }
  38%, 70% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

.m2 { animation: m2 12s infinite; }
@keyframes m2 {
  0%, 32% { background: var(--paper); opacity: 0.6; }
  38%, 70% { background: var(--green); opacity: 1; }
  76%, 100% { background: var(--paper); opacity: 0.6; }
}

.arrow {
  font-size: 1.3rem;
  font-weight: 800;
  opacity: 0.35;
}
.arrow.a1 { animation: a1 12s infinite; }
@keyframes a1 {
  0%, 32% { opacity: 0.35; }
  38%, 70% { opacity: 1; color: var(--green); }
  76%, 100% { opacity: 0.35; color: inherit; }
}

.chain-task {
  margin-top: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cursor { animation: blink 1s steps(2) infinite; margin-left: 4px; }

/* demo 05 — inbox + push */

.demo-inbox-wrap { min-height: 186px; }

.imail {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  padding: 9px 12px;
  margin-bottom: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 1;
}
.imail .from {
  flex: none;
  width: 44px;
  font-size: 0.58rem;
  font-weight: 700;
  border: 2px solid var(--ink);
  background: var(--paper-dim);
  padding: 2px 4px;
  text-align: center;
}
.imail .subj { font-size: 0.74rem; font-weight: 500; }
.imail.needs { background: var(--pink); }
.imail.needs .from { background: var(--ink); color: var(--paper); }

.mail1 { animation: mail1 12s infinite; }
.mail2 { animation: mail2 12s infinite; }
.mail3 { animation: mail3 12s infinite; }
@keyframes mail1 {
  0% { opacity: 0; transform: translateY(-10px); }
  4%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes mail2 {
  0%, 15% { opacity: 0; transform: translateY(-10px); }
  19%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes mail3 {
  0%, 33% { opacity: 0; transform: translateY(-10px); }
  37%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.mail4 { animation: mail4 12s infinite; }
@keyframes mail4 {
  0%, 52% { opacity: 0; transform: translateY(-10px); }
  56%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* internal mail thread */

.thr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  padding: 9px 12px;
  margin-bottom: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 1;
}
.thr-from, .thr-to {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  border: 2px solid var(--ink);
  padding: 2px 5px;
  background: var(--paper-dim);
}
.thr-to { background: var(--yellow); }
.thr-arrow { font-weight: 800; font-size: 0.8rem; }
.thr-subj { font-size: 0.72rem; font-weight: 500; }
.thr-row.its-official .thr-subj { font-weight: 700; }
.thr-row.its-official { background: var(--green); }

.toast {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: var(--border);
  background: var(--yellow);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 8px 11px;
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 0;
  animation: toastIn 12s infinite;
}
@keyframes toastIn {
  0%, 52% { opacity: 0; transform: translateY(12px); }
  56%, 88% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(12px); }
}

/* demo 06 — org tree 1 > 3 > 9 */

.section-deep {
  background: var(--paper-dim);
  border-top: var(--border);
  border-bottom: var(--border);
}

.demo-tree-wrap { text-align: center; }

.tree-counts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tcount {
  border: 2.5px solid var(--ink);
  background: var(--paper);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 3px 8px;
}
.tc1 { animation: cntFlash 12s infinite; }
.tc2 { animation: cntFlash 12s infinite 1s; }
.tc3 { animation: cntFlash 12s infinite 2s; }
@keyframes cntFlash {
  0%, 6% { background: var(--paper); }
  10%, 22% { background: var(--yellow); }
  28%, 100% { background: var(--paper); }
}

.tree { display: inline-block; }

.org-line { width: 3px; height: 16px; background: var(--ink); margin: 8px auto; }
.org-line.sm { height: 10px; margin: 6px auto; }

.tree-specs {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
}

.spec-tasks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.task-chip {
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  box-shadow: 2px 2px 0 var(--ink);
  animation: taskPop 12s infinite;
  animation-delay: var(--d);
  opacity: 1;
}
.task-chip.done { background: var(--green); }
@keyframes taskPop {
  0%, 8% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.12); opacity: 1; }
  14%, 92% { transform: scale(1); opacity: 1; }
  96%, 100% { transform: scale(0); opacity: 0; }
}

/* demo 07 — self-training */

.demo-learn-wrap { position: relative; }

.learn-say {
  border: 2.5px solid var(--ink);
  background: var(--paper-dim);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.learn-head {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.learn-level {
  border: 2.5px solid var(--ink);
  background: var(--yellow);
  padding: 2px 8px;
}

.learn-track {
  height: 14px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  margin-bottom: 14px;
}
.learn-fill {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: left;
  animation: learnFill 12s infinite;
  transform: scaleX(0);
}
@keyframes learnFill {
  0% { transform: scaleX(0); }
  92%, 96% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

.learn-notes { margin-bottom: 10px; }
.lnote {
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  padding: 2px 0;
}
.lnote.n1 { animation: memtype1 12s infinite; }
.lnote.n2 { animation: memtype2 12s infinite; }
.lnote.n3 { animation: memtype3 12s infinite; }
@keyframes memtype1 {
  0% { max-width: 0; }
  26%, 94% { max-width: 100%; }
  100% { max-width: 0; }
}
@keyframes memtype2 {
  0%, 22% { max-width: 0; }
  48%, 94% { max-width: 100%; }
  100% { max-width: 0; }
}
@keyframes memtype3 {
  0%, 44% { max-width: 0; }
  70%, 94% { max-width: 100%; }
  100% { max-width: 0; }
}

.learn-swarm {
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0;
  animation: memgrow 12s infinite;
}
@keyframes memgrow {
  0%, 74% { opacity: 0; }
  80%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

.learn-stamp {
  position: absolute;
  right: 14px;
  top: 12px;
  transform: rotate(8deg) scale(0);
  animation: stampIn 12s infinite;
}
@keyframes stampIn {
  0%, 74% { transform: rotate(8deg) scale(0); opacity: 0; }
  78% { transform: rotate(8deg) scale(1.2); opacity: 1; }
  81%, 94% { transform: rotate(8deg) scale(1); opacity: 1; }
  98%, 100% { transform: rotate(8deg) scale(0); opacity: 0; }
}

/* demo 07 — automations */

.demo-cron-wrap { padding-block: 24px 20px; }

.cron {
  display: grid;
  grid-template-columns: 96px 1fr 70px 56px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cron-when {
  border: 2.5px solid var(--ink);
  background: var(--yellow);
  font-size: 0.56rem;
  font-weight: 700;
  padding: 5px 7px;
  text-align: center;
}
.cron-what { font-size: 0.8rem; font-weight: 500; }
.cron-track {
  height: 12px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
}
.cron-fill {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(0);
}
.cron-ran {
  font-size: 0.56rem;
  font-weight: 700;
  border: 2.5px solid var(--ink);
  background: var(--green);
  padding: 4px 6px;
  text-align: center;
  opacity: 0;
}

.c1 .cron-fill { animation: cronFill1 12s infinite; }
.c2 .cron-fill { animation: cronFill2 12s infinite; }
.c3 .cron-fill { animation: cronFill3 12s infinite; }
.c1 .cron-ran { animation: cronRan1 12s infinite; }
.c2 .cron-ran { animation: cronRan2 12s infinite; }
.c3 .cron-ran { animation: cronRan3 12s infinite; }

@keyframes cronFill1 {
  0% { transform: scaleX(0); }
  26%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes cronFill2 {
  0%, 33% { transform: scaleX(0); }
  59%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes cronFill3 {
  0%, 66% { transform: scaleX(0); }
  92%, 96% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes cronRan1 {
  0%, 25% { opacity: 0; transform: scale(0.7); }
  28% { opacity: 1; transform: scale(1.08); }
  31%, 92% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; }
}
@keyframes cronRan2 {
  0%, 58% { opacity: 0; transform: scale(0.7); }
  61% { opacity: 1; transform: scale(1.08); }
  64%, 92% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; }
}
@keyframes cronRan3 {
  0%, 91% { opacity: 0; transform: scale(0.7); }
  94% { opacity: 1; transform: scale(1.08); }
  97%, 100% { opacity: 1; transform: scale(1); }
}

.cron-new {
  font-size: 0.62rem;
  font-weight: 700;
  border: 2.5px dashed var(--ink);
  padding: 8px 12px;
  text-align: center;
  animation: blink 1.6s steps(2) infinite;
}

/* demo 08 — toolbox */

.demo-tools-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
}

.chipgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}
.chipx {
  border: 2.5px solid var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 11px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: chipPop 9s infinite;
  animation-delay: calc(var(--i) * 0.16s);
  opacity: 1;
}
@keyframes chipPop {
  0%, 3% { transform: scale(0) rotate(-6deg); opacity: 0; }
  7% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  9% { transform: scale(1) rotate(0deg); }
  93% { opacity: 1; }
  97%, 100% { transform: scale(0); opacity: 0; }
}

.phonewrap { position: relative; width: 92px; height: 150px; }
.phone {
  position: absolute;
  inset: 0;
  border: var(--border);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  border-radius: 10px;
}
.phone-notch {
  width: 34px;
  height: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  margin: 8px auto 0;
}
.phone-badge {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border: 2.5px solid var(--ink);
  background: var(--pink);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}
.phone-line {
  position: absolute;
  top: 58%;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ring {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 44px; height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.9;
}
.ring.r1 { animation: ringPulse 2.6s ease-out infinite; }
.ring.r2 { animation: ringPulse 2.6s ease-out 1.3s infinite; }
@keyframes ringPulse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.tree .worker { animation: specPop 12s infinite; animation-delay: var(--d); }
@keyframes specPop {
  0%, 4% { transform: scale(0) rotate(-8deg); opacity: 0; }
  8% { transform: scale(1.1) rotate(var(--r)); opacity: 1; }
  10%, 92% { transform: scale(1) rotate(var(--r)); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(6deg); opacity: 0; }
}

/* ---------- flow demo ---------- */

.flow {
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  align-items: stretch;
}

.fstep {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  padding: 12px;
  min-height: 74px;
}
.fstep strong {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}
.fstep p { font-size: 0.68rem; margin: 2px 0 0; }

.fnum {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  background: var(--paper-dim);
  font-size: 0.8rem;
  font-weight: 700;
}

.f1 { animation: fAct1 12s infinite; }
.f2 { animation: fAct2 12s infinite; }
.f3 { animation: fAct3 12s infinite; }
@keyframes fAct1 {
  0%, 24% { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
  28%, 100% { background: var(--paper); box-shadow: none; }
}
@keyframes fAct2 {
  0%, 32% { background: var(--paper); box-shadow: none; }
  36%, 58% { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
  62%, 100% { background: var(--paper); box-shadow: none; }
}
@keyframes fAct3 {
  0%, 64% { background: var(--paper); box-shadow: none; }
  68%, 94% { background: var(--green); box-shadow: 4px 4px 0 var(--ink); }
  98%, 100% { background: var(--paper); box-shadow: none; }
}

.fconn {
  align-self: center;
  height: 4px;
  margin-inline: 4px;
  background: var(--paper-dim);
  position: relative;
  overflow: hidden;
}
.fconn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.fc1::after { animation: connFill 12s infinite; }
.fc2::after { animation: connFill2 12s infinite; }
@keyframes connFill {
  0%, 24% { transform: scaleX(0); }
  32%, 100% { transform: scaleX(1); }
}
@keyframes connFill2 {
  0%, 58% { transform: scaleX(0); }
  66%, 100% { transform: scaleX(1); }
}

/* ---------- use-case cards ---------- */

.uc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.uc-card {
  display: block;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--paper);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.uc-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}

.uc-bar {
  border-bottom: var(--border);
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.uc-dev   { background: var(--yellow); }
.uc-sales { background: var(--pink); }
.uc-mkt   { background: var(--green); }
.uc-cs    { background: var(--orange); }

.uc-card p { padding: 16px 18px 0; font-size: 1rem; }
.uc-link {
  display: block;
  padding: 14px 18px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.uc-card:hover .uc-link { text-decoration: underline; }

/* ---------- pricing ---------- */

.hero.compact { min-height: 0; padding: 76px 0 68px; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.price-card {
  position: relative;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.price-hot { background: var(--yellow); transform: rotate(-1deg); }
.price-flag { position: absolute; top: -16px; right: 14px; }

.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: var(--border);
  padding: 15px 18px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.price-oss   { background: var(--paper-dim); }
.price-cloud { background: var(--ink); color: var(--paper); }
.price-byok  { background: var(--paper-dim); }

.price-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 58px);
  padding: 22px 20px;
}
.price-body .price-cta { margin-top: auto; }

.price-num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.price-num span { font-size: 1.2rem; }
.price-plus { font-size: 0.9rem; font-weight: 700; margin-left: 8px; }

.price-note { font-size: 0.66rem; margin: 8px 0 16px; }

.price-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 700;
}
.price-list li { padding: 4px 0; }

.price-warn {
  font-size: 0.85rem;
  border: 2.5px dashed var(--ink);
  padding: 10px 12px;
  margin-bottom: 20px;
}

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

.price-foot {
  text-align: center;
  margin-top: 44px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------- cta band / plan pick ---------- */

.cta-box {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--yellow);
  padding: 52px 28px;
  text-align: center;
}
.cta-box h2 { text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 20px; }

.plan-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 0.8rem;
  font-weight: 700;
}

.steps-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- feature pages ---------- */

.uc-feat1 { background: var(--green); }
.uc-feat2 { background: var(--pink); }
.uc-feat3 { background: var(--yellow); }
.uc-feat4 { background: var(--blue); color: var(--paper); }
.uc-feat5 { background: var(--orange); }
.uc-feat6 { background: var(--paper-dim); }

.xmore {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.xmore:hover { background: var(--yellow); }

.specbox {
  max-width: 640px;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.specbar {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 9px 16px;
  border-bottom: var(--border);
}
.speclist {
  list-style: none;
  margin: 0;
  padding: 14px 20px;
  font-size: 0.78rem;
  font-weight: 700;
}
.speclist li { padding: 6px 0; }
.speclist li::before { content: ""; }

.crosslink {
  margin-top: 22px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.crosslink a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.crosslink a:hover { background: var(--yellow); }

/* watchdog demo */

.demo-wd-wrap { position: relative; padding-block: 34px 28px; }

.wd-stack { position: relative; min-height: 30px; }
.wd-line {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 0;
  opacity: 0;
}
.wd-ok  { color: var(--ink); }
.wd-bad { color: var(--ink); }
.wd-fix { opacity: 0; }

.wd-ok  { animation: wdOk 9s infinite; }
.wd-bad { animation: wdBad 9s infinite; }
.wd-fix { animation: wdFix 9s infinite; }
@keyframes wdOk {
  0%, 4% { opacity: 1; }
  26%, 100% { opacity: 0; }
  78%, 96% { opacity: 1; }
}
@keyframes wdBad {
  0%, 28% { opacity: 0; }
  32%, 52% { opacity: 1; transform: translateX(0); }
  36% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  44% { transform: translateX(-2px); }
  48% { transform: translateX(0); }
  56%, 100% { opacity: 0; }
}
@keyframes wdFix {
  0%, 52% { opacity: 0; }
  56%, 74% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

.wd-stamp {
  position: absolute;
  right: 14px;
  top: 12px;
  transform: rotate(6deg) scale(0);
  animation: wdStamp 9s infinite;
}
@keyframes wdStamp {
  0%, 70% { transform: rotate(6deg) scale(0); opacity: 0; }
  74% { transform: rotate(6deg) scale(1.2); opacity: 1; }
  77%, 95% { transform: rotate(6deg) scale(1); opacity: 1; }
  99%, 100% { transform: rotate(6deg) scale(0); opacity: 0; }
}

/* phone demo standalone */
.demo-phone-wrap { display: grid; place-items: center; padding-block: 30px; }

/* three roles */

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 34px;
}

.role-card {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.role-bar {
  border-bottom: var(--border);
  padding: 13px 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.role-card[data-accent="yellow"] .role-bar { background: var(--yellow); }
.role-card[data-accent="pink"]   .role-bar { background: var(--pink); }
.role-card[data-accent="orange"] .role-bar { background: var(--orange); }

.role-tag {
  padding: 14px 16px 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.role-tag strong { background: var(--yellow); border: 2px solid var(--ink); padding: 0 4px; }
.role-copy { padding: 10px 16px 4px; font-size: 0.95rem; }

.role-mini {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 16px 18px;
}
.role-mini .task-chip { animation-delay: var(--d); align-self: flex-start; }

.flipwrap { display: grid; }
.flipwrap > * { grid-area: 1 / 1; }
.flip-a { animation: flipA 6s infinite; }
.flip-b { animation: flipB 6s infinite; opacity: 0; }
@keyframes flipA {
  0%, 44% { opacity: 1; transform: scale(1); }
  48%, 96% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; }
}
@keyframes flipB {
  0%, 44% { opacity: 0; transform: scale(0.9); }
  48% { opacity: 1; transform: scale(1.1); }
  52%, 96% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

.role-shared {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- benchmarks ---------- */

.section-ink {
  background: var(--ink);
  color: var(--paper);
  border-top: var(--border);
  border-bottom: var(--border);
}
.section-ink .section-head-paper h2 { color: var(--paper); }
.section-ink .section-note { color: var(--paper-dim); }

.bench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.bench-card {
  position: relative;
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 34px 26px 40px;
  text-align: center;
  transition: transform 0.12s ease;
}
.bench-card:nth-child(1) { transform: rotate(-1.2deg); }
.bench-card:nth-child(2) { transform: rotate(0.8deg); }
.bench-card:nth-child(3) { transform: rotate(-0.6deg); }
.bench-card:hover { transform: rotate(0deg) translateY(-4px); }

.bench-num {
  font-size: clamp(3.6rem, 6.5vw, 5.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bench-num .bench-unit { font-size: 0.55em; }

.bench-card[data-accent="yellow"] .bench-num { color: var(--yellow); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.bench-card[data-accent="pink"]   .bench-num { color: var(--pink);   -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.bench-card[data-accent="green"]  .bench-num { color: var(--green);  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }

.bench-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin: 10px 0 18px;
}

.bench-card .sticker { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.bench-card:nth-child(2) .sticker { transform: translateX(-50%) rotate(2.5deg); }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.step {
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 24px 20px 28px;
  position: relative;
}
.step:nth-child(2) { transform: rotate(0.8deg); }
.step:nth-child(4) { transform: rotate(-0.8deg); }

.step-num {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
  margin-bottom: 14px;
  transition: color 0.15s ease;
}
.step:hover .step-num { color: var(--yellow); }

.step h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.step p { font-size: 0.98rem; margin: 0; }

.step-arrow {
  border: none;
  box-shadow: none;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  font-size: 2.4rem;
  font-weight: 800;
  padding: 0;
}
.step-arrow a {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.step-arrow a:hover { background: var(--yellow); }

/* ---------- waitlist ---------- */

#waitlist { padding-top: 40px; scroll-margin-top: 96px; }

.waitlist {
  border: var(--border);
  box-shadow: 12px 12px 0 var(--ink);
  background: var(--yellow);
  padding: 64px 28px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.waitlist::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(20, 20, 20, 0.45);
  pointer-events: none;
}

.waitlist .sticker { margin-bottom: 20px; }
.waitlist h2 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  text-transform: uppercase;
}
.waitlist-head { position: relative; }
.waitlist-head p {
  font-family: var(--font-mono);
  max-width: 40ch;
  margin: 0 auto 30px;
}

.waitlist-form {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  max-width: 540px;
  margin: 0 auto;
}
.waitlist-form input {
  flex: 1;
  min-width: 0;
  border: var(--border);
  box-shadow: inset 4px 4px 0 rgba(20, 20, 20, 0.18);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
}
.waitlist-form[hidden] { display: none; }

.persona-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 26px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.persona-chips { display: flex; gap: 10px; }
.persona-chip {
  border: var(--border);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transform: rotate(-0.6deg);
}
.persona-chip:last-child { transform: rotate(0.6deg); }
.persona-chip.is-on { background: var(--yellow); }
.persona-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.waitlist-form input::placeholder { color: rgba(20, 20, 20, 0.5); }

.waitlist-success, .waitlist-error {
  position: relative;
  font-weight: 700;
  max-width: 46ch;
  margin: 22px auto 0;
}
.waitlist-error { color: var(--ink); background: var(--pink); border: var(--border); padding: 10px 16px; font-size: 0.9rem; }

/* ---------- persona chooser ---------- */

.persona-chooser {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 20, 20, 0.72);
}
.js .persona-chooser.is-open { display: flex; }

.pc-panel {
  background: var(--paper);
  border: var(--border);
  box-shadow: 12px 12px 0 var(--ink);
  padding: 44px 32px 28px;
  max-width: 720px;
  width: 100%;
  text-align: center;
}
.pc-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  margin: 18px 0 0;
}

.pc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 26px 0 20px;
}
.pc-card {
  display: block;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--paper);
  padding: 36px 20px;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pc-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.pc-build { background: var(--yellow); }
.pc-run { background: var(--pink); }
.pc-card strong {
  display: block;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 10px;
}
.pc-card span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pc-skip {
  width: 100%;
  border: var(--border);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper-dim);
  color: var(--ink);
  padding: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pc-skip:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 64px 24px 40px;
  overflow: hidden;
}

.footer-word {
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(247, 241, 229, 0.28);
  user-select: none;
  margin-bottom: 40px;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  border-top: 2px solid rgba(247, 241, 229, 0.25);
  padding-top: 24px;
  font-size: 0.9rem;
}
.footer-meta p { margin: 0; }
.footer-meta a { color: var(--paper); }
.footer-meta .mono { color: rgba(247, 241, 229, 0.65); font-size: 0.8rem; }

/* ---------- reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

.js .step.reveal.in:nth-child(2) { transform: rotate(0.8deg); }
.js .step.reveal.in:nth-child(4) { transform: rotate(-0.8deg); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .bench-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps-3 { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .xrow { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; margin-bottom: 80px; }
  .xrow.flip .xdemo { order: 0; }
  .demo-org2-wrap { grid-template-columns: 1fr; }
  .demo-tools-wrap { grid-template-columns: 1fr; justify-items: center; }
  .cron { grid-template-columns: 84px 1fr 48px; }
  .cron-track { display: none; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .price-hot { transform: none; }
  .roles-grid { grid-template-columns: 1fr; }
  .role-mini { align-items: flex-start; }
}

@media (max-width: 1080px) and (min-width: 721px) {
  .site-header { gap: 16px; }
  .site-nav { gap: 12px; font-size: 0.84rem; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: var(--border);
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 24px; height: 3px; background: var(--ink); }
  .nav-toggle:hover { background: var(--yellow); }
  .nav-toggle:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
  .nav-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    background: var(--paper);
    border-bottom: var(--border);
    box-shadow: var(--shadow-sm);
  }
  .nav-drawer.is-open { display: block; }
  .nav-drawer a {
    display: block;
    min-height: 44px;
    padding: 12px clamp(16px, 5vw, 24px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 2px solid var(--ink);
  }
  .nav-drawer a:hover { background: var(--yellow); }
  .nav-drawer a:focus-visible { outline: 3px dashed var(--ink); outline-offset: -3px; }
  .nav-drawer .nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px clamp(16px, 5vw, 24px);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    list-style: none;
    cursor: pointer;
    border-bottom: 2px solid var(--ink);
  }
  .nav-drawer .nav-label::-webkit-details-marker { display: none; }
  .nav-drawer .nav-label::after { content: "+"; font-size: 0.9rem; color: var(--ink); }
  .nav-group[open] .nav-label::after { content: "\2013"; }
  .nav-group[open] .nav-label { color: var(--ink); }
  .nav-drawer .nav-label:focus-visible { outline: 3px dashed var(--ink); outline-offset: -3px; }
  .nav-drawer .nav-group a {
    font-size: 0.78rem;
    color: var(--ink-soft);
    padding-left: calc(clamp(16px, 5vw, 24px) + 16px);
  }
  .nav-drawer .nav-drawer-cta { background: var(--yellow); }
}

@media (max-width: 720px) {
  .site-header { padding: 14px clamp(16px, 5vw, 24px); }
  .container { padding-inline: clamp(16px, 5vw, 24px); }
  .site-footer { padding-left: clamp(16px, 5vw, 24px); padding-right: clamp(16px, 5vw, 24px); }
  .section { padding: 72px 0; }
  .hero { padding: 64px 0; min-height: 0; }
  .steps { grid-template-columns: 1fr; }
  .board { gap: 4px; }
  .bcol { min-height: 128px; padding: 4px; }
  .bcard { font-size: 0.44rem; padding: 4px; }
  .mover { font-size: 0.44rem; }
  .demo-board-wrap .mover { top: 36px; }
  .bdock { min-height: 66px; }
  .mover-sub { font-size: 0.38rem; }
  .hb-clock { font-size: 1.8rem; }
  .waitlist-form { flex-direction: column; }
  .footer-meta { flex-direction: column; }
  .uc-grid { grid-template-columns: 1fr; }
  .pc-cards { grid-template-columns: 1fr; gap: 14px; }
  .pc-panel { padding: 30px 18px 20px; }
  .tree-specs { gap: 8px; }
  .flow { grid-template-columns: 1fr; }
  .fconn { width: 4px; height: 22px; margin: 6px auto; }
  .fconn::after { transform: scaleY(0); transform-origin: top; }
  .fc1::after { animation-name: connFillV; }
  .fc2::after { animation-name: connFill2V; }
  @keyframes connFillV {
    0%, 24% { transform: scaleY(0); }
    32%, 100% { transform: scaleY(1); }
  }
  @keyframes connFill2V {
    0%, 58% { transform: scaleY(0); }
    66%, 100% { transform: scaleY(1); }
  }
}

@media (max-width: 480px) {
  .container,
  .site-header,
  .site-footer,
  .nav-drawer a,
  .nav-drawer .nav-label {
    padding-left: max(20px, 5vw);
    padding-right: max(20px, 5vw);
  }
  /* ponytail: board min-content (~292px) overflows 280px container below ~420px;
     .demo-body overflow:hidden clips it instead of scrolling the whole page */
  .xdemo { min-width: 0; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .bench-card, .pc-card, .pc-skip { transition: none; }
  .ticker:hover .ticker-track { animation-play-state: running; }
  .xdemo *, .xdemo { animation: none !important; }
  .role-mini *, .flipwrap * { animation: none !important; }
  .flip-a, .flip-b, .mover, .ring, .cursor { animation: none !important; }
  .flip-b { opacity: 1; }
  .m1 { opacity: 1; }
  .m2 { opacity: 1; }
  .toast { opacity: 1; }
}

/* ---------- integrations: the wall (app-store density) ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: start;
}
.wall-group {
  border: 2.5px solid var(--ink);
  background: var(--paper-dim);
  padding: 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.wall-group h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  border-bottom: 2.5px solid var(--ink);
  padding: 6px 0;
  margin: 0 0 8px;
  width: 100%;
}
.wg-msg h4, .wg-social h4   { background: var(--pink); }
.wg-code h4, .wg-mkt h4     { background: var(--blue); color: var(--paper); }
.wg-data h4, .wg-web h4     { background: var(--green); }
.wg-ai h4, .wg-prod h4      { background: var(--yellow); }
.wg-sales h4, .wg-ops h4    { background: var(--orange); }
.wall .chipx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--ink-soft);
  box-shadow: none;
  padding: 6px 4px;
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: none;
  transition: none;
}
.wall .chipx:hover { background: var(--paper); }
.wg-chips { display: contents; }
.wall .chipx svg {
  width: 12px;
  height: 12px;
  fill: var(--ink);
  flex: none;
}

/* integrations: recipes */

.recipes .uc-card { position: relative; }
.recipes { grid-template-columns: repeat(3, 1fr); }
.uc-flag {
  position: absolute;
  top: -15px;
  right: 16px;
  transform: rotate(3deg);
  z-index: 1;
}
.recipe-steps {
  font-size: 0.72rem !important;
  line-height: 1.9;
}
.phone-inset { max-width: 360px; margin: 32px auto 0; padding: 14px; background: var(--paper); border: var(--border); }
.phone-inset img { display: block; width: 100%; height: auto; }
.phone-inset figcaption { margin-top: 10px; font-size: 0.72rem; color: var(--ink); text-align: center; }
/* phone-inset hosting a CSS board mock instead of a screenshot */
.phone-inset.board-inset { padding: 0; }
.board-inset .demo-body { text-align: left; }

/* for-developers: side-by-side rows */
.spec-row {
  display: flex;
  gap: 40px;
  align-items: center;
}
.spec-row .specbox { flex: 0 1 60%; }
.spec-row .crosslink { margin-top: 0; }

.hiw-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 32px;
  margin-bottom: 104px;
}
.hiw-row .specbox { flex: 1; }
.hiw-row .phone-inset {
  max-width: none;
  width: 50%;
  flex: none;
  margin: 0;
}

@media (max-width: 900px) {
  .spec-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .spec-row .crosslink { margin-top: 22px; }
  .hiw-row { flex-direction: column; margin-bottom: 80px; }
  .hiw-row .phone-inset { width: 100%; max-width: 480px; margin: 32px auto 0; }
}

@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .wall { grid-template-columns: repeat(2, 1fr); }
  .recipes { grid-template-columns: 1fr; }
  .recipes .uc-card { margin-top: 12px; }
}

/* about page */
.sticker-blue { background: var(--blue); color: var(--paper); }
.step .sticker { display: block; width: fit-content; margin-bottom: 10px; }
@media (min-width: 961px) {
  .about-steps { grid-template-columns: repeat(3, 1fr); }
}

/* mcp demo */
.demo-mcp-wrap { display: grid; gap: 14px; }
.demo-mcp-wrap .hb-chip { justify-self: center; }
.mcp-term {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  font-size: 0.72rem;
  line-height: 1.7;
}
.mcp-term .tl { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-term .ok { color: var(--green); }
.mcp-board { grid-template-columns: repeat(3, 1fr); }
.mcp-board .bcol { min-height: 0; }