/* ============================================================
   Harpie design system — ElevenLabs-inspired, original identity
   Light-first · black on warm near-white · quiet gray panels
   Pills · thin borders · rounded stages · #FCAE16 signal
   ============================================================ */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/Unbounded-VariableFont_wght.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --bg: #FDFCFB;
  --ink: #000000;
  --ink-soft: #3D3A36;
  --ink-mute: #75716B;
  --panel: #F4F3F1;
  --panel-deep: #ECEAE6;
  --line: #E5E4E1;
  --line-soft: #EEEDEA;
  --white: #FFFFFF;
  --amber: #FCAE16;
  --amber-ink: #8A5E00;
  --red: #C0392B;
  --green: #1F8A5D;
  --display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-stage: 24px;
  --r-panel: 18px;
  --r-card: 14px;
  --container: 1240px;
  /* default agent palette (overridden inline per agent) */
  --a1: #FCAE16; --a2: #F6EFE2; --a3: #FBF8F1; --aink: #1A1916; --aon: #8A5E00;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: 10px 18px; border-radius: 999px; z-index: 200;
}
.skiplink:focus { left: 12px; top: 12px; }

/* ---------- Brand symbols (official SVGs via mask, currentColor) ---------- */
.sym {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  flex: none;
}
.sym--harpie   { -webkit-mask-image: url('../brand-svg/harpie.svg');   mask-image: url('../brand-svg/harpie.svg'); }
.sym--atlas    { -webkit-mask-image: url('../brand-svg/atlas.svg');    mask-image: url('../brand-svg/atlas.svg'); }
.sym--hermes   { -webkit-mask-image: url('../brand-svg/hermes.svg');   mask-image: url('../brand-svg/hermes.svg'); }
.sym--orion    { -webkit-mask-image: url('../brand-svg/orion.svg');    mask-image: url('../brand-svg/orion.svg'); }
.sym--apollo   { -webkit-mask-image: url('../brand-svg/apollo.svg');   mask-image: url('../brand-svg/apollo.svg'); }
.sym--themis   { -webkit-mask-image: url('../brand-svg/themis.svg');   mask-image: url('../brand-svg/themis.svg'); }
.sym--argos    { -webkit-mask-image: url('../brand-svg/argos.svg');    mask-image: url('../brand-svg/argos.svg'); }
.sym--selene   { -webkit-mask-image: url('../brand-svg/selene.svg');   mask-image: url('../brand-svg/selene.svg'); }
.sym--athena   { -webkit-mask-image: url('../brand-svg/athena.svg');   mask-image: url('../brand-svg/athena.svg'); }
.sym--nemesis  { -webkit-mask-image: url('../brand-svg/nemesis.svg');  mask-image: url('../brand-svg/nemesis.svg'); }
.sym--peitho   { -webkit-mask-image: url('../brand-svg/peitho.svg');   mask-image: url('../brand-svg/peitho.svg'); }
.sym--hercules { -webkit-mask-image: url('../brand-svg/hercules.svg'); mask-image: url('../brand-svg/hercules.svg'); }
.sym--poseidon { -webkit-mask-image: url('../brand-svg/poseidon.svg'); mask-image: url('../brand-svg/poseidon.svg'); }
.sym--daedalus { -webkit-mask-image: url('../brand-svg/daedalus.svg'); mask-image: url('../brand-svg/daedalus.svg'); }
.sym--gaia     { -webkit-mask-image: url('../brand-svg/gaia.svg');     mask-image: url('../brand-svg/gaia.svg'); }
.sym--polaris  { -webkit-mask-image: url('../brand-svg/polaris.svg');  mask-image: url('../brand-svg/polaris.svg'); }

.wordmark { display: inline-flex; align-items: center; }
.wordmark__img {
  display: inline-block;
  width: 95px; height: 28px;
  background: var(--ink);
  -webkit-mask: url('../brand-svg/harpie.svg') center / contain no-repeat;
  mask: url('../brand-svg/harpie.svg') center / contain no-repeat;
}
.wordmark--footer .wordmark__img { width: 122px; height: 36px; }

/* ---------- Identity tokens & signal fields ---------- */
.token {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--a3);
}
.token__field {
  position: absolute; inset: -28%;
  border-radius: 50%;
  background:
    radial-gradient(58% 58% at 30% 28%, var(--a1) 0%, transparent 62%),
    radial-gradient(52% 52% at 72% 70%, var(--a2) 0%, transparent 64%),
    radial-gradient(90% 90% at 50% 50%, var(--a3) 30%, var(--a2) 100%);
  filter: blur(1px) saturate(1.05);
  animation: drift 16s ease-in-out infinite alternate;
}
.token__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.token__sym { position: relative; color: var(--aink); }
@keyframes drift {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(28deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .token__field { animation: none; }
}
.token--xs { width: 18px; height: 18px; } .token--xs .token__sym { width: 11px; height: 11px; }
.token--sm { width: 28px; height: 28px; } .token--sm .token__sym { width: 17px; height: 17px; }
.token--md { width: 48px; height: 48px; } .token--md .token__sym { width: 28px; height: 28px; }
.token--lg { width: 72px; height: 72px; } .token--lg .token__sym { width: 42px; height: 42px; }
.token--xl { width: 180px; height: 180px; } .token--xl .token__sym { width: 104px; height: 104px; }

.tokenline { display: inline-flex; align-items: center; gap: 10px; }
.tokenline__name { display: block; font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; }
.tokenline__role { display: block; font-size: 12px; color: var(--ink-mute); }

/* ---------- Pills & segmented controls ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--ink);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.pill--solid { background: var(--ink); color: var(--white); }
.pill--solid:hover { background: #232019; }
.pill--ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.pill--ghost:hover { border-color: var(--ink); }
.pill--sm { padding: 9px 18px; font-size: 13.5px; }
.pill:active { transform: scale(0.985); }

.seg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.seg:hover { color: var(--ink); }
.seg.is-selected {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.seg--lg { padding: 11px 24px; font-size: 15px; }

/* ---------- Labels, headings, sections ---------- */
.label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.label--agent { color: var(--aon); }

.section { padding: clamp(56px, 9vw, 120px) 0 0; }
.section--tight { padding-top: clamp(40px, 6vw, 72px); }
.section--cta { padding-bottom: 0; }

.splithead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(28px, 4vw, 48px);
}
.splithead__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.splithead--big .splithead__title { font-size: clamp(30px, 4.2vw, 54px); }
.splithead__body { color: var(--ink-soft); font-size: 16.5px; max-width: 52ch; }
.splithead__link { margin-top: 18px; }

/* ---------- Panels with corner ticks ---------- */
.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  padding: clamp(28px, 4vw, 56px);
}
.tick { position: absolute; width: 9px; height: 9px; }
.tick::before, .tick::after { content: ''; position: absolute; background: var(--ink-mute); }
.tick::before { width: 9px; height: 1px; top: 4px; }
.tick::after { width: 1px; height: 9px; left: 4px; }
.tick--tl { top: -5px; left: -5px; } .tick--tr { top: -5px; right: -5px; }
.tick--bl { bottom: -5px; left: -5px; } .tick--br { bottom: -5px; right: -5px; }

/* ---------- Master navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 252, 251, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 64px;
}
.nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav__link {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav__link:hover { color: var(--ink); background: var(--panel); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }
.nav__cta { display: flex; gap: 10px; }
.nav__burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--line);
  position: relative;
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 23px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
.nav__mobile {
  border-top: 1px solid var(--line-soft);
  padding: 16px clamp(20px, 4vw, 48px) 24px;
  display: grid; gap: 4px;
  background: var(--bg);
}
.nav__mlink { padding: 11px 4px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.nav__mcta { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- Agent secondary navigation ---------- */
.subnav {
  position: sticky; top: 64px; z-index: 90;
  background: rgba(253, 252, 251, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.subnav__inner { display: flex; align-items: center; gap: 20px; height: 52px; }
.subnav__id { display: inline-flex; align-items: center; gap: 10px; }
.subnav__name { font-family: var(--display); font-weight: 500; font-size: 13.5px; letter-spacing: 0.05em; }
.subnav__links { display: flex; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a {
  padding: 7px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.subnav__links a:hover { color: var(--ink); background: var(--panel); }
.subnav__cta { flex: none; }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 0; }
.hero--sub { padding-bottom: 0; }
.hero--sub .hero__split { padding-bottom: clamp(20px, 3vw, 36px); }
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: end;
  padding-bottom: clamp(36px, 5vw, 64px);
}
.hero__title {
  font-family: var(--display);
  font-weight: 250;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero__title--agent { font-size: clamp(28px, 4vw, 50px); font-weight: 300; }
.hero__sub { font-size: 17px; color: var(--ink-soft); max-width: 52ch; }
.hero__cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hero--agent { padding-top: clamp(28px, 4vw, 56px); }

/* ---------- Playground ---------- */
.pg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-stage);
  padding: clamp(14px, 2vw, 24px);
}
.pg__tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--panel-deep);
  border-radius: 999px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
}
.pg__strip {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.pg__strip::-webkit-scrollbar { display: none; }
.pg__agent {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  flex: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pg__agent:hover { background: var(--white); border-color: var(--line); }
.pg__agent.is-selected { background: var(--white); border-color: var(--ink); }
.pg__aname { font-family: var(--display); font-weight: 500; font-size: 12.5px; letter-spacing: 0.04em; }
.pg__arole { font-size: 12px; color: var(--ink-mute); }
.pg__stage { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.pg__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.pg__info {
  padding: clamp(20px, 2.6vw, 36px);
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(155deg, var(--a3) 0%, var(--white) 70%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.pg__idline { display: flex; align-items: center; gap: 16px; }
.pg__name { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: 0.04em; }
.pg__role { font-size: 13.5px; color: var(--ink-mute); }
.pg__sdd { display: grid; gap: 12px; }
.pg__sdd dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--aon); }
.pg__sdd dd { font-size: 13.8px; color: var(--ink-soft); margin-top: 3px; }
.pg__demo { padding: clamp(14px, 1.8vw, 24px); min-width: 0; }

/* ---------- Demo system ---------- */
.demo { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--white); overflow: hidden; }
.demo__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.demo__title { font-size: 13px; font-weight: 600; }
.demo__agents { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.datatag {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--ink-mute);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.demo__body { padding: clamp(14px, 2vw, 22px); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 18px; }
.demo__grid--list { align-items: start; }
.demo__side {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 16px 18px;
  display: grid; gap: 9px;
  align-content: start;
}
.demo__sidehead { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
.demo__note { font-size: 13.5px; color: var(--ink-soft); }
.demo__meta { font-size: 12px; color: var(--ink-mute); }
.demo__meta--pad { padding: 10px 18px 14px; }
.demo__fakebtn { pointer-events: none; opacity: 0.92; width: fit-content; }
.demo__foot { display: grid; gap: 6px; margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.demo__runwrap { margin-top: 16px; display: grid; gap: 12px; justify-items: start; }
.demo__seg { display: inline-flex; gap: 4px; background: var(--panel); border-radius: 999px; padding: 4px; margin-bottom: 14px; }

.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.kv span { color: var(--ink-mute); }
.kv strong { font-weight: 600; text-align: right; }
.kv--row { justify-content: flex-start; }
.kv--row strong { text-align: left; }
.amber { color: var(--amber-ink); }
.delta { font-size: 12px; font-weight: 700; color: var(--amber-ink); }
.rec {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--amber); color: var(--ink);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px;
  white-space: nowrap;
}
.rec--new { background: var(--panel-deep); }

.demo__list { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.drow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 1fr 0.8fr 0.9fr 1fr;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  font-size: 13.5px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.drow:last-child { border-bottom: 0; }
.drow--lanes { grid-template-columns: minmax(0, 2.6fr) 0.9fr 0.9fr 1fr 1.1fr; }
.demo__listhead {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg);
}
.opt { transition: background 0.12s ease; }
.opt:hover { background: var(--bg); }
.opt.is-selected { background: var(--panel); box-shadow: inset 2.5px 0 0 var(--amber); }

.sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sev__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sev--high .sev__dot { background: var(--red); }
.sev--med .sev__dot { background: var(--amber); }
.sev--low .sev__dot { background: var(--green); }

/* Route/tier/match cards */
.demo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo__cards--tight { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.routecard {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: grid; gap: 7px;
  align-content: start;
  background: var(--white);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.routecard:hover { border-color: var(--ink-mute); }
.routecard.is-selected { border-color: var(--ink); background: var(--bg); box-shadow: 0 0 0 1px var(--ink); }
.routecard__tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.routecard__path { font-size: 13.5px; font-weight: 600; }

/* Forecast chart */
.fc svg { width: 100%; height: auto; }
.fc__demand { fill: var(--panel-deep); stroke: var(--line); }
.fc__demand--gap { fill: var(--amber); stroke: none; }
.fc__secured { fill: var(--ink); opacity: 0.82; }
.fc__label { font: 600 10px var(--body); fill: var(--ink-mute); }
.fc__legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin-top: 8px; }
.fc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw--demand { background: var(--panel-deep); border: 1px solid var(--line); }
.sw--secured { background: var(--ink); }
.sw--gap { background: var(--amber); }

/* Mini P&L */
.pnl { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.pnl__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 16px; font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.pnl__row span { color: var(--ink-soft); }
.pnl__row:last-child { border-bottom: 0; }
.pnl__row--rule { background: var(--bg); font-weight: 600; }
.pnl__row--total { background: var(--panel); font-weight: 700; font-size: 15px; }
.dstep { display: flex; gap: 10px; font-size: 13px; color: var(--ink-soft); align-items: baseline; padding: 5px 0; }
.dstep__who {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--white); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 999px; flex: none;
}
.demo__steps { display: grid; gap: 2px; }

/* Exception queue */
.xq { display: grid; }
.xq__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
  transition: background 0.12s ease;
}
.xq__row:hover { background: var(--bg); }
.xq__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.xq__ref { font-size: 12.5px; color: var(--ink-mute); }
.xq__act { font-size: 12.5px; font-weight: 600; color: var(--amber-ink); white-space: nowrap; }
.xq__more {
  grid-column: 1 / -1;
  display: none;
  font-size: 13.5px; color: var(--ink-soft);
  padding: 8px 12px;
  background: var(--panel);
  border-radius: 10px;
}
.xq__row.is-open { background: var(--bg); }
.xq__row.is-open .xq__more { display: block; }

/* Tracking timeline */
.tl { display: grid; }
.tl__item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 0 14px;
  padding: 10px 4px;
  position: relative;
  align-items: start;
}
.tl__item::before {
  content: '';
  position: absolute; left: 10px; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.tl__item:first-child::before { top: 18px; }
.tl__item:last-child::before { bottom: auto; height: 18px; }
.tl__dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
  position: relative; z-index: 1; margin-top: 4px; margin-left: 4px;
}
.tl__item.is-done .tl__dot { background: var(--ink); border-color: var(--ink); }
.tl__item.is-now .tl__dot { background: var(--amber); border-color: var(--amber); }
.tl__item.is-issue .tl__dot { background: var(--red); border-color: var(--red); }
.tl__t { font-size: 14px; font-weight: 600; }
.tl__m { font-size: 12.5px; color: var(--ink-mute); }
.src { font-style: normal; color: var(--ink-mute); border-bottom: 1px dotted var(--line); }
.tl__tag {
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; color: var(--ink-soft);
  margin-top: 3px;
}
.tl__tag--issue { border-color: var(--red); color: var(--red); }
.mail { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 13px 15px; display: grid; gap: 7px; }
.mail__h { font-size: 11.5px; font-weight: 700; color: var(--ink-mute); }
.mail__b { font-size: 13px; color: var(--ink-soft); }

/* Team capacity */
.cap { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.cap__head, .cap__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 0.9fr; }
.cap__bar { position: relative; height: 18px; background: var(--bg); border-radius: 6px; overflow: hidden; display: block; }
.cap__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--panel-deep); border-right: 1px solid var(--line); border-radius: 6px; }
.cap__bar em { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font: 600 11px var(--body); font-style: normal; }
.cap__pct { font-weight: 700; font-size: 13px; text-align: right; }

/* Recovery audit */
.rec__list { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.rec__row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.rec__row:last-child { border-bottom: 0; }
.rec__row--total { background: var(--panel); }
.rec__row--total strong { font-size: 17px; }
.rec__t { font-size: 14px; font-weight: 600; }
.rec__m { font-size: 12.5px; color: var(--ink-mute); }

/* Quote workspace */
.demo__grid--quote {
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 5.4fr) minmax(0, 3.4fr);
  gap: 14px;
}
.rfq {
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  background: var(--panel); padding: 14px 16px;
  display: grid; gap: 8px; align-content: start;
}
.fu { border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.fu__line { display: grid; gap: 6px; }
.fu__line li { font-size: 12.8px; color: var(--ink-mute); display: flex; gap: 8px; align-items: baseline; }
.fu__line li strong { font-size: 11px; flex: none; width: 32px; color: var(--ink-soft); }
.fu__line li.is-done { color: var(--ink-soft); }
.fu__line li.is-done strong { color: var(--ink); }
.fu__line li.is-now { color: var(--ink); font-weight: 600; }
.fu__line li.is-now::after { content: '●'; color: var(--amber); font-size: 9px; }

/* Disruption */
.alertbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--bg);
  border-radius: var(--r-card);
  padding: 11px 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.alertbar span:last-child { color: var(--ink-mute); font-size: 12.5px; }
.runline { display: grid; gap: 4px; width: 100%; }
.runline li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; color: var(--ink-mute);
  padding: 6px 10px;
  border-left: 2px solid var(--line);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.runline li.is-on { color: var(--ink); border-left-color: var(--amber); background: var(--bg); }

/* Workflow builder */
.wf { display: grid; gap: 14px; }
.wf__nodes { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.wfnode {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 11px 14px;
  flex: 1 1 150px;
  min-width: 150px;
  display: grid; gap: 3px; align-content: start;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.wfnode__k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
.wfnode__t { font-size: 13px; font-weight: 500; }
.wfnode--gate { border-style: dashed; background: var(--bg); }
.wfnode.is-on { border-color: var(--amber); background: #FFF8E8; }
.wf__arrow { align-self: center; width: 16px; height: 1px; background: var(--line); position: relative; flex: none; }
.wf__arrow::after { content: ''; position: absolute; right: 0; top: -2.5px; border-left: 5px solid var(--line); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.wf__exception {
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  padding: 10px 14px;
  display: grid; gap: 3px;
  background: var(--bg);
  transition: border-color 0.25s ease;
}
.wf__exception.is-on { border-color: var(--red); }
.wf__audit { border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); padding: 12px 16px; display: grid; gap: 6px; width: 100%; }
[data-reveal] { opacity: 0; transition: opacity 0.4s ease; }
[data-reveal].is-on { opacity: 1; }
.audit { display: grid; gap: 7px; margin-top: 10px; }
.audit__line { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-soft); align-items: baseline; flex-wrap: wrap; }
.audit__line span:first-child { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-size: 11.5px; flex: none; }
.audit__line span:nth-child(2) {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--white); border: 1px solid var(--line);
  padding: 1px 8px; border-radius: 999px; flex: none;
}

/* Documents checker */
.docs { border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.docs__row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.docs__row:last-child { border-bottom: 0; }
.docs__state { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.is-ok .docs__state { background: var(--green); }
.is-bad .docs__state { background: var(--red); }
.is-wait .docs__state { background: var(--amber); }
.docs__row div { flex: 1; min-width: 0; }
.docs__t { font-size: 14px; font-weight: 600; }
.docs__m { font-size: 12.5px; color: var(--ink-mute); }
.docs__tag { font-size: 11px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--green); white-space: nowrap; }
.docs__tag--bad { color: var(--red); border-color: var(--red); }
.docs__tag--wait { color: var(--amber-ink); border-color: var(--amber); }

/* Orchestration graph */
.orch svg { width: 100%; height: auto; }
.orch__edge { stroke: var(--line); stroke-width: 1.5; }
.orch__edge.is-on { stroke: var(--amber); stroke-width: 2; }
.orch__node { fill: var(--n3, var(--panel)); stroke: var(--n1, var(--line)); stroke-width: 1.5; }
.orch__center { fill: var(--ink); }
.orch__pulse { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0.9; transform-origin: center; transform-box: fill-box; animation: pulse 3s ease-out infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .orch__pulse { animation: none; opacity: 0.35; } }
.orch__name { font: 600 11px var(--display); letter-spacing: 0.06em; fill: var(--ink-soft); }
.orch__name--center { fill: var(--ink); }

/* Approval / audit cards (platform) */
.approval { display: grid; gap: 8px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--bg); padding: 14px 16px; margin-top: 12px; }
.approval__row { display: flex; gap: 10px; margin-top: 6px; }

/* ---------- Stage wrapper (large rounded demo stages) ---------- */
.stage {
  background: linear-gradient(160deg, var(--a3) 0%, var(--panel) 60%);
  border: 1px solid var(--line);
  border-radius: var(--r-stage);
  padding: clamp(14px, 2vw, 26px);
}
.stage--bare { padding: 0; background: none; border: 0; }

/* ---------- Trust ---------- */
.trust { display: grid; gap: 22px; }
.trust__head {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.3;
  max-width: 30ch;
}
.panel--trust { padding: 0; overflow: hidden; }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust__cell { padding: clamp(20px, 3vw, 36px); border-right: 1px solid var(--line-soft); }
.trust__cell:last-child { border-right: 0; }
.trust__big { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); margin-bottom: 8px; }
.trust__small { font-size: 13.5px; color: var(--ink-mute); }

/* ---------- Family strip & groups ---------- */
.famstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x proximity;
}
.famcard {
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 22px 18px 20px;
  display: grid; gap: 4px; justify-items: start; align-content: start;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.famcard:hover { border-color: var(--ink); transform: translateY(-2px); }
.famcard .token { margin-bottom: 12px; }
.famcard__name { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; }
.famcard__role { font-size: 12.5px; color: var(--ink-mute); }
.famcard__vp { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.famgroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.famgroup {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px;
  display: grid; gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}
.famgroup:hover { border-color: var(--ink); background: var(--white); }
.famgroup__label { font-weight: 600; font-size: 14.5px; }
.famgroup__agents { font-size: 11.5px; color: var(--ink-mute); letter-spacing: 0.02em; }
.famgroup__arrow { position: absolute; top: 14px; right: 16px; color: var(--ink-mute); }

.groupline { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 22px; }
.groupline__a {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 16px 6px 7px;
  font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.04em;
  transition: border-color 0.15s ease;
}
.groupline__a em { font-style: normal; font-family: var(--body); font-weight: 400; color: var(--ink-mute); font-size: 12px; }
.groupline__a:hover { border-color: var(--ink); }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 14px; margin-top: 22px; }
.bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bcard {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
  padding: 24px;
  display: grid; gap: 8px; align-content: start;
  transition: border-color 0.15s ease, background 0.15s ease;
}
a.bcard:hover { border-color: var(--ink); background: var(--white); }
.bcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.bcard__agent { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.05em; }
.bcard__t { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.bcard__b { font-size: 14px; color: var(--ink-soft); }
.bcard__meta { font-size: 12.5px; color: var(--ink-mute); }
.bcard__meta strong { color: var(--ink-soft); font-weight: 600; }
.rescard { background: var(--white); border-color: var(--line); }

/* ---------- Agents grid (directory) ---------- */
.agentgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.agentcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 24px;
  display: grid; gap: 5px; align-content: start;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.agentcard:hover { border-color: var(--ink); transform: translateY(-2px); }
.agentcard__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.agentcard__arrow { color: var(--ink-mute); transition: transform 0.15s ease, color 0.15s ease; }
.agentcard:hover .agentcard__arrow { transform: translateX(3px); color: var(--ink); }
.agentcard__name { font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: 0.05em; }
.agentcard__role { font-size: 13px; color: var(--aon); font-weight: 600; }
.agentcard__vp { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.agentcard__rel { font-size: 11.5px; color: var(--ink-mute); margin-top: 10px; letter-spacing: 0.02em; }

/* ---------- Collaboration rows ---------- */
.collab { display: grid; gap: 12px; }
.collab__row {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--white);
  padding: 18px 22px;
  transition: border-color 0.15s ease;
}
.collab__row:hover { border-color: var(--ink); }
.collab__row > div { flex: 1; min-width: 0; }
.collab__name { font-family: var(--display); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; }
.collab__note { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step {
  border-top: 1px solid var(--line);
  padding: 18px 4px 0;
  display: grid; gap: 7px; align-content: start;
}
.step__n { font-family: var(--display); font-weight: 300; font-size: 14px; color: var(--ink-mute); }
.step__t { font-size: 16px; font-weight: 600; }
.step__b { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Accountability grid ---------- */
.acct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.acct__card {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--white);
  padding: 22px 24px;
  display: grid; gap: 7px; align-content: start;
}
.acct__t { font-size: 15.5px; font-weight: 600; }
.acct__b { font-size: 13.8px; color: var(--ink-soft); }

/* ---------- Levers ---------- */
.levers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lever {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 13px 16px;
  transition: border-color 0.15s ease;
}
.lever:hover { border-color: var(--ink); }
.lever__n { font-family: var(--display); font-weight: 300; font-size: 13px; color: var(--ink-mute); flex: none; }
.lever__t { font-size: 13.8px; font-weight: 500; flex: 1; }
.lever__a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 500; font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-mute); flex: none; }

/* ---------- Proof / placeholder panel ---------- */
.panel--proof { background: var(--panel); }
.proof { display: grid; gap: 14px; justify-items: start; max-width: 720px; }
.proof__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.proof__quote { font-family: var(--display); font-weight: 300; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.35; }
.proof__meta { font-size: 14px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 4px;
  font-size: 16.5px; font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform 0.2s ease; flex: none; }
.faq__item[open] .faq__chev { transform: rotate(225deg); }
.faq__a { padding: 0 4px 22px; color: var(--ink-soft); max-width: 72ch; }

/* ---------- Final CTA ---------- */
.panel--cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
.panel--cta .tick::before, .panel--cta .tick::after { background: var(--ink-mute); }
.cta { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(16px, 3vw, 40px) 0; }
.cta .label { color: rgba(255, 255, 255, 0.55); margin: 0; }
.cta__title { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.01em; }
.cta__sub { color: rgba(255, 255, 255, 0.7); font-size: 16px; }
.cta__row { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.cta .pill--solid { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.cta .pill--solid:hover { background: #FFBD3D; }
.cta .pill--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.cta .pill--ghost:hover { border-color: var(--white); }

/* ---------- Agent hero block ---------- */
.agenthero {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr);
  gap: clamp(14px, 2vw, 26px);
  background: linear-gradient(150deg, var(--a3) 0%, var(--panel) 75%);
  border: 1px solid var(--line);
  border-radius: var(--r-stage);
  padding: clamp(14px, 2vw, 26px);
  align-items: stretch;
}
.agenthero__id {
  display: grid; gap: 6px;
  align-content: center; justify-items: center; text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(22px, 3vw, 40px) 20px;
}
.agenthero__id .token { margin-bottom: 18px; }
.agenthero__name { font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: 0.06em; }
.agenthero__role { font-size: 14.5px; color: var(--aon); font-weight: 600; }
.agenthero__own { font-size: 13px; color: var(--ink-mute); max-width: 30ch; margin-top: 8px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 12px; margin-top: 14px; }
.form__field { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.form__field input, .form__field textarea {
  font: 400 14.5px var(--body);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
  resize: vertical;
}
.form__field input:focus, .form__field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.form button { justify-self: start; }
.form__ok { font-size: 14px; font-weight: 600; color: var(--green); }
.form__note { font-size: 12px; color: var(--ink-mute); }
.deploycard { background: var(--white); border-color: var(--line); }

/* ---------- Footer ---------- */
.footer { margin-top: clamp(64px, 10vw, 130px); border-top: 1px solid var(--line); background: var(--white); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
}
.footer__promise { font-family: var(--display); font-weight: 300; font-size: 17px; margin-top: 18px; max-width: 24ch; line-height: 1.4; }
.footer__sub { font-size: 13.5px; color: var(--ink-mute); margin-top: 10px; max-width: 34ch; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.footer__col { display: grid; gap: 2px; align-content: start; }
.footer__head { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.footer__col a { font-size: 13.5px; color: var(--ink-soft); padding: 4px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding: 20px 0 26px;
  font-size: 12.5px; color: var(--ink-mute);
}
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__burger { display: block; }
  .pg__panel { grid-template-columns: 1fr; }
  .pg__info { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .demo__grid, .demo__grid--quote { grid-template-columns: 1fr; }
  .agentgrid, .acct, .levers, .bento--3, .bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .famgroups, .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__cell { border-bottom: 1px solid var(--line-soft); }
  .trust__cell:nth-child(even) { border-right: 0; }
  .trust__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .agenthero { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .hero__split, .splithead { grid-template-columns: 1fr; align-items: start; }
  .splithead__title br, .hero__title br { display: none; }
  .nav__cta { display: none; }
  .subnav__cta { display: none; }
  .demo__cards { grid-template-columns: 1fr; }
  .agentgrid, .acct, .levers, .bento--2, .bento--3, .bento--4 { grid-template-columns: 1fr; }
  .steps, .steps--4 { grid-template-columns: 1fr; }
  .famgroups, .trust__grid { grid-template-columns: 1fr; }
  .trust__cell { border-right: 0; }
  .trust__cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .trust__cell:last-child { border-bottom: 0; }
  .drow { grid-template-columns: minmax(0, 1.8fr) 1fr 1fr; }
  .drow span:nth-child(4), .drow span:nth-child(5) { display: none; }
  .drow--lanes { grid-template-columns: minmax(0, 1.8fr) 1fr 1fr; }
  .cap__head, .cap__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 0.6fr; }
  .cap__head span:nth-child(4), .cap__row span:nth-child(4) { display: none; }
  .xq__act { display: none; }
  .wf__nodes { flex-direction: column; }
  .wf__arrow { width: 1px; height: 14px; margin-left: 24px; }
  .wf__arrow::after { right: -2.5px; top: auto; bottom: 0; border-top: 5px solid var(--line); border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 0; }
  .token--xl { width: 132px; height: 132px; } .token--xl .token__sym { width: 76px; height: 76px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg__tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; }
  .pg__tabs::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Mark 5 additions — five agents, cycle, custom workflows,
   richer forms. Reuses existing tokens, palettes and shapes.
   ============================================================ */

/* Slightly larger master brand + agent symbols (more presence). */
.wordmark__img { width: 110px; height: 33px; }
.wordmark--footer .wordmark__img { width: 150px; height: 44px; }
.token--md { width: 52px; height: 52px; } .token--md .token__sym { width: 30px; height: 30px; }
.token--lg { width: 84px; height: 84px; } .token--lg .token__sym { width: 50px; height: 50px; }
.token--xl { width: 196px; height: 196px; } .token--xl .token__sym { width: 116px; height: 116px; }

/* Brand chip (platform "Harpie" reference inside demos / levers). */
.chip--brand { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; padding: 4px 12px; }
.chip--mini { padding: 2px 10px; font-size: 10.5px; }

/* Hero cycle line. */
.hero__cycle { font-family: var(--display); font-weight: 300; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-mute); margin-top: 16px; }

/* The five-step operational cycle. */
.cyclestrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.cyclestep { position: relative; }
.cyclestep > a {
  display: grid; gap: 5px; justify-items: center; text-align: center;
  padding: 22px 14px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--white);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cyclestep > a:hover { border-color: var(--ink); transform: translateY(-2px); }
.cyclestep.is-active > a { border-color: var(--ink); }
.cyclestep__phase { font-family: var(--display); font-weight: 300; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--aon); }
.cyclestep .token { margin: 6px 0; }
.cyclestep__name { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; }
.cyclestep__role { font-size: 12px; color: var(--ink-mute); }
.cyclestep__arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); z-index: 2; }

/* Workflow step strip (end-to-end). */
.flowline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 22px; }
.flowstep { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 15px; }
.flowstep__arrow { color: var(--ink-mute); margin-left: 2px; }

/* Agent showcase header (homepage / solutions). */
.showhead { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.showhead__name { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: 0.05em; }
.showhead__role { font-size: 13px; color: var(--aon); font-weight: 600; }

/* Agent card flow line (replaces collaborators line). */
.agentcard__flow { font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; letter-spacing: 0.01em; line-height: 1.55; }

/* Demo sub-tabs (agents owning several workflows). */
.demotabs { display: grid; gap: 14px; }
.demotabs__tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--panel); border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%; }

/* Single-level playground strip (five agents). */
.pg__strip--solo { flex-wrap: wrap; justify-content: center; overflow: visible; }

/* Custom-workflows promo panel. */
.panel--cwf { padding: 0; overflow: hidden; }
.cwf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cwf__copy { padding: clamp(24px, 4vw, 48px); display: grid; gap: 14px; align-content: center; }
.cwf__title { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
.cwf__body { color: var(--ink-soft); font-size: 15.5px; max-width: 46ch; }
.cwf__copy .pill { justify-self: start; }
.cwf__demo { padding: clamp(16px, 2vw, 26px); background: var(--panel); border-left: 1px solid var(--line); }

/* Forms: two-column rows, select, error state. */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__field select {
  font: 400 14.5px var(--body);
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink); width: 100%;
}
.form__field select:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.form__err { font-size: 14px; font-weight: 600; color: var(--red); }
.deploy__cwf { margin-top: 22px; font-size: 14.5px; color: var(--ink-soft); }
.ulink { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ulink:hover { color: var(--amber-ink); }

/* Redirect stubs (absorbed agent URLs). */
.redirect { min-height: 70vh; display: grid; place-items: center; padding: 48px 20px; }
.redirect__card { text-align: center; display: grid; gap: 12px; max-width: 540px; }
.redirect__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.redirect__to { font-family: var(--display); font-weight: 400; font-size: 26px; }
.redirect__sub { font-size: 14px; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .cwf { grid-template-columns: 1fr; }
  .cwf__demo { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cyclestrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyclestep__arrow { display: none; }
}
@media (max-width: 560px) {
  .cyclestrip { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}
/* Keep enlarged hero symbol sane on small screens (overrides global token--xl above). */
@media (max-width: 720px) {
  .token--xl { width: 140px; height: 140px; } .token--xl .token__sym { width: 82px; height: 82px; }
}

/* ============================================================
   Mark 5.1 — bigger brand, 5-agent row, clean 3-col grids,
   dream-agent card, RFQ readability.
   ============================================================ */

/* Bigger, more brandable Harpie wordmark. */
.wordmark__img { width: 132px; height: 39px; }
.wordmark--footer .wordmark__img { width: 190px; height: 56px; }

/* Homepage playground: five agents in one aligned row with larger logos. */
.pg__strip--solo {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: stretch;
  overflow: visible;
}
.pg__strip--solo .pg__agent {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 20px 12px;
  border-radius: var(--r-panel);
}
.pg__strip--solo .pg__agent .pg__aname { font-size: 14.5px; }
.pg__strip--solo .pg__agent .pg__arole { font-size: 12px; }
@media (max-width: 900px) {
  .pg__strip--solo { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pg__strip--solo::-webkit-scrollbar { display: none; }
  .pg__strip--solo .pg__agent { flex: 0 0 auto; min-width: 144px; }
}

/* Clean 3-up card grids: never leave a lopsided last row — center the trailing cards. */
.bento--3 { display: flex; flex-wrap: wrap; justify-content: center; }
.bento--3 > * { flex: 1 1 calc((100% - 28px) / 3); max-width: calc((100% - 28px) / 3); }
@media (max-width: 1080px) {
  .bento--3 > * { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
}
@media (max-width: 720px) {
  .bento--3 > * { flex-basis: 100%; max-width: 100%; }
}

/* "Design your agent" prompt card in the agent grid. */
.agentcard--dream { border-style: dashed; background: var(--panel); }
.agentcard--dream:hover { border-style: solid; border-color: var(--ink); background: var(--white); }
.dreammark {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px dashed var(--ink-mute);
  font-family: var(--display); font-weight: 300; font-size: 42px; line-height: 1;
  color: var(--amber-ink);
}

/* RFQ key/value pairs: stack label over value so values never wrap mid-pair. */
.rfq .kv { flex-direction: column; align-items: flex-start; gap: 1px; }
.rfq .kv span { font-size: 12px; }
.rfq .kv strong { text-align: left; font-size: 14px; }

/* Agents/agent hero: guarantee breathing room so the headline and CTAs never overlap
   the content that follows. */
.hero--sub .hero__split { padding-bottom: clamp(28px, 4vw, 48px); }
.hero--agent .hero__split { padding-bottom: clamp(28px, 4vw, 48px); }
/* Wrap long headlines at word boundaries only (never mid-word). */
.hero__title, .hero__title--agent, .splithead__title { overflow-wrap: break-word; min-width: 0; }
/* Sub-page heroes share a 2-column split with body copy; keep the headline from
   overrunning its column (which previously overlapped the CTAs). */
.hero--sub .hero__title { font-size: clamp(30px, 4.2vw, 54px); }

/* ============================================================
   Mark 5.2 — lighter homepage, arrow alignment, benefit highlight,
   dream banner, simpler Talk-to-us page.
   ============================================================ */

/* Keep short "X → Y" phrases on one line, centered, and sized to fit the cell. */
.trust__big { white-space: nowrap; font-size: clamp(17px, 1.9vw, 23px); }
.trust__cell { text-align: center; padding-left: 14px; padding-right: 14px; }

/* Playground: selected agent is a clean white tile (no black border). */
.pg__agent.is-selected { border-color: transparent; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); }

/* Compact deployment steps (titles only). */
.steps--compact .step { border-top: 1px solid var(--line); padding-top: 14px; }
.steps--compact .step__t { font-size: 15px; }

/* Mini P&L: highlight the Harpie benefit. */
.pnl__benefit {
  display: flex; align-items: center; gap: 8px;
  background: #FFF8E8; border: 1px solid var(--amber);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; margin-bottom: 12px;
}
.pnl__benefit strong { color: var(--amber-ink); font-size: 15px; }
.pnl__gain { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.seg--best::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: inline-block; }

/* Dream-agent homepage banner — black card, white text, amber button. */
.panel--dream { background: var(--ink); color: var(--white); border-color: var(--ink); }
.panel--dream .tick::before, .panel--dream .tick::after { background: var(--ink-mute); }
.panel--dream .label { color: rgba(255, 255, 255, 0.55); }
.dreampromo { display: grid; gap: 12px; justify-items: start; max-width: 680px; }
.dreampromo__title { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.01em; }
.dreampromo__sub { font-size: 15.5px; color: rgba(255, 255, 255, 0.72); }
.dreampromo .pill { margin-top: 6px; }
.panel--dream .pill--solid { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.panel--dream .pill--solid:hover { background: #FFBD3D; border-color: #FFBD3D; }

/* Talk-to-us page: single centered form + quick reassurance line. */
.next { margin-top: 16px; font-size: 13.5px; color: var(--ink-mute); }
.deploycard--solo { max-width: 640px; margin: 0 auto; }
.deploycard__alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* Homepage demo cards: drop the agent-name pills (keeps the bar to just title + Illustrative data). */
.home .demo__agents { display: none; }

/* ============================================================
   Mark 5.3 — richer Platform + Deployment sections, logo-based
   orchestration graph, booking card.
   ============================================================ */

/* Platform feature cards. */
.platgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.platcard {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--white); padding: 26px 24px;
  display: grid; gap: 9px; align-content: start;
}
.platcard__n { font-family: var(--display); font-weight: 300; font-size: 13px; color: var(--ink-mute); }
.platcard__t { font-size: 17.5px; font-weight: 600; }
.platcard__tag { font-size: 14px; color: var(--ink-soft); }
.platcard__points { display: grid; gap: 9px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.platcard__points li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-soft); }
.platcard__points li::before {
  content: ''; position: absolute; left: 3px; top: 4px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--amber-ink); border-bottom: 2px solid var(--amber-ink);
  transform: rotate(-45deg);
}

/* Deployment stepper — numbered cards. */
.deploytl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.deploytl__step {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--white); padding: 22px 20px;
  display: grid; gap: 8px; align-content: start;
}
.deploytl__num {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 4px;
  border: 1px solid var(--ink);
  font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--ink);
}
.deploytl__t { font-size: 16.5px; font-weight: 600; }
.deploytl__b { font-size: 13.5px; color: var(--ink-soft); }
.deploynote { margin-top: 18px; font-size: 14px; color: var(--ink-mute); }

/* Orchestration graph — real agent identity tokens around a clean HARPIE core. */
.orchx { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1 / 0.84; }
.orchx__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orchx__lines line { stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.orchx__node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; z-index: 2; }
.orchx__node .token--lg { width: 68px; height: 68px; }
.orchx__node .token--lg .token__sym { width: 40px; height: 40px; }
.orchx__name { font-family: var(--display); font-weight: 500; font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink-soft); white-space: nowrap; }
.orchx__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center; z-index: 3;
  box-shadow: 0 0 0 6px rgba(252, 174, 22, 0.12);
}
@media (max-width: 620px) {
  .orchx { max-width: 320px; aspect-ratio: 1 / 0.92; }
  .orchx__node .token--lg { width: 56px; height: 56px; }
  .orchx__node .token--lg .token__sym { width: 33px; height: 33px; }
  .orchx__center { width: 72px; height: 72px; }
  .orchx__name { font-size: 11px; }
}

/* Talk-to-us page — compact header, form + scheduler aligned at the same level. */
.talk { padding-top: clamp(28px, 5vw, 56px); }
.talk__head { margin-bottom: 24px; max-width: 720px; }
.talk__title { font-family: var(--display); font-weight: 250; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.015em; }
.talk__sub { color: var(--ink-soft); font-size: 16px; margin-top: 8px; }
.talk__cards { align-items: stretch; margin-top: 0; }
.talk__cards .deploycard { display: flex; flex-direction: column; }

/* Contact cards — two matching cards (message + call) that link out, so the page
   stays backend-free. The CTA is pinned to the bottom so both cards align. */
.contactcard { padding: clamp(26px, 3vw, 38px); }
.contactcard__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--amber-soft, rgba(252, 174, 22, 0.12)); color: var(--ink);
}
.contactcard__icon svg { width: 24px; height: 24px; }
.contactcard .label { margin-bottom: 6px; }
.contactcard .bcard__b { margin-top: 6px; }
.book__cta { margin-top: auto; padding-top: 22px; }
.book__cta .pill { width: 100%; justify-content: center; }
.book__cta .form__note { margin-top: 12px; }

/* Embedded Tally form. The form's text lives inside a cross-origin iframe, so we
   can't restyle it directly — instead we render it wider and scale it down, which
   shrinks the (oversized) Tally labels closer to the site's type scale. site.js
   collapses the wrapper to the scaled height so the card sizes correctly. */
.contactcard--form { padding-bottom: clamp(20px, 2.4vw, 28px); }
.tally { margin-top: 14px; overflow: hidden; }
.tally iframe {
  display: block; border: 0;
  width: 128.2%;            /* 1 / 0.78 */
  transform: scale(0.78);
  transform-origin: top left;
}

@media (max-width: 900px) {
  .platgrid { grid-template-columns: 1fr; }
  .deploytl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 560px) {
  .deploytl { grid-template-columns: 1fr; }
}