/* ---------------------------------------------------------------------------
   Landing page — ported from the eric-marketing-site prototype.
   Standalone stylesheet for the home page only; does not use the shared
   reset/theme/site CSS. Light is the default and matches the prototype
   verbatim; a dark variant follows the OS via the prefers-color-scheme block
   at the end of this file. Every themeable color is a token, so dark mode is a
   single token-override block plus a few rule overrides for the purple fills.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Design tokens — single source of truth. Light values match the prototype;
   the dark overrides live in the prefers-color-scheme block at the bottom.
--------------------------------------------------------------------------- */
:root {
  --paper: #f8f8f6;
  --white: #ffffff;
  --surface-2: #fbfafc;
  --ink: #181219;
  --ink-strong: #2b2530;
  --ink-2: #322c39;
  --ink-muted: #4a4450;
  --ink-soft: #5d5663;
  --ink-faint: #a59caf;
  --ink-faint-2: #c4bdcb;
  --purple: #492881;
  --purple-600: #5b3499;
  --purple-300: #8b6bbf;
  --lav: #ece6f4;
  --lav-line: rgba(73, 40, 129, 0.14);
  --hair: rgba(24, 18, 25, 0.11);
  --dark: #231040;
  --dot: #e6e2ea;
  --dot-border: #d8d2e0;
  --bull: #2e7d52;
  --bull-bg: #e6f4ec;
  --bear: #b0413e;
  --bear-bg: #fae9e8;
  --maxw: 1180px;
  /* Brand typefaces, loaded via Google Fonts in the page head. */
  --serif: "Gelasio", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   The prototype stylesheet, preserved 1:1.
--------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}
/* Grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.07;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--purple);
  color: #fff;
}
.btn-primary:hover {
  background: var(--purple-600);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(0, 0, 0, 0.02);
}
.btn-light {
  background: #fff;
  color: var(--purple);
}
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.arrow {
  transition: transform 0.25s ease;
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* announcement bar */
.announce {
  background: var(--dark);
  color: #e9e2f5;
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: 0.01em;
}
.announce a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.announce a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b6bbf;
  margin-right: 9px;
  vertical-align: middle;
}

/* nav — see nav.css (shared global bar, .pnav). .brand is still used by the footers. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  height: 34px;
  width: 34px;
  display: block;
}
.brand .name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -0.01em;
}
/* hero */
.hero {
  padding: 96px 0 70px;
  position: relative;
}
.hero h1 {
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  max-width: 18ch;
  font-weight: 380;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--purple);
  font-weight: 380;
}
.hero .sub {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: 26px;
  line-height: 1.5;
}
.hero .actions {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero .builtby {
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero .builtby b {
  color: var(--ink);
  font-weight: 600;
}
.hero .builtby .line {
  width: 30px;
  height: 1px;
  background: var(--hair);
}

/* product mockup */
.mock {
  margin-top: 64px;
  margin-inline: 0 auto;
  max-width: 820px;
  position: relative;
}
.mock-frame {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: 0 40px 90px -40px rgba(35, 16, 64, 0.3);
  overflow: hidden;
}
.mock-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.mock-top .dots {
  display: flex;
  gap: 6px;
}
.mock-top .dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
  display: block;
}
.mock-top .tab {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mock-top .tab svg {
  width: 14px;
  height: 14px;
}
.mock-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 432px;
}
.mock-left {
  padding: 26px 28px;
  border-right: 1px solid var(--hair);
}
.mock-right {
  padding: 26px 24px;
  background: var(--surface-2);
}
.qbar {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--lav-line);
  background: var(--lav);
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 14px;
  color: var(--ink-strong);
}
.qbar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--purple);
}
.qbar .cursor {
  width: 1.5px;
  height: 16px;
  background: var(--purple);
  animation: blink 1.1s steps(1) infinite;
  margin-left: -4px;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.think {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.think .head {
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.think .step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--hair);
}
.think .step .l {
  display: flex;
  align-items: center;
  gap: 8px;
}
.think .step .chk {
  color: var(--purple);
  font-weight: 700;
}
.think .step .t {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.answer {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.answer .sup {
  color: var(--purple);
  font-weight: 700;
  font-size: 10px;
  vertical-align: super;
  font-family: var(--mono);
}
.kd-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--purple);
  font-weight: 500;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.kd {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kd .card {
  border: 1px solid var(--lav-line);
  border-radius: 8px;
  padding: 13px 14px;
  background: var(--white);
}
.kd .card .tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kd .card.bull .tag {
  color: var(--bull);
}
.kd .card.bear .tag {
  color: var(--bear);
}
.kd .card p {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.screen-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  margin: 24px 0 12px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.row .tk {
  font-family: var(--mono);
  font-weight: 500;
}
.row .sec {
  color: var(--ink-faint);
  font-size: 11.5px;
}
.row .fit {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--purple);
  font-weight: 500;
}
.bar {
  height: 4px;
  border-radius: 3px;
  background: var(--lav);
  overflow: hidden;
  width: 54px;
  margin-top: 4px;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--purple);
}

/* trust band */
.trust {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--white);
}
.trust .wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 0;
  padding-bottom: 0;
}
.trust .cell {
  flex: 1;
  min-width: 230px;
  padding: 36px 24px;
  border-right: 1px solid var(--hair);
}
.trust .cell:last-child {
  border-right: none;
}
.trust .stat {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--purple);
  line-height: 1;
  font-weight: 360;
}
.trust .lbl {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 11px;
  max-width: 30ch;
}

/* sections */
section {
  padding: 104px 0;
}
.sec-head {
  max-width: 62ch;
}
.sec-head h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-top: 16px;
  font-weight: 370;
}
.sec-head p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin-top: 18px;
  max-width: 54ch;
}

/* pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 60px;
  border-top: 1px solid var(--hair);
}
.pillar {
  padding: 34px 28px;
  border-right: 1px solid var(--hair);
}
.pillar:last-child {
  border-right: none;
}
.pillar .pn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--purple-300);
  letter-spacing: 0.05em;
}
.pillar h3 {
  font-size: 1.55rem;
  margin-top: 14px;
  font-weight: 400;
}
.pillar p {
  color: var(--ink-soft);
  margin-top: 12px;
  font-size: 0.98rem;
}

/* features */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 78px;
}
.feature:first-of-type {
  margin-top: 60px;
}
.feature.flip .ftext {
  order: 2;
}
.feature .ftext h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-top: 14px;
  font-weight: 380;
}
.feature .ftext p {
  color: var(--ink-soft);
  margin-top: 16px;
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 46ch;
}
.feature .ftext ul {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.feature .ftext li {
  display: flex;
  gap: 11px;
  font-size: 0.97rem;
  color: var(--ink-2);
}
.feature .ftext li .dot {
  color: var(--purple);
  font-weight: 700;
  line-height: 1.4;
}
.fvis {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--white);
  padding: 24px;
  box-shadow: 0 30px 70px -45px rgba(35, 16, 64, 0.28);
  min-height: 300px;
  position: relative;
  overflow: hidden;
}
.fvis .vh {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 18px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 30px;
  background: var(--lav);
  color: var(--purple);
  font-weight: 500;
  border: 1px solid var(--lav-line);
}
.chip.q {
  background: var(--white);
  color: var(--ink-2);
  border-color: var(--hair);
}
.reslist {
  margin-top: 18px;
}
.docline {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.docline .src {
  color: var(--ink-faint);
}
.timeline {
  margin-top: 6px;
  position: relative;
  padding-left: 20px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--lav-line);
}
.tl {
  position: relative;
  padding: 9px 0;
  font-size: 13px;
}
.tl::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--purple);
}
.tl .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.tl .e {
  color: var(--ink-2);
  margin-top: 2px;
}
.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 13px;
}
.alert .pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert .pill.c {
  background: var(--bull-bg);
  color: var(--bull);
}
.alert .pill.r {
  background: var(--bear-bg);
  color: var(--bear);
}
.alert p {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.alert p b {
  color: var(--ink);
  font-weight: 600;
}

/* Each capability demo plays its 15s timeline once: a static poster frame until
   .fvis scrolls into view (JS adds .is-playing), then it runs and holds the final
   frame. Hovering replays it. Until .is-playing, every demo animation is suppressed. */
.fvis:not(.is-playing) .dr-stack *,
.fvis:not(.is-playing) .tm *,
.fvis:not(.is-playing) .sc-stack * {
  animation: none !important;
}

/* deep research — CSS-only demo: loading pipeline crossfades into the rendered
   report. Single shared 15s master cycle drives all of it. */
.dr-stack {
  display: grid;
}
.dr-stack > * {
  grid-area: 1 / 1;
}
.dr {
  margin-top: 4px;
  animation: dr-load-fade 15s ease forwards;
}
.dr-head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  font-weight: 600;
  margin-bottom: 14px;
}
.dr-row {
  display: flex;
  gap: 11px;
  padding: 7px 0;
}
.dr-ic {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.dr-row:not(:last-child) .dr-ic::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: -16px;
  width: 1.5px;
  background: var(--lav-line);
}
.dr-ic > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}
.dr-dot {
  border: 2px solid var(--dot-border);
  border-radius: 50%;
  opacity: 0;
}
.dr-spin {
  border: 2px solid var(--lav-line);
  border-top-color: var(--purple);
  border-radius: 50%;
  opacity: 0;
  animation: dr-rot 0.8s linear infinite;
}
.dr-check {
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  opacity: 1;
}
.dr-body {
  flex: 1;
  min-width: 0;
}
.dr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.dr-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.dr-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 9px;
}
.dr-topic {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--purple);
  opacity: 1;
}

/* rendered report — the loaded view that fades in once the pipeline finishes */
.dr-report {
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: dr-report-fade 15s ease forwards;
}
.dr-rep-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dr-rep-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 420;
  color: var(--ink);
}
.dr-rep-score {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--purple);
  background: var(--lav);
  border: 1px solid var(--lav-line);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.dr-rep-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 12px;
}
.dr-sup {
  color: var(--purple);
  font-weight: 700;
  font-size: 10px;
  vertical-align: super;
  font-family: var(--mono);
  margin-left: 2px;
}
.dr-rep-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--lav-line);
  border-radius: 8px;
  background: var(--white);
  font-size: 12px;
  color: var(--ink-muted);
}
.dr-rep-metric b {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
}
.dr-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 62px;
  margin-top: 16px;
  transform-origin: bottom;
  animation: dr-chart-rise 15s ease forwards;
}
.dr-chart i {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, var(--purple-300), var(--purple));
  border-radius: 3px 3px 0 0;
}
.dr-rep-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* per-stage status crossfades, keyed to the shared 15s loop */
.dr-r1 .dr-spin {
  animation:
    dr-rot 0.8s linear infinite,
    dr-s1-spin 15s linear forwards;
}
.dr-r1 .dr-check {
  animation: dr-s1-check 15s linear forwards;
}
.dr-r1 .dr-label {
  animation: dr-l1 15s linear forwards;
}
.dr-r2 .dr-dot {
  animation: dr-s2-dot 15s linear forwards;
}
.dr-r2 .dr-spin {
  animation:
    dr-rot 0.8s linear infinite,
    dr-s2-spin 15s linear forwards;
}
.dr-r2 .dr-check {
  animation: dr-s2-check 15s linear forwards;
}
.dr-r2 .dr-label {
  animation: dr-l2 15s linear forwards;
}
.dr-r3 .dr-dot {
  animation: dr-s3-dot 15s linear forwards;
}
.dr-r3 .dr-spin {
  animation:
    dr-rot 0.8s linear infinite,
    dr-s3-spin 15s linear forwards;
}
.dr-r3 .dr-check {
  animation: dr-s3-check 15s linear forwards;
}
.dr-r3 .dr-label {
  animation: dr-l3 15s linear forwards;
}
.dr-t1 {
  animation: dr-t1 15s linear forwards;
}
.dr-t2 {
  animation: dr-t2 15s linear forwards;
}
.dr-t3 {
  animation: dr-t3 15s linear forwards;
}
.dr-t4 {
  animation: dr-t4 15s linear forwards;
}
.dr-t5 {
  animation: dr-t5 15s linear forwards;
}
.dr-t6 {
  animation: dr-t6 15s linear forwards;
}
.dr-t7 {
  animation: dr-t7 15s linear forwards;
}

/* layer crossfade: pipeline out, report in */
@keyframes dr-load-fade {
  0% { opacity: 0; }
  4%, 50% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes dr-report-fade {
  0%, 51% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes dr-chart-rise {
  0%, 53% { transform: scaleY(0.55); }
  60%, 100% { transform: scaleY(1); }
}

@keyframes dr-rot {
  to {
    transform: rotate(360deg);
  }
}
@keyframes dr-s1-spin {
  0%, 8.9% { opacity: 1; }
  9%, 100% { opacity: 0; }
}
@keyframes dr-s1-check {
  0%, 8.9% { opacity: 0; }
  9%, 100% { opacity: 1; }
}
@keyframes dr-l1 {
  0%, 8.9% { color: var(--purple); }
  9%, 100% { color: var(--ink-2); }
}
@keyframes dr-s2-dot {
  0%, 8.9% { opacity: 1; }
  9%, 100% { opacity: 0; }
}
@keyframes dr-s2-spin {
  0%, 8.9% { opacity: 0; }
  9%, 29.9% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes dr-s2-check {
  0%, 29.9% { opacity: 0; }
  30%, 100% { opacity: 1; }
}
@keyframes dr-l2 {
  0%, 8.9% { color: var(--ink-faint); }
  9%, 29.9% { color: var(--purple); }
  30%, 100% { color: var(--ink-2); }
}
@keyframes dr-s3-dot {
  0%, 29.9% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes dr-s3-spin {
  0%, 29.9% { opacity: 0; }
  30%, 43.9% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes dr-s3-check {
  0%, 43.9% { opacity: 0; }
  44%, 100% { opacity: 1; }
}
@keyframes dr-l3 {
  0%, 29.9% { color: var(--ink-faint); }
  30%, 43.9% { color: var(--purple); }
  44%, 100% { color: var(--ink-2); }
}
@keyframes dr-t1 {
  0%, 10% { color: var(--ink-faint-2); opacity: 0.5; }
  11%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t2 {
  0%, 13% { color: var(--ink-faint-2); opacity: 0.5; }
  14%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t3 {
  0%, 16% { color: var(--ink-faint-2); opacity: 0.5; }
  17%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t4 {
  0%, 19% { color: var(--ink-faint-2); opacity: 0.5; }
  20%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t5 {
  0%, 22% { color: var(--ink-faint-2); opacity: 0.5; }
  23%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t6 {
  0%, 25% { color: var(--ink-faint-2); opacity: 0.5; }
  26%, 100% { color: var(--purple); opacity: 1; }
}
@keyframes dr-t7 {
  0%, 28% { color: var(--ink-faint-2); opacity: 0.5; }
  29%, 100% { color: var(--purple); opacity: 1; }
}

/* thesis monitor — CSS-only demo: an always-on scan header with
   confirming/refuting signals streaming in. 15s one-shot timeline. */
.tm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.tm-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.tm-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  animation: tm-pulse 1.6s ease infinite;
}
.tm-status-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--ink-strong);
}
.tm-scan-label {
  font-size: 12px;
  color: var(--ink-soft);
}
.tm-streams {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-stream {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--hair);
  color: var(--ink-faint-2);
}
.tm-sm1 { animation: tm-stream-on 15s linear forwards; animation-delay: 0.6s; }
.tm-sm2 { animation: tm-stream-on 15s linear forwards; animation-delay: 1s; }
.tm-sm3 { animation: tm-stream-on 15s linear forwards; animation-delay: 1.4s; }

/* signal feed — alerts always hold their slot so the box height stays fixed;
   only opacity and a small lift animate, keyed to the shared 15s loop */
.tm-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tm-a1, .tm-a2, .tm-a3 {
  opacity: 0;
}
.tm-a1 { animation: tm-a1 15s ease forwards; }
.tm-a2 { animation: tm-a2 15s ease forwards; }
.tm-a3 { animation: tm-a3 15s ease forwards; }

@keyframes tm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(73, 40, 129, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(73, 40, 129, 0); }
}
@keyframes tm-stream-on {
  0%, 4% { color: var(--ink-faint-2); border-color: var(--hair); background: transparent; }
  7%, 100% { color: var(--purple); border-color: var(--lav-line); background: var(--lav); }
}
@keyframes tm-a1 {
  0%, 13% { opacity: 0; transform: translateY(8px); }
  19%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes tm-a2 {
  0%, 29% { opacity: 0; transform: translateY(8px); }
  35%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes tm-a3 {
  0%, 45% { opacity: 0; transform: translateY(8px); }
  51%, 100% { opacity: 1; transform: translateY(0); }
}

/* screening — CSS-only demo: filters run in sequence, narrowing a 54k-company
   universe down to the matches, then the results list fades in. Shared 15s
   one-shot timeline, same crossfade-stack pattern as the deep research demo. */
.sc-stack {
  display: grid;
  margin-top: 4px;
}
.sc-stack > * {
  grid-area: 1 / 1;
}
.sc-run {
  animation: sc-run-fade 15s ease forwards;
}
.sc-run-head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  font-weight: 600;
  margin-bottom: 14px;
}
.sc-funnel {
  display: flex;
  flex-direction: column;
}
.sc-filter {
  display: flex;
  gap: 11px;
  padding: 9px 0;
}
.sc-ic {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sc-filter:not(:last-child) .sc-ic::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: -18px;
  width: 1.5px;
  background: var(--lav-line);
}
.sc-ic > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}
.sc-spin {
  border: 2px solid var(--lav-line);
  border-top-color: var(--purple);
  border-radius: 50%;
  opacity: 0;
  animation: dr-rot 0.8s linear infinite;
}
.sc-check {
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  opacity: 1;
}
.sc-body {
  flex: 1;
  min-width: 0;
}
.sc-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 2px;
}
.sc-code {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--purple);
  background: var(--lav);
  border: 1px solid var(--lav-line);
  border-radius: 5px;
  padding: 2px 7px;
  margin-top: 5px;
}
.sc-desc {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.45;
}
.sc-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  align-self: center;
  opacity: 0;
}
.sc-count b {
  color: var(--purple);
  font-weight: 600;
}
.sc-universe {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.sc-universe b {
  color: var(--ink-2);
  font-weight: 600;
}

/* per-filter reveal: spinner runs, then resolves to a check and its pass-count
   appears — each filter shrinking the universe the next one runs against */
.sc-f1 .sc-spin { animation: dr-rot 0.8s linear infinite, sc-spin1 15s linear forwards; }
.sc-f1 .sc-check { animation: sc-check1 15s linear forwards; }
.sc-f1 .sc-count { animation: sc-count1 15s linear forwards; }
.sc-f2 .sc-spin { animation: dr-rot 0.8s linear infinite, sc-spin2 15s linear forwards; }
.sc-f2 .sc-check { animation: sc-check2 15s linear forwards; }
.sc-f2 .sc-count { animation: sc-count2 15s linear forwards; }
.sc-f3 .sc-spin { animation: dr-rot 0.8s linear infinite, sc-spin3 15s linear forwards; }
.sc-f3 .sc-check { animation: sc-check3 15s linear forwards; }
.sc-f3 .sc-count { animation: sc-count3 15s linear forwards; }
.sc-f4 .sc-spin { animation: dr-rot 0.8s linear infinite, sc-spin4 15s linear forwards; }
.sc-f4 .sc-check { animation: sc-check4 15s linear forwards; }
.sc-f4 .sc-count { animation: sc-count4 15s linear forwards; }

/* rendered results — the matched companies that fade in once filters finish */
.sc-results {
  opacity: 0;
  animation: sc-results-fade 15s ease forwards;
}
.sc-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.sc-res-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 420;
  color: var(--ink);
}
.sc-res-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bull);
  background: var(--bull-bg);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.sc-row .tk {
  font-family: var(--mono);
  font-weight: 500;
}
.sc-row .sec {
  color: var(--ink-faint);
  font-size: 11.5px;
}
.sc-row .fit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--purple);
  font-weight: 500;
}
.sc-res-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* top result expands into a short cited why-this-match rationale */
.sc-caret {
  display: inline-block;
  font-size: 9px;
  color: var(--purple);
  transform: translateY(-1px);
  animation: sc-caret 15s ease forwards;
}
.sc-why {
  overflow: hidden;
  opacity: 0;
  animation: sc-why-open 15s ease forwards;
}
.sc-why-inner {
  padding: 12px 0 14px 0;
  border-bottom: 1px solid var(--hair);
}
.sc-why-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 10px;
}
.sc-why-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.sc-why-item:first-of-type {
  margin-top: 0;
}
.sc-why-pill {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bull);
  background: var(--bull-bg);
  border-radius: 20px;
  padding: 2px 9px;
}
.sc-why-item p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.sc-why-sup {
  color: var(--purple);
  font-weight: 700;
  font-size: 9px;
  vertical-align: super;
  font-family: var(--mono);
  margin-left: 2px;
}

/* layer crossfade: running funnel out, results in */
@keyframes sc-run-fade {
  0% { opacity: 0; }
  4%, 54% { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes sc-results-fade {
  0%, 55% { opacity: 0; }
  62%, 100% { opacity: 1; }
}
@keyframes sc-why-open {
  0%, 71% { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes sc-caret {
  0%, 73% { transform: translateY(-1px) rotate(0deg); }
  79%, 100% { transform: translateY(-1px) rotate(90deg); }
}
@keyframes sc-spin1 {
  0%, 7.9% { opacity: 1; }
  8%, 100% { opacity: 0; }
}
@keyframes sc-check1 {
  0%, 7.9% { opacity: 0; }
  8%, 100% { opacity: 1; }
}
@keyframes sc-count1 {
  0%, 7.9% { opacity: 0; }
  9%, 100% { opacity: 1; }
}
@keyframes sc-spin2 {
  0%, 7.9% { opacity: 0; }
  8%, 17.9% { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes sc-check2 {
  0%, 17.9% { opacity: 0; }
  18%, 100% { opacity: 1; }
}
@keyframes sc-count2 {
  0%, 17.9% { opacity: 0; }
  19%, 100% { opacity: 1; }
}
@keyframes sc-spin3 {
  0%, 17.9% { opacity: 0; }
  18%, 33.9% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes sc-check3 {
  0%, 33.9% { opacity: 0; }
  34%, 100% { opacity: 1; }
}
@keyframes sc-count3 {
  0%, 33.9% { opacity: 0; }
  35%, 100% { opacity: 1; }
}
@keyframes sc-spin4 {
  0%, 33.9% { opacity: 0; }
  34%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes sc-check4 {
  0%, 49.9% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes sc-count4 {
  0%, 49.9% { opacity: 0; }
  51%, 100% { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Hero cycle — the .mock-frame in the hero combines the three lower capability
   demos into one staged sequence: a Discover / Research / Monitor interstitial
   precedes each feature, screening surfaces DXPE, deep research renders its
   report, the monitor streams signals. JS drives the master sequence by adding
   .hc-on to each stage in turn (durations live in the page script); the inner
   step timings are CSS animation-delays that start when .hc-on lands, so each
   panel plays once and holds. Removing .hc-on on replay drops the animations
   and re-adding restarts them from zero. Same play-once-then-replay-on-hover
   contract as the .fvis demos.
--------------------------------------------------------------------------- */
.hc-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 460px;
}
.hc-stage {
  grid-area: 1 / 1;
  position: relative;
  background: var(--white);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
/* explicit stacking so each revealed stage's opaque panel covers the one
   beneath; without it the opacity transitions promote composite layers that
   Chrome can paint out of DOM order. */
.hc-stage:nth-child(1) { z-index: 1; }
.hc-stage:nth-child(2) { z-index: 2; }
.hc-stage:nth-child(3) { z-index: 3; }
.hc-stage:nth-child(4) { z-index: 4; }
.hc-stage:nth-child(5) { z-index: 5; }
.hc-stage:nth-child(6) { z-index: 6; }
.hc-stage:nth-child(7) { z-index: 7; }
.hc-stage.hc-on {
  opacity: 1;
}
.hc-vh {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 16px;
}

/* interstitial label slides */
.hc-label {
  justify-content: center;
  align-items: flex-start;
}
.hc-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 500;
  opacity: 0;
}
.hc-title {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--ink);
  margin-top: 14px;
  opacity: 0;
}
.hc-query {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--purple);
  margin-top: 18px;
  white-space: nowrap;
  opacity: 0;
}
.hc-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 1.5px solid var(--purple);
  color: var(--ink-soft);
}
.hc-l1 .hc-type { --tw: 38ch; }
.hc-l2 .hc-type { --tw: 38ch; }
.hc-l3 .hc-type { --tw: 44ch; }

/* closing wordmark — a near-blank frame the cycle rests on */
.hc-end {
  justify-content: center;
  align-items: center;
}
.hc-wordmark {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0;
}
/* terminal prompt resting beneath the wordmark */
.hc-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-soft);
  opacity: 0;
}
.hc-prompt-sigil {
  line-height: 1;
}
.hc-caret {
  width: 1.5px;
  height: 1.05em;
  background: var(--purple);
  animation: hc-blink 1.1s step-end infinite;
}
@keyframes hc-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* shared step icon: a spinner that resolves into a check */
.hc-ic {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.hc-ic > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
}
.hc-spin {
  border: 2px solid var(--lav-line);
  border-top-color: var(--purple);
  border-radius: 50%;
  opacity: 0;
}
.hc-check {
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  opacity: 0;
}
.hc-fbody {
  flex: 1;
  min-width: 0;
}
.hc-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hc-flabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 2px;
}
.hc-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* screening funnel */
.hc-filter,
.hc-dr-row {
  display: flex;
  gap: 11px;
  padding: 8px 0;
}
.hc-filter:not(:last-child) .hc-ic::after,
.hc-dr-row:not(:last-child) .hc-ic::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: -16px;
  width: 1.5px;
  background: var(--lav-line);
}
.hc-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  align-self: center;
  opacity: 0;
}
.hc-count b {
  color: var(--purple);
  font-weight: 600;
}
.hc-universe {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.hc-universe b {
  color: var(--ink-2);
  font-weight: 600;
}
.hc-match {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--lav-line);
  background: var(--lav);
  border-radius: 8px;
  padding: 14px 16px;
  opacity: 0;
}
.hc-match-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hc-match-tk {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.hc-sec {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: 6px;
}
.hc-match-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bull);
  background: var(--bull-bg);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hc-match-tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.hc-mtab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  background: var(--white);
  border: 1px solid var(--lav-line);
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}
.hc-mtab.is-on {
  color: var(--purple);
  border-color: var(--purple);
  font-weight: 600;
}
.hc-why {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.hc-why-row {
  background: var(--white);
  border: 1px solid var(--lav-line);
  border-radius: 8px;
  padding: 10px 12px;
}
.hc-why-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hc-why-crit {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.hc-why-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bull);
  white-space: nowrap;
}
.hc-why-val i {
  font-style: normal;
  color: var(--ink-faint);
  font-weight: 400;
}
.hc-why-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 6px;
}

/* the loading + result layers crossfade in place; the stack grows to fill the
   pane and centers its content so the loading screens sit mid-pane, not pinned
   to the top under the caption */
.hc-sc-stack,
.hc-dr-stack {
  flex: 1;
  display: grid;
  align-content: center;
  align-items: center;
}
.hc-sc-stack > *,
.hc-dr-stack > * {
  grid-area: 1 / 1;
}
/* center the loading lists as a constrained block, matching the result card
   width, so they sit mid-pane rather than spanning to the padding edges */
.hc-funnel-group,
.hc-dr-pipe {
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
/* the monitor has no crossfade layers, so it centers its head and feed as one
   column to sit mid-pane like the screening and research result states */
.hc-tm-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-report {
  opacity: 0;
}
.hc-rep-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hc-rep-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 420;
  color: var(--ink);
}
.hc-rep-score {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--purple);
  background: var(--lav);
  border: 1px solid var(--lav-line);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hc-rep-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 12px;
}
.hc-sup {
  color: var(--purple);
  font-weight: 700;
  font-size: 10px;
  vertical-align: super;
  font-family: var(--mono);
  margin-left: 2px;
}
.hc-rep-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--lav-line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.hc-rep-metric b {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
}
.hc-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  margin-top: 16px;
  transform-origin: bottom;
  transform: scaleY(0.5);
}
.hc-chart i {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, var(--purple-300), var(--purple));
  border-radius: 3px 3px 0 0;
}

/* thesis monitor */
.hc-tm-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.hc-tm-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hc-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
}
.hc-tm-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--ink-strong);
}
.hc-tm-scan {
  font-size: 12px;
  color: var(--ink-soft);
}
.hc-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.hc-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 13px;
  opacity: 0;
}
.hc-apill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}
.hc-apill.c {
  background: var(--bull-bg);
  color: var(--bull);
}
.hc-apill.r {
  background: var(--bear-bg);
  color: var(--bear);
}
.hc-alert p {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.hc-alert p b {
  color: var(--ink);
  font-weight: 600;
}

/* step timings — start when .hc-on lands, hold their final frame (forwards) */
.hc-label.hc-on .hc-title {
  animation: hc-rise 0.55s ease both 0.08s;
}
.hc-label.hc-on .hc-query {
  animation: hc-rise 0.45s ease both 0.32s;
}
.hc-l1.hc-on .hc-type {
  animation: hc-typing 1.3s steps(38) both 0.5s, hc-typecaret 0.7s step-end infinite 0.5s;
}
.hc-l2.hc-on .hc-type {
  animation: hc-typing 1.3s steps(38) both 0.5s, hc-typecaret 0.7s step-end infinite 0.5s;
}
.hc-l3.hc-on .hc-type {
  animation: hc-typing 1.5s steps(44) both 0.5s, hc-typecaret 0.7s step-end infinite 0.5s;
}
.hc-end.hc-on .hc-wordmark {
  animation: hc-rise 0.6s ease both 0.1s;
}
.hc-end.hc-on .hc-prompt {
  animation: hc-rise 0.6s ease both 0.32s;
}

.hc-panel.hc-on .hc-spin {
  animation:
    hc-rot 0.8s linear infinite,
    hc-spin-hide 0.25s linear both var(--d);
}
.hc-panel.hc-on .hc-check {
  animation: hc-pop 0.28s ease both var(--d);
}

.hc-screen.hc-on .hc-count {
  animation: hc-appear 0.3s ease both calc(var(--d) + 0.05s);
}
.hc-sf1 { --d: 0.4s; }
.hc-sf2 { --d: 0.95s; }
.hc-sf3 { --d: 1.5s; }
.hc-sf4 { --d: 2.05s; }
.hc-screen.hc-on .hc-funnel-group {
  animation: hc-fade-out 0.5s ease forwards 2.7s;
}
.hc-screen.hc-on .hc-match {
  animation: hc-rise 0.6s ease both 2.9s;
}

.hc-dr1 { --d: 0.5s; }
.hc-dr2 { --d: 1.3s; }
.hc-dr3 { --d: 2.1s; }
.hc-research.hc-on .hc-dr-pipe {
  animation: hc-fade-out 0.5s ease forwards 2.9s;
}
.hc-research.hc-on .hc-report {
  animation: hc-appear 0.6s ease both 3.1s;
}
.hc-research.hc-on .hc-chart {
  animation: hc-rise-y 0.7s ease both 3.4s;
}

.hc-al1 { --d: 0.4s; }
.hc-al2 { --d: 1.4s; }
.hc-al3 { --d: 2.4s; }
.hc-monitor.hc-on .hc-alert {
  animation: hc-rise 0.55s ease both var(--d);
}
.hc-monitor.hc-on .hc-live {
  animation: hc-pulse 1.6s ease infinite;
}

@keyframes hc-rot {
  to { transform: rotate(360deg); }
}
@keyframes hc-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hc-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hc-spin-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hc-pop {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hc-rise {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hc-rise-y {
  0% { transform: scaleY(0.5); }
  100% { transform: scaleY(1); }
}
@keyframes hc-typing {
  from { width: 0; }
  to { width: var(--tw); }
}
@keyframes hc-typecaret {
  0%, 100% { border-color: var(--purple); }
  50% { border-color: transparent; }
}
@keyframes hc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(73, 40, 129, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(73, 40, 129, 0); }
}
/* why portrait */
.why {
  background: var(--white);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  margin-top: 56px;
  border-radius: 10px;
  overflow: hidden;
}
.why-cell {
  background: var(--white);
  padding: 34px 32px;
}
.why-cell .ic {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--lav);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  margin-bottom: 18px;
}
.why-cell .ic svg {
  width: 20px;
  height: 20px;
}
.why-cell h3 {
  font-size: 1.3rem;
  font-weight: 400;
}
.why-cell p {
  color: var(--ink-soft);
  margin-top: 10px;
  font-size: 0.97rem;
  line-height: 1.55;
}

/* testimonials */
.tgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.quote {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quote .mark {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--lav-line);
  line-height: 0.4;
  height: 24px;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.42;
  font-weight: 380;
  letter-spacing: -0.005em;
  margin: 18px 0 26px;
}
.quote .by {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.quote .by .role {
  font-weight: 600;
}
.quote .by .fund {
  color: var(--ink-soft);
}
.quote .by .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lav);
  border: 1px solid var(--lav-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--purple);
}

/* story */
.story {
  background: var(--dark);
  color: #efeaf7;
  position: relative;
  overflow: hidden;
}
.story::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(139, 107, 191, 0.22), transparent 65%);
  pointer-events: none;
}
.story .wrap {
  position: relative;
  z-index: 1;
}
.story .eyebrow {
  color: #a98fd6;
}
.story h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  margin-top: 16px;
  max-width: 22ch;
  font-weight: 370;
}
.story p {
  color: #d4c9e6;
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 64ch;
  margin-top: 24px;
}
.story .founders {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.story .founders .f {
  font-size: 14px;
}
.story .founders .f b {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #fff;
  font-weight: 500;
  display: block;
}
.story .founders .f span {
  color: #a98fd6;
}

/* final cta */
.cta {
  background: var(--purple);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.14), transparent 55%);
}
.cta .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 {
  color: #fff;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  max-width: 18ch;
  font-weight: 370;
}
.cta .perks {
  display: flex;
  gap: 34px;
  margin: 36px 0 30px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta .perks .p {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: #e9e2f5;
}
.cta .perks .p svg {
  width: 17px;
  height: 17px;
  color: #cbb8ec;
}
.cta .email {
  margin-top: 26px;
  font-size: 14px;
  color: #d4c9e6;
}
.cta .email a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* footer */
footer {
  background: var(--paper);
  padding: 56px 0 40px;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}
.foot .brand img {
  height: 30px;
  width: 30px;
}
.foot .brand .name {
  font-size: 23px;
}
.foot .links {
  display: flex;
  gap: 54px;
  flex-wrap: wrap;
}
.foot .col h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: 14px;
}
.foot .col a {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 9px;
}
.foot .col a:hover {
  color: var(--purple);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 14px;
}
.foot-bottom .social {
  display: flex;
  gap: 16px;
}
.foot-bottom .social a:hover {
  color: var(--purple);
}

/* scroll reveal + hero stagger */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* manifesto */
.manifesto {
  padding: 118px 0;
  border-bottom: 1px solid var(--hair);
}
.manifesto .lead {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 28px;
}
.manifesto h2 {
  font-family: var(--serif);
  font-weight: 330;
  font-size: clamp(2rem, 4.3vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 23ch;
}
.manifesto h2 em {
  font-style: italic;
  color: var(--purple);
}

@media (max-width: 880px) {
  .mock-body {
    grid-template-columns: 1fr;
  }
  .mock-right {
    border-top: 1px solid var(--hair);
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .feature.flip .ftext {
    order: 0;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillar {
    padding: 28px 0;
    border-right: none;
    border-bottom: 1px solid var(--hair);
  }
  .pillar:last-child {
    border-bottom: none;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .tgrid {
    grid-template-columns: 1fr;
  }
  .trust .cell {
    border-right: none;
    border-bottom: 1px solid var(--hair);
  }
  .wrap {
    padding: 0 22px;
  }
  section {
    padding: 72px 0;
  }
  .manifesto {
    padding: 66px 0;
  }
}

/* phone breakpoint — the 880px block collapses the grids; this tightens the
   spacing and scales the type down so the nowrap hero-cycle query and the
   capability panels fit a narrow viewport without horizontal clipping */
@media (max-width: 600px) {
  .wrap {
    padding: 0 16px;
  }
  .brand .name {
    font-size: 22px;
  }

  /* hero */
  .hero {
    padding: 52px 0 48px;
  }
  .hero h1 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }
  .hero .sub {
    margin-top: 20px;
  }
  .hero .actions {
    margin-top: 28px;
  }
  .mock {
    margin-top: 40px;
  }

  /* hero cycle mock — tighten padding and shrink the typed query so its
     fixed-character nowrap line fits the frame on common phone widths */
  .hc-body {
    min-height: 420px;
  }
  .hc-stage {
    padding: 24px 18px;
  }
  .hc-title {
    font-size: 2rem;
  }
  .hc-query {
    font-size: 11px;
    margin-top: 14px;
  }
  .hc-wordmark {
    font-size: 2rem;
  }

  /* sections */
  section {
    padding: 56px 0;
  }
  .manifesto {
    padding: 52px 0;
  }
  .sec-head p {
    font-size: 1rem;
  }

  /* capability visuals */
  .fvis {
    padding: 18px;
  }
  .feature {
    gap: 28px;
  }

  /* trust band — cells stack full width inside the wrap padding */
  .trust .cell {
    padding: 28px 0;
  }
  .trust .stat {
    font-size: 2.1rem;
  }

  /* testimonials */
  .quote {
    padding: 26px 22px;
  }
  .quote blockquote {
    font-size: 1.18rem;
  }

  /* story / cta / footer — pull the wrapped flex rows closer together */
  .story .founders {
    gap: 24px;
  }
  .cta .perks {
    gap: 14px 24px;
  }
  .foot .links {
    gap: 32px;
  }
}

/* accessibility: keyboard focus ring (focus-visible only — no change on mouse) */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* accessibility: disable entrance/scroll animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal,
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .qbar .cursor {
    animation: none;
  }
  .btn,
  .arrow,
  .nav-links a::after {
    transition: none;
  }
  /* freeze the deep research demo: pipeline on its completed snapshot, report hidden */
  .dr,
  .dr-report,
  .dr-chart,
  .dr-dot,
  .dr-spin,
  .dr-check,
  .dr-label,
  .dr-topic {
    animation: none;
  }
  /* freeze the thesis monitor on its settled snapshot: signals shown */
  .tm-live {
    animation: none;
  }
  .tm-a1,
  .tm-a2,
  .tm-a3 {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .tm-stream {
    animation: none;
    color: var(--purple);
    border-color: var(--lav-line);
    background: var(--lav);
  }
  /* freeze the screening demo on its completed funnel: checks and counts shown, results hidden */
  .sc-run,
  .sc-results,
  .sc-spin,
  .sc-check {
    animation: none;
  }
  .sc-spin {
    opacity: 0;
  }
  .sc-count {
    animation: none;
    opacity: 1;
  }
  .sc-why {
    animation: none;
    opacity: 1;
  }
  .sc-caret {
    animation: none;
    transform: translateY(-1px) rotate(90deg);
  }
  /* freeze the hero cycle: drop the spinners and show each panel settled. JS
     leaves every stage .hc-on so the topmost (monitor) renders as a still. */
  .hc-stage * {
    animation: none !important;
  }
  .hc-spin {
    display: none;
  }
  .hc-check,
  .hc-count,
  .hc-match,
  .hc-report,
  .hc-alert,
  .hc-title,
  .hc-wordmark,
  .hc-prompt,
  .hc-query {
    opacity: 1;
    transform: none;
  }
  .hc-type {
    width: auto;
    border-right: none;
  }
  .hc-dr-pipe,
  .hc-funnel-group {
    opacity: 0;
  }
  .hc-chart {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Dark mode — follows the OS. Light values above are the source of truth; this
   block only re-points the tokens. The vivid purple fills are re-pinned by rule
   because the --purple token is lightened here for accent text on dark.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Trial / demo modal — hosts the embedded HubSpot form.
--------------------------------------------------------------------------- */
.trial-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
  background: rgba(24, 18, 25, 0.55);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.trial-modal[hidden] {
  display: none;
}
.trial-modal-box {
  /* HubSpot renders the embedded form light-only, so pin the modal to the light
     palette regardless of the OS color scheme to keep them consistent. */
  --white: #ffffff;
  --paper: #f8f8f6;
  --surface-2: #fbfafc;
  --ink: #181219;
  --ink-soft: #5d5663;
  --purple: #492881;
  --lav: #ece6f4;
  --hair: rgba(24, 18, 25, 0.11);
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(24, 18, 25, 0.28);
}
.trial-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.trial-modal-close:hover {
  background: var(--lav);
  color: var(--ink);
}
.trial-modal-title {
  margin: 14px 0 24px;
  font-family: var(--serif);
  color: var(--ink);
}
@media (max-width: 600px) {
  .trial-modal {
    padding: 40px 14px;
  }
  .trial-modal-box {
    padding: 28px 22px;
  }
}

/* ---------------------------------------------------------------------------
   Calendar embed — demo-booking confirmation page.
--------------------------------------------------------------------------- */
.calendar-embed {
  margin: 40px auto 0;
  max-width: 760px;
}
.calendar-embed .meetings-iframe-container {
  min-height: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100d16;
    --white: #1a1622;
    --surface-2: #15121d;
    --ink: #f5f2fa;
    --ink-strong: #e8e3f0;
    --ink-2: #d8d2e2;
    --ink-muted: #b6afc1;
    --ink-soft: #a39db0;
    --ink-faint: #847d92;
    --ink-faint-2: #615a70;
    --purple: #b9a4e6;
    --purple-300: #9c83cc;
    --lav: #251d37;
    --lav-line: rgba(168, 143, 214, 0.22);
    --hair: rgba(255, 255, 255, 0.1);
    --dot: #2f2940;
    --dot-border: #3a3350;
    --bull: #6ed79f;
    --bull-bg: rgba(46, 125, 82, 0.18);
    --bear: #f0928f;
    --bear-bg: rgba(176, 65, 62, 0.18);
  }

  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  /* vivid purple fills with white text: keep the light-mode purple value */
  .btn-primary {
    background: #492881;
  }
  .btn-primary:hover {
    background: #5b3499;
  }
  .btn-light {
    color: #492881;
  }
  .cta {
    background: #492881;
  }
}

/* blog showcase */
.blog-showcase {
  padding-top: 72px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  margin-top: 56px;
  border-radius: 10px;
  overflow: hidden;
}
.blog-card {
  background: var(--white);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}
.blog-card h3 {
  font-size: 1.3rem;
  font-weight: 400;
}
.blog-card h3 a {
  color: var(--ink-strong);
}
.blog-card h3 a:hover {
  color: var(--purple);
}
.blog-card-count {
  color: var(--ink-faint);
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card-desc {
  color: var(--ink-soft);
  margin-top: 10px;
  font-size: 0.97rem;
  line-height: 1.55;
}
.blog-card-posts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.blog-card-posts li {
  padding: 7px 0;
  border-top: 1px solid var(--hair);
  font-size: 0.95rem;
}
.blog-card-posts a {
  color: var(--ink-2);
}
.blog-card-posts a:hover {
  color: var(--purple);
}
.blog-card-empty {
  color: var(--ink-faint);
  margin-top: 18px;
  font-size: 0.95rem;
}
.blog-card-more {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--purple);
}
.blog-card-more .arrow {
  transition: transform 0.24s ease;
  display: inline-block;
}
.blog-card-more:hover .arrow {
  transform: translateX(4px);
}