/* Scaffold marketing site.

   Built on DESIGN.md (Saniti-design-analysis) with the deviations recorded in
   that file's "Scaffold adaptation" section: a locked light theme, the licensed
   TWK Lausanne family, and system mono for labels.

   Structure borrows ramp.com's sectioning strategy rather than its look. The
   page is one continuous surface. Chapters open with a centered heading and
   generous space; feature rows beneath them alternate media and copy. Panels,
   not background bands, do the separating. */

@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-400Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("./fonts/TWKLausanne-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --paper-2: #f7f7f7;
  --ink: #0b0b0b;
  --ink-soft: #212121;
  --graphite: #353535;
  --slate: #3c4758;
  --mute: #797979;        /* large text and marks only: 4.4:1 on paper */
  --label: #666666;       /* small text: 5.7:1 on paper, 5.3:1 on paper-2 */
  --hairline: #ededed;
  --hairline-2: #e0e0e0;

  --brand: #f36458;        /* fills and marks */
  --brand-text: #dd0000;   /* accent text on paper, passes AA */
  --brand-tint: #fef0ee;   /* a tint of the brand, not a new hue */
  --success: #37cd84;
  --success-text: #13804c;
  --error: #dd0000;
  --error-text: #b30000;  /* text on the error tint, 6.2:1 */
  --surface-blue: #afe3ff;
  --blue-tint: #eef8ff;

  --xxs: 4px; --xs: 8px; --sm: 12px; --md: 16px; --lg: 24px; --xl: 32px; --xxl: 48px;
  --section: 64px; --section-lg: 96px;
  --chapter: 200px;
  --row-gap: 160px;

  --app-sm: 4px; --app-lg: 6px; --marketing: 12px; --full: 99999px;

  --sans: "TWK Lausanne", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --container: 1280px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; } /* clears the sticky header */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; border-radius: var(--app-sm); }
img { max-width: 100%; }

.wrap { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }

/* ---- type ---------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--graphite); margin: 0 0 var(--lg);
}
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(48px, 6.6vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.038em; }
h3 { font-size: clamp(32px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.cell-title { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.dim { color: var(--mute); }
.lede { font-size: 18px; line-height: 1.5; letter-spacing: -.01em; color: var(--graphite); max-width: 52ch; }
p { margin: 0; }

.mono-label { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--label); }

/* ---- nav ----------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav { display: flex; align-items: center; gap: var(--xl); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; }
/* Scaffold's cube, taken unmodified from the builder. The alt text is empty
   because every use sits beside the word "Scaffold", which already names it. */
.mark { display: block; width: auto; height: 24px; flex: none; }
.hub .mark { height: 20px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand .mark { height: 18px; }
.nav-links { display: flex; gap: var(--lg); margin-left: auto; font-size: 15px; color: var(--graphite); }
.nav-links a { transition: color .16s var(--ease-out); }
.nav .btn { margin-left: var(--lg); }

/* ---- buttons: pill is the interactive corner language -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: var(--full);
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .12s var(--ease-out);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--lg); font-size: 15px; color: var(--ink); transition: gap .18s var(--ease-out); }
.go span { transition: transform .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--graphite); }
  .btn-secondary:hover { border-color: var(--label); }
  .btn-light:hover { background: var(--hairline); }
  .plan .btn-secondary:hover { border-color: rgba(255, 255, 255, .6); }
  .nav-links a:hover { color: var(--ink); }
  .go:hover span { transform: translateX(4px); }
}
.chip {
  display: inline-block; margin-top: var(--md);
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--app-sm); padding: 3px 8px;
}

/* ---- hero ---------------------------------------------------------------- */
.hero { padding-top: 88px; }
.hero h1 { max-width: 21ch; }
.hero .lede { margin-top: var(--lg); }
.actions { display: flex; gap: var(--sm); margin-top: var(--xl); flex-wrap: wrap; }

/* The product shot, composited with two floating UI fragments that overhang
   the panel edge. Both fragments show real runtime data. */
.stage {
  position: relative; margin-top: 72px;
  background: var(--paper-2); border-radius: var(--marketing);
  padding: 40px 40px 0; overflow: visible;
}
.stage-shot {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline-2); border-bottom: 0;
  border-radius: var(--app-lg) var(--app-lg) 0 0;
}
.float {
  position: absolute; background: var(--paper);
  border-radius: var(--marketing);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, .07), 0 10px 22px -10px rgba(11, 11, 11, .28);
}
.float-toast { left: -28px; bottom: 56px; display: flex; gap: var(--sm); align-items: center; padding: 14px 18px 14px 14px; }
.float-toast strong { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.float-toast span { display: block; font-size: 15px; color: var(--graphite); }
.float-calls { right: -28px; top: 96px; padding: 16px 18px; width: 210px; }
.float-calls b { display: block; font-size: 32px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 12px; }
.seg5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.seg5 i { height: 8px; border-radius: 2px; background: var(--hairline-2); }
.seg5 i.hot { background: var(--brand); }

.tick { position: relative; flex: none; width: 34px; height: 34px; border-radius: var(--full); background: var(--success); }
.tick::after {
  content: ""; position: absolute; left: 12px; top: 8px; width: 7px; height: 13px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---- chapters: centered, generous ---------------------------------------- */
.chapter { padding-top: var(--chapter); }
.chapter-head { text-align: center; max-width: 820px; margin: 0 auto; }
.chapter-head h2 { margin: 0 auto; }
.chapter-head .lede { margin: var(--lg) auto 0; }
.chapter-body { margin-top: 88px; }

/* ---- five mornings of one job, drawn as model calls ----------------------- *
   Each square is a step. Filled coral is a model call, an outline is a stored
   step. The agent rows vary on purpose: it re-plans every run. */
.week { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg); }
.week-panel { border-radius: var(--marketing); padding: var(--xl); background: var(--paper-2); }
.week-panel.is-scaffold { background: var(--brand-tint); }
.week-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--md); margin-bottom: var(--xl); }
.week-top b { font-weight: 400; font-size: 18px; letter-spacing: -.01em; }
.wrows { display: flex; flex-direction: column; gap: 14px; }
.wrow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--md); align-items: center; }
.wrow .day { font-family: var(--mono); font-size: 12px; color: var(--label); text-transform: uppercase; letter-spacing: .06em; }
.wpath { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.st { width: 18px; height: 18px; flex: none; border-radius: 3px; border: 1.5px solid var(--mute); }
.st.m { border-color: var(--brand); background: var(--brand); }
.wpath .pill { margin-left: 6px; font-size: 13px; padding: 2px 10px; }
.week-key { grid-column: 1 / -1; display: flex; justify-content: center; gap: var(--lg); margin: 0; font-size: 15px; color: var(--graphite); }
.week-key .st { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.week-total { margin-top: var(--xl); padding-top: var(--md); border-top: 1px solid rgba(11, 11, 11, .08); display: flex; justify-content: space-between; font-size: 15px; color: var(--graphite); }
.week-total strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }


/* ---- feature rows: media and copy, alternating --------------------------- */
.rows { padding-top: var(--row-gap); }
.feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 88px; align-items: center; }
.feature + .feature { margin-top: var(--row-gap); }
.feature.flip { grid-template-columns: .9fr 1.1fr; }
.feature.flip .media { order: 2; }
.feature-copy { max-width: 440px; }
.feature-copy p { margin-top: var(--md); font-size: 18px; color: var(--graphite); }

.media { position: relative; border-radius: var(--marketing); background: var(--paper-2); padding: 40px; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media.tint-blue { background: var(--blue-tint); }
.media.tint-brand { background: var(--brand-tint); }

/* Canvas grid, echoing the builder's own dotted background. */
.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(11, 11, 11, .09) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
          mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
}

/* nodes, shared by every illustration */
.pnode {
  position: relative; z-index: 1;
  background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--app-lg);
  padding: 12px 16px; display: grid; gap: 2px;
  box-shadow: 0 1px 0 rgba(11, 11, 11, .03);
}
.pnode .kind { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--label); }
.pnode .name { font-size: 15px; letter-spacing: -.01em; }
.pnode.thinks { border-color: var(--brand); }
.pnode.thinks .kind { color: var(--brand-text); }

/* 1. pipeline: a real workflow, with why each step needs no model */
.pipe { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.pipe .pnode { grid-template-columns: 1fr auto; align-items: center; }
.pipe .pnode .name { grid-column: 1; }
.pipe .why { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; color: var(--graphite); text-align: right; }
.pipe .thinks .why { color: var(--brand-text); }
.pipe .pnode + .pnode::before {
  content: ""; position: absolute; left: 28px; top: -23px; width: 1px; height: 22px; background: var(--hairline-2);
}
.pipe .pnode + .pnode::after {
  content: ""; position: absolute; left: 25px; top: -23px; width: 7px; height: 7px; border-radius: var(--full);
  background: var(--ink); opacity: 0;
}

/* 2. wrap a program: a script becomes a node */
.wrapillo { gap: 0; }
.wrap-row { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.wrap-row .code-card { width: 100%; max-width: 420px; }
.wrap-row .pnode.prog { width: 100%; max-width: 280px; }
.code-card { background: var(--ink); color: #e8e8e8; border-radius: var(--marketing); overflow: hidden; }
.code-tab { font-family: var(--mono); font-size: 12px; color: #9b9b9b; padding: 10px 16px; border-bottom: 1px solid #242424; }
.code-card pre { margin: 0; padding: 16px; font-family: var(--mono); font-size: 15px; line-height: 1.6; white-space: pre; overflow-x: auto; }
.code-card .k { color: var(--brand); }
.code-card .f { color: var(--surface-blue); }
.wrap-arrow { position: relative; width: 2px; height: 34px; background: var(--ink); transform-origin: top; }
.wrap-arrow::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 8px; height: 8px; border: solid var(--ink); border-width: 2px 2px 0 0; transform: rotate(135deg); }
.pnode.prog { padding: 16px; }
.ports { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ports span { font-family: var(--mono); font-size: 12px; color: var(--graphite); }
.ports span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: var(--full); background: var(--mute); margin-right: 8px; vertical-align: 1px; }

/* 3. status board: every automation, one glance */
.board { width: 100%; max-width: 500px; background: var(--paper); border-radius: var(--marketing); box-shadow: 0 0 0 1px rgba(11, 11, 11, .07), 0 10px 22px -12px rgba(11, 11, 11, .22); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.board-head .ws { font-size: 15px; color: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--full); padding: 3px 12px; }
.brow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--md); align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.brow:last-of-type { border-bottom: 0; }
.brow strong { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.brow small { display: block; font-size: 15px; color: var(--label); }
.spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.spark i { width: 5px; height: 100%; border-radius: 2px; transform-origin: bottom; }
.spark.ok i { background: var(--success); }
.spark.bad i { background: var(--error); }
.pill { display: inline-block; font-size: 15px; border-radius: var(--full); padding: 3px 11px; white-space: nowrap; }
.pill.ok { background: #e6f8ef; color: var(--success-text); }
.pill.bad { background: #fde8e8; color: var(--error-text); }
.pill.neutral { background: var(--hairline); color: var(--graphite); }
.board-foot { padding: 10px 18px; font-size: 15px; color: var(--label); background: var(--paper-2); }

/* 4. provider switch: one field changes, nothing else does */
.switch { flex-direction: column; gap: 28px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--full); padding: 4px; width: 280px; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--full); background: var(--ink); transition: transform .45s var(--ease-in-out); }
.seg-opt { position: relative; z-index: 1; text-align: center; font-size: 15px; padding: 7px 0; color: var(--graphite); transition: color .3s var(--ease-out); }
.switch[data-provider="codex"] .seg-opt[data-p="codex"],
.switch[data-provider="claude"] .seg-opt[data-p="claude"] { color: var(--paper); }
.switch[data-provider="claude"] .seg-thumb { transform: translateX(100%); }
.pnode.big { width: 300px; padding: 16px 18px; }
.via { font-size: 15px; color: var(--graphite); margin-top: 4px; }
.via b { font-weight: 500; color: var(--ink); display: inline-block; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.via b.swap { opacity: 0; transform: translateY(4px); }
.others { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--label); }
.others i { width: 30px; height: 20px; border-radius: 4px; background: var(--paper); border: 1px solid var(--hairline-2); }

/* ---- demo ---------------------------------------------------------------- */
.demo { border: 1px solid var(--hairline); border-radius: var(--marketing); background: var(--paper); overflow: hidden; }
.demo-head { display: flex; flex-wrap: wrap; gap: var(--md); align-items: center; padding: var(--md) var(--lg); border-bottom: 1px solid var(--hairline); background: var(--paper-2); }
.demo-tabs { display: flex; gap: var(--xs); flex-wrap: wrap; }
.demo-tab { font: inherit; font-size: 15px; color: var(--graphite); cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--full); padding: 7px 14px; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.demo-tab.on { background: var(--ink); color: var(--paper); }
.demo-run { font: inherit; font-size: 15px; font-weight: 500; margin-left: auto; cursor: pointer; background: var(--paper); color: var(--ink); border: 1px solid var(--hairline-2); border-radius: var(--full); padding: 7px 16px; transition: border-color .16s var(--ease-out), opacity .16s var(--ease-out), transform .12s var(--ease-out); }
.demo-run:disabled { opacity: .45; cursor: default; }
.demo-run:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .demo-tab:not(.on):hover { background: var(--hairline); color: var(--ink); }
  .demo-run:hover:not(:disabled) { border-color: var(--label); }
}
.demo-trigger { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.demo-stage { display: flex; align-items: stretch; padding: var(--xl) var(--lg); overflow-x: auto; }
.dnode { position: relative; flex: 1 0 150px; min-width: 150px; border: 1px solid var(--hairline-2); border-radius: var(--app-lg); background: var(--paper); padding: var(--sm) var(--md); display: flex; flex-direction: column; gap: 5px; opacity: .45; transition: opacity .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.dnode .dkind { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--label); }
.dnode .dlabel { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.dnode[data-kind="agent"] { border-color: var(--brand); }
.dnode[data-kind="agent"] .dkind { color: var(--brand-text); }
.dnode.running { opacity: 1; transform: translateY(-3px); border-color: var(--ink); }
.dnode.done { opacity: 1; }
.dtick { position: absolute; right: 10px; bottom: 9px; width: 7px; height: 7px; border-radius: var(--full); background: var(--ink); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.dnode.done .dtick { opacity: 1; transform: scale(1); }
.dnode[data-kind="agent"].done .dtick { background: var(--brand); }
.dwire { flex: 0 0 28px; align-self: center; height: 1px; background: var(--hairline-2); position: relative; overflow: hidden; }
.dwire::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease-out); }
.dwire.flow::after { transform: scaleX(1); }
.demo-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg); padding: var(--lg); border-top: 1px solid var(--hairline); }
.demo-meta b { display: block; font-size: 32px; font-weight: 400; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.demo-meta span { display: block; margin-top: 6px; font-size: 15px; color: var(--graphite); }
.demo-note { padding: 0 var(--lg) var(--lg); font-size: 15px; color: var(--graphite); }

/* ---- metrics bento ------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--lg); }
.cell { border-radius: var(--marketing); padding: var(--xl); background: var(--paper-2); display: flex; flex-direction: column; }
.cell .cell-title { margin-bottom: var(--lg); }
.cell-saved { grid-column: span 7; }
.cell-health { grid-column: span 5; background: var(--paper); border: 1px solid var(--hairline); }
.cell-steps { grid-column: span 5; background: var(--blue-tint); }
.cell-states { grid-column: span 7; }
.cell .note { margin-top: auto; padding-top: var(--lg); font-size: 15px; color: var(--graphite); }

/* Time saved: one square per 15 minutes of work a run did instead of a person,
   colored by workflow. A failing workflow adds no squares. */
.waffle { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; }
.waffle i, .saved-key i { aspect-ratio: 1; border-radius: 3px; }
.w1 { background: var(--ink); }
.w2 { background: var(--brand); }
.w3 { background: var(--surface-blue); }
.saved-key { list-style: none; margin: var(--lg) 0 0; padding: 0; display: grid; gap: var(--xs); font-size: 15px; }
.saved-key li { display: flex; align-items: center; gap: 10px; }
.saved-key i { width: 12px; flex: none; }
.saved-key span { margin-left: auto; color: var(--graphite); font-variant-numeric: tabular-nums; }

.health { display: flex; flex-direction: column; gap: var(--md); }
.hrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: var(--md); align-items: center; font-size: 15px; }
.htrack { height: 12px; border-radius: var(--full); background: var(--hairline); overflow: hidden; display: flex; }
.hseg { height: 100%; transform-origin: left; }
.hseg.ok { background: var(--success); }
.hseg.bad { background: var(--error); }
.hrow .hval { text-align: right; font-variant-numeric: tabular-nums; color: var(--graphite); font-size: 15px; }
.hlegend { display: flex; gap: var(--lg); margin-top: var(--xs); font-size: 15px; color: var(--graphite); }
.hlegend i { display: inline-block; width: 9px; height: 9px; border-radius: var(--full); margin-right: 7px; }
.hlegend i.ok { background: var(--success); }
.hlegend i.bad { background: var(--error); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: flex; justify-content: space-between; align-items: center; background: var(--paper); border-radius: var(--app-lg); padding: 10px 14px; font-size: 15px; }
.steps em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.steps li.hot { outline: 1px solid var(--brand); }
.steps li.hot em { color: var(--brand-text); }

.states { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); }
.state { background: var(--paper); border-radius: var(--app-lg); padding: var(--lg); }
.state p { margin-top: var(--sm); font-size: 15px; color: var(--graphite); }

/* ---- audience: typographic rows ------------------------------------------ */
.audience { padding-top: var(--chapter); }
.aud-head { max-width: 760px; }
.aud-rows { margin-top: 72px; border-top: 1px solid var(--hairline); }
.aud-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xxl); align-items: baseline; padding: 36px 0; border-bottom: 1px solid var(--hairline); }
.aud-row b { font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.035em; line-height: 1; }
.aud-row p { font-size: 18px; color: var(--graphite); }

/* ---- pricing: the closing section, on an ink panel ------------------------ *
   The whole section sits on the ink card with its dot texture fading in at the
   edges. Plans are raised dark panels; Pro is the one filled with the brand
   coral, with ink text on it: white on this coral is only 3:1, ink is over 6:1. */
.closing { padding: var(--chapter) 0 120px; }
.pricing-card {
  position: relative; overflow: hidden; border-radius: var(--marketing);
  background: var(--ink); color: var(--paper); padding: 112px 48px 48px;
}
.pricing-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%);
          mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%);
}
.pricing-card > * { position: relative; }
.pricing-card .eyebrow, .pricing-card .lede { color: #b9b9b9; }
.plans { margin-top: 80px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lg); }
.plan { display: flex; flex-direction: column; border-radius: var(--marketing); padding: var(--xl); background: #1a1a1a; border: 1px solid #444444; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); }
.plan-name { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.plan-badge { font-size: 13px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: var(--full); background: var(--ink); color: var(--paper); white-space: nowrap; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: var(--lg); }
.plan-price b { font-weight: 400; font-size: 48px; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 15px; color: #b9b9b9; }
.plan-desc { margin-top: var(--md); font-size: 15px; color: #b9b9b9; }
.plan-limit { margin: var(--lg) 0; padding-top: var(--md); border-top: 1px solid rgba(255, 255, 255, .12); }
.plan-limit b { display: block; font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.plan-limit span { display: block; margin-top: 4px; font-size: 14px; color: #b9b9b9; }
.plan-includes { margin-bottom: var(--sm); font-size: 14px; color: #b9b9b9; }
.plan-features { list-style: none; margin: 0 0 var(--xl); padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.plan-features li { position: relative; padding-left: 24px; }
.plan-features li::before {
  content: ""; position: absolute; left: 3px; top: .36em; width: 10px; height: 5px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: .75;
}
.plan .btn { margin-top: auto; width: 100%; }
.plan .btn-secondary { color: var(--paper); border-color: rgba(255, 255, 255, .24); }

.plan.is-pro { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.plan.is-pro .plan-price span, .plan.is-pro .plan-desc, .plan.is-pro .plan-limit span, .plan.is-pro .plan-includes { color: var(--ink-soft); }
.plan.is-pro .plan-limit { border-top-color: rgba(11, 11, 11, .18); }

footer { border-top: 1px solid var(--hairline); padding: var(--xxl) 0; }
.foot { display: flex; justify-content: space-between; gap: var(--lg); flex-wrap: wrap; font-size: 15px; color: var(--label); }

/* ---- motion -------------------------------------------------------------- *
   Everything below is gated on html.motion, which an inline script in <head>
   sets before first paint and only when reduced motion is off. Without it (no
   JS, or reduced motion) every element renders in its finished state.

   .reveal: text blocks below the fold. .armed hides, .shown plays.
   .illo:   illustrations. Hidden until .in; .done shows the result with no
            transition, used when a page is hidden or a section was skipped. */
.reveal.armed { opacity: 0; transform: translateY(18px); }
.reveal.armed.shown { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

.motion .illo:not(.in):not(.done) .fx-rise { opacity: 0; transform: translateY(18px); }
.motion .illo:not(.in):not(.done) .fx-pop { opacity: 0; transform: scale(.94); }
.motion .illo:not(.in):not(.done) .fx-grow { transform: scaleX(0); }
.motion .illo:not(.in):not(.done) .fx-growy { transform: scaleY(0); }
.motion .illo:not(.in):not(.done) .fx-fade { opacity: 0; }
.illo.in .fx-rise, .illo.in .fx-pop, .illo.in .fx-fade {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.illo.in .fx-grow, .illo.in .fx-growy {
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

/* A packet travels down the pipeline and lights the model step on arrival.
   Explanation, not decoration: it shows where a run spends time and where it
   calls a model. Loops only while the pipeline is on screen. */
@keyframes packet { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px); } }
@keyframes think { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(243, 100, 88, 0); } 80% { box-shadow: 0 0 0 6px rgba(243, 100, 88, .22); } }
.motion .pipe.live .pnode + .pnode::after { animation: packet .5s linear infinite; animation-duration: 3.2s; }
.motion .pipe.live .pnode:nth-child(2)::after { animation-delay: .1s; }
.motion .pipe.live .pnode:nth-child(3)::after { animation-delay: .7s; }
.motion .pipe.live .pnode:nth-child(4)::after { animation-delay: 1.3s; }
.motion .pipe.live .pnode:nth-child(5)::after { animation-delay: 1.9s; }
.motion .pipe.live .thinks { animation: think 3.2s var(--ease-out) infinite; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .float-toast { left: 16px; }
  .float-calls { right: 16px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  :root { --chapter: 140px; --row-gap: 120px; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: var(--xl); }
  .feature.flip .media { order: 0; }
  .feature-copy { max-width: none; }
  .bento { grid-template-columns: 1fr; }
  .cell-saved, .cell-health, .cell-steps, .cell-states { grid-column: auto; }
}
@media (max-width: 760px) {
  :root { --chapter: 110px; --row-gap: 96px; }
  .hero { padding-top: 56px; }
  .stage { padding: 16px 16px 0; margin-top: 48px; }
  .float { position: static; margin-top: var(--sm); }
  .float-calls { width: auto; }
  .stage-extras { display: grid; gap: var(--sm); padding: 0 0 16px; }
  .week { grid-template-columns: 1fr; }
  .media { padding: 20px; min-height: 0; }
  .aud-row { grid-template-columns: 1fr; gap: var(--xs); }
  .states { grid-template-columns: 1fr; }
  .waffle { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .hrow { grid-template-columns: 1fr 64px; }
  .hrow .htrack { grid-column: 1 / -1; order: 3; }
  .demo-meta { grid-template-columns: repeat(2, 1fr); }
  .demo-run { margin-left: 0; }
  .btn { height: 48px; }
  .plans { grid-template-columns: 1fr; }
  .pricing-card { padding: 72px 16px 16px; }
  .plan { padding: var(--lg); }
}
@media (max-width: 480px) { .wrap { width: calc(100% - 32px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .demo-run:active { transform: none; }
  .dnode, .dtick, .dwire::after, .seg-thumb, .via b { transition: none; }
  .dnode { opacity: 1; }
}

/* ===========================================================================
   Feature showcase: five tabs in one card at the top of the page.

   Panels are stacked in a single grid cell, so the card is always as tall as
   its tallest panel and switching tabs never shifts the page. The outgoing
   panel fades quickly; the incoming one arrives a beat later and replays its
   visual. Each visual explains its feature rather than decorating it.
   =========================================================================== */
.fcard { margin-top: 72px; background: var(--paper-2); border-radius: var(--marketing); overflow: hidden; }

.ftabs-row { display: flex; align-items: center; gap: 8px; padding-right: 20px; border-bottom: 1px solid var(--hairline-2); }
.ftabs {
  position: relative; flex: 1; min-width: 0; display: flex; gap: 4px; padding: 0 24px;
  overflow-x: auto; scrollbar-width: none;
}
.ftabs::-webkit-scrollbar { display: none; }
.ftab {
  font: inherit; font-size: 15px; letter-spacing: -.01em; color: var(--label);
  position: relative; background: none; border: 0; padding: 26px 14px 18px; cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.ftab[aria-selected="true"] { color: var(--ink); }
.ftab:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .ftab:hover { color: var(--ink); } }

/* Each tab carries its own timer line above the label. The selected tab's
   line fills left to right over one dwell, then the next tab takes over.
   Linear, because it is a clock. Without auto-advance (reduced motion, or
   paused by the visitor) the selected tab's line simply sits full, so the
   line still marks which tab is open. */
.ftab-bar { position: absolute; top: 10px; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--hairline-2); overflow: hidden; }
.ftab-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.ftab[aria-selected="true"] .ftab-bar i { transform: scaleX(1); }
@keyframes ftab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fcard.auto:not(.user-paused) .ftab[aria-selected="true"] .ftab-bar i { animation: ftab-fill var(--dwell, 7s) linear both; }
.fcard.auto.paused .ftab[aria-selected="true"] .ftab-bar i { animation-play-state: paused; }

/* Pause control. Drawn in CSS: two bars for pause, a triangle for play. */
.fplay { display: none; position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--full); border: 1px solid var(--hairline-2); background: var(--paper); cursor: pointer; transition: border-color .16s var(--ease-out); }
.fcard.auto .fplay { display: block; }
.fplay::before, .fplay::after { content: ""; position: absolute; top: 50%; width: 3px; height: 10px; margin-top: -5px; border-radius: 1px; background: var(--ink); }
.fplay::before { left: 11px; }
.fplay::after { left: 16px; }
.fcard.user-paused .fplay::before { left: 12px; width: 0; height: 0; margin-top: -6px; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--ink); }
.fcard.user-paused .fplay::after { display: none; }
@media (hover: hover) and (pointer: fine) { .fplay:hover { border-color: var(--label); } }

.fbody { display: grid; padding: 48px; }
.fpanel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 56px; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.fpanel.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s var(--ease-out) .08s, transform .45s var(--ease-out) .08s, visibility 0s;
}
.ftitle { font-size: clamp(32px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.fcopy p { margin-top: var(--md); font-size: 18px; color: var(--graphite); }
.fvis {
  position: relative; background: var(--paper); border-radius: var(--marketing);
  min-height: 380px; padding: 36px; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 11, 11, .05);
}

@keyframes f-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes f-slide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes f-pop   { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes f-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-growx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes f-growy { from { transform: scaleY(0); } to { transform: none; } }
@keyframes f-ring  { from { box-shadow: 0 0 0 0 rgba(243, 100, 88, .45); } to { box-shadow: 0 0 0 16px rgba(243, 100, 88, 0); } }
@keyframes f-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* 1. Automate anything: a workflow and a program plug into Scaffold */
.v-any { flex-direction: row; align-items: center; }
.any-src { flex: 1.15; display: grid; gap: 16px; }
.src-card { background: var(--paper-2); border-radius: var(--app-lg); padding: 14px 16px; display: grid; gap: 2px; }
.src-card strong { font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.src-meta { font-size: 15px; color: var(--graphite); }
.any-wires { position: relative; flex: 0 0 64px; align-self: stretch; }
.any-wires::before {
  content: ""; position: absolute; left: 0; right: 50%; top: 25%; bottom: 25%;
  border: 2px solid var(--ink); border-left: 0; border-radius: 0 6px 6px 0;
}
.any-wires::after { content: ""; position: absolute; left: 50%; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); transform-origin: left; }
.any-hub { flex: 1; display: grid; gap: 14px; justify-items: start; }
.hub { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; background: var(--ink); color: var(--paper); border-radius: var(--app-lg); padding: 14px 18px; }
.hub-out { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-out li { font-size: 15px; border-radius: var(--full); padding: 4px 12px; background: var(--paper-2); color: var(--graphite); }

.motion .fpanel.is-active .src-card { animation: f-slide .6s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.motion .fpanel.is-active .any-wires::before { animation: f-growy .5s var(--ease-out) both .55s; }
.motion .fpanel.is-active .any-wires::after { animation: f-growx .4s var(--ease-out) both .9s; }
.motion .fpanel.is-active .hub { animation: f-pop .5s var(--ease-out) both 1.1s, f-ring 1.1s var(--ease-out) 1.5s; }
.motion .fpanel.is-active .hub-out li { animation: f-rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 1.35s); }

/* 2. Nodify: five steps slide together and become one node */
.nod-stage { display: grid; width: 100%; }
.nod-steps, .nod-result { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; }
.nod-steps { gap: 12px; }
.nstep {
  flex: 0 1 104px; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--label);
  background: var(--paper); border-radius: var(--app-lg); padding: 16px 6px; box-shadow: 0 0 0 1px var(--hairline-2);
  opacity: 0;
}
.nstep.hot { color: var(--brand-text); box-shadow: 0 0 0 1px var(--brand); }
.nside { font-size: 15px; background: var(--paper-2); border-radius: var(--app-lg); padding: 12px 14px; white-space: nowrap; }
.nwire { flex: 0 0 36px; height: 2px; background: var(--ink); }
.nod-result .nwire:first-of-type { transform-origin: right; }
.nod-result .nwire:last-of-type { transform-origin: left; }
/* The offset copies behind the node suggest the steps folded inside it. */
.nbig {
  display: grid; gap: 2px; padding: 16px 20px; background: var(--paper); border-radius: var(--app-lg);
  box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 -1px var(--paper), 6px 6px 0 0 var(--hairline-2),
              12px 12px 0 -1px var(--paper), 12px 12px 0 0 var(--hairline-2);
}
.nbig strong { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.nbig em { font-style: normal; font-size: 15px; color: var(--brand-text); }
.nod-cap { margin-top: 32px; text-align: center; font-size: 15px; color: var(--graphite); }

@keyframes nod-collapse {
  0%   { opacity: 0; transform: translateY(10px); }
  14%  { opacity: 1; transform: none; }
  55%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(calc((2 - var(--i)) * (100% + 12px))) scale(.6); }
}
@keyframes nod-collapse-y {
  0%   { opacity: 0; transform: translateX(-10px); }
  14%  { opacity: 1; transform: none; }
  55%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(calc((2 - var(--i)) * (100% + 8px))) scale(.6); }
}
.motion .fpanel.is-active .nstep { animation: nod-collapse 2.1s var(--ease-in-out) both; animation-delay: calc(var(--i) * 70ms); }
.motion .fpanel.is-active .nbig { animation: f-pop .55s var(--ease-out) both 1.75s; }
.motion .fpanel.is-active .nside { animation: f-fade .45s var(--ease-out) both 2.1s; }
.motion .fpanel.is-active .nwire { animation: f-growx .4s var(--ease-out) both 2.15s; }
.motion .fpanel.is-active .nod-cap { animation: f-fade .5s var(--ease-out) both 2.3s; }

/* 3. Analytics: real run numbers from the builder */
.an-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.an-stat { background: var(--paper-2); border-radius: var(--app-lg); padding: 16px 18px; }
.an-stat b { display: block; font-weight: 400; font-size: 38px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.an-stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--graphite); }
.an-stat.bad b { color: var(--error-text); }
.an-rows { margin-top: 24px; display: grid; gap: 12px; }
.an-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 36px; gap: 14px; align-items: center; font-size: 15px; }
.an-track { height: 10px; border-radius: var(--full); background: var(--hairline); overflow: hidden; }
.an-track i { display: block; height: 100%; width: var(--w); min-width: 6px; border-radius: var(--full); transform-origin: left; }
.an-track i.ok { background: var(--success); }
.an-track i.bad { background: var(--error); }
.an-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--graphite); }
.an-foot { margin-top: 20px; font-size: 15px; color: var(--label); }

.motion .fpanel.is-active .an-stat { animation: f-pop .5s var(--ease-out) both; animation-delay: calc(var(--i) * 100ms + 100ms); }
.motion .fpanel.is-active .an-track i { animation: f-growx .8s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 450ms); }

/* 4. Fewer tokens: a forty-cell meter, full against a single cell */
.v-tokens { gap: 28px; }
.tk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.tk-head b { font-weight: 400; font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tk-meter {
  position: relative; height: 34px;
  background: repeating-linear-gradient(90deg, var(--hairline) 0 calc(2.5% - 3px), transparent calc(2.5% - 3px) 2.5%);
}
.tk-meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; }
.tk-meter.ink::after { right: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 calc(2.5% - 3px), transparent calc(2.5% - 3px) 2.5%); }
.tk-meter.coral::after { width: calc(2.5% - 3px); background: var(--brand); }
.tk-foot { font-size: 18px; color: var(--graphite); }
.tk-foot b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

@keyframes tk-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.motion .fpanel.is-active .tk-meter.ink::after { animation: tk-fill 1.2s steps(40, end) both .3s; }
.motion .fpanel.is-active .tk-meter.coral::after { animation: f-pop .35s var(--ease-out) both 1.6s; }

/* 5. Every agent: one overview across platforms */
.v-agents { justify-content: flex-start; }
.ag-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.ag-plats { display: flex; gap: 6px; }
.prov { display: inline-block; justify-self: start; font-size: 15px; border-radius: var(--app-sm); padding: 2px 8px; white-space: nowrap; }
.prov.gpt { background: var(--ink); color: var(--paper); }
.prov.claude { background: var(--brand-tint); color: var(--brand-text); }
.ag-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.ag-row strong { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.ag-row small { display: block; font-size: 15px; color: var(--label); }
.pill.run { background: var(--blue-tint); color: var(--slate); }
.pill.run i { display: inline-block; width: 7px; height: 7px; border-radius: var(--full); background: currentColor; margin-right: 7px; vertical-align: 1px; }
.ag-foot { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }

.motion .fpanel.is-active .ag-row { animation: f-rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
.motion .fpanel.is-active .pill.run i { animation: f-pulse 1.4s ease-in-out infinite; }

/* ---- nested workflow row ------------------------------------------------- */
.nest { flex-direction: column; }
.nest-flow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.nest-wire { flex: 0 0 32px; height: 2px; background: var(--ink); transform-origin: left; }
.pnode.nest-node {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 -1px var(--paper), 6px 6px 0 0 var(--hairline-2);
}
.nest-badge { margin-top: 6px; font-size: 15px; color: var(--brand-text); }
.nest-drop { position: relative; z-index: 1; width: 2px; height: 28px; background: var(--ink); transform-origin: top; }
.nest-tray { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--paper); border-radius: var(--marketing); padding: 16px; box-shadow: 0 0 0 1px rgba(11, 11, 11, .07); }
.nest-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nest-steps li { font-size: 15px; background: var(--paper-2); border-radius: var(--app-sm); padding: 5px 10px; }
.nest-steps li.hot { background: var(--brand-tint); color: var(--brand-text); }

/* ---- analytics chapter headline number ----------------------------------- */
.big-stat { display: flex; align-items: baseline; gap: 10px; margin: -8px 0 var(--lg); }
.big-stat b { font-weight: 400; font-size: 48px; letter-spacing: -.035em; line-height: 1; }
.big-stat span { font-size: 15px; color: var(--graphite); }

/* ---- the demo sits under the builder screenshot -------------------------- */
#demo-section .demo { margin-top: var(--xl); }

/* ---- showcase and new rows, smaller screens ------------------------------ */
@media (max-width: 960px) {
  .fbody { padding: 28px; }
  .fpanel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .fcard { margin-top: 48px; }
  .ftabs-row { padding-right: 10px; }
  .ftabs { padding: 0 8px; }
  .ftab { padding: 22px 10px 16px; }
  .ftab-bar { top: 8px; left: 10px; right: 10px; }
  .fbody { padding: 20px; }
  .fvis { padding: 20px; min-height: 0; }

  .v-any { flex-direction: column; align-items: stretch; }
  .any-wires { flex: 0 0 28px; }
  .any-wires::before { display: none; }
  .any-wires::after { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; transform-origin: top; }
  .motion .fpanel.is-active .any-wires::after { animation-name: f-growy; }
  .any-hub { justify-items: center; }
  .hub-out { justify-content: center; }

  .nod-steps { flex-direction: column; gap: 8px; }
  .nstep { flex: 0 0 auto; width: 150px; padding: 10px 6px; }
  .motion .fpanel.is-active .nstep { animation-name: nod-collapse-y; }
  .nod-result { flex-direction: column; }
  .nwire { flex: 0 0 22px; width: 2px; height: auto; }
  .nod-result .nwire:first-of-type { transform-origin: bottom; }
  .nod-result .nwire:last-of-type { transform-origin: top; }
  .motion .fpanel.is-active .nwire { animation-name: f-growy; }

  .an-stats { gap: 8px; }
  .an-stat { padding: 12px; }
  .an-stat b { font-size: 32px; }
  .an-row { grid-template-columns: 1fr 36px; }
  .an-track { grid-column: 1 / -1; order: 3; }

  .ag-row { grid-template-columns: 1fr auto; }
  .ag-row .prov { grid-column: 1 / -1; }

  .nest-flow { flex-direction: column; }
  .nest-wire { flex: 0 0 20px; width: 2px; height: auto; transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) {
  .fpanel, .fpanel.is-active { transition: none; }
}