:root {
  --bg: #030812;
  --bg-2: #071221;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-2: rgba(9, 23, 42, 0.84);
  --panel-3: rgba(255, 255, 255, 0.028);
  --line: rgba(156, 206, 244, 0.14);
  --line-strong: rgba(112, 205, 250, 0.48);
  --text: #eef6ff;
  --muted: #9aaac3;
  --dim: #687893;
  --cyan: #65c8f1;
  --cyan-2: #b9efff;
  --green: #4be09d;
  --red: #ff7373;
  --grad: linear-gradient(110deg, #63cdf6, #bff1ff);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --container: 1510px;
  --gutter: clamp(22px, 4vw, 56px);
  --nav-h: 82px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}

@media (min-width: 981px) {
  html {
    scroll-snap-type: y proximity;
  }

  .hero,
  .logo-strip,
  .section {
    scroll-snap-align: start;
    scroll-margin-top: calc(var(--nav-h) + 18px);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(156, 206, 244, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 206, 244, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 62% 10%, #000, transparent 74%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: soft-light;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

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

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 72% 18%, rgba(72, 177, 230, 0.2), transparent 30%),
    radial-gradient(circle at 16% 72%, rgba(101, 200, 241, 0.13), transparent 32%),
    linear-gradient(135deg, #02050c, #061121 54%, #030812);
  transition: filter 0.65s var(--ease), transform 0.65s var(--ease);
}

.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0%, rgba(101, 200, 241, 0.18) 45%, rgba(185, 239, 255, 0.34) 50%, rgba(101, 200, 241, 0.16) 55%, transparent 100%);
  transform: translateX(-115%) skewX(-18deg);
}

body.is-warping .site-bg {
  filter: brightness(1.22) saturate(1.24);
  transform: scale(1.018);
}

body.is-warping .site-bg::before {
  animation: warpSweep 0.72s var(--ease) both;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s var(--ease);
}

.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(3, 8, 18, 0.82);
  backdrop-filter: blur(16px);
}

.nav__inner,
.hero,
.section__header,
.position-grid,
.simulator-tabs,
.simulator-grid,
.method-line,
.audit-panel,
.logo-strip,
.footer {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.nav__inner {
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand img {
  width: 134px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s var(--ease);
}

.nav__links a:hover {
  color: var(--text);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.signin {
  color: var(--muted);
  font-size: 14px;
  transition: color 0.2s var(--ease);
}

.signin:hover {
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 700 15px/1 var(--font-body);
  cursor: pointer;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.btn--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--primary {
  background: var(--grad);
  color: #082235;
  box-shadow: 0 18px 52px rgba(101, 200, 241, 0.18);
}

.btn--ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

.btn:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 740px;
  padding: calc(var(--nav-h) + 52px) var(--gutter) 28px;
  display: grid;
  grid-template-columns: minmax(410px, 0.56fr) minmax(760px, 1.1fr);
  gap: clamp(48px, 5.2vw, 92px);
  align-items: center;
}

.hero-3d {
  position: absolute;
  inset: 9% 0 -6% 30%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}

.hero-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 56% 45%, rgba(101, 200, 241, 0.13), transparent 28%),
    linear-gradient(90deg, rgba(3, 8, 18, 0.74), transparent 42%, rgba(3, 8, 18, 0.44));
}

.hero-3d canvas {
  width: 100%;
  height: 100%;
}

.hero__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.eyebrow,
.mini-label,
.position-grid span,
.method-line span {
  display: block;
  color: var(--cyan-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 18px;
}

.hero h1,
.section h2,
.audit h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero h1 {
  max-width: 13.8ch;
  font-size: clamp(3.9rem, 4.45vw, 5rem);
  line-height: 1.02;
}

.hero h1 em {
  color: var(--cyan);
  font-style: normal;
  text-shadow: 0 0 34px rgba(101, 200, 241, 0.28);
}

.hero p {
  max-width: 540px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  line-height: 1.72;
}

.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 560px;
  margin-top: 24px;
}

.hero-proof span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  color: var(--muted);
}

.hero-proof i {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(101, 200, 241, 0.07);
  color: var(--cyan-2);
}

.hero-proof strong {
  display: block;
  color: var(--text);
  font: 700 13px/1.2 var(--font-body);
}

.hero-proof small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

[data-icon]::before {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
}

[data-icon="grid"]::before,
[data-icon="report"]::before {
  content: "▦";
}

[data-icon="shield"]::before {
  content: "◇";
}

[data-icon="spark"]::before {
  content: "✦";
}

[data-icon="users"]::before {
  content: "◎";
}

[data-icon="chat"]::before {
  content: "□";
}

[data-icon="doc"]::before {
  content: "▱";
}

[data-icon="approval"]::before {
  content: "◌";
}

.workflow-os {
  position: relative;
  z-index: 2;
  overflow: visible;
  min-width: 0;
  min-height: 500px;
  padding: 10px 0 0;
}

.workflow-os::before {
  content: "";
  position: absolute;
  inset: 58% 7% 0 17%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(101, 200, 241, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 200, 241, 0.2) 1px, transparent 1px);
  background-size: 68px 40px;
  transform: perspective(720px) rotateX(64deg);
  transform-origin: top center;
  opacity: 0.34;
  mask-image: linear-gradient(#000, transparent 84%);
}

.workflow-os::after {
  content: "";
  position: absolute;
  inset: 34% 22% 3%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 32%, rgba(101, 200, 241, 0.34), transparent 58%);
  filter: blur(22px);
}

.stage-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 28px 15px 70px;
  text-align: center;
}

.stage-labels span {
  min-width: 180px;
}

.stage-labels strong {
  display: block;
  color: var(--cyan-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stage-labels span:last-child strong {
  color: var(--green);
}

.stage-labels small {
  display: block;
  margin-top: 4px;
  color: rgba(238, 246, 255, 0.84);
  font-size: 14px;
}

.os-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 250px minmax(260px, 1fr) 250px;
  align-items: center;
  gap: 46px;
}

.os-connectors {
  position: absolute;
  z-index: 1;
  inset: 88px 0 32px;
  width: 100%;
  height: calc(100% - 120px);
  pointer-events: none;
  overflow: visible;
}

.os-connectors path {
  fill: none;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 0;
  opacity: 0.3;
}

.input-line {
  stroke: rgba(101, 200, 241, 0.7);
}

.output-line {
  stroke: rgba(75, 224, 157, 0.72);
}

.workflow-os[data-active="leads"] .input-leads,
.workflow-os[data-active="tickets"] .input-tickets,
.workflow-os[data-active="invoices"] .input-invoices,
.workflow-os[data-active="approvals"] .input-approvals,
.workflow-os[data-active="sheets"] .input-sheets,
.workflow-os .output-line {
  opacity: 0.92;
  animation: dashFlow 1.6s linear infinite;
  filter: drop-shadow(0 0 7px rgba(101, 200, 241, 0.8));
}

.workflow-os .output-line {
  filter: drop-shadow(0 0 7px rgba(75, 224, 157, 0.68));
}

.os-column,
.os-core,
.workflow-running {
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.os-column,
.os-core {
  padding: 0;
}

.os-list,
.action-feed,
.core-steps {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.os-list button,
.action-feed div {
  min-height: 70px;
  border: 1px solid rgba(112, 205, 250, 0.24);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(18, 38, 63, 0.76), rgba(8, 18, 32, 0.76));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
}

.os-list button {
  position: relative;
  padding: 12px 58px 12px 56px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  color: var(--text);
  font: 700 14px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.os-list button > i,
.action-feed div > i {
  position: absolute;
  left: 18px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--cyan);
  transform: translateY(-50%);
}

.os-list button > b {
  position: absolute;
  right: 13px;
  top: 50%;
  min-width: 47px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(101, 200, 241, 0.13);
  color: var(--cyan-2);
  font: 700 10px/1 var(--font-body);
  text-align: center;
  transform: translateY(-50%);
}

.os-list button:hover,
.os-list button.is-active {
  transform: translateX(5px);
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(24, 60, 92, 0.88), rgba(10, 24, 42, 0.86));
  box-shadow: 0 0 0 1px rgba(101, 200, 241, 0.08), 0 20px 48px rgba(0, 0, 0, 0.28);
}

.os-list small,
.action-feed small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.os-core {
  position: relative;
  min-height: 410px;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.core-mark {
  position: relative;
  width: 220px;
  min-height: 252px;
  margin: 70px auto 0;
  display: grid;
  justify-items: center;
  align-content: center;
  border: 1px solid rgba(185, 239, 255, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(31, 85, 129, 0.58), rgba(4, 15, 28, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(101, 200, 241, 0.36), transparent 56%);
  box-shadow:
    inset 0 0 0 7px rgba(101, 200, 241, 0.08),
    inset 0 0 0 14px rgba(101, 200, 241, 0.04),
    0 0 38px rgba(101, 200, 241, 0.55),
    0 38px 120px rgba(0, 0, 0, 0.48);
}

.core-mark::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(101, 200, 241, 0.42);
  border-radius: 26px;
  box-shadow: 0 0 28px rgba(101, 200, 241, 0.32);
}

.core-mark img {
  width: 62px;
  margin-bottom: 10px;
}

.core-mark span {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
}

.core-mark small {
  margin-top: 6px;
  color: var(--cyan-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.core-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 150px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(156, 206, 244, 0.12);
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.core-steps {
  position: absolute;
  top: 254px;
  left: 50%;
  z-index: 2;
  padding: 8px;
  border: 1px solid rgba(156, 206, 244, 0.16);
  border-radius: 8px;
  background: rgba(7, 21, 38, 0.66);
  transform: translateX(-50%);
}

.core-steps span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(101, 200, 241, 0.8);
}

.core-pedestal {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 310px;
  height: 102px;
  border: 1px solid rgba(101, 200, 241, 0.52);
  border-radius: 50% / 20%;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(185, 239, 255, 0.5), transparent 24%),
    linear-gradient(180deg, rgba(33, 96, 146, 0.58), rgba(5, 17, 31, 0.86));
  box-shadow:
    inset 0 -14px 0 rgba(101, 200, 241, 0.15),
    0 0 0 8px rgba(101, 200, 241, 0.06),
    0 20px 40px rgba(101, 200, 241, 0.28);
  transform: translateX(-50%) perspective(520px) rotateX(58deg);
}

.action-feed div {
  position: relative;
  display: grid;
  align-content: center;
  padding: 12px 52px 12px 56px;
}

.action-feed div.is-live::after {
  content: none;
}

.action-feed div > span {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #052115;
  font: 800 14px/1 var(--font-body);
  box-shadow: 0 0 24px rgba(75, 224, 157, 0.36);
  transform: translateY(-50%);
}

.action-feed strong {
  font-size: 14px;
}

.workflow-running {
  margin-top: 16px;
  padding: 16px;
}

.workflow-running strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

.progress-line {
  display: grid;
  grid-template-columns: 14px 1fr 14px 1fr 14px 1fr 14px;
  align-items: center;
  gap: 0;
  margin-top: 16px;
}

.progress-line span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(101, 200, 241, 0.72);
}

.progress-line i {
  height: 2px;
  background: linear-gradient(90deg, rgba(101, 200, 241, 0.32), rgba(185, 239, 255, 0.86));
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -30;
  }
}

@keyframes warpSweep {
  0% {
    opacity: 0;
    transform: translateX(-115%) skewX(-18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(115%) skewX(-18deg);
  }
}

@keyframes sectionScan {
  0% {
    opacity: 0;
    transform: translateX(-28%);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
    transform: translateX(0);
  }
}

.logo-strip {
  padding: 22px var(--gutter) 30px;
  border-top: 1px solid rgba(156, 206, 244, 0.12);
  border-bottom: 1px solid rgba(156, 206, 244, 0.12);
  text-align: center;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.logo-strip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.logo-strip > span {
  display: block;
  margin-bottom: 16px;
  color: var(--muted);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.logo-strip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: rgba(238, 246, 255, 0.48);
}

.logo-strip strong {
  font: 700 clamp(1rem, 1.55vw, 1.35rem)/1 var(--font-display);
  letter-spacing: 0;
}

.section {
  position: relative;
  overflow: hidden;
  padding: 96px var(--gutter);
  opacity: 0;
  transform: translate3d(0, 62px, 0) scale(0.982);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(101, 200, 241, 0.82), transparent);
  transform: translateX(-28%);
}

.section.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.section.is-visible::before {
  animation: sectionScan 1.15s var(--ease) 0.1s both;
}

.section__header {
  margin-bottom: 34px;
}

.section__header--center {
  text-align: center;
}

.section h2,
.audit h2 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.2rem, 3.45vw, 4rem);
  line-height: 1.04;
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.position-grid article,
.sim-card,
.audit-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.position-grid article {
  min-height: 220px;
  padding: 28px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  position: relative;
}

.position-grid article::after {
  content: "";
  position: absolute;
  inset: auto 24px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(101, 200, 241, 0.68), transparent);
}

.position-grid .is-featured {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 50% 0%, rgba(101, 200, 241, 0.16), transparent 68%),
    rgba(9, 26, 48, 0.8);
}

.position-grid h3 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.12;
}

.position-grid p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.position-grid strong {
  display: block;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(156, 206, 244, 0.1);
  font-family: var(--font-display);
  font-size: 1.08rem;
}

.simulator-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}

.simulator-tabs button {
  min-height: 62px;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  color: var(--muted);
  font: 700 1.05rem/1 var(--font-body);
  cursor: pointer;
}

.simulator-tabs button:last-child {
  border-right: 0;
}

.simulator-tabs button:hover,
.simulator-tabs button.is-active {
  color: var(--text);
  background: rgba(101, 200, 241, 0.1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.simulator-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 20px;
}

.sim-card {
  min-height: 360px;
  padding: 26px;
}

.sim-card h3 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  line-height: 1.08;
}

.sim-card ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.sim-card li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
}

.sim-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sim-card--pain li::before {
  background: var(--red);
}

.sim-card--layer li::before {
  background: var(--cyan);
}

.sim-card--result {
  background:
    radial-gradient(circle at 82% 70%, rgba(75, 224, 157, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.028);
}

.sim-card--result li::before {
  background: var(--green);
}

.flow-icons {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 6px;
  align-items: center;
  margin-top: 34px;
}

.flow-icons span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--cyan-2);
  font-size: 12px;
  font-weight: 700;
}

.flow-icons i {
  height: 1px;
  background: var(--line-strong);
}

.mini-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 8px;
  height: 86px;
  margin-top: 34px;
}

.mini-chart i {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--cyan-2), rgba(75, 224, 157, 0.5));
}

.mini-chart i:nth-child(1) { height: 24%; }
.mini-chart i:nth-child(2) { height: 38%; }
.mini-chart i:nth-child(3) { height: 52%; }
.mini-chart i:nth-child(4) { height: 67%; }
.mini-chart i:nth-child(5) { height: 78%; }
.mini-chart i:nth-child(6) { height: 94%; }

.method-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.method-line article {
  min-height: 250px;
  padding: 28px 20px;
  border-right: 1px solid var(--line);
}

.method-line article:last-child {
  border-right: 0;
}

.method-line h3 {
  margin: 44px 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.method-line p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.audit-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: clamp(30px, 5vw, 56px);
  background:
    radial-gradient(circle at 78% 0%, rgba(101, 200, 241, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.028);
}

.audit-panel h2 {
  margin-left: 0;
}

.audit-panel p {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--muted);
}

.audit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.audit-list article {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.audit-list span {
  color: var(--cyan-2);
  font: 700 11px/1 var(--font-mono);
}

.audit-list strong {
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.12rem;
}

.audit-list p {
  margin: 6px 0 0;
  font-size: 13px;
}

.footer {
  padding: 34px var(--gutter) 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.footer img {
  width: 132px;
}

.footer p {
  margin: 0;
  font-size: 13px;
}

.footer nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
}

@media (min-width: 1501px) {
  .hero {
    grid-template-columns: minmax(520px, 0.62fr) minmax(860px, 1fr);
    gap: 48px;
  }

  .hero h1 {
    font-size: 4.25rem;
  }

  .hero p {
    max-width: 560px;
  }
}

@media (min-width: 981px) and (max-width: 1500px) {
  .hero {
    grid-template-columns: minmax(440px, 0.58fr) minmax(650px, 1fr);
    gap: 30px;
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 20px;
  }

  .hero h1 {
    font-size: 3.62rem;
  }

  .hero p {
    max-width: 500px;
    font-size: 1rem;
  }

  .hero-proof {
    gap: 12px;
    margin-top: 20px;
  }

  .hero-proof span {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 9px;
  }

  .hero-proof i {
    width: 32px;
    height: 32px;
  }

  .hero-proof small {
    font-size: 11px;
  }

  .workflow-os {
    min-height: 510px;
    padding: 0;
  }

  .os-connectors {
    inset: 70px 0 26px;
    height: calc(100% - 96px);
  }

  .os-grid {
    grid-template-columns: 218px minmax(210px, 1fr) 218px;
    gap: 24px;
  }

  .stage-labels {
    padding: 0 12px 12px 22px;
  }

  .stage-labels small {
    font-size: 12px;
  }

  .os-list button,
  .action-feed div {
    min-height: 58px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .core-mark {
    width: 182px;
    min-height: 212px;
    margin-top: 60px;
  }

  .core-steps {
    top: 220px;
  }

  .core-pedestal {
    width: 250px;
    bottom: 20px;
  }

  .workflow-running {
    padding: 12px;
  }
}

@media (max-width: 980px) {
  .nav__links {
    display: none;
  }

  .signin {
    display: none;
  }

  .hero,
  .os-grid,
  .stage-labels,
  .position-grid,
  .simulator-grid,
  .audit-panel {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 52px);
  }

  .hero-3d {
    inset: 16% -22% auto 12%;
    height: 520px;
    opacity: 0.48;
  }

  .os-connectors {
    display: none;
  }

  .workflow-os {
    min-height: auto;
  }

  .stage-labels {
    gap: 12px;
    padding: 0 0 18px;
  }

  .method-line {
    grid-template-columns: 1fr;
  }

  .method-line article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  .nav .btn {
    display: none;
  }

  .hero h1 {
    font-size: 3.45rem;
    max-width: 9.4ch;
  }

  .hero__actions,
  .hero-proof,
  .simulator-tabs,
  .audit-list {
    grid-template-columns: 1fr;
  }

  .hero__actions {
    display: grid;
  }

  .hero-proof span {
    min-height: auto;
  }

  .logo-strip div {
    flex-wrap: wrap;
    justify-content: center;
  }

  .section {
    padding: 76px var(--gutter);
  }

  .flow-icons {
    grid-template-columns: 1fr;
  }

  .flow-icons i {
    width: 1px;
    height: 18px;
    justify-self: center;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------
   Navigation: a single product link, so it stays visible on mobile
   ------------------------------------------------------------------ */

.nav__links a[aria-current="page"] {
  color: var(--text);
}

.nav__links a[aria-current="page"]::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

@media (max-width: 980px) {
  .nav__links {
    display: flex;
    margin-left: auto;
  }
}

/* ------------------------------------------------------------------
   CITE.AS product page
   Colour has meaning here, and only three accents carry it:
   cyan = your data, amber = drafted by AI, green = approved by a person.
   A hollow ring is a trigger. Everything else, including buttons, is neutral.
   ------------------------------------------------------------------ */

.page-cite {
  --cx-bg: #050b16;
  --cx-surface: #0a1526;
  --cx-surface-2: #0e1c32;
  --cx-line: rgba(148, 190, 230, 0.13);
  --cx-line-2: rgba(148, 190, 230, 0.24);
  --cx-text: #eef4fc;
  --cx-soft: #d3dce8;
  --cx-muted: #a3b3c9;
  --cx-dim: #8494ab;
  --cx-brand: #74b0d0;
  --cx-data: #65c8f1;
  --cx-data-soft: rgba(101, 200, 241, 0.1);
  --cx-ai: #f2b544;
  --cx-ai-soft: rgba(242, 181, 68, 0.1);
  --cx-human: #4bdc98;
  --cx-human-soft: rgba(75, 220, 152, 0.1);
  --cx-max: 1200px;
  --cx-pad: clamp(20px, 4vw, 48px);
  --cx-section: clamp(64px, 7vw, 96px);
  --cx-radius: 16px;
  --cx-radius-sm: 8px;

  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(148, 190, 230, 0.06), transparent 70%),
    var(--cx-bg);
  color: var(--cx-text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The global grid texture and noise overlay are not used here. */
.page-cite::before,
.page-cite::after {
  display: none;
}

.page-cite h1,
.page-cite h2,
.page-cite h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cx-text);
  text-wrap: balance;
}

.page-cite a:focus-visible,
.page-cite button:focus-visible {
  outline: 2px solid var(--cx-text);
  outline-offset: 3px;
}

/* Sections focused by in-page links don't need a ring. */
.page-cite main:focus,
.page-cite section:focus {
  outline: none;
}

.cx-wrap {
  width: min(var(--cx-max), 100% - 2 * var(--cx-pad));
  margin-inline: auto;
}

.cx-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-text);
  color: var(--cx-bg);
  font-weight: 600;
}

.cx-skip:focus {
  top: 16px;
}

/* Navigation, on the same grid as the content */

.page-cite .nav {
  border-bottom-color: var(--cx-line);
  background: rgba(5, 11, 22, 0.8);
  backdrop-filter: blur(14px);
}

.page-cite .nav__inner {
  max-width: calc(var(--cx-max) + 2 * var(--cx-pad));
  padding-inline: var(--cx-pad);
}

.cx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cx-text);
}

.cx-brand svg {
  width: 24px;
  height: 21px;
}

.cx-brand rect {
  fill: var(--cx-brand);
}

.cx-brand rect:nth-child(1) { opacity: 0.45; }
.cx-brand rect:nth-child(2) { opacity: 0.6; }
.cx-brand rect:nth-child(3) { opacity: 0.75; }
.cx-brand rect:nth-child(4) { opacity: 0.9; }

.cx-brand span {
  font: 600 1.25rem/1 var(--font-display);
  letter-spacing: -0.01em;
}

.cx-brand b {
  color: var(--cx-brand);
  font-weight: 600;
}

.cx-navlinks {
  gap: 32px;
}

.cx-navlinks a {
  color: var(--cx-muted);
}

.cx-navlinks a:hover {
  color: var(--cx-text);
}

/* Buttons: neutral, so colour keeps its meaning */

.page-cite .btn {
  border-radius: 10px;
  font-weight: 600;
}

.page-cite .btn:hover {
  transform: none;
}

.page-cite .btn--primary {
  background: var(--cx-text);
  color: var(--cx-bg);
  box-shadow: none;
}

.page-cite .btn--primary:hover {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(238, 244, 252, 0.12);
}

.page-cite .nav .btn--primary {
  border-color: var(--cx-line-2);
  background: transparent;
  color: var(--cx-text);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.page-cite .nav.is-cta .btn--primary {
  border-color: transparent;
  background: var(--cx-text);
  color: var(--cx-bg);
}

.page-cite .btn--ghost {
  border-color: var(--cx-line-2);
  background: transparent;
}

.page-cite .btn--ghost:hover {
  border-color: var(--cx-muted);
}

/* Shared text pieces */

.cx-kicker span {
  color: var(--cx-soft);
  font-weight: 600;
  letter-spacing: 0;
}

.cx-kicker {
  margin: 0 0 18px;
  color: var(--cx-text);
  font: 600 1rem/1 var(--font-display);
  letter-spacing: 0.04em;
}

.cx-kicker--quiet {
  color: var(--cx-muted);
  font-size: 0.875rem;
}

.cx-lede {
  max-width: 34em;
  margin: 20px 0 0;
  color: var(--cx-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.cx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.cx-fine {
  margin: 20px 0 0;
  color: var(--cx-dim);
  font-size: 0.875rem;
}

.cx-copy {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--cx-line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--cx-muted);
  font: 500 0.8125rem/1.5 var(--font-body);
  cursor: pointer;
}

.cx-copy:hover {
  color: var(--cx-text);
  border-color: var(--cx-muted);
}

.cx-copy__status {
  color: var(--cx-muted);
}

.cx-start .cx-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.cx-fine a {
  color: var(--cx-text);
  text-decoration: underline;
  text-decoration-color: var(--cx-line-2);
  text-underline-offset: 3px;
}

/* A source or fragment chip, the same shape everywhere */

.cx-chip {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px dashed rgba(148, 190, 230, 0.32);
  border-radius: 6px;
  background: var(--cx-surface);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.cx-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: var(--cx-radius-sm);
  font-size: 0.875rem;
  line-height: 1.35;
}

.cx-card b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.cx-card b::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.cx-card span {
  color: var(--cx-text);
  font-weight: 600;
}

.cx-card small {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

.cx-card--event {
  border-color: var(--cx-line-2);
  color: var(--cx-muted);
}

.cx-card--event b::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.cx-card--data {
  border-color: rgba(101, 200, 241, 0.42);
  background: rgba(14, 36, 58, 0.94);
  color: var(--cx-data);
}

.cx-card--ai {
  border-color: rgba(242, 181, 68, 0.5);
  background: rgba(40, 32, 16, 0.94);
  color: var(--cx-ai);
}

.cx-card--human {
  border-color: rgba(75, 220, 152, 0.5);
  background: rgba(14, 40, 30, 0.94);
  color: var(--cx-human);
}

/* Woven FAQ note: the same quiet shape everywhere */

.cx-note {
  max-width: 34em;
  margin-top: 32px;
  padding-left: 14px;
  border-left: 2px solid var(--cx-line-2);
}

.cx-note__q {
  margin: 0;
  text-wrap: balance;
  color: var(--cx-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.cx-note__a {
  margin: 4px 0 0;
  color: var(--cx-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Hero */

.cx-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding-top: calc(var(--nav-h) + 64px);
  padding-bottom: var(--cx-section);
}

.cx-hero__copy {
  grid-column: 1 / span 5;
  padding-top: 60px;
}

.cx-hero h1 {
  font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stage {
  grid-column: 7 / span 6;
  margin: 0;
}

/* Hero stage: Today vs With CITE.AS */

.stage__switch {
  position: relative;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: var(--cx-surface);
}

html:not(.js) .stage__switch {
  display: none;
}

.stage__switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 116px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--cx-text);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage[data-state="cite"] .stage__switch::before {
  transform: translateX(118px);
}

.stage__switch button {
  position: relative;
  z-index: 1;
  width: 116px;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cx-muted);
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.stage__switch button:hover {
  color: var(--cx-text);
}

.stage__switch button[aria-checked="true"] {
  color: var(--cx-bg);
}

.stage__canvas {
  position: relative;
  aspect-ratio: 700 / 480;
  container-type: inline-size;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: linear-gradient(180deg, #0a1628, #071222);
}

.stage__region {
  position: absolute;
  left: 33%;
  top: 9%;
  width: 34%;
  height: 84%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(211, 220, 232, 0.11), transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.stage__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.stage__links--tall {
  display: none;
}

.stage__links path {
  fill: none;
  stroke: var(--cx-data);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.stage__links .link--map {
  stroke: var(--cx-soft);
  stroke-opacity: 0.55;
}

.stage__links .link--human {
  stroke: var(--cx-human);
  stroke-opacity: 0.75;
}

.stage__links .link--ai {
  stroke: var(--cx-ai);
  stroke-opacity: 0.75;
}

.frag {
  position: absolute;
  left: var(--ax);
  top: var(--ay);
  width: 27%;
  height: 10.4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 1.7cqw;
  border: 1px dashed rgba(148, 190, 230, 0.32);
  border-radius: var(--cx-radius-sm);
  background: rgba(10, 21, 38, 0.94);
  transform: rotate(var(--ar));
  transition:
    left 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
  transition-delay: calc(var(--i) * 60ms);
}

.frag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--cx-data);
  opacity: 0;
  transition: opacity 0.4s ease 0.6s;
}

.frag__kind {
  display: grid;
  color: var(--cx-dim);
  font: 600 12px/1.2 var(--font-body);
}

.frag__kind > span {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.frag__kind-with {
  color: var(--cx-human);
  opacity: 0;
  visibility: hidden;
}

.frag__text {
  overflow: hidden;
  color: var(--cx-text);
  font: 500 clamp(12px, 2.2cqw, 14px)/1.3 var(--font-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.frag--ghost .frag__kind {
  visibility: hidden;
}

.frag--ghost {
  opacity: 0.55;
  transition: opacity 0.3s ease, visibility 0s;
}

.stage[data-state="cite"] .frag--ghost,
html:not(.js) .stage .frag--ghost {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hint {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  color: var(--cx-muted);
  font: 500 clamp(12px, 1.8cqw, 13px)/1.2 var(--font-body);
  white-space: nowrap;
  transition: opacity 0.3s ease, visibility 0s;
}

.node {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  padding: 1.2cqw 2.4cqw;
  border: 1px solid rgba(211, 220, 232, 0.6);
  border-radius: 999px;
  background: #10233d;
  color: var(--cx-text);
  font: 600 clamp(12px, 2.2cqw, 14px)/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.stage__maplabel {
  position: absolute;
  left: 46.5%;
  top: 5.5%;
  color: var(--cx-soft);
  font: 600 clamp(11px, 1.9cqw, 12px)/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.out {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: 27%;
  min-height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 1.2cqw 1.7cqw;
  border: 1px solid;
  border-radius: var(--cx-radius-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.out--data {
  border-color: rgba(101, 200, 241, 0.42);
  background: rgba(14, 36, 58, 0.94);
}

.out--ai {
  border-color: rgba(242, 181, 68, 0.5);
  background: rgba(40, 32, 16, 0.94);
}

.out__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 clamp(11px, 1.9cqw, 12px)/1.2 var(--font-body);
}

.out__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.out--data .out__tag {
  color: var(--cx-data);
}

.out--ai .out__tag {
  color: var(--cx-ai);
}

.out__text {
  color: var(--cx-text);
  font: 600 clamp(12px, 2.2cqw, 14px)/1.3 var(--font-body);
  text-wrap: pretty;
}

.out__src {
  color: var(--cx-soft);
  font: 500 12px/1.3 var(--font-body);
}

.out:focus-visible {
  outline: 2px solid var(--cx-text);
  outline-offset: 2px;
}

.stage:has(.out[data-cites~="erp"]:is(:hover, :focus, .is-demo)) .frag[data-src="erp"],
.stage:has(.out[data-cites~="mail"]:is(:hover, :focus, .is-demo)) .frag[data-src="mail"],
.stage:has(.out[data-cites~="know"]:is(:hover, :focus, .is-demo)) .frag[data-src="know"],
.stage:has(.out[data-cites~="scan"]:is(:hover, :focus, .is-demo)) .frag[data-src="scan"] {
  border-color: var(--cx-text);
  box-shadow: 0 0 0 1px var(--cx-text), 0 0 18px rgba(238, 244, 252, 0.25);
}

.stage__caption {
  display: grid;
  margin-top: 14px;
  color: var(--cx-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.stage__caption > span {
  grid-area: 1 / 1;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.stage__caption-with {
  opacity: 0;
  visibility: hidden;
}

.stage__caption-with b {
  color: var(--cx-soft);
  font-weight: 500;
}

.stage__caption > .stage__caption-note {
  grid-area: 2 / 1;
  margin-top: 2px;
  color: var(--cx-dim);
}

/* The "With CITE.AS" state. Without JavaScript it is shown directly.
   Labels change only once the cards have landed. */

.stage[data-state="cite"] .frag,
html:not(.js) .stage .frag {
  left: var(--bx);
  top: var(--by);
  border-style: solid;
  border-color: var(--cx-line-2);
  transform: none;
}

.stage[data-state="cite"] .frag::after,
html:not(.js) .stage .frag::after {
  opacity: 1;
}

.stage[data-state="cite"] .frag--know,
html:not(.js) .stage .frag--know {
  border-color: rgba(75, 220, 152, 0.55);
  transition-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms), calc(var(--i) * 60ms), 0.9s;
}

.stage[data-state="cite"] .frag--know::after,
html:not(.js) .stage .frag--know::after {
  background: var(--cx-human);
}

.stage[data-state="cite"] .frag__kind-today,
.stage[data-state="cite"] .stage__caption-today,
.stage[data-state="cite"] .hint,
html:not(.js) .stage .frag__kind-today,
html:not(.js) .stage .stage__caption-today,
html:not(.js) .stage .hint {
  opacity: 0;
  visibility: hidden;
}

.stage[data-state="cite"] .frag__kind-with,
.stage[data-state="cite"] .stage__caption-with,
html:not(.js) .stage .frag__kind-with,
html:not(.js) .stage .stage__caption-with {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.9s;
}

.stage[data-state="cite"] .stage__region,
html:not(.js) .stage .stage__region {
  opacity: 1;
  transition-delay: 0.4s;
}

.stage[data-state="cite"] .stage__links,
html:not(.js) .stage .stage__links {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease 0.55s, visibility 0s;
}

.stage[data-state="cite"] .stage__maplabel,
html:not(.js) .stage .stage__maplabel {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease 0.9s, visibility 0s;
}

.stage[data-state="cite"] .node,
html:not(.js) .stage .node {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.5s ease calc(0.45s + var(--i) * 70ms),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.45s + var(--i) * 70ms),
    visibility 0s;
}

.stage[data-state="cite"] .out,
html:not(.js) .stage .out {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.5s ease calc(0.95s + var(--i) * 120ms),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.95s + var(--i) * 120ms),
    visibility 0s;
}

/* Sections */

.cx-section {
  padding-block: var(--cx-section);
  border-top: 1px solid var(--cx-line);
}

.cx-section h2 {
  max-width: 24ch;
  margin-bottom: 48px;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Problem: each pain carries the fragment it comes from */

.cx-split + .cx-steps {
  margin-top: 48px;
}

.cx-pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-pains + .cx-fine {
  margin-top: 24px;
}

.cx-pains li {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--cx-line-2);
  color: var(--cx-text);
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* How it works: cards share rows so every part lines up */

.cx-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 24px;
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-step {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  padding-top: 28px;
  border-top: 1px solid var(--cx-line-2);
}

.cx-step__art {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 28px;
}

.cx-step__n {
  margin: 0;
  color: var(--cx-dim);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cx-step h3 {
  margin-top: 6px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.cx-step > p:not(.cx-step__n) {
  margin: 10px 0 28px;
  color: var(--cx-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.cx-step .cx-note {
  margin-top: 0;
  align-self: start;
}

.art-frag rect {
  fill: var(--cx-surface-2);
  stroke: var(--cx-muted);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.art-frag text {
  fill: var(--cx-soft);
  font: 600 8.5px var(--font-body);
}

.art-pills text {
  fill: var(--cx-text);
  font: 600 8.5px var(--font-body);
}

.art-pills path {
  fill: none;
  stroke: var(--cx-soft);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

.art-pills .art-pills__confirmed {
  stroke: var(--cx-human);
  stroke-opacity: 1;
}

.art-pills rect {
  fill: #10233d;
  stroke: var(--cx-soft);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
}

.art-flow path {
  fill: none;
  stroke: var(--cx-data);
  stroke-opacity: 0.75;
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  animation: cxFlow 1.6s linear 3;
}

@keyframes cxFlow {
  to {
    stroke-dashoffset: -16;
  }
}

.art-check {
  fill: var(--cx-human-soft);
  stroke: var(--cx-human);
  stroke-width: 1.5;
}

.art-check__tick {
  fill: none;
  stroke: var(--cx-human);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-tile {
  fill: var(--cx-data-soft);
  stroke: var(--cx-data);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
}

.art-tile--ai {
  fill: var(--cx-ai-soft);
  stroke: var(--cx-ai);
  stroke-opacity: 1;
}

.art-flow .art-flow__ai {
  stroke: var(--cx-ai);
}

.art-label {
  fill: var(--cx-data);
  font: 600 9px var(--font-body);
}

.art-label--ai {
  fill: var(--cx-ai);
}

/* Who decides */

.cx-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}

.cx-split > :first-child {
  grid-column: 1 / span 6;
}

.cx-split > :last-child {
  grid-column: 7 / -1;
}

.cx-split h2 {
  margin-bottom: 0;
}

.cx-notes {
  display: grid;
  gap: 20px;
  padding-top: 6px;
}

.cx-notes .cx-note {
  margin-top: 0;
}

.cx-time li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--cx-bg);
  box-shadow: 0 0 0 4px var(--cx-bg);
}

.cx-time .is-event::before {
  border: 1.5px solid var(--cx-muted);
}

.cx-time .is-data::before {
  background: var(--cx-data);
}

.cx-time .is-ai::before {
  background: var(--cx-ai);
}

.cx-time .is-human::before {
  background: var(--cx-human);
}

.cx-time {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  column-gap: 24px;
  row-gap: 0;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* Each step draws its own segment in its own colour, from its dot onward. */
.cx-time li::after {
  content: "";
  position: absolute;
  top: 4.5px;
  left: 17px;
  right: -18px;
  height: 2px;
  border-radius: 1px;
  background: var(--seg);
}

.cx-time li:last-child::after {
  right: 0;
  background: linear-gradient(90deg, var(--seg), transparent);
}

.cx-time .is-event { --seg: var(--cx-line-2); }
.cx-time .is-data { --seg: rgba(101, 200, 241, 0.55); }
.cx-time .is-ai { --seg: rgba(242, 181, 68, 0.7); }
.cx-time .is-human { --seg: rgba(75, 220, 152, 0.7); }

.cx-time li {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 12px;
  padding-top: 32px;
  color: var(--cx-text);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.cx-time .cx-card {
  align-self: stretch;
  grid-template-rows: auto 1fr auto;
}

.cx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  color: var(--cx-dim);
  font-size: 0.8125rem;
  font-weight: 500;
}

.cx-meta time {
  color: var(--cx-muted);
  font: 600 0.875rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Start */

.cx-section.cx-start {
  border-top: 0;
  padding-top: 0;
}

.cx-start__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--cx-line-2);
  border-radius: var(--cx-radius);
  background: var(--cx-surface);
}

.cx-start__panel > :first-child {
  grid-column: 1 / span 6;
}

.cx-start__panel > :last-child {
  grid-column: 7 / -1;
}

.cx-start h2 {
  margin-bottom: 0;
}

.cx-leave__title {
  margin: 0;
  color: var(--cx-muted);
  font: 600 0.875rem/1.4 var(--font-body);
}

.cx-leave {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.cx-leave li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--cx-line-2);
  border-radius: var(--cx-radius-sm);
  font: 500 1rem/1.4 var(--font-body);
}

.cx-leave li::before {
  content: "";
  width: 10px;
  height: 6px;
  flex: none;
  margin-top: -3px;
  border: solid var(--cx-muted);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.cx-start__panel .cx-note {
  margin-top: 32px;
}

/* Footer */

.cx-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0 48px;
  border-top: 1px solid var(--cx-line);
  color: var(--cx-dim);
  font-size: 0.875rem;
}

.cx-footer p {
  margin: 0;
}

.cx-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.cx-footer a {
  padding-block: 12px;
  color: var(--cx-muted);
  transition: color 0.2s ease;
}

.cx-footer a:hover {
  color: var(--cx-text);
}

/* Responsive */

@media (max-width: 1240px) {
  .cx-hero {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .cx-hero__copy,
  .stage {
    grid-column: 1 / -1;
  }

  .cx-hero__copy {
    max-width: 640px;
    padding-top: 0;
  }

  .stage {
    max-width: 760px;
  }
}

@media (max-width: 980px) {
  .page-cite .cx-navlinks {
    display: none;
  }
}

@media (max-width: 900px) {
  .cx-pains,
  .cx-steps,
  .cx-split,
  .cx-start__panel {
    grid-template-columns: 1fr;
  }

  .cx-split > :first-child,
  .cx-split > :last-child,
  .cx-start__panel > :first-child,
  .cx-start__panel > :last-child {
    grid-column: 1 / -1;
  }

  .cx-split {
    row-gap: 32px;
  }

  .cx-steps {
    grid-template-rows: none;
    row-gap: 40px;
  }

  .cx-step {
    grid-row: auto;
    grid-template-rows: none;
    padding-top: 32px;
  }

  #decide {
    display: grid;
  }

  #decide .cx-split {
    display: contents;
  }

  #decide .cx-notes {
    order: 3;
    margin-top: 40px;
  }

  #how .cx-split + .cx-steps {
    margin-top: 40px;
  }

  .cx-time {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 28px;
  }

  .cx-time li::after {
    top: 17px;
    bottom: -22px;
    left: 4.5px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .cx-time li:last-child::after {
    display: none;
  }

  .cx-steps .cx-step:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .cx-time li {
    grid-row: auto;
    grid-template-rows: none;
    padding: 0 0 0 32px;
  }
}

@media (max-width: 640px) {
  .stage__switch {
    display: flex;
  }

  .stage__switch::before {
    width: calc((100% - 10px) / 2);
  }

  .stage[data-state="cite"] .stage__switch::before {
    transform: translateX(calc(100% + 2px));
  }

  .stage__switch button {
    flex: 1;
    width: auto;
    min-height: 44px;
  }

  .page-cite .nav .btn {
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .cx-brand span {
    font-size: 1.125rem;
  }

  .cx-hero {
    padding-top: calc(var(--nav-h) + 40px);
    row-gap: 40px;
  }

  .cx-hero h1 {
    font-size: 2.25rem;
    text-wrap: pretty;
  }

  .cx-footer {
    row-gap: 4px;
  }

  .cx-footer nav {
    column-gap: 20px;
  }

  .cx-hero .cx-lede {
    font-size: 1rem;
  }

  .cx-hero .cx-actions {
    margin-top: 24px;
  }

  .cx-actions .btn {
    flex: 1 1 100%;
  }

  .cx-hero .cx-actions__secondary {
    display: none;
  }

  .stage__canvas {
    aspect-ratio: 3 / 4;
  }

  .stage__region {
    left: 6%;
    top: 30%;
    width: 88%;
    height: 32%;
  }

  .stage__links--wide {
    display: none;
  }

  .stage__links--tall {
    display: block;
  }

  .frag {
    left: var(--max);
    top: var(--may);
    width: 44%;
    height: 8%;
    transform: rotate(var(--mar));
  }

  .stage[data-state="cite"] .frag,
  html:not(.js) .stage .frag {
    left: var(--mbx);
    top: var(--mby);
  }

  .frag::after {
    display: none;
  }

  .hint {
    left: var(--mhx);
    top: var(--mhy);
  }

  .node {
    left: var(--mx);
    top: var(--my);
  }

  .stage__maplabel {
    display: none;
  }

  .out {
    left: var(--mox);
    top: var(--moy);
    width: 92%;
    min-height: 0;
    height: auto;
    padding: 6px 1.7cqw;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    column-gap: 12px;
    row-gap: 2px;
  }

  .out__src {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .out__text {
    grid-column: 1 / -1;
  }

}

.cx-xs-show {
  display: none;
}

@media (max-width: 400px) {
  .nav .cx-xs-hide {
    display: none;
  }

  .nav .cx-xs-show {
    display: inline;
  }
}

/* The smallest phones get a taller stage, so nothing has to truncate. */
@media (max-width: 360px) {
  .out {
    column-gap: 8px;
  }

  .out__src {
    font-size: 11px;
  }

  .stage__canvas {
    aspect-ratio: 9 / 16;
  }

  .frag {
    height: 8.5%;
    padding-inline: 6px;
  }

  .cx-hero h1 {
    font-size: 1.875rem;
  }

  .frag__text {
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  .frag--ghost .frag__text {
    font-size: 11px;
    white-space: nowrap;
    text-overflow: clip;
  }

  .frag__kind {
    font-size: 11px;
    white-space: nowrap;
  }

  .frag--know {
    width: 46%;
  }

  .stage__switch button {
    padding-inline: 4px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-cite *,
  .page-cite *::before,
  .page-cite *::after {
    transition-delay: 0s !important;
    transition-duration: 0.01s !important;
  }

}

/* end CITE.AS product page */



































@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}