/* Vincent Flow lab. Navy and cyan stay the brand. RAG colors mark status nodes only. */

:root {
  --white: #ffffff;
  --ink: #0a2540;
  --muted: #3d5a73;
  --line: #d5e3ee;
  --cyan: #2ec4e0;
  --cyan-ink: #0c7490;
  --navy: #0a2540;
  --navy-deep: #061828;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #f43f5e;
  --max: 1080px;
  --gutter: clamp(18px, 4vw, 40px);
  --sans: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 2px 6px -1px rgba(10, 37, 64, .05), 0 1px 2px -1px rgba(10, 37, 64, .03);
  --shadow-md: 0 12px 28px -6px rgba(10, 37, 64, .08), 0 4px 10px -3px rgba(10, 37, 64, .04);
  --shadow-lg: 0 24px 48px -12px rgba(10, 37, 64, .16), 0 8px 16px -6px rgba(10, 37, 64, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--white);
  background-image:
    linear-gradient(rgba(10, 37, 64, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 37, 64, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -.03em; }
p, li { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; }
.simulator :focus-visible { outline-color: #2ec4e0; }
#lab, #deliverables, #hoc-phi, #sessions { scroll-margin-top: 88px; }

.page { width: min(var(--max), 100%); margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-weight: 500; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--navy);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
.btn:hover { background: #47cee6; border-color: #47cee6; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: #eef9fc; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(160%) blur(12px);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--navy);
  backdrop-filter: saturate(180%) blur(22px);
}
.site-header.scrolled .nav-inner { min-height: 56px; }
.nav-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 18px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand { min-height: 44px; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand img { width: auto; height: 36px; max-width: 100%; border-radius: 0; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; font-weight: 600; }
.nav-chooser { position: relative; }
.nav-chooser-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav-chooser-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: 0;
  width: min(18rem, calc(100vw - 32px));
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.nav-chooser-panel[hidden] { display: none !important; }
.nav-chooser-panel a { display: block; padding: 8px 10px; border-radius: 8px; }
.nav-chooser-panel a:hover { background: #eef9fc; }
.nav-chooser-panel a:last-child { color: var(--muted); font-weight: 500; }
.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.menu-button span { display: block; width: 16px; height: 1.6px; margin: 5px auto; background: var(--navy); }

.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 28px; padding-block: 36px 64px; align-items: start; }
.hero > div, .simulator { position: relative; z-index: 1; }
.hero > .float-slot {
  position: absolute;
  right: -12px;
  top: 8px;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 0;
}
.float-shape { width: 100%; height: 100%; opacity: .28; }
.eyebrow { color: var(--cyan-ink); font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 10px 0 12px; font-size: clamp(1.7rem, 4vw, 2rem); line-height: 1.12; max-width: 14em; }
.lede { max-width: 65ch; color: var(--muted); }
.hero-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; max-width: 65ch; color: var(--muted); }
.hero-facts li { margin: 0; }
.hero-actions, .action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.simulator {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .2s var(--ease-out-expo);
}
.scenario-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.scenario-row button::before { content: attr(data-full); }
.flow-slot-tall, .invoice-slot-tall { display: none; }
.flow-slot-wide, .invoice-slot-wide { display: block; }
.note-list { display: grid; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; color: var(--muted); font-size: .92rem; }
.note-list li { position: relative; padding-left: 16px; }
.note-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.scenario-row button {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: .72rem;
  cursor: pointer;
}
.simulator.is-s1 .scenario-row button[data-scenario="s1"],
.simulator.is-s2 .scenario-row button[data-scenario="s2"],
.simulator.is-s3 .scenario-row button[data-scenario="s3"] { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.flow-svg, .invoice-svg, .chart, .ticket-barcode { max-width: 100%; }
.flow-svg, .invoice-svg { width: 100%; height: auto; }
.data-stream { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 10; animation: data-pulse 1.4s linear infinite; }
.simulator.is-s1 .stream-clean, .simulator.is-s2 .stream-clean { opacity: .25; }
.simulator.is-s3 .stream-exception { opacity: .25; }
.node-box { fill: #0e2e4c; stroke: var(--cyan); stroke-width: 1.5; }
.simulator.is-s1 .node-exception .node-box { stroke: var(--red); fill: #3b1020; }
.simulator.is-s2 .node-extract .node-box { stroke: var(--amber); }
.simulator.is-s3 .node-clean .node-box { stroke: var(--green); fill: #06352c; }
.node-label { fill: #d7eef3; font-family: var(--mono); font-size: 11px; }
.flow-wide .node-label { font-size: 13px; }
.terminal {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #061828;
  color: #d7eef3;
  font-family: var(--mono);
  font-size: .78rem;
  white-space: pre-wrap;
}
@keyframes data-pulse { to { stroke-dashoffset: -64; } }
@keyframes scan-beam { from { transform: translateY(0); } to { transform: translateY(168px); } }
@keyframes bar-grow { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
@keyframes floaty { 50% { transform: translateY(-10px); } }

.section { padding-block: 32px 64px; }
.section h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.section h1 { margin: 10px 0 12px; font-size: clamp(1.7rem, 4vw, 2rem); line-height: 1.12; }
.scan { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.doc {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.scan-beam {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--cyan-ink);
  box-shadow: 0 0 16px var(--cyan);
  animation: scan-beam 2.8s var(--ease-out-expo) infinite alternate;
  pointer-events: none;
}
.callout { font-family: var(--mono); font-size: .72rem; font-weight: 600; }
.tag-red { color: #9f1239; }
.tag-amber { color: #92400e; }
.working { width: 100%; border-collapse: collapse; font-size: .88rem; }
.working th, .working td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.working th { font-family: var(--mono); font-size: .72rem; color: var(--cyan-ink); }
ul.working {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
}
ul.working li {
  display: grid;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
ul.working span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.signup ul.working { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bento-grid, .pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento, .price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(46, 196, 224, .16), transparent 42%),
    var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.price-card.featured { border-top: 3px solid var(--cyan); }
.price-card .amount { margin: 8px 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.chart { width: 100%; height: auto; margin-top: 8px; }
.bar { transform-origin: bottom; animation: bar-grow 1s var(--ease-out-expo) both; }
.mini-form { display: grid; gap: 6px; margin-top: 8px; }
.mini-form span { display: block; height: 10px; border-radius: 4px; background: #e7f2f8; }

.circuit { position: relative; }
.circuit-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.circuit-svg { display: block; width: 36px; height: 100%; max-width: 36px; }
.circuit-path { fill: none; stroke: var(--cyan-ink); stroke-width: 2; }
.circuit-list { position: relative; display: grid; gap: 0; }
.circuit-node {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.circuit-node > * { min-width: 0; min-height: 0; }
.node-mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  max-width: 36px;
  max-height: 36px;
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.node-mark svg {
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  max-width: 18px;
  max-height: 18px;
  stroke: var(--cyan-ink);
  fill: none;
  stroke-width: 1.5;
}
.circuit-node.is-lit .node-mark {
  border-color: var(--cyan-ink);
  background: #eef9fc;
  box-shadow: 0 4px 12px rgba(46, 196, 224, .28);
}
.session-out {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cyan-ink);
  font-family: var(--mono);
  font-size: .72rem;
}
.circuit-node b { font-family: var(--mono); color: var(--cyan-ink); font-size: .78rem; }
.phase { margin: 24px 0 8px 52px; font-family: var(--mono); font-size: .75rem; color: var(--cyan-ink); letter-spacing: .06em; text-transform: uppercase; }

.signup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 28px; align-items: start; padding-bottom: 64px; }
.signup { display: grid; gap: 12px; }
.signup label { display: grid; gap: 6px; font-weight: 600; }
.signup input, .signup textarea, .signup select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #5f7f99;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.signup textarea { min-height: 110px; }
.mail-choice { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.mail-choice label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; }
.mail-choice input { width: 20px; height: 20px; accent-color: var(--navy); }
.ticket {
  padding: 18px;
  border-radius: 16px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--mono);
  box-shadow: var(--shadow-lg);
}
.ticket h2 { font-family: var(--sans); font-size: 1.2rem; margin-bottom: 12px; }
.ticket p { margin-top: 8px; color: #d7eef3; overflow-wrap: anywhere; word-break: break-word; }
.plan-early { color: var(--cyan); }
.plan-standard { color: var(--white); }
.plan-premium { color: var(--white); }
.note { color: var(--muted); font-size: .92rem; }
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 0; font-weight: 600; cursor: pointer; }
.faq p { padding: 0 0 14px; color: var(--muted); }

.site-footer { padding: 28px 0; background: var(--navy-deep); color: #d7eef3; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; }
.site-footer a:hover { color: var(--cyan); }

.will-reveal { opacity: 0; filter: blur(6px); transform: translateY(16px); transition: opacity .55s var(--ease-out-expo), filter .55s var(--ease-out-expo), transform .55s var(--ease-out-expo); }
.will-reveal.in { opacity: 1; filter: blur(0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .data-stream, .scan-beam, .bar, .float-shape, .will-reveal, .data-bead { animation: none; }
  .data-bead { display: none; }
  .will-reveal, .will-reveal.in { opacity: 1; filter: none; transform: none; transition: none; }
  .simulator { transform: none; }
  .sim-badge { display: none; }
}

.spec-strip {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.spec-strip p {
  margin: 0;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.45;
}
.spec-strip p + p { border-left: 0; border-top: 1px solid var(--line); }

.sim-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: -16px -16px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #d7eef3;
  font-size: .72rem;
}
.sim-dots { display: inline-flex; gap: 5px; }
.sim-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); display: block; }
.sim-badge {
  padding: 2px 8px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .68rem;
}
.scenario-row button { width: 100%; white-space: normal; line-height: 1.3; }
.status-dot { fill: var(--cyan); }
.simulator.is-s1 .node-exception .status-dot { fill: var(--red); }
.simulator.is-s2 .node-extract .status-dot { fill: var(--amber); }
.simulator.is-s3 .node-clean .status-dot { fill: var(--green); }
.data-bead { filter: drop-shadow(0 0 4px #2ec4e0); }

.layer-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.layer-title { margin: 8px 0 12px; color: var(--cyan-ink); font-size: .78rem; }
.status-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
}
.status-pill.is-held { background: #ffe4e9; color: #9f1239; border: 1px solid #f43f5e; }
.status-pill.is-fallback { background: #fff3d6; color: #92400e; border: 1px solid #b45309; }
.status-pill.is-ok { background: #d1fae5; color: #065f46; border: 1px solid #047857; }

.trainer-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vf-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--navy);
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: .04em;
}
.trainer-role { margin: 6px 0 10px; color: var(--cyan-ink); font-weight: 600; }
.trainer-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 18%; display: block; margin-bottom: 12px; }
.trainer-lines { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.trainer-intro { min-width: 0; max-width: 100%; }
.trainer-lines { min-width: 0; max-width: 100%; }
.trainer-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.trainer-lines img { height: 28px; width: 56px; max-height: 28px; max-width: 56px; object-fit: contain; object-position: left center; }
.trainer-lines span { min-width: 0; }
.trainer-focus { margin: 10px 0 0; }
.principles { display: grid; gap: 10px; }
.principles li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.price-kicker {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
}
.price-card li { display: flex; gap: 8px; align-items: flex-start; }
.price-card li svg { flex: 0 0 16px; width: 16px; height: 16px; max-width: 16px; max-height: 16px; margin-top: 3px; }

.ticket { position: relative; overflow: hidden; }
.ticket-notch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
}
.ticket-notch-left { left: -11px; }
.ticket-notch-right { right: -11px; }
.ticket-meta, .ticket-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ticket-fields p, .ticket-meta p {
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
}
.ticket-fields p { min-width: 0; }
.ticket-barcode { width: 100%; height: 42px; margin-top: 14px; }
.ticket-foot { margin-top: 8px; letter-spacing: .04em; font-size: .72rem; }

@media (max-width: 900px) {
  .hero, .scan, .bento-grid, .pricing, .signup-layout { grid-template-columns: 1fr; }
  .menu-button { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; }
  .nav-chooser-btn { display: block; width: 100%; padding: 12px 16px; text-align: left; }
  .nav-chooser-panel { position: static; width: auto; margin: 0 8px 8px; box-shadow: none; }
  .circuit-svg { left: 0; }
  ul.working, .signup ul.working, .spec-strip { grid-template-columns: 1fr; }
  .spec-strip p + p { border-left: 0; border-top: 1px solid var(--line); }
  .trainer-block { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-inner { min-height: 56px; }
  .brand img { height: 28px; }
  .nav-links a, .nav-chooser-btn { min-height: 44px; box-sizing: border-box; }
  .nav-chooser-btn { display: flex; align-items: center; }
  .hero-actions, .action-row, .signup .btn { display: grid; }
  .hero-actions .btn, .action-row .btn, .signup .btn { width: 100%; }
  .scenario-row button::before { content: attr(data-short); }
  .flow-slot-wide, .invoice-slot-wide { display: none; }
  .flow-slot-tall, .invoice-slot-tall { display: block; }
  .hero > .float-slot { display: none; width: 0; height: 0; overflow: hidden; }
  .simulator { transform: none; }
  .hero h1, .hero .lede, .spec-strip p { text-wrap: wrap; }
  .hero .lede { display: block; line-height: 1.55; position: relative; z-index: 2; }
  .spec-strip { position: relative; z-index: 2; }
  .toast { left: 16px; right: 16px; max-width: none; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .ticket-meta, .ticket-fields { grid-template-columns: 1fr; }
  .hero h1, .section h1 { font-size: 1.7rem; }
  .scenario-row button { padding: 8px 6px; font-size: .66rem; }
  .ticket-notch { display: none; }
}