:root {
  --bg: #0c0e0e;
  --bg-raised: rgba(22, 26, 26, .78);
  --line: rgba(226, 240, 234, .13);
  --line-strong: rgba(226, 240, 234, .26);
  --text: #eff4f1;
  --muted: #a3aeaa;
  --faint: #76817d;
  --emerald: #2ee6a6;
  --emerald-deep: #12b981;
  --lavender: #b7a4ff;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --gutter: clamp(16px, 3.4vw, 48px);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--emerald); color: #04130d; padding: 8px 14px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* Nav */
.nav {
  position: absolute; inset: 0 0 auto; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 36px;
  padding: 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.nav__cta {
  margin-left: auto;
  font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(12, 14, 14, .5);
  transition: border-color .2s, background .2s;
}
.nav__cta:hover { border-color: var(--emerald); background: rgba(46, 230, 166, .08); }

/* Hero */
.hero {
  position: relative;
  min-height: max(100svh, 760px);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 12px) var(--gutter) 40px;
  overflow: hidden;
}
.hero__copy { position: relative; z-index: 5; width: min(38vw, 590px); min-width: 430px; }

.eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--emerald);
}
.eyebrow span { color: var(--faint); margin: 0 3px; }
h1 {
  margin: 0;
  font-size: clamp(42px, 4.5vw, 70px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  text-wrap: balance;
}
.lede {
  margin: 24px 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.58;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: 11px;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.005em;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--emerald); color: #04130d; box-shadow: 0 0 0 1px rgba(46,230,166,.3), 0 10px 40px -12px rgba(46,230,166,.55); }
.btn--primary:hover { background: #4cf0b7; transform: translateY(-1px); }
.btn--ghost { border: 1px solid var(--line-strong); background: rgba(12,14,14,.55); }
.btn--ghost:hover { border-color: var(--lavender); background: rgba(183,164,255,.08); }

.scene-intro { display: none; }
.trust {
  list-style: none; margin: 34px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 13.5px; color: var(--muted);
}

/* Scene */
.scene { position: absolute; inset: 0; z-index: 1; cursor: grab; user-select: none; -webkit-user-select: none; }
.scene.is-dragging { cursor: grabbing; }
#engine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.scene__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0, rgba(12,14,14,.93) 26%, rgba(12,14,14,0) 46%);
}
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .9s ease .3s; }
.is-ready .overlay { opacity: 1; }

.node {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.25; white-space: nowrap;
  color: #d5ddd9;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 7px;
  backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s, background .2s, opacity .3s;
  will-change: transform;
}
.node::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent, var(--emerald));
  box-shadow: 0 0 8px var(--accent, var(--emerald));
}
/* Generous hit area so the 3D puck beneath the label is hoverable too. */
.node::after { content: ""; position: absolute; inset: -6px -6px -38px; }
.node b { font-weight: 500; color: var(--emerald); margin-left: 3px; }
.node--inbound { --accent: var(--emerald); }
.node--outbound { --accent: var(--lavender); }
.node--stage { --accent: #9ff5d6; font-size: 12px; padding: 5px 10px; }
.node--stage::after { inset: -6px -6px -60px; }
.node--revenue { border-color: rgba(46,230,166,.55); color: #fff; background: rgba(14, 44, 34, .85); }
.node:hover, .node.is-focus { border-color: var(--accent, var(--emerald)); color: #fff; z-index: 3; }
.node.is-dim { opacity: .42; }

.tool {
  position: absolute; left: 0; top: 0;
  width: var(--tile, 42px); height: var(--tile, 42px);
  display: grid; place-items: center;
  pointer-events: auto;
  background: #f6f8f7;
  border-radius: 11px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.7);
  transition: opacity .25s, outline-color .2s;
  outline: 2px solid transparent; outline-offset: 2px;
  will-change: transform;
}
.tool svg, .tool img { width: 58%; height: 58%; display: block; object-fit: contain; }
.tool__mono { font-size: 16px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tool:hover, .tool.is-focus { outline-color: var(--emerald); z-index: 4; }
.tool--outbound:hover, .tool--outbound.is-focus { outline-color: var(--lavender); }
.tool.is-dim { opacity: .5; }
.tool__tip {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  background: #1c2221; border: 1px solid var(--line-strong);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.tool:hover .tool__tip, .tool.is-focus .tool__tip, .tool:focus-visible .tool__tip { opacity: 1; }
.cat {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .02em;
  will-change: transform;
}
.cat--inbound { color: #7ff0c8; }
.cat--outbound { color: #cbbdff; }
.cat--auto { color: #bfeedd; }

.reticle {
  position: absolute; left: 0; top: 0; width: var(--s, 70px); height: var(--s, 70px);
  opacity: 0; transition: opacity .25s, width .25s, height .25s;
  will-change: transform;
}
.reticle.is-on { opacity: 1; }
.reticle i { position: absolute; width: 11px; height: 11px; border: 1.5px solid #e9fff6; }
.reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.card {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: 7px;
  width: 212px; padding: 11px 13px 12px;
  text-align: left;
  font-size: 12.5px; line-height: 1.3;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  transition: border-color .25s, opacity .4s;
  will-change: transform;
}
.card--engine { pointer-events: auto; cursor: pointer; }
.card--engine:hover, .card--engine.is-focus { border-color: rgba(159,245,214,.55); }
.card__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.card__row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.card__row--dim { color: var(--muted); font-size: 11.5px; }
.card__row b { color: var(--text); font-weight: 600; }
.card__big { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(46,230,166,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 7px rgba(46,230,166,0); } }
.tag { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 5px; color: var(--emerald); background: rgba(46,230,166,.12); }
.tag.is-out { color: var(--lavender); background: rgba(183,164,255,.14); }
.meter { display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lavender), var(--emerald)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.split { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--lavender); }
.split__a { width: 50%; background: var(--emerald); transition: width .7s; }
.split__b { flex: 1; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dot--em { background: var(--emerald); } .dot--lav { background: var(--lavender); }

.deadend {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 10.5px; color: #f3c9a0;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(46, 30, 16, .82); border: 1px dashed rgba(243,201,160,.45);
  opacity: 0; transition: opacity .4s;
}
.is-disconnected .deadend { opacity: 1; }
.is-disconnected .card--attr { opacity: .28; }
.is-disconnected .tool--stack, .is-disconnected .tool--auto { opacity: .35; }

/* Dock */
.dock {
  position: absolute; right: var(--gutter); bottom: 26px; z-index: 6;
  width: min(500px, 38vw); min-width: 400px;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; transition: opacity .9s ease .6s;
}
.is-ready .dock { opacity: 1; }
.dock__caption { display: flex; flex-direction: column; gap: 2px; min-height: 62px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.dock__caption strong { color: var(--text); font-weight: 600; font-size: 14.5px; }
.dock__controls { display: flex; align-items: center; gap: 14px; }
.toggle { display: inline-flex; flex: none; padding: 3px; border-radius: 10px; background: var(--bg-raised); border: 1px solid var(--line); }
.toggle button {
  padding: 7px 12px; min-height: 34px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: background .2s, color .2s;
}
.toggle button:hover { color: var(--text); }
.toggle button[aria-pressed="true"] { background: rgba(46,230,166,.16); color: var(--emerald); }
#t-off[aria-pressed="true"] { background: rgba(243,201,160,.14); color: #f3c9a0; }
.dock__hint { font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: var(--faint); }
.only-touch { display: none; }
@media (hover: none) { .only-mouse { display: none; } .only-touch { display: inline; } }

.model-orbit .card--engine { width: 178px; }
.model-orbit .card--engine .card__row--dim { font-size: 10.5px; white-space: nowrap; }
.model-orbit .deadend, .model-funnel .deadend { z-index: 12; }
.cat--ring { padding: 2px 7px; border-radius: 6px; background: var(--bg-raised); border: 1px solid var(--line); z-index: 12; }
.model-orbit .card, .model-funnel .card, .model-orbit .node, .model-funnel .node { z-index: 11; }

/* Fallback when WebGL is unavailable */
.fallback { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 52%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; }
.fallback[hidden] { display: none; }
.fallback h3 { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.fallback p { margin: 0; color: var(--muted); }
.fallback__col, .fallback__core, .fallback__pipe { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg-raised); }
.fallback__col--in h3 { color: var(--emerald); } .fallback__col--out h3 { color: var(--lavender); }
.fallback__core { grid-column: 1 / -1; text-align: center; font-weight: 600; border-color: rgba(46,230,166,.5); }
.fallback__pipe { grid-column: 1 / -1; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.fallback__pipe li:last-child { color: var(--emerald); font-weight: 600; }
.no-webgl .scene__scrim, .no-webgl .overlay, .no-webgl .dock, .no-webgl #engine-canvas { display: none; }
.no-webgl .scene { cursor: default; }

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero__copy > :nth-child(2) { animation-delay: .06s; }
  .hero__copy > :nth-child(3) { animation-delay: .14s; }
  .hero__copy > :nth-child(4) { animation-delay: .22s; }
  .hero__copy > :nth-child(5) { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Stacked layout: copy, then scene, then dock */
@media (max-width: 1080px) {
  .scene.model-orbit, .scene.model-funnel { height: 780px; }
}
@media (max-width: 720px) {
  .scene.model-orbit, .scene.model-funnel { height: 680px; --tile: 30px; }
  .model-orbit .tool__mono, .model-funnel .tool__mono { font-size: 12px; }
}
@media (max-width: 1080px) {
  .hero { display: block; min-height: 0; padding: calc(var(--nav-h) + 26px) 0 32px; }
  .hero__copy { width: auto; min-width: 0; max-width: 680px; padding: 0 var(--gutter); }
  h1 { font-size: clamp(38px, 7vw, 60px); }
  .scene { position: relative; inset: auto; height: 620px; margin-top: 20px; }
  .scene__scrim { background: linear-gradient(180deg, var(--bg) 0, rgba(12,14,14,0) 9%, rgba(12,14,14,0) 90%, var(--bg) 100%); }
  .dock { position: relative; right: auto; bottom: auto; width: auto; min-width: 0; padding: 0 var(--gutter); }
  .dock__caption { min-height: 84px; }
  .fallback { position: static; transform: none; width: auto; padding: 0 var(--gutter); }
  .no-webgl .scene { height: auto; }
}
@media (max-width: 860px) {
  .nav .menu { display: none; }
}
@media (max-width: 720px) {
  .scene { height: 1120px; margin-top: 8px; --tile: 36px; }
  .tool { border-radius: 9px; }
  .tool__mono { font-size: 14px; }
  .cat { font-size: 10px; }
  .nav__cta { padding: 8px 12px; font-size: 13px; }
  .eyebrow { font-size: 11px; letter-spacing: .06em; margin-bottom: 16px; }
  .actions .btn { width: 100%; }
  .dock__controls { flex-direction: column; align-items: stretch; gap: 9px; }
  .toggle { display: grid; grid-template-columns: 1fr 1fr; }
  .toggle button { min-height: 42px; }
}

/* ---------- Homepage sections ---------- */
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { width: min(860px, 100%); }
.section { position: relative; padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.section--raised { background: #101313; }
.section__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head--row { display: flex; justify-content: space-between; align-items: end; max-width: none; }
.kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--emerald); }
.section h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.section h3 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.section p { color: var(--muted); }
.section__lede { margin: 18px 0 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; max-width: 640px; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; color: var(--text); font-size: 15px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(46,230,166,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%232ee6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Problem */
.problems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.problem { padding: 26px 22px 28px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }
.problem__num { display: inline-block; margin-bottom: 34px; font-family: var(--mono); font-size: 12px; color: #f3c9a0; padding: 3px 8px; border-radius: 6px; border: 1px dashed rgba(243,201,160,.4); }
.problem p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

/* Tabs */
.tabs { border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow: hidden; }
.tabs__list { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.tabs__list button {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px; text-align: left;
  font-size: 15px; font-weight: 500; color: var(--muted);
  border-right: 1px solid var(--line); position: relative; transition: color .2s, background .2s;
}
.tabs__list button:last-child { border-right: 0; }
.tabs__list button span { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.tabs__list button:hover { color: var(--text); background: rgba(255,255,255,.02); }
.tabs__list button[aria-selected="true"] { color: var(--text); background: rgba(46,230,166,.06); }
.tabs__list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--emerald); }
.tabs__list button[aria-selected="true"] span { color: var(--emerald); }
.tabs__panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px); }
.tabs__panel[hidden] { display: none; }
.panel__copy h3 { font-size: clamp(21px, 2vw, 26px); }
.panel__copy p { margin: 14px 0 0; line-height: 1.6; }

.mock { border: 1px solid var(--line-strong); border-radius: 16px; background: #141918; padding: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.mock__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mock__head em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); }
.mock__rows { display: grid; gap: 8px; }
.mock__rows div { display: grid; grid-template-columns: 1fr 1.2fr 18px; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.03); font-size: 13.5px; }
.mock__rows span { color: var(--muted); }
.mock__rows b { font-weight: 500; }
.mock__rows i { width: 16px; height: 16px; border-radius: 50%; }
.mock__rows i.ok { background: var(--emerald); box-shadow: 0 0 10px rgba(46,230,166,.5); }
.mock__rows i.half { background: conic-gradient(var(--lavender) 0 50%, rgba(255,255,255,.12) 0); }
.mock__score { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.mock__score b { font-size: 22px; color: var(--text); }
.bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lavender), var(--emerald)); }
.bar--em span { background: var(--emerald); }
.bar--lav span { background: var(--lavender); }
.mock__bars { display: grid; gap: 13px; }
.mock__bars div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.mock__legend { display: flex; gap: 16px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.mock__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.mock__steps li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13.5px; }
.mock__steps li:nth-child(odd) b { color: var(--emerald); }
.mock__steps li:nth-child(even) b { color: var(--lavender); }
.mock__steps b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mock__chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 190px; padding-top: 6px; }
.mock__chart div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.mock__chart div::before { content: ""; height: var(--b); background: var(--lavender); border-radius: 0 0 5px 5px; order: 2; opacity: .85; }
.mock__chart div::after { content: ""; height: calc(var(--a) - var(--b) + 20%); background: var(--emerald); border-radius: 5px 5px 0 0; order: 1; }
.mock__chart span { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
#panel-revops .mock__legend { margin-top: 32px; }

/* Services */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.service { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 80% at 0% 0%, rgba(46,230,166,.08), transparent 60%); }
.service--out { background: radial-gradient(120% 80% at 100% 0%, rgba(183,164,255,.1), transparent 60%); }
.service__tag { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border-radius: 7px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.service--in .service__tag { color: var(--emerald) !important; background: rgba(46,230,166,.12); }
.service--out .service__tag { color: var(--lavender) !important; background: rgba(183,164,255,.14); }
.service__tag--mint { color: #a8f7da !important; background: rgba(168,247,218,.1); }
.service ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; }
.service li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t c" "d c"; column-gap: 16px; row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); align-items: center; }
.service li b { grid-area: t; font-weight: 600; font-size: 15.5px; }
.service li > span:not(.chips) { grid-area: d; color: var(--muted); font-size: 14px; line-height: 1.5; }
.service li .chips { grid-area: c; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f6f8f7; flex: none; }
.chip svg, .chip img { width: 60%; height: 60%; object-fit: contain; }
.chip__mono { font-size: 12px; font-weight: 700; letter-spacing: -.03em; }
.chips--lg .chip { width: 40px; height: 40px; border-radius: 10px; }
.chips--lg .chip__mono { font-size: 15px; }
.service-band { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(90deg, rgba(46,230,166,.06), rgba(183,164,255,.06)); }
.service-band p:not(.service__tag) { margin: 6px 0 0; font-size: 15px; }
.service-band .chips { justify-content: flex-end; max-width: 460px; }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.step { position: relative; padding: 24px 22px 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.step::before { content: ""; position: absolute; top: 34px; right: -15px; width: 16px; height: 1px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step__num { font-family: var(--mono); font-size: 11.5px; color: var(--emerald); }
.step h3 { margin-top: 26px; }
.step p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

/* Compare */
.compare { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.compare__row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; }
.compare__row > span { padding: 18px 22px; border-top: 1px solid var(--line); font-size: 15px; }
.compare__row--head > span { border-top: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.compare__row > span:first-child { color: var(--text); font-weight: 600; }
.compare__row > span:nth-child(2) { color: var(--muted); }
.compare__row > span:nth-child(3) { background: rgba(46,230,166,.05); color: var(--text); }
.compare__row--head > span:nth-child(3) { color: var(--emerald); }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.metric__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 26px; border-radius: 10px; font-size: 18px; color: var(--emerald); background: rgba(46,230,166,.1); }
.metric p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

/* Posts */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post { display: flex; flex-direction: column; min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgba(183,164,255,.05), transparent 50%); }
.post__tag { margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--lavender) !important; }
.post__soon { margin-top: auto; padding-top: 24px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--emerald); font-size: 18px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; padding-right: 48px; line-height: 1.6; }

/* CTA and form */
.cta { background: radial-gradient(70% 90% at 15% 0%, rgba(46,230,166,.1), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(183,164,255,.09), transparent 60%); }
.cta__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; scroll-margin-top: 20px; }
.form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-strong); border-radius: 20px; background: rgba(16,19,19,.9); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--text);
  background: #0c0f0f; border: 1px solid var(--line-strong); transition: border-color .2s;
}
.form textarea { resize: vertical; min-height: 92px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(46,230,166,.15); }
.form [aria-invalid="true"] { border-color: #f08a7c; }
.form .btn { margin-top: 4px; width: 100%; }
.form .btn:disabled { opacity: .6; cursor: wait; }
.form__status { margin: 0; min-height: 20px; font-size: 14px; }
.form__status[data-kind="error"] { color: #f3b2a6; }
.form__status[data-kind="ok"] { color: var(--emerald); }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 64px 0 28px; background: #0a0c0c; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__tag { margin: 14px 0 0; max-width: 300px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.footer nav { display: grid; align-content: start; gap: 10px; }
.footer h3 { margin: 0 0 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.footer nav a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.footer nav a:hover { color: var(--text); }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

@media (max-width: 1080px) {
  .problems, .steps, .metrics { grid-template-columns: repeat(2, 1fr); }
  .step::before { display: none; }
  .tabs__panel { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .service-band { flex-direction: column; align-items: flex-start; }
  .service-band .chips { justify-content: flex-start; }
  .cta__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .problems, .steps, .metrics, .posts { grid-template-columns: 1fr; }
  .problem__num { margin-bottom: 20px; }
  .tabs__list { grid-template-columns: 1fr 1fr; }
  .tabs__list button { padding: 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
  .tabs__list button:nth-child(2n) { border-right: 0; }
  .tabs__list button:nth-child(n+3) { border-bottom: 0; }
  .mock__bars div { grid-template-columns: 100px 1fr; }
  .service li { grid-template-columns: 1fr; grid-template-areas: "t" "d" "c"; }
  .service li .chips { margin-top: 6px; }
  .compare__row { grid-template-columns: 1fr 1fr; }
  .compare__row > span:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .compare__row > span:not(:first-child) { border-top: 0; padding-top: 4px; font-size: 14px; }
  .compare__row--head > span:first-child { display: none; }
  .compare__row--head > span:not(:first-child) { padding-top: 16px; }
  .form__row { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .post { min-height: 0; }
}

/* ---------- Site navigation ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav .menu { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.menu__item { position: relative; }
.menu__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 14.5px; transition: color .2s, background .2s; }
.menu__link:hover, .menu__item:focus-within > .menu__link, .menu__link[aria-current] { color: var(--text); }
.menu__link[aria-current] { background: rgba(255,255,255,.05); }
.menu__panel {
  position: absolute; top: calc(100% + 6px); left: -8px; z-index: 30;
  display: grid; gap: 4px; min-width: 230px; padding: 10px;
  background: #121716; border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.menu__item:hover .menu__panel, .menu__item:focus-within .menu__panel { opacity: 1; visibility: visible; transform: none; }
.menu__panel--wide { grid-template-columns: repeat(3, 210px); }
.menu__col { display: grid; align-content: start; gap: 2px; }
.menu__col a { padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.menu__col a:hover, .menu__col a[aria-current] { background: rgba(255,255,255,.05); color: var(--text); }
.menu__col .menu__pillar { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.menu__pillar--inbound { box-shadow: inset 2px 0 0 var(--emerald); }
.menu__pillar--outbound { box-shadow: inset 2px 0 0 var(--lavender); }
.menu__pillar--revops { box-shadow: inset 2px 0 0 #a8f7da; }
.nav__toggle { display: none; margin-left: 10px; width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); place-items: center; }
.nav__toggle > span:first-child, .nav__toggle > span:first-child::before, .nav__toggle > span:first-child::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .2s, background .2s; }
.nav__toggle > span:first-child::before, .nav__toggle > span:first-child::after { content: ""; position: absolute; left: 0; }
.nav__toggle > span:first-child::before { top: -6px; }
.nav__toggle > span:first-child::after { top: 6px; }
.nav__toggle[aria-expanded="true"] > span:first-child { background: transparent; }
.nav__toggle[aria-expanded="true"] > span:first-child::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] > span:first-child::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; top: var(--nav-h); left: 0; right: 0; z-index: 40; max-height: calc(100svh - var(--nav-h)); overflow-y: auto; padding: 8px var(--gutter) 28px; background: #0e1212; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__group { display: grid; align-content: start; gap: 2px; }
.mobile-menu__title { padding: 8px 0; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--emerald); }
.mobile-menu__group a:not(.mobile-menu__title) { padding: 8px 0; font-size: 15px; color: var(--muted); }
.mobile-menu__group a[aria-current] { color: var(--text); }
body.menu-open { overflow: hidden; }

/* ---------- Inner pages ---------- */
.page .nav { position: absolute; }
.page-hero { position: relative; padding: calc(var(--nav-h) + 48px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 10%, rgba(46,230,166,.09), transparent 60%), radial-gradient(50% 60% at 100% 90%, rgba(183,164,255,.08), transparent 60%); }
.page-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero h1 { font-size: clamp(36px, 4.2vw, 58px); }
.page-hero .lede { max-width: 36em; }
.page-hero .eyebrow { margin-top: 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

.sysmap { padding: 20px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(16,20,20,.85); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.sysmap__title { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sysmap__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sysmap__col { display: grid; align-content: start; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color .2s; }
.sysmap__col a { font-size: 12.5px; line-height: 1.3; color: var(--muted); padding: 5px 6px; border-radius: 6px; }
.sysmap__col a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sysmap__col .sysmap__head { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.sysmap__col--inbound .sysmap__head { color: var(--emerald); }
.sysmap__col--outbound .sysmap__head { color: var(--lavender); }
.sysmap__col--revops .sysmap__head { color: #a8f7da; }
.sysmap__col.is-active { border-color: rgba(46,230,166,.45); background: rgba(46,230,166,.05); }
.sysmap__col--outbound.is-active { border-color: rgba(183,164,255,.5); background: rgba(183,164,255,.06); }
.sysmap__col a.is-current { color: #04130d; background: var(--emerald); font-weight: 600; }
.sysmap__col--outbound a.is-current { background: var(--lavender); color: #140f2c; }
.sysmap__col--revops a.is-current { background: #a8f7da; }
.sysmap__flow { position: relative; height: 26px; margin: 4px 0; }
.sysmap__flow span { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--line-strong), var(--emerald)); overflow: hidden; }
.sysmap__flow span::after { content: ""; position: absolute; left: 0; width: 2px; height: 8px; background: #fff; animation: drip 1.6s linear infinite; }
@keyframes drip { from { top: -8px; } to { top: 26px; } }
.sysmap__out { margin: 0; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid rgba(46,230,166,.35); font-size: 13px; color: var(--muted); }
.sysmap__out b { color: var(--emerald); font-weight: 600; }

.split-cols { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.section a:not(.btn):not(.card-link):not(.text-link) { color: var(--text); text-decoration: underline; text-decoration-color: rgba(46,230,166,.5); text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
.section a:not(.btn):not(.card-link):not(.text-link):hover { color: var(--emerald); text-decoration-color: var(--emerald); }
.section h3 a, .service li b a, .pillar-card h3 a { text-decoration: none !important; }
.service li b a:hover, .pillar-card h3 a:hover, .section h3 a:hover { color: var(--emerald); }
.h3 { font-size: 22px !important; line-height: 1.25 !important; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.features--three { grid-template-columns: repeat(3, 1fr); }
.page--about .features { grid-template-columns: repeat(4, 1fr); }
.feature { padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.feature__num { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; color: var(--emerald); }
.feature p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cards--compact { grid-template-columns: repeat(3, 1fr); }
.card-link { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.015); transition: border-color .2s, transform .2s, background .2s; }
.card-link:hover { border-color: rgba(46,230,166,.5); background: rgba(46,230,166,.04); transform: translateY(-2px); }
.card-link h3 { font-size: 18px; }
.card-link p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.card-link__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--emerald); }
.card-link__tag { align-self: flex-start; display: inline-block; padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; vertical-align: 2px; }
.card-link__tag--inbound { color: var(--emerald); background: rgba(46,230,166,.12); }
.card-link__tag--outbound { color: var(--lavender); background: rgba(183,164,255,.14); }
.card-link__tag--revops { color: #a8f7da; background: rgba(168,247,218,.1); }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.015); }
.panel .chips { display: flex; margin-top: 20px; gap: 8px; }
.text-link { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--emerald); }
.link-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.link-list li { border-top: 1px solid var(--line); }
.link-list a { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none !important; color: var(--text); font-size: 15px; }
.link-list a svg { color: var(--emerald); flex: none; }
.pill-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill-links a { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none !important; font-size: 14.5px; }
.pill-links a:hover { border-color: var(--emerald); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pillar-card { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 70% at 0% 0%, rgba(46,230,166,.07), transparent 60%); }
.pillar-card--outbound { background: radial-gradient(120% 70% at 0% 0%, rgba(183,164,255,.09), transparent 60%); }
.pillar-card--revops { background: radial-gradient(120% 70% at 0% 0%, rgba(168,247,218,.06), transparent 60%); }
.pillar-card h3 { margin-top: 16px; font-size: 22px; }
.pillar-card > p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.planned { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.planned li { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.planned span { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.cta-band { padding: clamp(56px, 7vw, 88px) 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(28px, 4vw, 48px); border-radius: 24px; border: 1px solid rgba(46,230,166,.3); background: radial-gradient(70% 120% at 0% 0%, rgba(46,230,166,.12), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(183,164,255,.12), transparent 60%), #0f1313; }
.cta-band h2 { font-size: clamp(26px, 2.8vw, 36px) !important; }
.cta-band p { margin: 10px 0 0; max-width: 34em; }
.cta-band .actions { margin-top: 0; }

.stack { display: grid; gap: 22px; }
.stack-group { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: 20px; }
.stack-group h3 { display: flex; align-items: center; margin-bottom: 18px; }
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stack-item { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.025); }
.stack-item b { display: block; font-size: 15px; }
.stack-item span:not(.chip):not(.chip__mono):not(.sr-only) { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.stack-item a { font-size: 13px; }
.chip--xl { width: 48px !important; height: 48px !important; border-radius: 12px !important; }
.chip--xl .chip__mono { font-size: 17px; }
.chip img { width: 62%; height: 62%; object-fit: contain; }
.note { margin: 6px 0 0; font-size: 13px; color: var(--faint) !important; }
.placeholder { padding: 20px; border-radius: 14px; border: 1px dashed rgba(243,201,160,.5); color: #f3c9a0 !important; }

.footer__grid--site { grid-template-columns: 1.5fr repeat(5, 1fr); }
.footer h3 a { color: inherit; }
.footer h3 a:hover { color: var(--text); }
.footer__cta { margin-top: 20px; min-height: 42px; font-size: 14px; }
.footer__base a { color: var(--muted); }
.footer__base a:hover { color: var(--text); }

@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer__grid--site { grid-template-columns: repeat(3, 1fr); }
  .footer__grid--site > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .page-hero__grid, .split-cols, .two-up { grid-template-columns: 1fr; }
  .features, .features--three, .page--about .features, .pillars, .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .cards--compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav .menu { display: none; }
  .nav__toggle { display: grid; }
  .nav .nav__cta { margin-left: auto; }
}
@media (max-width: 720px) {
  .nav .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
  .mobile-menu { grid-template-columns: 1fr; gap: 8px; }
  .page-hero { padding-top: calc(var(--nav-h) + 24px); }
  .features, .features--three, .page--about .features, .pillars, .stack-grid, .cards, .cards--compact { grid-template-columns: 1fr; }
  .sysmap__grid { grid-template-columns: 1fr; }
  .page--hub .sysmap, .page--industry .sysmap, .page--about .sysmap, .page--techstack .sysmap, .page--contact .sysmap, .page--audit .sysmap, .page--blog .sysmap, .page--legal .sysmap { display: none; }
  .cta-band__inner .actions .btn { width: 100%; }
  .footer__grid--site { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sysmap__flow span::after { animation: none; } }

/* ---------- Articles ---------- */
.post--link { text-decoration: none !important; color: inherit !important; transition: border-color .2s, transform .2s; }
.post--link:hover { border-color: rgba(183,164,255,.5); transform: translateY(-2px); }
.post--link h3 { color: var(--text); }
.post__desc { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; }
.section__head--row .text-link { margin-top: 0; }
.wrap--article { width: min(900px, 100%); }
.post-hero { padding: calc(var(--nav-h) + 48px) 0 48px; border-bottom: 1px solid var(--line); background: radial-gradient(60% 80% at 90% 0%, rgba(183,164,255,.08), transparent 60%), radial-gradient(50% 80% at 0% 0%, rgba(46,230,166,.07), transparent 60%); }
.post-hero h1 { margin-top: 6px; font-size: clamp(34px, 4vw, 52px); }
.post-hero .eyebrow { margin-top: 22px; }
.post-hero .eyebrow a { color: inherit; }
.post-meta { margin: 22px 0 0; font-size: 14px; color: var(--faint); }
.article-grid { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: clamp(32px, 6vw, 88px); justify-content: center; padding-top: 56px; padding-bottom: 80px; }
.toc { position: sticky; top: 24px; align-self: start; }
.toc__title { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc ol a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.toc ol a:hover { color: var(--text); border-left-color: var(--emerald); }
.toc__cta { margin-top: 28px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
.toc__cta p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.toc__cta .btn { min-height: 42px; width: 100%; font-size: 14px; }
.article-body { font-size: 17.5px; line-height: 1.75; color: #cfd8d4; }
.article-body > * { margin: 0 0 20px; }
.article-body h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; color: var(--text); scroll-margin-top: 24px; }
.article-body h3 { margin: 32px 0 12px; font-size: 20px; color: var(--text); }
.article-body ul, .article-body ol { padding-left: 22px; display: grid; gap: 8px; }
.article-body li::marker { color: var(--emerald); }
.article-body a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(46,230,166,.55); text-underline-offset: 3px; }
.article-body a:hover { color: var(--emerald); }
.tip { padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(46,230,166,.3); background: rgba(46,230,166,.06); }
.tip b { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--emerald); }
.tip p { margin: 6px 0 0; color: var(--text); font-size: 16px; line-height: 1.6; }
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc__cta { display: none; }
}
@media (max-width: 720px) {
  .post-hero { padding-top: calc(var(--nav-h) + 20px); }
  .article-body { font-size: 16.5px; }
  .section__head--row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Affiliate articles ---------- */
.disclosure { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.disclosure b { color: var(--text); }
.toolcard { display: grid; gap: 12px; padding: 20px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); }
.toolcard__head { display: flex; gap: 14px; align-items: center; }
.toolcard__head b { display: block; font-size: 18px; color: var(--text); }
.toolcard__head span:not(.chip):not(.chip__mono):not(.sr-only) { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.toolcard__best { margin: 0 !important; font-size: 15px; color: var(--muted); }
.toolcard__best b { color: var(--text); }
.article-body .toolcard__btn { justify-self: start; min-height: 42px; font-size: 14.5px; text-decoration: none; color: var(--text); }
.toolcard__note { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.compare-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare-table thead th { border-top: 0; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: rgba(255,255,255,.03); }
.compare-table tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
.compare-table td { color: #cfd8d4; }

/* ---------- Tool guide series ---------- */
.series { margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.article-body .series { margin-top: 40px; }
.series__title { margin: 0 0 10px !important; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.series ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.series li::marker { content: none; }
.series a, .series span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-strong); font-size: 14px; text-decoration: none !important; color: var(--muted) !important; }
.series a:hover { border-color: var(--emerald); color: var(--text) !important; }
.series span[aria-current] { border-color: var(--emerald); color: var(--text) !important; background: rgba(46,230,166,.08); }
.series b { font-family: var(--mono); font-size: 11.5px; color: var(--emerald); }
.tool-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool-guide { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.tool-guide ol { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.tool-guide li::marker { color: var(--emerald); font-family: var(--mono); font-size: 12px; }
.stack-guides { color: var(--faint) !important; }
@media (max-width: 1080px) { .tool-guides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .tool-guides { grid-template-columns: 1fr; } }

/* ---------- Specialist service pages ---------- */
.muted-note { margin: 14px 0 0; font-size: 15px; color: var(--faint) !important; }
.features--four { grid-template-columns: repeat(4, 1fr); }
.outcome { margin-top: 16px; }
.outcome h3 { margin-bottom: 4px; }
.panel--warn { border-color: rgba(243,201,160,.35); background: rgba(243,201,160,.04); }
.panel--warn .checks li::before { background: rgba(243,201,160,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23f3c9a0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.panel--good { border-color: rgba(46,230,166,.35); background: rgba(46,230,166,.04); }
.step p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 1080px) { .features--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .features--four { grid-template-columns: 1fr; } }

/* Phone hero: clean, centred copy first; a minimal 3D model below it */
@media (max-width: 720px) {
  .hero { padding: 0 0 24px; }
  .hero__copy {
    min-height: calc(100svh - 8px); display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; margin: 0 auto;
  }
  .hero__copy .eyebrow {
    display: inline-block; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: rgba(46,230,166,.06); margin-bottom: 22px;
  }
  .hero__copy h1 { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.08; }
  .hero__copy .lede { margin-top: 18px; font-size: 16px; }
  .hero__copy .actions { width: 100%; margin-top: 28px; }
  .hero__copy .trust { justify-content: center; gap: 8px; border-top: 0; margin-top: 22px; padding-top: 0; }
  .hero__copy .trust li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
  .scene-intro { display: block; text-align: center; padding: 8px var(--gutter) 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .scene-intro .kicker { margin: 0 0 8px; }
  .scene-intro__title { margin: 0 auto; max-width: 22em; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
  .scene { height: 860px; margin-top: 0; }
  .card--attr, .card--engine, .deadend, .cat { display: none !important; }
  .dock__hint { display: none; }
  .dock__caption { min-height: 0; text-align: center; }
  .dock__caption strong { display: block; }
}

/* ---------- Theme switch ---------- */
.nav__theme { margin-left: auto; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--text); transition: border-color .2s, background .2s; }
.nav__theme:hover { border-color: var(--emerald); }
.nav__theme .i-moon { display: none; }
:root[data-theme="light"] .nav__theme .i-sun { display: none; }
:root[data-theme="light"] .nav__theme .i-moon { display: block; }
.nav .nav__cta { margin-left: 10px; }
@media (max-width: 860px) { .nav .nav__cta { margin-left: 10px; } }
@media (max-width: 720px) { .nav .nav__toggle { margin-left: 10px; } }

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf7;
  --bg-raised: rgba(255, 255, 255, .9);
  --line: rgba(13, 26, 22, .11);
  --line-strong: rgba(13, 26, 22, .22);
  --text: #0e1614;
  --muted: #4c5955;
  --faint: #6d7874;
  --emerald: #0b9b6a;
  --emerald-deep: #087a54;
  --lavender: #6a52d9;
  --surface: #ffffff;
  --tint: rgba(13, 26, 22, .035);
}
:root[data-theme="light"] .btn--primary { color: #fff; box-shadow: 0 0 0 1px rgba(11,155,106,.25), 0 10px 30px -14px rgba(11,155,106,.6); }
:root[data-theme="light"] .btn--primary:hover { background: #0aa873; }
:root[data-theme="light"] .skip { color: #fff; }
:root[data-theme="light"] .btn--ghost,
:root[data-theme="light"] .nav__cta { background: var(--surface); }
:root[data-theme="light"] .section--raised { background: #f2f4f1; }
:root[data-theme="light"] .problem { background: var(--surface); }
:root[data-theme="light"] .problem__num,
:root[data-theme="light"] .placeholder { color: #a5581b !important; border-color: rgba(165,88,27,.4); }
:root[data-theme="light"] .tabs__list button:hover { background: var(--tint); }
:root[data-theme="light"] .mock { background: var(--surface); box-shadow: 0 30px 60px -36px rgba(13,26,22,.35); }
:root[data-theme="light"] .mock__rows div,
:root[data-theme="light"] .mock__steps li { background: var(--tint); }
:root[data-theme="light"] .bar { background: rgba(13,26,22,.08); }
:root[data-theme="light"] .mock__rows i.half { background: conic-gradient(var(--lavender) 0 50%, rgba(13,26,22,.12) 0); }
:root[data-theme="light"] .service__tag--mint,
:root[data-theme="light"] .card-link__tag--revops { color: #087a54 !important; background: rgba(11,155,106,.1); }
:root[data-theme="light"] .sysmap__col--revops .sysmap__head { color: #087a54; }
:root[data-theme="light"] .menu__pillar--revops { box-shadow: inset 2px 0 0 #3fc79a; }
:root[data-theme="light"] .chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .form { background: var(--surface); }
:root[data-theme="light"] .form input,
:root[data-theme="light"] .form select,
:root[data-theme="light"] .form textarea { background: #f8faf9; }
:root[data-theme="light"] .form__status[data-kind="error"] { color: #b3412f; }
:root[data-theme="light"] .footer { background: #eaeeec; }
:root[data-theme="light"] .menu__link[aria-current],
:root[data-theme="light"] .menu__col a:hover,
:root[data-theme="light"] .menu__col a[aria-current],
:root[data-theme="light"] .sysmap__col a:hover { background: var(--tint); }
:root[data-theme="light"] .menu__panel { background: var(--surface); box-shadow: 0 24px 50px -24px rgba(13,26,22,.35); }
:root[data-theme="light"] .mobile-menu { background: var(--surface); box-shadow: 0 20px 40px -24px rgba(13,26,22,.3); }
:root[data-theme="light"] .sysmap { background: var(--surface); box-shadow: 0 30px 60px -36px rgba(13,26,22,.3); }
:root[data-theme="light"] .sysmap__col,
:root[data-theme="light"] .card-link,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stack-item,
:root[data-theme="light"] .toolcard,
:root[data-theme="light"] .series,
:root[data-theme="light"] .disclosure { background: var(--surface); }
:root[data-theme="light"] .sysmap__col--revops a.is-current { background: #3fc79a; }
:root[data-theme="light"] .sysmap__col a.is-current { color: #fff; }
:root[data-theme="light"] .sysmap__col--outbound a.is-current { color: #fff; }
:root[data-theme="light"] .sysmap__flow span::after { background: var(--emerald); }
:root[data-theme="light"] .pillar-card--revops { background: radial-gradient(120% 70% at 0% 0%, rgba(11,155,106,.07), transparent 60%); }
:root[data-theme="light"] .article-body,
:root[data-theme="light"] .compare-table td { color: #26302d; }
:root[data-theme="light"] .compare-table thead th { background: var(--tint); }
:root[data-theme="light"] .panel--warn { border-color: rgba(165,88,27,.3); background: rgba(243,201,160,.12); }
:root[data-theme="light"] .page-hero { background: radial-gradient(60% 70% at 85% 10%, rgba(11,155,106,.08), transparent 60%), radial-gradient(50% 60% at 100% 90%, rgba(106,82,217,.07), transparent 60%); }
:root[data-theme="light"] .post-hero { background: radial-gradient(60% 80% at 90% 0%, rgba(106,82,217,.06), transparent 60%), radial-gradient(50% 80% at 0% 0%, rgba(11,155,106,.06), transparent 60%); }

/* The 3D revenue engine is drawn for a dark backdrop, so it keeps dark colours in the light theme:
   the whole hero on wider screens, and a dark rounded panel below the copy on phones. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .scene,
:root[data-theme="light"] .cta-band__inner {
  --bg-raised: rgba(22, 26, 26, .78);
  --bg: #0c0e0e; --line: rgba(226,240,234,.13); --line-strong: rgba(226,240,234,.26);
  --text: #eff4f1; --muted: #a3aeaa; --faint: #76817d; --emerald: #2ee6a6; --lavender: #b7a4ff;
  color: var(--text);
}
:root[data-theme="light"] .hero { background: #0c0e0e; }
:root[data-theme="light"] .hero .btn--primary,
:root[data-theme="light"] .cta-band__inner .btn--primary { color: #04130d; }
:root[data-theme="light"] .hero .btn--ghost,
:root[data-theme="light"] .cta-band__inner .btn--ghost { background: rgba(12,14,14,.55); }
@media (max-width: 720px) {
  :root[data-theme="light"] .hero { background: var(--bg); }
  :root[data-theme="light"] .hero,
  :root[data-theme="light"] .scene-intro,
  :root[data-theme="light"] .dock {
    --bg: #f5f7f6; --bg-raised: rgba(255,255,255,.9); --line: rgba(13,26,22,.11); --line-strong: rgba(13,26,22,.22);
    --text: #0e1614; --muted: #4c5955; --faint: #6d7874; --emerald: #0b9b6a; --lavender: #6a52d9;
  }
  :root[data-theme="light"] .hero .btn--primary { color: #fff; }
  :root[data-theme="light"] .hero .btn--ghost { background: #fff; }
  :root[data-theme="light"] .scene {
    --bg-raised: rgba(22, 26, 26, .78);
    --bg: #0c0e0e; --line: rgba(226,240,234,.13); --line-strong: rgba(226,240,234,.26);
    --text: #eff4f1; --muted: #a3aeaa; --faint: #76817d; --emerald: #2ee6a6; --lavender: #b7a4ff;
    margin: 20px var(--gutter) 16px; border-radius: 22px; overflow: hidden; background: #0c0e0e;
  }
  :root[data-theme="light"] .scene-intro { border-top: 0; }
}

/* Light theme buttons follow the GTM design system: ink primary, mint arrow. */
:root[data-theme="light"] .btn--primary { background: #0f1a17; color: #fff; box-shadow: 0 12px 30px -16px rgba(15,26,23,.7); }
:root[data-theme="light"] .btn--primary:hover { background: #1b2a26; }
:root[data-theme="light"] .btn--primary svg { color: #2ee6a6; }
:root[data-theme="light"] .cta-band__inner .btn--primary { background: #2ee6a6; color: #04130d; }
:root[data-theme="light"] .cta-band__inner .btn--primary svg { color: currentColor; }

/* Header: switch to the menu button before links start wrapping. */
.brand, .menu__link { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav .menu { display: none; }
  .nav__toggle { display: grid; }
}

/* ---------- Page hero demos (page-specific animated examples) ---------- */
.page-hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.demo { --d-bg: #0d1211; --d-card: #141c1a; --d-line: rgba(226,240,234,.12); --d-text: #e8efec; --d-mute: #93a39d; --d-mint: #2ee6a6; --d-lav: #b7a4ff;
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; color: var(--d-text);
  background-color: var(--d-bg);
  background-image: linear-gradient(rgba(226,240,234,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(226,240,234,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid #1d2624; box-shadow: 0 40px 80px -40px rgba(15,26,23,.55), 0 0 0 6px rgba(255,255,255,.55); }
:root[data-theme="dark"] .demo { box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.demo__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); font: 500 11.5px/1.3 var(--mono); color: var(--d-mute); }
.demo__dots { display: flex; gap: 5px; } .demo__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(226,240,234,.18); }
.demo__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-text); }
.demo__tag { padding: 3px 8px; border-radius: 999px; background: rgba(243,201,160,.12); color: #f3c9a0; font-size: 10px; }
.demo__body { flex: 1; padding: 18px; min-height: 280px; }
.demo__steps { list-style: none; margin: 0; padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--d-line); }
.demo__steps li { display: grid; gap: 4px; font-size: 11.5px; line-height: 1.3; color: var(--d-mute); transition: color .4s; }
.demo__steps b { height: 3px; border-radius: 3px; background: rgba(226,240,234,.12); font-size: 0; transition: background .4s; }
.demo__steps li.on { color: var(--d-text); } .demo__steps li.on b { background: var(--d-mint); }
.demo.is-live .demo__body [data-at] { opacity: .14; transform: translateY(6px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.demo.is-live .demo__body [data-at].on { opacity: 1; transform: none; }
.demo__toast { margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(46,230,166,.1); border: 1px solid rgba(46,230,166,.3); color: #9ff5d6; font: 500 11.5px/1.4 var(--mono); }

/* Search results */
.serp__q { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 999px; background: #f7f9f8; color: #0f1a17; font-size: 14px; min-height: 42px; }
.serp__q svg { color: #6b7773; flex: none; }
.serp__list { position: relative; list-style: none; margin: 14px 0 0; padding: 0; height: 186px; }
.demo.is-live .demo__body .serp__r { position: absolute; left: 0; right: 0; height: 56px; display: grid; align-content: center; gap: 2px; padding: 0 14px; border-radius: 12px; background: var(--d-card); border: 1px solid var(--d-line); transition: top .9s cubic-bezier(.2,.8,.2,1), border-color .5s, background .5s, opacity .5s, transform .5s; }
.serp__r { position: absolute; left: 0; right: 0; height: 56px; display: grid; align-content: center; gap: 2px; padding: 0 14px; border-radius: 12px; background: var(--d-card); border: 1px solid var(--d-line); }
.serp__r small { font: 11px/1.2 var(--mono); color: var(--d-mute); } .serp__r b { font-size: 14px; font-weight: 600; color: #b9d2ff; }
.serp__r--a { top: 0; } .serp__r--b { top: 64px; } .serp__r--you { top: 128px; }
.demo:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .serp__r--you, .demo:not(.is-live) .serp__r--you { top: 0; border-color: var(--d-mint); background: rgba(46,230,166,.1); }
.demo:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .serp__r--a, .demo:not(.is-live) .serp__r--a { top: 64px; }
.demo:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .serp__r--b, .demo:not(.is-live) .serp__r--b { top: 128px; }
.serp__r--you b { color: var(--d-mint); }

/* AI answers */
.ai__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ai__tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f7f9f8; color: #0f1a17; font-size: 12px; font-weight: 600; }
.demo.is-live .demo__body .ai__tabs span[data-at] { opacity: .35; transform: none; } .demo.is-live .demo__body .ai__tabs span[data-at].on { opacity: 1; }
.ai__co { background: #2563eb !important; color: #fff !important; }
.ai__prompt { margin: 14px 0 0 auto; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #2b3532; font-size: 13.5px; line-height: 1.45; min-height: 42px; }
.ai__answer { margin-top: 10px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--d-card); border: 1px solid var(--d-line); font-size: 13.5px; line-height: 1.5; }
.ai__answer p { margin: 0; } .ai__answer p + p { margin-top: 6px; } .ai__answer b { color: var(--d-mint); }
.ai__answer sup { padding: 0 4px; border-radius: 4px; background: rgba(46,230,166,.18); color: var(--d-mint); font: 500 9.5px/1.4 var(--mono); }
.ai__dim { color: var(--d-mute); } .ai__dim sup { background: rgba(226,240,234,.1) !important; color: var(--d-mute) !important; }
.ai__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai__src span { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--d-line); font: 11px/1.3 var(--mono); color: var(--d-mute); }
.ai__src .is-you { border-color: var(--d-mint); color: var(--d-mint); }

/* Ads */
.ads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ads__col { position: relative; display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 12px; background: var(--d-card); border: 1px solid var(--d-line); font-size: 12.5px; line-height: 1.35; min-height: 168px; }
.ads__col:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; translate: 0 -50%; color: var(--d-mint); font-size: 12px; }
.ads__h { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--d-mute); }
.ads__chip { padding: 4px 7px; border-radius: 7px; background: rgba(183,164,255,.12); color: #d8ceff; font-size: 11.5px; }
.ads__ad b { font-size: 13.5px; } .ads__ad span { color: var(--d-mute); }
.ads__ad em, .ads__lead em { font-style: normal; font: 500 11px/1.3 var(--mono); color: var(--d-mint); }
.ads__form { display: grid; gap: 6px; } .ads__form i { height: 14px; border-radius: 4px; background: rgba(226,240,234,.12); } .ads__form i.btn { width: 60%; background: var(--d-mint); }
.ads__lead { border-color: rgba(46,230,166,.4); } .ads__lead span { color: var(--d-mute); }

/* Event timelines */
.ev { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; position: relative; }
.ev::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; background: var(--d-line); }
.ev li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: var(--d-card); border: 1px solid var(--d-line); font-size: 13px; }
.ev__dot { position: absolute; left: -18px; width: 10px; height: 10px; border-radius: 50%; background: var(--d-bg); box-shadow: inset 0 0 0 2px rgba(226,240,234,.3); }
.ev li.on .ev__dot, .demo:not(.is-live) .ev__dot { box-shadow: inset 0 0 0 5px var(--d-mint); }
.ev__t { flex: 1; min-width: 0; }
.ev__tag { flex: none; padding: 3px 8px; border-radius: 999px; font: 500 10.5px/1.3 var(--mono); }
.ev__tag--good { background: rgba(46,230,166,.14); color: var(--d-mint); } .ev__tag--info { background: rgba(143,179,255,.14); color: #b9d2ff; }
.ev__tag--warn { background: rgba(243,201,160,.14); color: #f3c9a0; } .ev__tag--bad { background: rgba(240,138,124,.16); color: #f3b2a6; }
.ev--chat li:nth-child(5) { margin-left: 18px; background: #2b3532; }

/* Enrichment table */
.tbl { display: grid; gap: 6px; }
.tbl__row { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr .8fr; gap: 6px; }
.tbl__row span { min-width: 0; padding: 9px 10px; border-radius: 8px; background: var(--d-card); border: 1px solid var(--d-line); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl__row--h span { background: none; border: 0; padding: 0 10px; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--d-mute); }
.tbl__score { font: 600 12.5px/1.2 var(--mono) !important; text-align: center; }
.tbl__row--good .tbl__score { background: rgba(46,230,166,.16) !important; color: var(--d-mint); }
.tbl__row--mid .tbl__score { background: rgba(143,179,255,.14) !important; color: #b9d2ff; }
.tbl__row--bad .tbl__score { background: rgba(240,138,124,.16) !important; color: #f3b2a6; }

/* Pipeline board */
.kb__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kb__cols span { padding: 7px 8px; border-radius: 8px; background: rgba(226,240,234,.05); font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--d-mute); }
.kb__lane { position: relative; height: 190px; margin-top: 8px; }
.kb__card { position: absolute; left: calc(var(--c) * 25%); top: calc(var(--r) * 62px); width: calc(25% - 6px); display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--d-card); border: 1px solid var(--d-line); transition: left .9s cubic-bezier(.2,.8,.2,1), border-color .4s; }
.kb__card b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb__card small { font: 10px/1.3 var(--mono); color: var(--d-mute); }
.kb__card--inbound { border-left: 3px solid var(--d-mint); } .kb__card--outbound { border-left: 3px solid var(--d-lav); }
.demo:not(.is-live) .kb__card { left: calc(var(--r) * 25%); }

@media (max-width: 720px) {
  .demo__body { padding: 14px; min-height: 0; }
  .ads { grid-template-columns: 1fr 1fr; } .ads__col { min-height: 0; } .ads__col:nth-child(2)::after { content: none; }
  .tbl__row { grid-template-columns: 1.3fr 1fr .9fr .7fr; } .tbl__row span { padding: 8px 6px; font-size: 11.5px; }
  .demo__steps { grid-template-columns: 1fr 1fr; }
  .kb__card b { font-size: 11px; } .kb__card small { display: none; } .kb__lane { height: 150px; } .kb__card { top: calc(var(--r) * 48px); padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .demo * { transition: none !important; } }