/* =====================================================================
   BehaviorGPT — standalone waitlist landing page
   Self-contained styles (this page does not use the shared styles.css).
   Aesthetic: Oxygen Mono throughout, generous whitespace, no hard border
   lines. The hero headline types itself out with a blinking caret.
   The decision tree mirrors the Unbox intelligence demo.
   ===================================================================== */

:root {
  /* Oxygen Mono carries the whole page — display, body, and the typewriter
     hero headline (intro line + rotating word). */
  --font-sans: 'Oxygen Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: 'Oxygen Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text: #1a1a1a;
  --text-secondary: #3f4147;
  --text-muted: #6b7280;
  --text-faint: #9aa0aa;

  --bg: #ffffff;
  --bg-subtle: #fafbfc;
  --border: #e7e8ec;
  --border-strong: #e4e6ea;

  /* ===== Brand palette =====
     Seven hue families, five shades each (dark / bright / vivid / light /
     pastel). Every chromatic color on the page is drawn from this set; the
     neutrals above (text / bg / borders) stay grayscale by design. */
  --yellow-dark: #6e5e1f;  --yellow-bright: #efc13a;  --yellow-vivid: #f4d63f;  --yellow-light: #f3e67b;  --yellow-pastel: #fcf7cb;
  --orange-dark: #6b3d14;  --orange-bright: #e2893c;  --orange-vivid: #ec9a56;  --orange-light: #f3c79a;  --orange-pastel: #f7e4cd;
  --green-dark:  #2f6b1e;  --green-bright:  #59a83e;  --green-vivid:  #8ed965;  --green-light:  #b8e7a1;  --green-pastel:  #daf3cc;
  --blue-dark:   #16266c;  --blue-bright:   #2f72e6;  --blue-vivid:   #49a5e6;  --blue-light:   #9bcfec;  --blue-pastel:   #d7effb;
  --purple-dark: #3d1e8e;  --purple-bright: #6a2fe5;  --purple-vivid: #8e5bf3;  --purple-light: #c3a9f2;  --purple-pastel: #e6ddf7;
  --pink-dark:   #6d1e53;  --pink-bright:   #b73f90;  --pink-vivid:   #e25ab1;  --pink-light:   #ec9bca;  --pink-pastel:   #f7daeb;
  --red-dark:    #6d1616;  --red-bright:    #d53f30;  --red-vivid:    #ec6a5a;  --red-light:    #ee9b8f;  --red-pastel:    #f7dad3;

  /* Semantic roles mapped onto the palette */
  --accent: var(--blue-bright);       /* primary blue, matches the Unbox intelligence tree */
  --accent-hover: #2560cc;            /* blue between --blue-bright and --blue-dark */
  --accent-soft: var(--blue-pastel);
  --success: var(--green-bright);
  --error: var(--red-bright);
  --black: #131313;

  --viz-grey: #cfcfcf;                /* neutral background dots in the embedding cloud */
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Full-bleed UMAP breaks out to 100vw; clip horizontally so the scrollbar
     width never spills into a stray horizontal scroll. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ===== Layout ===== */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 72px 0;
}

@media (max-width: 700px) {
  .section { padding: 48px 0; }
}

/* ===== Site chrome (header / footer) ===== */
.site-head {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 28px; width: auto; }

.site-head-nav { display: flex; align-items: center; gap: 22px; }
.head-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.head-link:hover { color: var(--text); }

@media (max-width: 560px) {
  .site-head { padding-top: 18px; }
  .brand img { height: 25px; }
  .head-link { display: none; }
}

.site-foot {
  margin-top: 32px;
  border-top: 1px solid var(--border);
}
.foot-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-brand { display: inline-flex; align-items: center; opacity: 0.8; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-nav a, .foot-copy {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}
.foot-nav a { transition: color 0.15s ease; }
.foot-nav a:hover { color: var(--text); }
.foot-copy { margin-left: auto; }

@media (max-width: 560px) {
  .foot-copy { margin-left: 0; flex-basis: 100%; }
}

.section-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  margin-bottom: 44px;
}

/* Lead line under a section title: states the section's value proposition
   before the supporting grid. Pulled up under the title, then spaced off
   the content below. */
.section-lead {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
  max-width: 640px;
  margin: -24px auto 48px;
}

/* ===== Motion (driven by behaviorgpt-motion.js) ===== */
/* On-scroll reveals: the hidden state is gated on .motion-ok (added by JS, and
   never under reduced motion), so crawlers and no-JS visitors always see the
   full page. Tagged elements fade and rise once as they enter; grouped
   elements stagger via --reveal-i, set per element from JS. */
html.motion-ok [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
html.motion-ok [data-reveal].is-revealed { opacity: 1; transform: none; }

/* The hero drifts slightly slower than the page while it enters, reading as
   depth between the receding cloud and the incoming type. */
html.motion-ok .hero {
  transform: translateY(var(--hero-parallax, 0px));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-ok .hero { transform: none; }
}

/* ===== Hero ===== */
.umap-section { padding: 40px 0 8px; }
@media (max-width: 700px) { .umap-section { padding: 20px 0 4px; } }

/* Mount intro: behaviorgpt-viz.js lifts the .umap-box out of flow over the
   whole viewport (opaque, hiding the page beneath) while the visitor starts
   inside the exploded cloud, then drives top/height back into the band and
   returns it to flow. The ::before placeholder holds the band's height in the
   section meanwhile, so the layout beneath never shifts and the handoff back
   into flow is seamless. */
.umap-section.umap-intro::before {
  content: '';
  display: block;
  height: clamp(360px, 56vh, 620px);
}
.umap-section.umap-intro .umap-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-left: 0;
  height: 100vh;
  height: 100dvh;           /* track the iOS URL bar where supported */
  z-index: 60;              /* over the in-flow header, under .modal-overlay (100) */
  background: var(--bg);
}

.hero {
  text-align: center;
  padding: 28px 0 clamp(112px, 20vh, 220px);
}

.hero-title {
  font-family: var(--font-mono);
  font-weight: 400;
  /* Two lines: the fixed intro ("The foundation model for") on top and the
     rotating word on its own line below (see .rotator). The intro stays on a
     single row, scaled to the viewport width (capped at 54px on wide screens). */
  font-size: min(54px, calc((100vw - 52px) / 18));
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--text);
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
}

/* On phones the sentence wraps to two lines so the type can stay large. */
@media (max-width: 640px) {
  .hero-title {
    white-space: normal;
    font-size: min(36px, calc((100vw - 48px) / 10.2));
  }
}

/* The rotating word sits on its own line beneath the intro, so it centers
   cleanly for every word (short or long) and the intro line above it never
   shifts. Alignment is inherited from .hero-title; same upright Oxygen Mono. */
.rotator {
  display: block;
  font-weight: 400;
  /* Reserve one line's height so the button below never jumps when the
     typewriter empties the word between rotations. 1lh tracks the line-height;
     the em value is the fallback for browsers without the lh unit. */
  min-height: 1.16em;
  min-height: 1lh;
}

/* ===== Hero typewriter (driven by behaviorgpt-motion.js) =====
   A blinking caret types the fixed intro line out. Once the intro is done the
   caret is dropped and the rotating word cycles (type / hold / delete / next)
   on its own with no caret. JS adds these classes only, so no-JS and
   reduced-motion visitors see the full, static headline. */
.hero-title.caret-intro .hero-intro::after {
  content: '';
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 0.06em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: hero-caret 1.05s steps(1, end) infinite;
}
@keyframes hero-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-title.caret-intro .hero-intro::after { display: none; }
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn-pill {
  background: #eeeeee;
  color: var(--text);
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.btn-pill:hover { background: #e2e2e2; }

/* Compact pill used in the header. */
.btn-pill-sm { padding: 9px 20px; font-size: 14px; }

/* ===== UMAP box (visual only, no text inside) ===== */
/* Full-bleed: the render surface breaks out of the centered .page column to
   span the whole viewport, so the cloud floats in open space and its points
   drift off into the margins instead of hitting an invisible rectangular edge.
   Height is unchanged, so with a fixed vertical FOV the cloud keeps its size. */
.umap-box {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(360px, 56vh, 620px);
  background: transparent;
  overflow: visible;
}

.umap-box canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.umap-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: #fff;
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}
.umap-tooltip[hidden] { display: none; }

.umap-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(circle, var(--viz-grey) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.5;
}
.umap-fallback[hidden] { display: none; }

/* ===== Docs + decision tree ===== */
.docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  .docs-grid { grid-template-columns: 1fr; gap: 36px; }
}

.docs-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.docs-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  margin-bottom: 20px;
}

.docs-text p {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.docs-note { color: var(--text-muted); font-size: 16px; }
.docs-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.docs-visual { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tree-box { width: 100%; max-width: 520px; }
.tree-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.tree-caption {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-mono);
}

/* --- model tree: one persistent model node growing a whole tree per domain --- */
/* The fit group is scaled/translated to map the visible nodes into the viewBox;
   transitioning that transform is what zooms the model big when it stands alone
   and shrinks the whole visual as the tree grows. A slow ease-in-out keeps the
   zoom fluid. Origin pinned to the viewBox top-left so the JS translate+scale
   maps points exactly. */
.tree-fit {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 0.95s cubic-bezier(.45, 0, .2, 1);
}

/* A domain's whole tree lives in one .tree-branch group so it can fade as a
   single unit on collapse — every line and node disappears in unison, no matter
   its own entrance animation. */
.tree-branch { transition: opacity 0.5s ease; }
.tree-branch.leaving { opacity: 0; }

/* Edges are solid and fully drawn by default; the .draw class makes a line
   reveal itself from parent to child by sweeping stroke-dashoffset 1 -> 0. Works
   because each path carries pathLength="1", so dasharray:1 is exactly one full
   line and no measuring is needed. */
.tedge {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}
.tedge.b-retail  { stroke: var(--blue-bright);   stroke-width: 2; }
.tedge.b-finance { stroke: var(--orange-bright); stroke-width: 2; }

@keyframes tdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.tedge.draw { stroke-dasharray: 1; animation: tdraw 0.6s cubic-bezier(.22, .61, .36, 1) forwards; }

/* "extend, then place": the node stays hidden (backwards fill) for the length of
   its line's draw, then pops as the line lands. Delay must match .tedge.draw. */
.tnode.enter {
  transform-box: fill-box;
  transform-origin: center;
  animation: tpop 0.5s cubic-bezier(.22, .61, .36, 1) 0.6s both;
}

@keyframes tpop {
  0% { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}

.tnode circle {
  fill: #fff;
  stroke: var(--border-strong);
  stroke-width: 1.5;
  transition: fill 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease;
}

/* the shared model at the root -- the one model every domain branches from */
.tnode.root circle { stroke: var(--text); stroke-width: 2.5; }
.tnode.root .lbl { fill: var(--text); font-weight: 600; }

/* the domain node the model drops into -- emphasized in its own color */
.tnode.domain circle { stroke-width: 2.5; }
.tnode.domain .lbl { font-weight: 600; }

.tnode.b-retail  circle { stroke: var(--blue-bright); }
.tnode.b-finance circle { stroke: var(--orange-bright); }

/* the concrete prediction each use case leads to -- filled and emphasized in
   the domain color, so every leaf reads as one more thing the model predicts. */
.tnode.result circle { stroke-width: 2.5; }
.tnode.result.b-retail  circle { fill: var(--blue-pastel);   stroke: var(--blue-bright); }
.tnode.result.b-finance circle { fill: var(--orange-pastel); stroke: var(--orange-bright); }

/* Node icons: Lucide line art, tinted to the node's color. Stroke width is in
   the icon's own 24-unit space, so it scales with the node like everything else. */
.tnode .glyph-icon {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tnode.root .glyph-icon { stroke: var(--text); }
.tnode.b-retail  .glyph-icon { stroke: var(--blue-bright); }
.tnode.b-finance .glyph-icon { stroke: var(--orange-bright); }
.tnode.result.b-retail  .glyph-icon { stroke: var(--blue-dark); }
.tnode.result.b-finance .glyph-icon { stroke: var(--orange-dark); }
.tnode .lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text-muted);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.tnode.result .lbl { font-weight: 600; }
.tnode.result.b-retail  .lbl { fill: var(--blue-dark); }
.tnode.result.b-finance .lbl { fill: var(--orange-dark); }

@media (prefers-reduced-motion: reduce) {
  .tnode.enter { animation: none; }
  .tree-fit, .tree-branch { transition: none; }
}

/* ===== Four functions ===== */
.fns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

@media (max-width: 860px) { .fns-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; } }
@media (max-width: 480px) { .fns-grid { grid-template-columns: 1fr; } }

.fn-icon { color: var(--text); margin-bottom: 18px; }
.fn-name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.fn-desc {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ===== FAQ ===== */
.faq-section { max-width: 820px; margin: 0 auto; }
.faq-list { border-top: 1px solid var(--border); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  padding: 22px 4px;
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--text);
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: '+';
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-a { padding: 0 4px 24px; }
.faq-a p {
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 68ch;
}
.faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Signup modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(2px);
  animation: mfade 0.2s ease;
}
.modal-overlay[hidden] { display: none; }

@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  padding: 40px;
  animation: mpop 0.22s cubic-bezier(.22,.61,.36,1);
}

@keyframes mpop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) { .modal-card { padding: 28px 22px; } }

.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-faint);
  transition: color 0.15s ease;
}
.modal-close:hover { color: var(--text); }

.modal-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 27px;
  text-align: center;
  color: var(--text);
  margin-bottom: 28px;
}

.mrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 420px) { .mrow { grid-template-columns: 1fr; } }

.mfield { display: flex; flex-direction: column; margin-bottom: 18px; }
.mrow .mfield { margin-bottom: 0; }

.mfield label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.mfield input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mfield input::placeholder { color: var(--text-faint); }
.mfield input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 114, 230, 0.2);
}
.mfield input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(213, 63, 48, 0.16);
}

.field-error { font-size: 12px; color: var(--error); margin-top: 6px; }
.field-error[hidden] { display: none; }

.form-error { font-size: 13px; color: var(--error); text-align: center; margin: 4px 0 -4px; }
.form-error[hidden] { display: none; }

.btn-continue {
  width: 100%;
  background: var(--black);
  color: #fff;
  border-radius: 9px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
  transition: background-color 0.15s ease;
}
.btn-continue:hover { background: #000; }

.modal-fineprint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

/* Honeypot — kept in the DOM for bots, removed from view and the tab order
   for humans and assistive tech. Do not use display:none (some bots skip it). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* success state */
.modal-success { text-align: center; padding: 12px 0; }
.modal-success[hidden] { display: none; }
.success-check {
  width: 56px;
  height: 56px;
  margin: 4px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.modal-success-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
  margin: 0 auto 24px;
}