@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Radius rule: surfaces 14px, controls 10px, chips full pill. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --ink: #0d1017;
  --ink-2: #4a5160;
  --ink-3: #646b78;
  --rule: rgba(13, 16, 23, 0.1);
  --rule-strong: rgba(13, 16, 23, 0.18);
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --band: rgba(37, 99, 235, 0.07);
  --shadow: 0 1px 0 rgba(13, 16, 23, 0.04), 0 18px 40px -24px rgba(30, 45, 80, 0.28);
  --r-surface: 14px;
  --r-control: 10px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c10;
    --surface: #12141a;
    --surface-2: #181b23;
    --ink: #eceef2;
    --ink-2: #a6acb8;
    --ink-3: #8b919d;
    --rule: rgba(255, 255, 255, 0.09);
    --rule-strong: rgba(255, 255, 255, 0.16);
    --accent: #5b8cff;
    --accent-ink: #0b0c10;
    --accent-soft: rgba(91, 140, 255, 0.14);
    --band: rgba(91, 140, 255, 0.1);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 50px -30px rgba(0, 0, 0, 0.7);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mark path { stroke-width: 2.75; }
.mark .mark-trend { stroke-width: 2; opacity: 0.45; }
.mark circle { fill: var(--accent); stroke: none; }
.wordmark {
  display: inline-block;
  width: 120px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("img/wordmark.png") left center / contain no-repeat;
  mask: url("img/wordmark.png") left center / contain no-repeat;
}
.wordmark-sm { width: 100px; height: 15px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-inner > .btn { margin-left: auto; }
  .wordmark { width: 104px; height: 16px; }
}

/* Hero */
.hero { padding-top: 64px; padding-bottom: 96px; }
.hero-title {
  font-size: clamp(2.4rem, 6.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 620;
  max-width: 16ch;
}
.hero-title span { display: block; }
.hero-title span:first-child { color: var(--ink-3); }
.hero-title em { font-style: normal; color: var(--accent); }
@media (min-width: 900px) { .hero-title { max-width: none; } }

.hero-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
}
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Reconciliation panel */
.recon {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.recon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.recon-title { font-weight: 560; }
.recon-note { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.recon-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .recon-body { grid-template-columns: minmax(0, 1fr) 236px; } }
.recon-chart { padding: 6px 4px 2px; }
#recon-svg { display: block; width: 100%; height: auto; cursor: ew-resize; touch-action: pan-y; outline: none; }
#recon-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
#recon-svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
#recon-svg .axis-sel { fill: var(--accent); font-weight: 600; }
.l-billing, .l-cash { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.l-billing { stroke: var(--ink); }
.l-cash { stroke: var(--ink-3); stroke-dasharray: 5 5; }
.gap-band { fill: var(--band); stroke: none; }
.perp line { stroke: var(--accent); stroke-width: 1.5; }
.perp circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.perp .corner { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.baseline { stroke: var(--rule-strong); stroke-width: 1; }
.perp.animate, .perp.animate circle { transition: transform 0.45s var(--ease); }

.recon-readout {
  margin: 0;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
}
@media (min-width: 700px) { .recon-readout { border-top: 0; border-left: 1px solid var(--rule); } }
.rr-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.rr-row dt { color: var(--ink-2); }
.rr-row dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rr-gap { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); font-weight: 560; }
.rr-gap dt { color: var(--ink); }
.rr-sub { padding-left: 12px; font-size: 12.5px; }
.rr-sub dt, .rr-sub dd { color: var(--ink-3); }
.rr-zero { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
.rr-zero dt, .rr-zero dd { color: var(--accent); font-weight: 600; }
[data-k] { transition: opacity 0.2s; }

/* Section titles */
.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 22ch;
}

/* Parallel rails */
.parallel { padding-block: 96px; border-top: 1px solid var(--rule); }
.rails { position: relative; margin-top: 56px; }
.rail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0 14px;
  border-bottom: 1.5px solid var(--rule-strong);
}
.rail-src { color: var(--ink-3); font-size: 15px; }
.rail-val { font-family: var(--mono); font-size: clamp(1.1rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rails-perp {
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 58%;
  width: 2px;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease) 0.15s;
}
.rails-perp span {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
/* Dot centers sit on each rail's bottom border. */
.rails-perp span:nth-child(1) { top: calc(12px + var(--rail-h, 74px) * 1 - 5px); transition-delay: 0.55s; }
.rails-perp span:nth-child(2) { top: calc(12px + var(--rail-h, 74px) * 2 - 5px); transition-delay: 0.75s; }
.rails-perp span:nth-child(3) { top: calc(12px + var(--rail-h, 74px) * 3 - 5px); transition-delay: 0.95s; }
.rails.is-in .rails-perp { transform: scaleY(1); }
.rails.is-in .rails-perp span { opacity: 1; transform: scale(1); }
.parallel-copy { margin-top: 40px; font-size: 18px; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 640px) {
  .rails-perp { left: 72%; }
  .rail { flex-direction: column; gap: 4px; }
}

/* Bento */
.product { padding-block: 96px; border-top: 1px solid var(--rule); }
.bento {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cell-revenue { grid-column: span 4; }
  .cell-books { grid-column: span 2; }
  .cell-plan { grid-column: span 2; }
  .cell-ai { grid-column: span 4; }
  .cell-cs { grid-column: span 6; }
}
.cell {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.cell h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.cell-text p { margin-top: 6px; color: var(--ink-2); font-size: 15px; max-width: 46ch; }

/* Cohort heatmap */
.cohort { display: grid; grid-template-columns: 64px repeat(6, minmax(0, 1fr)); gap: 4px; font-family: var(--mono); font-size: 11px; }
.cohort .c-lab { color: var(--ink-3); display: flex; align-items: center; }
.cohort .c-head { color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.cohort .c {
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), var(--surface-2));
  color: var(--ink);
}
.cohort .c.hi { color: #fff; }
.cohort .c-empty { height: 30px; }
@media (max-width: 480px) { .cohort { grid-template-columns: 52px repeat(6, minmax(0, 1fr)); font-size: 10px; } }

/* Books */
.cell-books { background: var(--surface-2); }
.basis { margin-top: auto; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--rule); }
.seg-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  border: 0;
  background: none;
  color: var(--ink-2);
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s;
}
.seg-btn.is-on { background: var(--ink); color: var(--bg); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl { margin: 18px 0 0; font-size: 14px; }
.pl > div { display: flex; justify-content: space-between; padding: 6px 0; }
.pl dt { color: var(--ink-2); }
.pl dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pl .pl-net { border-top: 1px solid var(--rule-strong); margin-top: 4px; padding-top: 10px; font-weight: 600; }
.pl .pl-net dt { color: var(--ink); }

/* Planning fan */
.fan { width: 100%; height: auto; margin-top: auto; }
.fan path, .fan line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fan-actual { stroke: var(--ink); stroke-width: 2.25; }
.fan-base { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 4 5; }
.fan-hire { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 1 5; }
.fan-price { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 5; }
.fan-now { stroke: var(--rule-strong); stroke-width: 1; }
.fan-key { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); margin-top: -8px; }
.fan-key li { display: flex; align-items: center; gap: 8px; }
.fan-key i { width: 16px; height: 0; border-top: 2px dashed var(--ink-3); }
.fan-key .k-price { border-color: var(--accent); }
.fan-key .k-hire { border-top-style: dotted; }

/* AI CFO */
.cell-ai { background: var(--ink); color: var(--bg); border-color: transparent; }
.cell-ai .cell-text p { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.chat { display: grid; gap: 12px; margin-top: auto; max-width: 560px; }
.chat p { font-size: 15px; line-height: 1.5; padding: 12px 16px; border-radius: 12px; }
.chat-q { justify-self: end; max-width: 85%; background: color-mix(in srgb, var(--bg) 12%, var(--ink)); }
.chat-a { max-width: 92%; border: 1px solid color-mix(in srgb, var(--bg) 18%, var(--ink)); }
@media (prefers-color-scheme: dark) {
  .cell-ai { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); border-color: var(--rule); }
  .cell-ai .cell-text p { color: var(--ink-2); }
  .chat-q { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
  .chat-a { border-color: var(--rule-strong); }
}

/* Customers and sales */
@media (min-width: 900px) {
  .cell-cs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
}
.accounts-title { font-size: 13px; font-weight: 560; color: var(--ink-3); margin-bottom: 8px; }
.accounts li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
}
.accounts li + li { border-top: 1px solid var(--rule); }
.acct { font-weight: 550; }
.why { color: var(--ink-2); }
.amt { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (max-width: 560px) {
  .accounts li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .why { grid-column: 1; grid-row: 2; font-size: 13px; }
  .amt { grid-row: 1; grid-column: 2; }
}
.footnote { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

/* How it works */
.how { padding-block: 96px; border-top: 1px solid var(--rule); }
.steps { margin-top: 56px; position: relative; display: grid; gap: 48px; padding-left: 40px; }
.steps::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--rule-strong); }
.step { position: relative; max-width: 620px; }
.step::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 12px;
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.logos { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 20px; align-items: center; }
.logos svg { width: 26px; height: 26px; fill: var(--ink-2); display: block; }
@media (min-width: 900px) {
  .steps { padding-left: 0; margin-left: 40%; }
  .steps::before { left: -40px; }
  .step::before { left: -40px; }
}

/* Closing */
.closing { padding-bottom: 96px; }
.closing-inner {
  border-radius: var(--r-surface);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(32px, 6vw, 72px);
  display: grid;
  gap: 16px;
  justify-items: start;
  position: relative;
  overflow: hidden;
}
.closing-inner::after {
  content: "";
  position: absolute;
  right: clamp(24px, 8vw, 96px);
  bottom: clamp(24px, 5vw, 56px);
  width: clamp(80px, 14vw, 160px);
  height: clamp(80px, 14vw, 160px);
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  opacity: 0.9;
  pointer-events: none;
}
.closing-inner h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05; font-weight: 620; }
.closing-inner p { font-size: 18px; color: var(--ink-2); max-width: 40ch; }
.closing-inner .btn { margin-top: 12px; }
@media (max-width: 640px) { .closing-inner::after { display: none; } }

/* Footer */
.footer { border-top: 1px solid var(--rule); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-block: 28px; font-size: 14px; color: var(--ink-3); }
.footer-inner .wordmark { color: var(--ink); }
.footer-inner a { text-decoration: none; color: var(--ink-2); }
.footer-inner a:hover { color: var(--ink); }
.footer-inner .copy { margin-left: auto; }

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rails-perp, .rails-perp span, .perp { transition: none; }
}