:root {
  --ink: #14152b;
  --muted: #4a4b6a;
  --mute-2: #8a8ca8;
  --paper: #fffaf4;
  --line: #e6e7f2;
  --surface: rgba(255,255,255,0.86);
  --surface-strong: #ffffff;
  --brand-1: #5b5cff;
  --brand-2: #b224ef;
  --brand-3: #ff59d6;
  --success: #15c98b;
  --warning: #ffb020;
  --shadow: 0 24px 70px rgba(20, 21, 43, 0.18);
  --rainbow: linear-gradient(110deg, var(--brand-1), var(--brand-2), var(--brand-3), #7f7cff);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Scroll-triggered reveal. Elements marked `.reveal` start hidden and
   translated slightly down, then fade + slide into place when an
   IntersectionObserver adds `.is-visible` as they enter the viewport. The
   per-element `--reveal-delay` (set by the observer script) staggers
   siblings so a section's top content lands before its lower rows. */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s cubic-bezier(.2,.65,.2,1), transform .75s cubic-bezier(.2,.65,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(91,92,255,0.12), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(255,89,214,0.12), transparent 30rem),
    linear-gradient(180deg, #fbfbff 0%, #f8f4ff 28%, #fff6fc 55%, #f7fbff 100%);
  letter-spacing: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 900px; font-size: clamp(3rem, 7vw, 6.4rem); line-height: 0.96; margin-bottom: 22px; }
h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; margin-bottom: 16px; }
h3 { font-size: 1.18rem; line-height: 1.18; margin-bottom: 10px; }
p { line-height: 1.62; color: var(--muted); }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip-link:focus { top: 12px; }
/* Visually hide content but keep it available to screen readers — used for
   semantic headings/labels that don't need a visual presence. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(20,21,43,0.08);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-wordmark { width: 150px; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 16px; font-size: 0.94rem; font-weight: 800; }
.primary-nav a { text-decoration: none; }
.primary-nav > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-toggle {
  gap: 8px;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.nav-dropdown-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-dropdown[data-open="true"] .nav-dropdown-toggle::after {
  transform: rotate(-135deg) translateX(-1px);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(760px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid rgba(20,21,43,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 18px 44px rgba(20,21,43,0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
/* Invisible hover-bridge that fills the 14px gap between the toggle and
   the submenu panel. Without it, the mouse briefly leaves the dropdown's
   hover area as it travels down, so the submenu disappears before the
   user can reach it. The bridge keeps the submenu alive in transit. */
.nav-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-submenu-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(20,21,43,0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,244,255,0.96));
  white-space: normal;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* Each solution card wears a different pastel accent — bold enough to read,
   soft enough to sit behind text. Matches the chip-stepper palette. */
.nav-submenu-card:nth-child(1) {
  background: linear-gradient(135deg, #eef1ff, #d7ddff);
  border-color: rgba(91,92,255,0.28);
}
.nav-submenu-card:nth-child(2) {
  background: linear-gradient(135deg, #fff1fa, #ffd3ec);
  border-color: rgba(255,89,214,0.28);
}
.nav-submenu-card:nth-child(3) {
  background: linear-gradient(135deg, #fff5e8, #ffd9b8);
  border-color: rgba(255,153,64,0.28);
}
.nav-submenu-card:nth-child(4) {
  background: linear-gradient(135deg, #e7fbee, #c7f4d6);
  border-color: rgba(46,186,108,0.28);
}
.nav-submenu-card strong {
  font-size: 1rem;
  line-height: 1.15;
}
.nav-submenu-card span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 700;
}
.nav-submenu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20,21,43,0.1);
  filter: saturate(1.15);
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu,
.nav-dropdown[data-open="true"] .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.login-link {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(91,92,255,0.22);
  background: rgba(255,255,255,0.84);
  color: var(--brand-1);
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.login-link:hover,
.login-link:focus-visible {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #5b5cff 0%, #8a3bf5 50%, #d23cff 100%);
  background-size: 200% 200%;
  box-shadow: 0 14px 30px -14px rgba(91,92,255,0.55);
  transform: translateY(-1px);
  animation: loginPillShift 2.4s ease-in-out infinite;
}
@keyframes loginPillShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .login-link:hover,
  .login-link:focus-visible { animation: none; transform: none; }
}
.nav-cta {
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #5b5cff 0%, #8a3bf5 50%, #d23cff 100%);
  box-shadow: 0 14px 34px -16px rgba(91,92,255,0.65);
}
.nav-toggle { display: none; }

.section-inner { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.narrow { width: min(860px, calc(100% - 36px)); }

.hero {
  position: relative;
  min-height: 72vh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: end;
  /* Extra bottom padding so hero content clears the tall peaks of the
     ::after wave, which extend ~120px above the hero bottom. */
  padding: 108px 0 clamp(160px, 14vw, 200px);
  background:
    /* Bottom fade to the wave's fill color (#3b1e8a) so the wave's peaks
       don't appear as a distinct darker band against the magenta portion
       of the hero gradient. The fade sits on top so the rest of the hero
       keeps its colorful gradient. */
    linear-gradient(180deg, transparent 72%, #3b1e8a 100%),
    radial-gradient(110% 80% at 8% 0%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,89,214,0.18), transparent 60%),
    linear-gradient(135deg, rgba(59,30,138,0.96) 0%, rgba(91,92,255,0.92) 46%, rgba(178,36,239,0.9) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.14), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(255,89,214,0.18), transparent 24%),
    radial-gradient(circle at 70% 74%, rgba(91,92,255,0.18), transparent 26%);
  animation: heroGlow 18s ease-in-out infinite;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -1px;
  height: clamp(96px, 12vw, 170px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'><path d='M0,140 L0,96 C180,6 420,170 620,70 C820,-18 1020,156 1200,42 L1200,140 Z' fill='%233b1e8a'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
  z-index: 0;
}
.hero--home {
  min-height: calc(100vh - 66px);
  /* Matches base .hero bottom padding so content clears the bottom wave. */
  padding: 128px 0 clamp(180px, 16vw, 220px);
}
/* When the hero is followed directly by a LIGHT section (paper/warm/proof/
   faq/blog), the default dark bottom fade and dark wave fill would create a
   hard horizontal line where the dark hero meets the light section. Swap in
   a light wave fill and fade the hero's bottom to #f4efff so the transition
   is a single wavy edge from hero gradient -> light panel color. */
.hero:has(+ .section--paper),
.hero:has(+ .section--warm),
.hero:has(+ .section--proof),
.hero:has(+ .section--faq),
.hero:has(+ .section--blog),
.hero:has(+ section.section:not(.section--ink)) {
  background:
    linear-gradient(180deg, transparent 72%, #f4efff 100%),
    radial-gradient(110% 80% at 8% 0%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,89,214,0.18), transparent 60%),
    linear-gradient(135deg, rgba(59,30,138,0.96) 0%, rgba(91,92,255,0.92) 46%, rgba(178,36,239,0.9) 100%);
}
.hero:has(+ .section--paper)::after,
.hero:has(+ .section--warm)::after,
.hero:has(+ .section--proof)::after,
.hero:has(+ .section--faq)::after,
.hero:has(+ .section--blog)::after,
.hero:has(+ section.section:not(.section--ink))::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'><path d='M0,140 L0,96 C180,6 420,170 620,70 C820,-18 1020,156 1200,42 L1200,140 Z' fill='%23f4efff'/></svg>");
}
/* Give the first light section after a hero a solid #f4efff cap on top that
   fades into the body gradient, so the wave's straight bottom edge lands on
   the exact same color without a seam. */
.hero + .section--paper,
.hero + .section--warm,
.hero + .section--proof,
.hero + .section--faq,
.hero + section.section:not(.section--ink) {
  background: linear-gradient(180deg, #f4efff 0%, #f4efff 30%, rgba(244,239,255,0) 70%);
}
.hero-copy { position: relative; z-index: 3; padding-bottom: 10px; }
.hero--home .hero-copy { padding-right: min(48vw, 620px); }
/* Reserve right-side width for the absolutely-positioned .page-signal
   cards on compact heroes so headlines and body copy don't crash into
   them. The value must exceed the card zone width (see .signal-card--*). */
.hero--compact .hero-copy { padding-right: min(52vw, 640px); }
/* Solution / integration pages use a smaller h1 than the home hero so
   the headline doesn't tower over the scene cards on the right. */
.hero--compact h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; }
/* Give compact heroes a consistent vertical canvas so the scattered
   signal-cards have room regardless of how short the hero copy is. */
.hero--compact { min-height: 700px; }
.hero h1 { color: #fff; }
.hero-subhead { max-width: 720px; font-size: clamp(1.08rem, 2.2vw, 1.42rem); color: rgba(255,255,255,0.84); }
/* Initial-load fade-in: subhead starts invisible and slightly offset, then
   eases into place. Runs once on page load (no infinite loop). */
.hero-subhead--fade-in {
  animation: heroSubheadFadeIn 1.1s cubic-bezier(.16, 1, .3, 1) 0.25s both;
}
@keyframes heroSubheadFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-subhead--fade-in { animation: none; }
}
.hero--home h1 {
  color: #fff;
  max-width: 660px;
  font-size: clamp(3.2rem, 7vw, 5.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.hero--home .hero-subhead,
.hero--home .hero-actions { max-width: 560px; }
.hero h1 em {
  font-style: normal;
  color: transparent;
  background-color: #ff9fea;
  background-image:
    radial-gradient(closest-side, #ffe4a3 0%, rgba(255,228,163,0) 70%),
    radial-gradient(closest-side, #ff59d6 0%, rgba(255,89,214,0) 70%),
    radial-gradient(closest-side, #b1b5ff 0%, rgba(177,181,255,0) 70%),
    radial-gradient(closest-side, #ffa2ec 0%, rgba(255,162,236,0) 70%),
    linear-gradient(120deg, #ff8ae6 0%, #a98bff 100%);
  background-repeat: no-repeat;
  background-size: 160% 220%, 170% 210%, 180% 230%, 150% 200%, 100% 100%;
  background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%, 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liquidSwirl 14s ease-in-out infinite;
  filter: saturate(1.15);
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; }
}
/* Section accent words: match the hero's liquid-swirl treatment on key
   words inside section h2s. Uses saturated brand colors instead of the
   hero's pastels so they stay legible on light section backgrounds. */
main > section h2 em {
  font-style: normal;
  color: transparent;
  background-color: var(--brand-2);
  background-image:
    radial-gradient(closest-side, #ffe4a3 0%, rgba(255,228,163,0) 70%),
    radial-gradient(closest-side, var(--brand-3) 0%, rgba(255,89,214,0) 70%),
    radial-gradient(closest-side, var(--brand-1) 0%, rgba(91,92,255,0) 70%),
    radial-gradient(closest-side, var(--brand-2) 0%, rgba(178,36,239,0) 70%),
    linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  background-repeat: no-repeat;
  background-size: 160% 220%, 170% 210%, 180% 230%, 150% 200%, 100% 100%;
  background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%, 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liquidSwirl 14s ease-in-out infinite;
  filter: saturate(1.1);
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  main > section h2 em { animation: none; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--brand-3);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}
.eyebrow::before {
  content: "";
  flex: 0 0 54px;
  width: 54px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe4a3 0 32%, var(--brand-3) 32% 64%, var(--brand-1) 64% 100%);
}
.hero-actions, .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
  font: inherit;
  cursor: pointer;
}
.button:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.button--primary { background: #fef08a; }
.button--secondary { background: rgba(255,255,255,0.94); }
.button--swirl {
  color: #fff;
  border-color: rgba(20,21,43,0.84);
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,228,163,0.92), transparent 24%),
    radial-gradient(circle at 78% 30%, rgba(255,89,214,0.9), transparent 26%),
    radial-gradient(circle at 52% 78%, rgba(177,181,255,0.9), transparent 24%),
    linear-gradient(120deg, #5b5cff 0%, #b224ef 48%, #ff59d6 100%);
  /* Larger background layers so the radial color blobs can travel a bigger
     distance before they wrap, producing a more visible swirl. */
  background-size: 260% 280%, 280% 300%, 250% 270%, 200% 100%;
  background-position: 15% 20%, 82% 24%, 48% 80%, 0 0;
  /* Faster cycle so motion reads as clearly animated, not dormant. */
  animation: liquidSwirl 9s ease-in-out infinite;
  box-shadow: 0 18px 36px rgba(91,92,255,0.34);
}

/* Stack the CTA band contents so the trial button lands on its own row,
   centered under the heading for maximum emphasis. */
.cta-band .cta-grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 28px;
}
.cta-band .cta-actions {
  justify-content: center;
  margin-top: 0;
}

/* Scale up the swirl CTA when it sits inside the dark cta-band. */
.cta-band .button--swirl {
  min-height: 72px;
  padding: 20px 44px;
  font-size: 1.2rem;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(91,92,255,0.45);
}
.cta-band .button--swirl:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 20px 40px rgba(91,92,255,0.5);
}

.hero-scene { position: absolute; inset: 0 -2vw 0 0; z-index: 1; opacity: 0.98; pointer-events: none; }
.scene-orbit {
  position: absolute;
  right: 2vw;
  top: 8%;
  width: min(720px, 54vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 55%, transparent 72%);
  filter: blur(8px);
}
.scene-panel {
  position: absolute;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 30px 60px -18px rgba(20,21,43,0.55), 0 0 0 1px rgba(255,255,255,0.45) inset;
  padding: 18px;
  background: rgba(255,255,255,0.96);
  pointer-events: auto;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
  will-change: transform;
}
.scene-panel:hover {
  transform: rotate(var(--tilt-final, 0deg)) translateY(-6px) scale(1.01);
  box-shadow: 0 40px 80px -20px rgba(20,21,43,0.6), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
@keyframes boardSettle {
  from { opacity: 0; transform: rotate(-7deg) translate(36px, -22px); }
  to   { opacity: 1; transform: rotate(0deg) translate(0, 0); }
}
@keyframes analystSettle {
  from { opacity: 0; transform: rotate(8deg) translate(-30px, 14px); }
  to   { opacity: 1; transform: rotate(0deg) translate(0, 0); }
}
@keyframes integrationsSettle {
  from { opacity: 0; transform: rotate(-6deg) translate(24px, 24px); }
  to   { opacity: 1; transform: rotate(0deg) translate(0, 0); }
}
.scene-label, .micro {
  display: block;
  color: var(--mute-2);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.scene-panel--board {
  right: clamp(18px, 3.2vw, 72px);
  top: 4%;
  width: min(400px, 32vw);
  background: rgba(255,249,219,0.98);
  --tilt-final: 0deg;
  transform: rotate(var(--tilt-final));
  animation: boardSettle 1s cubic-bezier(.22, 1, .36, 1) 0.15s both;
}
.scene-panel--analyst {
  right: clamp(260px, 23vw, 400px);
  top: 32%;
  width: min(340px, 26vw);
  background: rgba(238,242,255,0.98);
  --tilt-final: 0deg;
  transform: rotate(var(--tilt-final));
  animation: analystSettle 1s cubic-bezier(.22, 1, .36, 1) 0.28s both;
}
.scene-panel--integrations {
  right: clamp(18px, 3vw, 64px);
  top: 62%;
  width: min(320px, 24vw);
  background: rgba(253,242,248,0.98);
  --tilt-final: 0deg;
  transform: rotate(var(--tilt-final));
  animation: integrationsSettle 1s cubic-bezier(.22, 1, .36, 1) 0.42s both;
}
.board-kpis, .board-table, .explainer-output-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.board-kpis { margin: 14px 0 16px; }
.board-kpis div, .board-table div, .analyst-response div, .explainer-output-grid div, .explainer-list div {
  border: 1px solid rgba(20,21,43,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  padding: 10px;
}
.board-kpis span, .board-table strong, .analyst-response strong, .explainer-output-grid strong, .explainer-list strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute-2);
}
.board-kpis strong { display: block; font-size: 1.2rem; color: var(--ink); margin-top: 4px; }
.board-kpis em, .board-table em { font-style: normal; color: var(--success); font-weight: 800; font-size: 0.84rem; }
.board-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 120px;
  padding: 12px;
  border: 1px dashed rgba(20,21,43,0.32);
  border-radius: 10px;
  background: rgba(255,255,255,0.54);
}
.board-chart span {
  flex: 1;
  min-width: 20px;
  background: linear-gradient(180deg, #5b5cff 0%, #8a3bf5 48%, #d23cff 100%);
  border: 2px solid var(--ink);
  border-radius: 4px 4px 0 0;
}
.board-table { margin-top: 14px; }
.board-table span, .analyst-response span, .explainer-output-grid span, .explainer-list span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 700;
}
.prompt-lines span { display: block; height: 10px; margin-top: 10px; background: rgba(20,21,43,0.14); border-radius: 6px; }
.prompt-lines span:nth-child(2) { width: 78%; }
.prompt-lines span:nth-child(3) { width: 52%; }
.analyst-response, .explainer-list, .explainer-output-grid { display: grid; gap: 10px; margin-top: 14px; }
.integration-buckets { display: grid; gap: 14px; }
.integration-buckets strong { display: block; margin-bottom: 8px; font-size: 0.86rem; }
.explainer-chip-row, .source-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.explainer-chip-row span, .source-chip, .source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,21,43,0.12);
  background: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 0.82rem;
  text-decoration: none;
}

/* Compact-hero scene: three cards scattered and sized to echo the index
   hero's scene-panels. Positioned absolutely over the hero so the
   text-column can still read naturally on the left. */
.page-signal {
  position: absolute;
  inset: 0 -1vw 0 0;
  z-index: 1;
  opacity: 0.98;
  pointer-events: none;
}
.signal-card {
  position: absolute;
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 30px 60px -18px rgba(20,21,43,0.55), 0 0 0 1px rgba(255,255,255,0.45) inset;
  pointer-events: auto;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
  will-change: transform;
}
.signal-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 40px 80px -20px rgba(20,21,43,0.6), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
/* The compact-hero scene is now a "wow" deliverable card plus a small
   "this is how" prompt card overlapping its corner. One big hero, one
   small demonstrator — no third tile. */
.signal-card--report {
  right: clamp(20px, 3vw, 64px);
  top: 6%;
  width: min(560px, 44vw);
  padding: 26px 28px;
  background: rgba(255,249,219,0.98);
  animation: boardSettle 1s cubic-bezier(.22, 1, .36, 1) 0.15s both;
}
.signal-card--report strong {
  display: block;
  font-size: 1.24rem;
  line-height: 1.2;
  margin-top: 2px;
  margin-bottom: 16px;
}
.signal-card--report .signal-bars { height: 132px; }
.signal-card--report .signal-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.signal-card--report .signal-metrics span { font-size: 1.08rem; }
.signal-card--analyst {
  right: clamp(60px, 6vw, 120px);
  top: auto;
  bottom: 8%;
  width: min(340px, 26vw);
  background: rgba(238,242,255,0.98);
  animation: analystSettle 1s cubic-bezier(.22, 1, .36, 1) 0.32s both;
}
.signal-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 88px;
  margin: 12px 0;
  padding: 10px;
  border: 1px dashed rgba(20,21,43,0.28);
  border-radius: 10px;
  background: rgba(255,255,255,0.56);
}
.signal-bars span {
  flex: 1;
  min-width: 20px;
  border: 2px solid var(--ink);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #5b5cff 0%, #8a3bf5 55%, #d23cff 100%);
}
.signal-metrics, .signal-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.signal-metrics div, .signal-output-grid div {
  border: 1px solid rgba(20,21,43,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.82);
  padding: 10px;
}
.signal-metrics strong, .signal-output-grid strong {
  display: block;
  color: var(--mute-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.signal-metrics span, .signal-output-grid span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 800;
}
.signal-card p { margin-bottom: 0; color: var(--ink); font-weight: 700; }

/* Integrations hero: single-scene "datasources wired into a Slideform chip"
   illustration that replaces the .page-signal cards on integrations.html.
   Positioned like .page-signal so it occupies the right-hand hero area
   without crowding the copy column. */
.integrations-chip-scene {
  position: absolute;
  inset: 0 -1vw 0 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px clamp(24px, 4vw, 72px) 24px 24px;
}
.integrations-chip-scene svg {
  width: min(660px, 46vw);
  height: auto;
  max-height: 100%;
  overflow: visible;
  animation: chipScenePop 900ms cubic-bezier(.22, 1, .36, 1) 0.12s both;
}
@keyframes chipScenePop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 920px) {
  .integrations-chip-scene { opacity: 0.32; }
}
@media (max-width: 680px) {
  /* Keep the artwork visible behind the hero copy on mobile rather than
     hiding it — matches the home-page .hero-scene treatment so all hero
     visuals read as transparent ghosts on narrow viewports instead of
     appearing as solid gradient panels on some pages. */
  .integrations-chip-scene { opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
  .integrations-chip-scene svg { animation: none; }
  .integrations-chip-scene .chip-electrons circle { display: none; }
}

/* Analyst hero: a dark, slowly-rotating globe replaces the page-signal cards.
   Earth-at-night vibe — Tron-style neon trails racing around a dense wireframe
   sphere tilted on its axis. Globe is oversized and bleeds past the hero's
   right and bottom edges so only the upper-left quadrant faces the viewer. */
.analyst-globe-scene {
  position: absolute;
  top: -18vh;
  right: -17vw;
  width: clamp(560px, 70vw, 980px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
}
.analyst-globe-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  animation: chipScenePop 900ms cubic-bezier(.22, 1, .36, 1) 0.12s both;
}
/* The globe surface rotation is driven by a small JS loop (see site.js)
   so the pole stays fixed — meridian rx values oscillate individually
   (simulating Y-axis rotation), and Tron trail `d` strings are rewritten
   each frame to stay pinned to the current meridian positions. */

/* Tron trails — two "players" continuously racing around the grid. Each
   leaves a ~780-unit neon tail. Paths are closed loops (Z) so the
   dashoffset animation cycles seamlessly. Both snakes advance in the
   clockwise direction around the tilted axis. */
.analyst-globe-scene .tron-trail--cyan path {
  stroke-dasharray: 780 2200;
  animation: tronSnakeCyan 26s linear infinite;
}
.analyst-globe-scene .tron-trail--orange path {
  stroke-dasharray: 780 2200;
  animation: tronSnakeOrange 30s linear infinite;
}
@keyframes tronSnakeCyan {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -2980; }
}
@keyframes tronSnakeOrange {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -2980; }
}
@media (max-width: 920px) {
  .analyst-globe-scene { opacity: 0.45; right: -25vw; }
}
@media (max-width: 680px) {
  .analyst-globe-scene { opacity: 0.22; right: -25vw; }
}
@media (prefers-reduced-motion: reduce) {
  .analyst-globe-scene .globe-surface,
  .analyst-globe-scene .tron-trail path { animation: none; }
  .analyst-globe-scene .tron-trail path { stroke-dasharray: none; }
}

/* Solutions-page hero artwork. Each page gets a distinctive bold SVG
   visualization on the right side of hero--compact. Shared positioning
   matches the analyst globe / integrations chip scene; per-page variants
   change the actual artwork. */
.solution-hero-art {
  position: absolute;
  top: clamp(-4vh, 0vh, 4vh);
  right: clamp(-6vw, -2vw, 0vw);
  width: clamp(440px, 56vw, 760px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  animation: solutionHeroPop 700ms cubic-bezier(.22, 1, .36, 1) 0.1s both;
}
.solution-hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@keyframes solutionHeroPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 920px) {
  .solution-hero-art { opacity: 0.5; right: -10vw; }
}
@media (max-width: 680px) {
  /* Disable the pop-in animation so the @media opacity rule isn't
     overridden by the keyframe's final opacity:1 state (animation-fill-mode:
     both keeps applying after completion). */
  .solution-hero-art { opacity: 0.22; right: -10vw; animation: none; }
}

/* Subtle, conflict-free animations — only opacity changes and movement on
   elements that don't already carry an SVG transform attribute (since CSS
   transforms override SVG transforms entirely on Chrome/Safari). */

/* Marketing-agency hero: deck cards rotate in counter-clockwise on initial
   load — purple (back) first, then magenta (mid), then orange (front).
   Each card pivots around (300, 480) in the SVG viewBox (same point as
   the SVG transform attribute) and rotates 30° counter-clockwise into its
   final position while fading in. Runs once on page load. */
.solution-hero-art--agency .deck-card {
  transform-box: view-box;
  transform-origin: 300px 480px;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}
.solution-hero-art--agency .deck-card-back {
  animation-name: agencyDeckBackIn;
  animation-delay: 0s;
}
.solution-hero-art--agency .deck-card-mid {
  animation-name: agencyDeckMidIn;
  animation-delay: 0.35s;
}
.solution-hero-art--agency .deck-card-front {
  animation-name: agencyDeckFrontIn;
  animation-delay: 0.7s;
}
@keyframes agencyDeckBackIn {
  from { opacity: 0; transform: rotate(20deg); }
  to   { opacity: 1; transform: rotate(-10deg); }
}
@keyframes agencyDeckMidIn {
  from { opacity: 0; transform: rotate(34deg); }
  to   { opacity: 1; transform: rotate(4deg); }
}
@keyframes agencyDeckFrontIn {
  from { opacity: 0; transform: rotate(44deg); }
  to   { opacity: 1; transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .solution-hero-art--agency .deck-card { animation: none; }
}

/* Customer success — health ring fills from 0 -> 92% on initial load,
   then settles into the gentle infinite pulse. The fill animates
   stroke-dasharray (the dash length grows from 0 to 809 across an 880-unit
   circumference). The pulse is delayed until after the fill completes so
   the two don't fight each other. */
.solution-hero-art--success .health-ring-progress {
  animation:
    healthRingFill 1.4s cubic-bezier(.16, 1, .3, 1) 0.4s both,
    healthRingPulse 5s ease-in-out 2.2s infinite;
}
@keyframes healthRingFill {
  from { stroke-dasharray: 0 880; }
  to   { stroke-dasharray: 809 880; }
}
@keyframes healthRingPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* Sparkline draw-on: stroke-dasharray = total path length, dashoffset
   starts hidden and animates to 0 to reveal the line left -> right. The
   endpoint circle fades in when the line completes. */
.solution-hero-art--success .growth-spark-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: growthSparkDraw 1.2s cubic-bezier(.16, 1, .3, 1) 0.8s both;
}
@keyframes growthSparkDraw {
  to { stroke-dashoffset: 0; }
}
.solution-hero-art--success .growth-spark-endpoint {
  animation: growthSparkEndpoint 0.4s ease-out 2s both;
}
@keyframes growthSparkEndpoint {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-hero-art--success .health-ring-progress,
  .solution-hero-art--success .growth-spark-path,
  .solution-hero-art--success .growth-spark-endpoint { animation: none; }
  .solution-hero-art--success .growth-spark-path { stroke-dashoffset: 0; }
}

/* Revenue ops hero — each funnel stage zooms in with a slight color
   overshoot, cascading top -> bottom (Pipeline first, then Qualified,
   Forecast, Closed). The opacity 0 -> 1 sweep makes the gradient color
   fade in; the brief scale(1.04) overshoot at 60% gives a tactile pop
   before settling. transform-box: fill-box centers each stage's scale on
   its own bounding box. */
.solution-hero-art--revops .funnel-stage {
  transform-box: fill-box;
  transform-origin: center;
  animation: funnelStageReveal 0.85s cubic-bezier(.34, 1.4, .55, 1) both;
}
.solution-hero-art--revops .funnel-stage--1 { animation-delay: 0.2s; }
.solution-hero-art--revops .funnel-stage--2 { animation-delay: 0.5s; }
.solution-hero-art--revops .funnel-stage--3 { animation-delay: 0.8s; }
.solution-hero-art--revops .funnel-stage--4 { animation-delay: 1.1s; }
@keyframes funnelStageReveal {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Enterprise hero — "data convergence" sequence with copy-paste chips:
   (1) Central report card on the right pops in (empty bars).
   (2) Source chips fade in at the top-left (vertical stack).
   (3) For each source, a duplicate "ghost" chip peels off from its
       static original and travels down-right into the chart, fading to
       transparent as it goes (the actual chip is what flies, not a dot).
   (4) The corresponding bar grows from scaleY(0)->1 just as the ghost
       chip arrives at its destination. */

/* Stage 1: central report card — fade + slight scale-up pop. After all
   four chips have been absorbed, the report also slides left to fill
   the now-empty space where the chips used to sit. */
.solution-hero-art--enterprise .ent-report {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    entReportIn 0.7s cubic-bezier(.34, 1.4, .55, 1) 0.2s both,
    entReportShift 0.9s cubic-bezier(.4, 0, .2, 1) 4.5s both;
}
@keyframes entReportIn {
  from { opacity: 0; transform: scale(0.94) translateX(0); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes entReportShift {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1) translateX(-90px); }
}
/* As the report group scoots left, the underlying card rect also stretches
   horizontally so the right edge ends up at its original viewBox-right
   position (effectively grows the card by 90px to the right relative to
   the group's new translated position). */
.solution-hero-art--enterprise .ent-report-bg {
  animation: entReportBgStretch 0.9s cubic-bezier(.4, 0, .2, 1) 4.5s both;
}
@keyframes entReportBgStretch {
  from { width: 400px; }
  to   { width: 490px; }
}
/* The KPI cluster counter-translates by +90px to cancel the group's -90px
   scoot — KPIs visually stay pinned to the right side of the now-wider
   card while the chart on the left moves with the group. */
.solution-hero-art--enterprise .ent-kpis {
  animation: entKpisShift 0.9s cubic-bezier(.4, 0, .2, 1) 4.5s both;
}
@keyframes entKpisShift {
  from { transform: translateX(0); }
  to   { transform: translateX(90px); }
}

/* Stage 2: source chips fade in from the left, then fade out individually
   when their corresponding ghost arrives at the chart (each chip
   "disappears into" the report and doesn't come back). */
.solution-hero-art--enterprise .ent-source {
  opacity: 0;
}
.solution-hero-art--enterprise .ent-source--1 {
  animation:
    entSourceIn 0.5s cubic-bezier(.16, 1, .3, 1) 0.5s both,
    entSourceOut 0.35s ease-out 2.05s forwards;
}
.solution-hero-art--enterprise .ent-source--2 {
  animation:
    entSourceIn 0.5s cubic-bezier(.16, 1, .3, 1) 0.65s both,
    entSourceOut 0.35s ease-out 2.65s forwards;
}
.solution-hero-art--enterprise .ent-source--3 {
  animation:
    entSourceIn 0.5s cubic-bezier(.16, 1, .3, 1) 0.8s both,
    entSourceOut 0.35s ease-out 3.25s forwards;
}
.solution-hero-art--enterprise .ent-source--4 {
  animation:
    entSourceIn 0.5s cubic-bezier(.16, 1, .3, 1) 0.95s both,
    entSourceOut 0.35s ease-out 3.85s forwards;
}
@keyframes entSourceIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes entSourceOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Stage 3: ghost chips (full chip duplicates layered on top of the
   originals) peel off and fly down-right into the chart bars. Each
   ghost's translation is the delta from its chip-center to its bar-center
   (down + right). The ghost fades to ~25% opacity as it lands, then to
   0 — visualizing the chip being copy/pasted into the report. */
.solution-hero-art--enterprise .ent-ghost {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: entGhostFly 0.85s cubic-bezier(.4, 0, .25, 1) both;
}
.solution-hero-art--enterprise .ent-ghost--1 { --dx: 148px; --dy: 318px; animation-delay: 1.4s; }
.solution-hero-art--enterprise .ent-ghost--2 { --dx: 192px; --dy: 230px; animation-delay: 2.0s; }
.solution-hero-art--enterprise .ent-ghost--3 { --dx: 236px; --dy: 142px; animation-delay: 2.6s; }
.solution-hero-art--enterprise .ent-ghost--4 { --dx: 280px; --dy:  54px; animation-delay: 3.2s; }
@keyframes entGhostFly {
  0%   { opacity: 0;    transform: translate(0, 0) scale(1); }
  10%  { opacity: 0.85; transform: translate(0, 0) scale(1); }
  85%  { opacity: 0.25; transform: translate(var(--dx), var(--dy)) scale(0.45); }
  100% { opacity: 0;    transform: translate(var(--dx), var(--dy)) scale(0.25); }
}

/* Stage 4: each bar grows from scaleY(0) to 1 just as its ghost lands */
.solution-hero-art--enterprise .ent-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: entBarGrow 0.45s cubic-bezier(.34, 1.3, .55, 1) both;
}
.solution-hero-art--enterprise .ent-bar--1 { animation-delay: 2.05s; }
.solution-hero-art--enterprise .ent-bar--2 { animation-delay: 2.65s; }
.solution-hero-art--enterprise .ent-bar--3 { animation-delay: 3.25s; }
.solution-hero-art--enterprise .ent-bar--4 { animation-delay: 3.85s; }
@keyframes entBarGrow {
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-hero-art--enterprise .ent-report,
  .solution-hero-art--enterprise .ent-report-bg,
  .solution-hero-art--enterprise .ent-kpis,
  .solution-hero-art--enterprise .ent-source,
  .solution-hero-art--enterprise .ent-ghost,
  .solution-hero-art--enterprise .ent-bar {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Bars need explicit final size since `transform: none` clears scaleY */
  .solution-hero-art--enterprise .ent-bar { transform: scaleY(1); }
  /* Ghosts stay hidden in reduced motion — the static end-state is the
     filled chart with the source chips visible at top-left. */
  .solution-hero-art--enterprise .ent-ghost { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-hero-art .health-ring-progress,
  .solution-hero-art .funnel-stage,
  .solution-hero-art .gov-shimmer { animation: none; }
  .solution-hero-art .funnel-stage { opacity: 1; transform: none; }
}

/* About-us hero: a cascade of four monthly report cards (Jan -> Apr)
   under a "every month" cycle ribbon. Each deck fans into place from
   a stacked starting position; the front card has a periodic data-refresh
   pulse to imply auto-refresh. The ribbon's circular arrow rotates
   continuously to reinforce the recurring-cycle theme. */
.solution-hero-art--about .cycle-deck {
  transform-box: view-box;
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}
.solution-hero-art--about .cycle-deck--jan {
  transform-origin: 180px 170px;
  animation-name: aboutDeckJanIn;
  animation-delay: 0s;
}
.solution-hero-art--about .cycle-deck--feb {
  transform-origin: 230px 230px;
  animation-name: aboutDeckFebIn;
  animation-delay: 0.18s;
}
.solution-hero-art--about .cycle-deck--mar {
  transform-origin: 290px 300px;
  animation-name: aboutDeckMarIn;
  animation-delay: 0.36s;
}
.solution-hero-art--about .cycle-deck--apr {
  transform-origin: 360px 370px;
  animation-name: aboutDeckAprIn;
  animation-delay: 0.54s;
}
@keyframes aboutDeckJanIn {
  from { opacity: 0; transform: rotate(8deg) translateY(28px); }
  to   { opacity: 1; transform: rotate(-8deg) translateY(0); }
}
@keyframes aboutDeckFebIn {
  from { opacity: 0; transform: rotate(10deg) translateY(28px); }
  to   { opacity: 1; transform: rotate(-3deg) translateY(0); }
}
@keyframes aboutDeckMarIn {
  from { opacity: 0; transform: rotate(12deg) translateY(28px); }
  to   { opacity: 1; transform: rotate(2deg) translateY(0); }
}
@keyframes aboutDeckAprIn {
  from { opacity: 0; transform: rotate(14deg) translateY(28px); }
  to   { opacity: 1; transform: rotate(6deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-hero-art--about .cycle-deck { animation: none; }
  .solution-hero-art--about .cycle-deck--jan { transform: rotate(-8deg); }
  .solution-hero-art--about .cycle-deck--feb { transform: rotate(-3deg); }
  .solution-hero-art--about .cycle-deck--mar { transform: rotate(2deg); }
  .solution-hero-art--about .cycle-deck--apr { transform: rotate(6deg); }
}

/* Case study card grid — reuses the blog-card visual but treats every
   image as a brand-tinted logo lockup so customer marks read clearly. */
.case-study-card .blog-card-image {
  background: linear-gradient(135deg, rgba(91,92,255,0.08), rgba(255,89,214,0.08));
  object-fit: contain;
  padding: 28px;
  height: 180px;
}
.case-study-card .blog-card-body > span:first-child { color: var(--brand-2); }

.section { position: relative; padding: 88px 0; }
/* The site-footer has a light ::before wave that hangs up ~125px into its
   preceding sibling. If that sibling is a plain .section (not a cta-band),
   its content gets clipped by the wave. Give the last section before the
   footer enough bottom padding to clear the wave. */
main > .section:last-child { padding-bottom: clamp(160px, 14vw, 200px); }
.section-heading { max-width: 780px; margin-bottom: 34px; }
.section-heading p { font-size: 1.03rem; }
.section-heading--centered { margin-left: auto; margin-right: auto; text-align: center; }
.section--paper, .section--warm, .section--proof, .section--blog, .section--faq {
  position: relative;
}
/* Sections that sit immediately after a dark section with a bottom wave
   (section--ink or cta-band) need their top to match the wave's light
   #f4efff fill, otherwise a horizontal seam appears where the wave ends.
   Fade from solid #f4efff at the top to transparent below so the body
   gradient reappears mid-section and we don't introduce a new hard line
   lower down. */
.section--ink + .section--paper,
.section--ink + .section--warm,
.section--ink + .section--proof,
.section--ink + .section--faq,
.section--ink + .section {
  background: linear-gradient(180deg, #f4efff 0%, #f4efff 30%, rgba(244,239,255,0) 70%);
}
/* Blog section sits directly above the cta-band. Fade from transparent at
   the top (so it blends with the body gradient above) to solid #f4efff at
   the bottom, matching the cta-band's top wave fill and the footer. This
   keeps the CTA's wavy transition seam-free without introducing a new hard
   line at the blog section's top edge. */
.section--blog {
  background: linear-gradient(180deg, rgba(244,239,255,0) 0%, #f4efff 45%, #f4efff 100%);
}
/* Same fade for any other light section sitting directly above the cta-band
   (e.g. agent page, about-us, integration pages, solutions pages) — without
   it, the wave's #f4efff fill sits on top of the body gradient and shows a
   color seam. The wave fill is the same on both --dark and --coral variants,
   so this matches any cta-band. */
.section:has(+ .cta-band),
.section--paper:has(+ .cta-band),
.section--warm:has(+ .cta-band),
.section--proof:has(+ .cta-band),
.section--faq:has(+ .cta-band) {
  background: linear-gradient(180deg, rgba(244,239,255,0) 0%, #f4efff 70%, #f4efff 100%);
}
/* Section sandwiched between section--ink (light wave below) and any
   cta-band (light wave above) needs BOTH ends to land on #f4efff. Saddle
   gradient: solid at top, body gradient peeks through the middle, solid
   again at the bottom. */
.section--ink + .section--faq:has(+ .cta-band),
.section--ink + .section--paper:has(+ .cta-band),
.section--ink + .section--warm:has(+ .cta-band),
.section--ink + .section--proof:has(+ .cta-band),
.section--ink + .section:has(+ .cta-band) {
  background: linear-gradient(180deg, #f4efff 0%, #f4efff 22%, rgba(244,239,255,0) 45%, rgba(244,239,255,0) 60%, #f4efff 85%, #f4efff 100%);
}
/* One continuous background on main. Dark sections (hero, section--ink,
   cta-band) are opaque and cover this where they sit; light sections are
   transparent and reveal the same canvas, so they feel like one surface. */
main {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(640px 520px at 8% 38%, rgba(91,92,255,0.18), transparent 60%),
    radial-gradient(560px 460px at 92% 48%, rgba(255,89,214,0.16), transparent 62%),
    radial-gradient(480px 400px at 20% 62%, rgba(178,36,239,0.12), transparent 65%),
    radial-gradient(520px 420px at 82% 74%, rgba(91,92,255,0.15), transparent 64%),
    radial-gradient(440px 360px at 50% 88%, rgba(255,89,214,0.1), transparent 66%),
    radial-gradient(380px 320px at 68% 30%, rgba(255,228,163,0.1), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.section--ink {
  position: relative;
  /* Extra bottom padding so content clears the tall peaks of the ::after
     light wave, which reach ~125px above the section bottom. */
  padding-bottom: clamp(150px, 14vw, 200px);
  background: linear-gradient(135deg, rgba(20,21,43,0.96), rgba(39,28,88,0.92));
  color: #fff;
}
.section--ink p, .section--ink .micro { color: rgba(255,255,255,0.74); }
.section--ink > .section-inner { position: relative; z-index: 1; }
.section--ink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(90px, 10vw, 150px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L0,60 C180,-20 420,140 640,44 C840,-28 1040,136 1200,20 L1200,120 Z' fill='%23f4efff'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
  z-index: 0;
}
.hero + .section--ink {
  margin-top: 0;
  /* Extra top padding: the top ~25% is covered by a solid #3b1e8a band to
     match the wave fill from the hero above, so move content below it. */
  padding-top: clamp(160px, 14vw, 200px);
  overflow: hidden;
  background:
    /* Solid #3b1e8a band at the top that fades to transparent, so the top
       of this section is a flat color exactly matching the hero's bottom
       wave fill. No radial gradient variation up there to create a seam. */
    linear-gradient(180deg, #3b1e8a 0%, #3b1e8a 20%, rgba(59,30,138,0) 42%),
    radial-gradient(60% 70% at 8% 55%, rgba(123,121,255,0.55), transparent 62%),
    radial-gradient(55% 60% at 92% 60%, rgba(200,70,255,0.42), transparent 64%),
    radial-gradient(45% 55% at 72% 88%, rgba(255,120,225,0.32), transparent 66%),
    radial-gradient(40% 50% at 15% 90%, rgba(91,92,255,0.38), transparent 68%),
    radial-gradient(30% 40% at 50% 50%, rgba(255,200,120,0.12), transparent 70%),
    linear-gradient(180deg, rgba(59,30,138,1) 0%, rgba(50,32,124,1) 40%, rgba(42,31,99,1) 100%);
}
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.card-grid { display: grid; gap: 18px; }
.card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .step-card, .integration-card, .format-card, .mini-report, .price-tile, .solution-card, .blog-card, .quote-card, .legal-copy {
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 7px 7px 0 rgba(20,21,43,0.12);
}
.card p, .step-card p, .integration-card p, .format-card p, .mini-report p, .solution-card p, .blog-card p, .quote-card p { color: var(--muted); }
.inline-svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-card > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #d7d9ff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 900;
}
.step-card:nth-child(2) > span { background: #ecd0ff; }
.step-card:nth-child(3) > span { background: #ffd0f1; }
.step-card:nth-child(4) > span { background: #d5fbe8; }
.icon-list, .prompt-list, .check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.icon-list li, .prompt-list li, .check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-weight: 800;
}
.icon-list .inline-svg, .prompt-list .inline-svg, .check-list .inline-svg { width: 24px; height: 24px; margin: 0; color: var(--brand-2); }
.ai-console {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 8px 8px 0 rgba(255,255,255,0.08);
}
.text-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink);
  font-weight: 900;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.text-link--light { color: #fff; }
.rainbow-link {
  position: relative;
  text-decoration: none;
  background-image: var(--rainbow);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 3s linear infinite;
}
.rainbow-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  background: var(--rainbow);
  background-size: 220% 220%;
  transform: scaleX(.45);
  transform-origin: left;
  transition: transform 180ms ease;
  animation: gradientFlow 3s linear infinite;
}
.integration-card:hover .rainbow-link::after { transform: scaleX(1); }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}
.proof-strip article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.proof-strip article p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.proof-strip-hero p {
  color: var(--ink);
  font-size: 1.05rem;
}
.metric { display: block; font-size: clamp(2.6rem, 5.8vw, 5rem); line-height: 0.9; font-weight: 900; color: var(--brand-3); }
.metric--hero {
  font-size: clamp(4.2rem, 10vw, 8.5rem);
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2) 45%, var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section divider: a small horizontal gradient bar that ties the
   testimonials above into the metrics below. */
.section--proof { padding-top: 40px; }
.section-divider {
  width: 88px;
  height: 7px;
  margin: 0 auto 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe4a3 0 32%, var(--brand-3) 32% 64%, var(--brand-1) 64% 100%);
  box-shadow: 0 8px 22px rgba(178,36,239,0.22);
}
.logo-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: logoMarquee 28s linear infinite;
}
.logo-slider-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
}
.logo-slider-item img {
  width: auto;
  max-width: 148px;
  max-height: 58px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.82;
}
.quote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.quote-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-card-top {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.quote-headshot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(20,21,43,0.12);
}
.quote-person { min-width: 0; }
.quote-card strong, .quote-card span { display: block; }
.quote-card span { color: var(--muted); font-size: 0.9rem; }
.quote-person em { font-style: italic; }
.quote-card p::before,
.quote-card p::after {
  color: var(--brand-2);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 0;
  position: relative;
  top: 0.32em;
}
.quote-card p::before {
  content: '\201C';
  margin-right: 0.06em;
}
.quote-card p::after {
  content: '\201D';
  margin-left: 0.06em;
}

/* Testimonial spotlight: one card at a time holds a gentle zoom for 4s,
   then the spotlight advances left-to-right. */
.quote-card {
  transform: scale(1);
  transform-origin: center center;
  transition: transform .7s cubic-bezier(.2,.65,.2,1), box-shadow .7s ease;
  will-change: transform;
}
.quote-card.is-active {
  transform: scale(1.05);
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .quote-card, .quote-card.is-active { transform: scale(1); transition: none; }
}
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scoreboard div { min-height: 188px; padding: 18px; border: 2px solid var(--ink); border-radius: 12px; background: rgba(255,255,255,0.9); }
.scoreboard span { display: block; font-size: 4rem; font-weight: 900; color: var(--brand-3); }
.solution-preview { display: grid; gap: 16px; align-self: stretch; }
/* When the right column is just the client carousel (no analyst/outputs
   cards), vertically center the carousel within the section row instead
   of letting it sit pinned to the top. */
/* When the right column has only one child (client-stack carousel on the
   marketing-agency page, cs-portfolio-card on customer-success, etc.),
   vertically center it inside the section row instead of letting it sit
   pinned to the top of a stretched container. */
.solution-preview:has(> *:only-child) { align-content: center; }
.solution-preview-card {
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 20px;
  background: rgba(255,255,255,0.92);
  box-shadow: 8px 8px 0 rgba(20,21,43,0.1);
}
.solution-preview-card strong { display: block; }
.solution-preview-card--report { background: rgba(255,249,219,0.96); }
.solution-preview-card--analyst { background: rgba(238,242,255,0.96); }
.solution-preview-card--outputs { background: rgba(253,242,248,0.96); }

/* Customer-success portfolio dashboard — account list with health meters
   between the top KPIs and the bottom stat row. Each account row shows
   a name, a colored progress meter (green=healthy, amber=watch, pink=risk),
   and the numeric score.

   Background uses a four-stop linear gradient (mint -> light teal -> sky
   blue -> soft lavender) — fresh customer-success tone instead of the flat
   warm-yellow the card inherits from .solution-preview-card--report. The
   second selector overrides the marketing-agency client-stack gradient
   when CS cards are also wrapped in .client-stack (specificity 0,4,0
   beats the agency rule's 0,3,0). */
.cs-portfolio-card.solution-preview-card--report,
.client-stack > .client-stack-card.cs-portfolio-card.solution-preview-card--report {
  background: linear-gradient(
    135deg,
    #ebfff5 0%,
    #d6f4eb 32%,
    #d4e9ff 64%,
    #e8def5 100%
  );
}

/* Per-account meter widths cycle through Q1 -> Q2 -> Q3 values on the
   FRONT card only (nth-child(1) of .client-stack), synced to the same
   9s cycle as the rotators above. Back cards keep their static inline
   widths so they read as different quarter snapshots peeking from behind. */
.client-stack > .client-stack-card:nth-child(1) .cs-account-row:nth-child(1) .cs-account-meter > div { animation-name: csMeter1; }
.client-stack > .client-stack-card:nth-child(1) .cs-account-row:nth-child(2) .cs-account-meter > div { animation-name: csMeter2; }
.client-stack > .client-stack-card:nth-child(1) .cs-account-row:nth-child(3) .cs-account-meter > div { animation-name: csMeter3; }
.client-stack > .client-stack-card:nth-child(1) .cs-account-row:nth-child(4) .cs-account-meter > div { animation-name: csMeter4; }
.client-stack > .client-stack-card:nth-child(1) .cs-account-meter > div {
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes csMeter1 { 0%, 30% { width: 88%; } 33%, 63% { width: 92%; } 66%, 96% { width: 95%; } 100% { width: 88%; } }
@keyframes csMeter2 { 0%, 30% { width: 70%; } 33%, 63% { width: 78%; } 66%, 96% { width: 84%; } 100% { width: 70%; } }
@keyframes csMeter3 { 0%, 30% { width: 86%; } 33%, 63% { width: 88%; } 66%, 96% { width: 90%; } 100% { width: 86%; } }
@keyframes csMeter4 { 0%, 30% { width: 22%; } 33%, 63% { width: 24%; } 66%, 96% { width: 41%; } 100% { width: 22%; } }
@media (prefers-reduced-motion: reduce) {
  .client-stack > .client-stack-card:nth-child(1) .cs-account-meter > div { animation: none; }
}
.cs-portfolio-card .cs-account-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(20, 21, 43, 0.08);
}
.cs-portfolio-card .cs-account-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) 36px;
  gap: 12px;
  align-items: center;
}
.cs-portfolio-card .cs-account-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink);
}
.cs-portfolio-card .cs-account-meter {
  height: 8px;
  border-radius: 4px;
  background: rgba(20, 21, 43, 0.08);
  overflow: hidden;
}
.cs-portfolio-card .cs-account-meter > div {
  height: 100%;
  border-radius: 4px;
}
.cs-portfolio-card .cs-account-meter--healthy > div {
  background: linear-gradient(90deg, #33d9a7, #1eaf86);
}
.cs-portfolio-card .cs-account-meter--watch > div {
  background: linear-gradient(90deg, #ffd66e, #f9b15a);
}
.cs-portfolio-card .cs-account-meter--risk > div {
  background: linear-gradient(90deg, #ff8a8a, #ff5d8a);
}
.cs-portfolio-card .cs-account-score {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--ink);
  text-align: right;
}

/* Revenue-ops pipeline dashboard — same single-card-stack treatment as the
   CS portfolio, but the unique visual is a 4-row pipeline-stage list with
   horizontal bars (Discovery / Demo / Proposal / Closed Won) reinforcing
   the funnel theme from the hero. Background uses a cool blue-purple
   gradient distinct from the agency warm and CS mint themes. */
.rev-pipeline-card.solution-preview-card--report,
.client-stack > .client-stack-card.rev-pipeline-card.solution-preview-card--report {
  background: linear-gradient(
    135deg,
    #e3eaff 0%,
    #d4d8ff 32%,
    #e0d4ff 64%,
    #f0d4f0 100%
  );
}
/* Revenue ops middle visualization: three circular conversion-rate gauges
   (Discovery -> Demo, Demo -> Proposal, Proposal -> Won) replacing the
   horizontal stage bars. Each ring is an SVG circle whose stroke-dasharray
   on the FRONT card cycles through W36/W37/W38 conversion percentages,
   synced with the percent-text rotator at the center. */
.rev-pipeline-card .rev-conversions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(20, 21, 43, 0.08);
}
.rev-pipeline-card .rev-conversion {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.rev-pipeline-card .rev-conversion-ring {
  position: relative;
  width: 80px;
  height: 80px;
}
.rev-pipeline-card .rev-conversion-ring svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rev-pipeline-card .rev-conversion-percent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  pointer-events: none;
}
/* Override the generic .client-stack-card .client-rotator { display: grid }
   so the rotator inside the ring also positions absolutely-centered. */
.client-stack-card .rev-conversion-percent.client-rotator {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.rev-pipeline-card .rev-conversion-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Front-card gauges animate stroke-dasharray through the three weekly
   percentages, in lockstep with the percent rotator and KPI rotators.
   Circumference at r=32 is ~201; each value below is %-of-201. */
.client-stack > .client-stack-card:nth-child(1) .rev-gauge--1 { animation-name: revGauge1; }
.client-stack > .client-stack-card:nth-child(1) .rev-gauge--2 { animation-name: revGauge2; }
.client-stack > .client-stack-card:nth-child(1) .rev-gauge--3 { animation-name: revGauge3; }
.client-stack > .client-stack-card:nth-child(1) .rev-gauge {
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes revGauge1 {
  0%, 30%   { stroke-dasharray: 121 201; }
  33%, 63%  { stroke-dasharray: 131 201; }
  66%, 96%  { stroke-dasharray: 141 201; }
  100%      { stroke-dasharray: 121 201; }
}
@keyframes revGauge2 {
  0%, 30%   { stroke-dasharray: 101 201; }
  33%, 63%  { stroke-dasharray: 111 201; }
  66%, 96%  { stroke-dasharray: 121 201; }
  100%      { stroke-dasharray: 101 201; }
}
@keyframes revGauge3 {
  0%, 30%   { stroke-dasharray: 70 201; }
  33%, 63%  { stroke-dasharray: 76 201; }
  66%, 96%  { stroke-dasharray: 84 201; }
  100%      { stroke-dasharray: 70 201; }
}
@media (prefers-reduced-motion: reduce) {
  .client-stack > .client-stack-card:nth-child(1) .rev-gauge { animation: none; }
}

/* Enterprise board pack — same single-card-stack treatment as CS portfolio
   and revops pipeline, but the unique visual is a 4-row cross-functional
   scorecard (Sales / Success / Operations / Finance) with status-colored
   trend deltas (▲ up / ▶ flat / ▼ down). Gradient is a "boardroom" cool
   slate -> warm cream — distinct from agency warm, CS mint, revops blue. */
.ent-board-card.solution-preview-card--report,
.client-stack > .client-stack-card.ent-board-card.solution-preview-card--report {
  background: linear-gradient(
    135deg,
    #f7f8fc 0%,
    #e8edf5 32%,
    #f5e8d0 64%,
    #fde7c5 100%
  );
}
/* Enterprise middle visualization: a "boardroom income statement" with
   four financial line items (OpEx / EBITDA / Cash / Runway). Each row
   shows a label, a tiny static sparkline (draws once on initial load via
   stroke-dashoffset), the current value, and the YoY pill. The sparkline
   color varies by line item — brand-blue / brand-purple / mint / orange
   — to reinforce that each metric tells a different story. */
.ent-board-card .ent-financials {
  display: grid;
  gap: 9px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(20, 21, 43, 0.08);
}
.ent-board-card .ent-financial-row {
  display: grid;
  grid-template-columns: minmax(70px, 88px) minmax(0, 1fr) 64px 56px;
  gap: 12px;
  align-items: center;
}
.ent-board-card .ent-financial-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ent-board-card .ent-financial-spark {
  width: 100%;
  height: 18px;
  display: block;
  overflow: visible;
}
.ent-board-card .ent-financial-value {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--ink);
  text-align: right;
}
.ent-board-card .ent-financial-yoy {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1eaf86;
  text-align: right;
}

/* Sparkline draw-on: each path's stroke-dasharray covers the path length;
   stroke-dashoffset starts at the same value (path hidden) and animates
   to 0 (fully drawn). Runs once on page load with a slight stagger per
   row so the four lines paint in sequence. */
.ent-board-card .ent-financial-spark path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: entSparkDraw 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
.ent-board-card .ent-financial-row:nth-child(1) .ent-financial-spark path { animation-delay: 0.4s; }
.ent-board-card .ent-financial-row:nth-child(2) .ent-financial-spark path { animation-delay: 0.55s; }
.ent-board-card .ent-financial-row:nth-child(3) .ent-financial-spark path { animation-delay: 0.7s; }
.ent-board-card .ent-financial-row:nth-child(4) .ent-financial-spark path { animation-delay: 0.85s; }
@keyframes entSparkDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ent-board-card .ent-financial-spark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
/* Inside section--ink the parent sets color: #fff, which made card titles
   invisible on the light-yellow report card. Lock the report card's text
   colors to dark ink so contrast works regardless of section context. */
.solution-preview-card--report,
.solution-preview-card--report strong,
.solution-preview-card--report p {
  color: var(--ink);
}

/* Client deck — three report cards stacked at offsets so all three are
   visible. Card 1 sits in front; cards 2 and 3 peek out from behind it
   with progressive down-right offsets. No animation — just a static
   visual that communicates "this report runs across multiple clients." */
.client-stack {
  display: grid;
  position: relative;
  isolation: isolate;
  align-self: center;
  width: 100%;
}
.client-stack > .client-stack-card {
  grid-area: 1 / 1;
}
.client-stack > .client-stack-card:nth-child(1) { z-index: 3; }
.client-stack > .client-stack-card:nth-child(2) {
  z-index: 2;
  transform: translate(28px, 22px);
  opacity: 0.75;
}
.client-stack > .client-stack-card:nth-child(3) {
  z-index: 1;
  transform: translate(56px, 44px);
  opacity: 0.5;
}

/* Client rotator — used inside the front card. Stacks 3 text variants in
   the same grid cell and crossfades between them on a 9s cycle. Animates
   only opacity on small text/number nodes (no complex backgrounds, no
   layout, no scale), so the paint cost is trivially small.
   Specificity is bumped (.client-stack-card prefix) so display: grid wins
   over .board-kpis span / .board-table span rules that would otherwise
   force the rotator children to stack vertically. */
.client-stack-card .client-rotator {
  display: grid;
  position: relative;
}
.client-stack-card .client-rotator > .client-rotator-item {
  grid-area: 1 / 1;
  display: block;
  /* Reset cascading label-style properties from .board-kpis span /
     .board-table span so each item inherits sizing/color from its
     rotator parent (strong, em, span). */
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  margin: 0;
  animation: clientRotateFade 9s ease-in-out infinite;
}
/* Order: A (no delay) -> B -> C, each visible for ~1/3 of the cycle. */
.client-stack-card .client-rotator > .client-rotator-item:nth-child(2) { animation-delay: -6s; }
.client-stack-card .client-rotator > .client-rotator-item:nth-child(3) { animation-delay: -3s; }
@keyframes clientRotateFade {
  0%, 30% { opacity: 1; }
  33%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

/* Make the KPI value + delta visually dominant — they're the focal point
   of the report card. */
.client-stack .board-kpis strong {
  font-size: 1.55rem;
  font-weight: 900;
  margin-top: 6px;
}
.client-stack .board-kpis em {
  font-size: 1rem;
  margin-top: 2px;
}

/* Bar chart heights cycle through the three client states with smooth
   ease-in-out transitions, giving the "bars rising/falling" feel. Heights
   hold at each client value, then morph smoothly to the next. Synced with
   the text rotator so all three bars + text change at the same moment. */
.client-rotator-chart > span {
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.client-rotator-chart > span:nth-child(1) { animation-name: barHeights1; }
.client-rotator-chart > span:nth-child(2) { animation-name: barHeights2; }
.client-rotator-chart > span:nth-child(3) { animation-name: barHeights3; }
.client-rotator-chart > span:nth-child(4) { animation-name: barHeights4; }
.client-rotator-chart > span:nth-child(5) { animation-name: barHeights5; }
@keyframes barHeights1 { 0%, 30% { height: 52%; } 33%, 63% { height: 68%; } 66%, 96% { height: 44%; } 100% { height: 52%; } }
@keyframes barHeights2 { 0%, 30% { height: 74%; } 33%, 63% { height: 50%; } 66%, 96% { height: 88%; } 100% { height: 74%; } }
@keyframes barHeights3 { 0%, 30% { height: 62%; } 33%, 63% { height: 78%; } 66%, 96% { height: 56%; } 100% { height: 62%; } }
@keyframes barHeights4 { 0%, 30% { height: 90%; } 33%, 63% { height: 60%; } 66%, 96% { height: 72%; } 100% { height: 90%; } }
@keyframes barHeights5 { 0%, 30% { height: 68%; } 33%, 63% { height: 84%; } 66%, 96% { height: 90%; } 100% { height: 68%; } }

@media (prefers-reduced-motion: reduce) {
  .client-stack-card .client-rotator > .client-rotator-item,
  .client-rotator-chart > span { animation: none; }
  /* Show only Client A's text variant when motion is reduced. */
  .client-stack-card .client-rotator > .client-rotator-item:nth-child(n+2) { display: none; }
}

/* Card sizing — trim from the bigger version so the carousel reads as a
   focused report rather than a tall column. */
.client-stack > .client-stack-card { padding: 22px; }
.client-stack > .client-stack-card > strong {
  font-size: 1.25rem;
  margin-top: 4px;
}
.client-stack .board-kpis { margin: 16px 0; gap: 12px; }
.client-stack .board-kpis div { padding: 10px; }
.client-stack .board-kpis strong { font-size: 1.25rem; margin-top: 4px; }
.client-stack .board-chart { height: 120px; gap: 10px; padding: 12px; }
.client-stack .board-table { margin-top: 14px; gap: 12px; }
.client-stack .board-table div { padding: 10px; }

/* Card background — one composite gradient instead of 4 stacked layers.
   Stacked radial gradients are expensive to rasterize, and during opacity
   animation the browser re-rasterizes them on every frame the card crosses
   an alpha threshold, which is the root cause of the "jankier when more
   transparent" symptom. A single multi-stop linear gradient gets cached
   once on the GPU layer and just composites with transform + alpha. */
.client-stack > .client-stack-card.solution-preview-card--report {
  background: linear-gradient(
    135deg,
    #fff5d8 0%,
    #ffe7b3 32%,
    #ffd4c0 62%,
    #f5c5d5 100%
  );
}

/* Compact integration grid: logo-forward tile, 4-per-row desktop, scales
   down on smaller viewports. No long descriptions; click opens the detail
   panel. Keeps the whole source matrix visible without a long scroll. */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.integration-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: rgba(255,255,255,0.94);
  box-shadow: 4px 4px 0 rgba(20,21,43,0.08);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.integration-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 8px 0 rgba(20,21,43,0.14);
  border-color: var(--brand-1);
}
.integration-logo {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(20,21,43,0.08);
}
.integration-meta { min-width: 0; }
.integration-card h3 { font-size: 1rem; line-height: 1.15; margin-bottom: 2px; }
.integration-card .micro { margin: 0; font-size: 0.72rem; letter-spacing: 0.05em; }
.integration-mark { width: 58px; }
.source-logo { display: inline-grid; width: 24px; height: 24px; place-items: center; }
.integration-mark .source-logo { width: 58px; height: 58px; }
.source-logo svg { width: 100%; height: 100%; }
.source-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.source-logo rect { fill: #f1efff; stroke: var(--ink); stroke-width: 2; }
.source-logo text { fill: var(--ink); font: 900 13px Inter, sans-serif; }
.source-pill:nth-child(2n) .source-logo rect { fill: #e7f0ff; }
.source-pill:nth-child(3n) .source-logo rect { fill: #fde7f5; }
.source-pill:nth-child(4n) .source-logo rect { fill: #e7fff2; }
.solution-card--1 { background: rgba(254,243,199,0.94); }
.solution-card--2 { background: rgba(219,234,254,0.94); }
.solution-card--3 { background: rgba(252,231,243,0.94); }
.solution-card--4 { background: rgba(220,252,231,0.94); }
.solution-card--5 { background: rgba(237,233,254,0.94); }
.solution-card--6 { background: rgba(204,251,241,0.94); }

.format-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.format-card { min-height: 210px; }
.format-card:nth-child(1) { background: rgba(254,243,199,0.94); }
.format-card:nth-child(2) { background: rgba(219,234,254,0.94); }
.format-card:nth-child(3) { background: rgba(220,252,231,0.94); }
.format-card:nth-child(4) { background: rgba(237,233,254,0.94); }
.format-card:nth-child(5) { background: rgba(252,231,243,0.94); }

/* Workflow stage: Connect / Shape / Deliver step cards with a spotlight
   zoom on the active step and a contextual panel below. A connector
   (stem + glowing bulb) slides beneath the active card so the top row
   and the panel feel like one linked object. */
.workflow-stage {
  --active-index: 0;
  --active-color: var(--brand-1);
  position: relative;
}
.workflow-stage[data-active="0"] { --active-color: var(--brand-1); }
.workflow-stage[data-active="1"] { --active-color: var(--brand-2); }
.workflow-stage[data-active="2"] { --active-color: var(--brand-3); }
.workflow-steps { margin-bottom: 0; }
.workflow-steps .step-card {
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transform-origin: center bottom;
  transition:
    transform .55s cubic-bezier(.2,.65,.2,1),
    box-shadow .4s ease,
    border-color .4s ease,
    background-color .4s ease;
}
.workflow-steps .step-card > span {
  margin-bottom: 0;
  flex: 0 0 38px;
}
.workflow-steps .step-card h3 { margin-top: 0; }
.workflow-steps .step-card > div { min-width: 0; }
.workflow-steps .step-card:hover,
.workflow-steps .step-card:focus-visible {
  border-color: var(--active-color);
}
.workflow-steps .step-card[data-active="true"] {
  transform: scale(1.05);
  border-color: var(--active-color);
  background: #fff;
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--active-color) 28%, transparent);
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .workflow-steps .step-card { transition: none; }
  .workflow-steps .step-card[data-active="true"] { transform: none; }
}

/* Connection emphasis: the panel borrows the active card's accent color via
   border + offset drop shadow, so the active step and the sub-context below
   visually belong to the same object — no vertical connector needed. */
.workflow-connector,
.workflow-panel-tab { display: none; }

.workflow-panel {
  position: relative;
  margin-top: 38px;
  display: grid;
  grid-template-areas: "stack";
  border: 2px solid var(--active-color);
  border-radius: 18px;
  padding: 30px 28px 28px;
  background: rgba(255,255,255,0.96);
  box-shadow: 12px 14px 0 color-mix(in srgb, var(--active-color) 32%, transparent);
  overflow: hidden;
  transition: border-color .55s ease, box-shadow .55s ease;
}
.workflow-panel-slot {
  grid-area: stack;
  align-self: start;
  min-width: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
}
.workflow-panel-slot[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .workflow-panel-slot { transition: opacity .2s ease; transform: none; }
  .workflow-panel-slot[data-active="true"] { transform: none; }
}
.workflow-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--active-color);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  transition: color .4s ease;
}
.workflow-panel-eyebrow::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-3));
}
.workflow-panel-footnote {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Connect panel: source tiles */
.workflow-sources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.workflow-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
  box-shadow: 3px 3px 0 rgba(20,21,43,0.08);
  min-width: 0;
}
.workflow-source img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(20,21,43,0.08);
}
.workflow-source > div { min-width: 0; }
.workflow-source strong { display: block; font-size: 0.92rem; line-height: 1.2; }
.workflow-source span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* Shape panel: a centered stack of template slides. An animation cycle
   fades the pragmas out while the chart + KPIs fly in from the left edge
   and settle into the matching slot on the top slide of the stack. */
.workflow-shape {
  display: flex;
  justify-content: center;
}
.workflow-shape-target {
  width: 100%;
  max-width: 560px;
}

/* Stack of three overlapping slides — the front one is the "live" target
   whose slots fill in from the pragma placeholders. */
.workflow-shape-stack {
  position: relative;
  aspect-ratio: 16 / 11;
}
.workflow-shape-slide {
  position: absolute;
  inset: 16px 16px 0 0;
  border: 1.5px solid rgba(20,21,43,0.35);
  border-radius: 7px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 18px rgba(20,21,43,0.08);
}
.workflow-shape-slide--back {
  transform: translate(16px, -16px) rotate(-2.2deg);
  opacity: 0.55;
  z-index: 1;
}
.workflow-shape-slide--mid {
  transform: translate(8px, -8px) rotate(-1deg);
  opacity: 0.8;
  z-index: 2;
}
.workflow-shape-slide--front {
  z-index: 3;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  overflow: hidden;
}
.workflow-shape-slide-title {
  height: 8px;
  width: 55%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
}
.workflow-shape-slide-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 1fr;
  gap: 8px;
  min-height: 0;
}
.workflow-shape-slot {
  position: relative;
  border: 1.2px dashed rgba(178,36,239,0.5);
  border-radius: 4px;
  background: rgba(178,36,239,0.05);
  overflow: hidden;
}
.workflow-shape-slot--chart { grid-column: 1 / -1; }

/* Pragma placeholder: monospace {{token}} text centered in the slot */
.workflow-shape-pragma {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--brand-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Filled content: starts offscreen to the left (clipped by slot overflow)
   and flies into position when its keyframe hits. */
.workflow-shape-filled {
  position: absolute;
  inset: 4px;
  opacity: 0;
  transform: translate(-140%, -10%) scale(0.7) rotate(-4deg);
  will-change: transform, opacity;
}
.workflow-shape-filled--chart {
  display: flex;
  align-items: end;
  gap: 3px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(20,21,43,0.18);
  border-radius: 3px;
  padding: 4px;
}
.workflow-shape-filled--chart span {
  flex: 1;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-3));
  border-radius: 2px;
}
.workflow-shape-filled--kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(20,21,43,0.18);
  border-radius: 3px;
  padding: 4px 6px;
}
.workflow-shape-filled--kpi strong { font-size: 0.82rem; color: var(--ink); line-height: 1; }
.workflow-shape-filled--kpi em { font-style: normal; font-size: 0.6rem; color: var(--brand-2); font-weight: 900; }

/* Cycling animation: pragmas show, content flies in from the left and
   settles, content holds, then fades back out to restart. Stagger chart
   → KPI-1 → KPI-2 so each slot lands in sequence. The animation only
   runs while the Shape panel is active so the cycle restarts fresh every
   time the user lands on it (and we don't burn CPU offscreen). */
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--chart .workflow-shape-pragma { animation: shapePragma 6s cubic-bezier(.4,0,.2,1) infinite 0.2s; }
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--chart .workflow-shape-filled { animation: shapeFly 6s cubic-bezier(.4,0,.2,1) infinite 0.2s; }
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--kpi-1 .workflow-shape-pragma { animation: shapePragma 6s cubic-bezier(.4,0,.2,1) infinite 0.8s; }
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--kpi-1 .workflow-shape-filled { animation: shapeFly 6s cubic-bezier(.4,0,.2,1) infinite 0.8s; }
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--kpi-2 .workflow-shape-pragma { animation: shapePragma 6s cubic-bezier(.4,0,.2,1) infinite 1.4s; }
.workflow-panel-slot[data-active="true"] .workflow-shape-slot--kpi-2 .workflow-shape-filled { animation: shapeFly 6s cubic-bezier(.4,0,.2,1) infinite 1.4s; }

@keyframes shapePragma {
  0%, 8% { opacity: 1; }
  18%, 80% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes shapeFly {
  0%, 8% { opacity: 0; transform: translate(-140%, -10%) scale(0.7) rotate(-4deg); }
  22%, 80% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  92%, 100% { opacity: 0; transform: translate(-140%, -10%) scale(0.7) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-shape-filled {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .workflow-shape-pragma { animation: none !important; opacity: 0; }
}

/* Deliver panel reuses .format-grid / .format-card */
.workflow-panel .format-card { min-height: 180px; }

@media (max-width: 960px) {
  .workflow-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .workflow-connector { display: none; }
  .workflow-panel-tab { display: none; }
  .workflow-steps .step-card[data-active="true"] { transform: none; }
  .workflow-sources { grid-template-columns: 1fr; }
}
.analyst-card-row { grid-template-columns: 1fr; }
.card--bright:nth-child(1) { background: rgba(237,233,254,0.94); }
.card--bright:nth-child(2) { background: rgba(224,242,254,0.94); }
.card--bright:nth-child(3) { background: rgba(252,231,243,0.94); }
.blog-card { padding: 0; overflow: hidden; }
.blog-card-link { display: grid; height: 100%; text-decoration: none; }
.blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(20,21,43,0.08);
}
.blog-card-body { padding: 22px; }
.blog-card-body > span:first-child { display: block; color: var(--brand-3); font-weight: 900; font-size: .86rem; margin-bottom: 8px; }
.pricing-panel, .contact-layout, .cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr); gap: 28px; align-items: center; }
.pricing-panel { margin-bottom: clamp(48px, 6vw, 80px); }
.price-tile { text-align: center; background: rgba(254,243,199,0.94); }
/* Pricing tier "slider" — segmented control with three stops. The track
   is a pill-shaped border; the active option floats above the others on
   a brand-tinted background. Sits above the trial CTA so the price tile,
   slider position, and button text all move together. */
.pricing-tier-slider {
  display: inline-flex;
  align-items: stretch;
  margin: 22px 0 16px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  gap: 2px;
}
.pricing-tier-option {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.pricing-tier-option:hover { background: rgba(91, 92, 255, 0.08); }
.pricing-tier-option[aria-selected="true"] {
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 92, 255, 0.28);
}
.pricing-tier-option[aria-selected="true"]:hover { background: linear-gradient(120deg, var(--brand-1), var(--brand-2)); }
/* Custom pricing state — replace the "Starts at / $$$ / per month" stack
   with a single prose message. Hide the eyebrow and the giant number,
   then promote the period <p> into the message slot. */
.price-tile[data-pricing-state="large"] > span,
.price-tile[data-pricing-state="large"] strong {
  display: none;
}
.price-tile[data-pricing-state="large"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-tile[data-pricing-state="large"] p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-tier-option { transition: none; }
}
.price-tile strong { display: block; font-size: clamp(4rem, 8vw, 7rem); line-height: 0.9; }
.contact-form {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 7px 7px 0 rgba(20,21,43,0.12);
}
.contact-form label { display: grid; gap: 6px; font-weight: 900; }
input, textarea {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  background: #fff;
}
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.legal-copy h2 { font-size: 1.6rem; margin-top: 0; }

.cta-band {
  position: relative;
  overflow: hidden;
  /* Generous top/bottom padding so the CTA feels as substantial as the
     section--ink hero ("Automate your reporting workflow"). Bottom padding
     also has to clear the tall peaks of the footer's ::before light wave
     that hangs up into this section. */
  padding: clamp(180px, 18vw, 260px) 0 clamp(220px, 20vw, 300px);
  background:
    /* Soft radial glows for depth, echoing the feel of section--ink. */
    radial-gradient(55% 60% at 18% 30%, rgba(123,121,255,0.28), transparent 62%),
    radial-gradient(55% 60% at 82% 30%, rgba(200,70,255,0.22), transparent 64%),
    radial-gradient(50% 55% at 50% 80%, rgba(91,92,255,0.22), transparent 68%),
    radial-gradient(40% 50% at 15% 90%, rgba(178,36,239,0.18), transparent 68%),
    /* Base linear gradient anchored on #2d1a62 so the wave transitions on
       both ends still land on a predictable dark purple field. */
    linear-gradient(180deg, #3b1e8a 0%, #2d1a62 50%, #1e1345 100%);
  color: #fff;
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: clamp(90px, 10vw, 150px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,30 C1040,130 820,-30 600,60 C380,150 180,-20 0,84 Z' fill='%23f4efff'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top;
  pointer-events: none;
  z-index: 1;
}
.cta-band > .section-inner { position: relative; z-index: 2; }
.cta-band--coral { background: linear-gradient(135deg, rgba(254,243,199,0.96), rgba(252,231,243,0.94)); color: var(--ink); }
.cta-band p { color: rgba(255,255,255,0.78); }
.cta-band--coral p { color: var(--muted); }
.cta-band .button--secondary { color: var(--ink); }
.faq-list { display: grid; gap: 12px; }
details {
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 18px 20px;
}
summary { cursor: pointer; font-weight: 900; font-size: 1.08rem; }
details p { margin: 14px 0 0; }

.site-footer {
  position: relative;
  padding: clamp(120px, 14vw, 180px) 0 44px;
  background: #f4efff;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(clamp(90px, 10vw, 150px) * -1 + 1px);
  height: clamp(90px, 10vw, 150px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L0,60 C180,-20 420,140 640,44 C840,-28 1040,136 1200,20 L1200,120 Z' fill='%23f4efff'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
  z-index: 2;
}
.site-footer > .section-inner { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: 32px; align-items: start; }
.footer-grid p { max-width: 520px; }
.footer-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}
.footer-column {
  display: grid;
  gap: 10px;
  align-content: start;
}
.footer-column span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.footer-links a { text-decoration: none; font-weight: 500; }

.footer-social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--ink, #14152b);
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
/* Brand-tinted pastels — bolder than muted gray but still soft enough to
   sit comfortably on the lilac footer. Ink icons stay legible on each. */
.footer-social li:nth-child(1) a { background: #b8caff; } /* LinkedIn */
.footer-social li:nth-child(2) a { background: #d3c2ff; } /* X (Twitter) */
.footer-social li:nth-child(3) a { background: #ffb3d3; } /* Instagram */
.footer-social li:nth-child(4) a { background: #ffb0a2; } /* YouTube */
.footer-social a:hover,
.footer-social a:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.2) brightness(0.96);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.panel-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(20,21,43,.36); backdrop-filter: blur(3px); }
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: min(460px, 100vw);
  height: 100vh;
  padding: 34px;
  background: linear-gradient(135deg, #fffaf4, #eef2ff);
  border-left: 2px solid var(--ink);
  box-shadow: -18px 0 60px rgba(20,21,43,.24);
  transform: translateX(105%);
  transition: transform 240ms ease;
}
.side-panel[data-open="true"] { transform: translateX(0); }
.side-panel { overflow-y: auto; }
#panel-body h4 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin: 20px 0 6px;
}
#panel-body h4:first-child { margin-top: 4px; }
#panel-body p { margin: 0 0 12px; }
#panel-body ul {
  margin: 0 0 14px;
  padding-left: 18px;
}
#panel-body li { margin: 4px 0; }
#panel-body em { font-style: normal; color: var(--mute-2); font-weight: 500; }

.panel-learn-more {
  display: block;
  width: fit-content;
  margin: 16px 0 0;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.panel-learn-more:hover { color: #5b5cff; }

.mini-report-cta { margin-top: 32px; }

/* Analyst showcase: image frame that cycles through one slide per card
   in the right-hand card grid. Active slot fades in; others stay below. */
.analyst-showcase-frame {
  position: relative;
  margin-top: 24px;
  border: 2px solid var(--ink);
  border-radius: 26px;
  box-shadow: 10px 14px 0 rgba(20, 21, 43, 0.14);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.analyst-image-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 3.5vw, 52px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
/* Bold per-slot backdrop behind each image. Slot 2 (the inline format
   grid) drops the backdrop so it reads as a plain centered preview. */
.analyst-image-slot[data-analyst-slot="0"] {
  background: linear-gradient(135deg, #9db0ff 0%, #6d7aff 55%, #4d5cff 100%);
}
.analyst-image-slot[data-analyst-slot="1"] {
  background: linear-gradient(135deg, #ff9ac1 0%, #ff5b9a 55%, #e63b8a 100%);
}
.analyst-image-slot[data-analyst-slot="2"] {
  background: transparent;
}
.analyst-image-slot[data-active="true"] {
  opacity: 1;
}
.analyst-image-slot img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  border: 1.5px solid rgba(20, 21, 43, 0.14);
  box-shadow: 0 24px 48px -14px rgba(20, 21, 43, 0.32);
  background: #fff;
  transform-origin: center;
  will-change: transform;
}
.analyst-format-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 520px;
  padding: 6px;
}
.analyst-format-mini article {
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(20, 21, 43, 0.12);
}
/* Match the colors from .format-card in the full Create-actual-documents
   row. Same n-th child sequence: Presentations, Documents, Spreadsheets,
   Dashboards, Email. */
.analyst-format-mini article:nth-child(1) { background: rgba(254,243,199,0.94); }
.analyst-format-mini article:nth-child(2) { background: rgba(219,234,254,0.94); }
.analyst-format-mini article:nth-child(3) { background: rgba(220,252,231,0.94); }
.analyst-format-mini article:nth-child(4) { background: rgba(237,233,254,0.94); }
.analyst-format-mini article:nth-child(5) { background: rgba(252,231,243,0.94); }
.analyst-format-mini article:nth-child(4) { grid-column-start: 1; }
.analyst-format-mini .inline-svg {
  width: 22px;
  height: 22px;
  margin: 0 0 2px;
}

/* Footer brand/logo badges inside a .card — sit at the bottom, separated
   from the copy by a thin ink-rule, so the card doubles as a feature + a
   proof point. */
.card-footer-badges {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(20, 21, 43, 0.08);
}
/* Compliance trust badge — sits inline beneath copy, links out to the
   trust center. Designed to read well on dark (section--ink) and light
   backgrounds; uses the page's amber accent for the shield so it pops. */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 18px 12px 14px;
  border: 2px solid rgba(255, 228, 163, 0.55);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.trust-badge:hover,
.trust-badge:focus-visible {
  border-color: #ffe4a3;
  background: rgba(255, 228, 163, 0.12);
  transform: translateY(-1px);
}
.trust-badge-shield {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  fill: none;
  stroke: #ffe4a3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-badge-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.trust-badge-text span {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 3px;
}
/* On light surfaces, swap the secondary text + shield colors so the badge
   stays legible without changing the markup. */
.section--paper .trust-badge-text span,
.section--warm .trust-badge-text span,
.section--proof .trust-badge-text span,
.section--faq .trust-badge-text span {
  color: var(--muted);
}
.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(20, 21, 43, 0.14);
  border-radius: 8px;
}
.card-badge--text {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: linear-gradient(135deg, #eef1ff, #e2e7ff);
  border-color: rgba(91, 92, 255, 0.3);
}
/* Make the parent card a flex column so the footer badges always sit
   flush with the bottom edge regardless of copy length. */
.card-grid--three .card:has(.card-footer-badges) {
  display: flex;
  flex-direction: column;
}
/* Active card visual — matches the index-page step-card highlight */
.analyst-card-row .card[data-active="true"] {
  background: #fff;
  border-color: #5b5cff;
  transform: scale(1.05);
  box-shadow: 10px 12px 0 rgba(91, 92, 255, 0.28);
  z-index: 2;
}
.analyst-card-row .card {
  cursor: pointer;
}

.integration-hero-badge {
  position: absolute;
  top: 50%;
  right: clamp(32px, 6vw, 96px);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.integration-hero-logo {
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e4deef;
  border-radius: clamp(24px, 3vw, 36px);
  box-shadow: 0 18px 40px -10px rgba(20,21,43,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  animation: boardSettle 1s cubic-bezier(.22, 1, .36, 1) 0.15s both;
}
.integration-hero-logo img {
  width: 64%;
  height: auto;
  display: block;
}
@media (max-width: 820px) {
  .integration-hero-badge { display: none; }
}

.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 720px;
}
.resource-list li {
  background: #fff;
  border: 1px solid rgba(20,21,43,0.08);
  border-radius: 14px;
  padding: 14px 18px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.resource-list li:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.resource-list a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.resource-list a::after {
  content: " →";
  color: var(--mute-2);
  font-weight: 600;
}

.video-embed {
  border-radius: 18px;
  border: 2px solid var(--ink);
  background: #000;
  overflow: hidden;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: min(1260px, calc(100% - 36px));
  margin: 0 auto;
}
.video-grid .video-embed { max-width: none; }
@media (max-width: 820px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* Integration detail pages: the first section replaces the hero, so bump its
   top padding to clear the sticky header and give the content air. */
.section--integration-lede {
  padding-top: clamp(140px, 16vw, 200px);
}
.section--integration-lede .eyebrow { margin-bottom: 12px; }
.section--integration-lede h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin: 0 0 18px;
}
.section--integration-lede .hero-actions { margin-top: 22px; }

/* Use-case cards on integration pages: match the step-card zoom on the main
   page. Hover or focus triggers a 1.05 scale with the same easing + border
   accent, so the cards read as interactive features. */
.card-grid--zoom .card {
  cursor: default;
  transform-origin: center bottom;
  transition:
    transform .55s cubic-bezier(.2,.65,.2,1),
    box-shadow .4s ease,
    border-color .4s ease,
    background-color .4s ease;
}
.card-grid--zoom .card:hover,
.card-grid--zoom .card:focus-within {
  transform: scale(1.05);
  background: #fff;
  box-shadow: 10px 12px 0 rgba(91, 92, 255, 0.28);
  border-color: #5b5cff;
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .card-grid--zoom .card { transition: none; }
  .card-grid--zoom .card:hover,
  .card-grid--zoom .card:focus-within { transform: none; }
}
/* Accents modifier: each card in the grid gets a fixed brand color border,
   matching offset shadow, and accent-tinted icon — echoing the
   Connect / Design / Deliver workflow steps. Stack on top of card-grid--zoom
   to keep the hover/scale animation. */
.card-grid--accents .card:nth-child(1) {
  border-color: var(--brand-1);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--brand-1) 22%, transparent);
}
.card-grid--accents .card:nth-child(2) {
  border-color: var(--brand-2);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--brand-2) 22%, transparent);
}
.card-grid--accents .card:nth-child(3) {
  border-color: var(--brand-3);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--brand-3) 22%, transparent);
}
.card-grid--accents .card:nth-child(1) .inline-svg { color: var(--brand-1); }
.card-grid--accents .card:nth-child(2) .inline-svg { color: var(--brand-2); }
.card-grid--accents .card:nth-child(3) .inline-svg { color: var(--brand-3); }
/* When stacked with card-grid--zoom, override the uniform brand-1 hover so
   each card pops with its own accent. */
.card-grid--accents.card-grid--zoom .card:nth-child(1):hover,
.card-grid--accents.card-grid--zoom .card:nth-child(1):focus-within {
  border-color: var(--brand-1);
  box-shadow: 12px 14px 0 color-mix(in srgb, var(--brand-1) 32%, transparent);
}
.card-grid--accents.card-grid--zoom .card:nth-child(2):hover,
.card-grid--accents.card-grid--zoom .card:nth-child(2):focus-within {
  border-color: var(--brand-2);
  box-shadow: 12px 14px 0 color-mix(in srgb, var(--brand-2) 32%, transparent);
}
.card-grid--accents.card-grid--zoom .card:nth-child(3):hover,
.card-grid--accents.card-grid--zoom .card:nth-child(3):focus-within {
  border-color: var(--brand-3);
  box-shadow: 12px 14px 0 color-mix(in srgb, var(--brand-3) 32%, transparent);
}
.panel-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--surface-strong);
  font-weight: 900;
  cursor: pointer;
}
.panel-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; color: var(--muted); font-weight: 800; }

.modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(20,21,43,.54); backdrop-filter: blur(10px); }
.analyst-modal {
  position: fixed;
  inset: 4vh 4vw;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr auto;
  background: linear-gradient(135deg, #fffaf4, #f4f1ff);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(20,21,43,.28);
  padding: 34px;
  transform: translateY(16px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}
.analyst-modal[data-open="true"] { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.modal-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface-strong);
  font-weight: 900;
  cursor: pointer;
}
.analyst-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: stretch;
}
.analyst-explainer {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 10%, rgba(91,92,255,0.14), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(255,89,214,0.12), transparent 28%),
    linear-gradient(135deg, rgba(59,30,138,0.08), rgba(178,36,239,0.08));
}
.explainer-card {
  border: 1px solid rgba(20,21,43,0.14);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.84);
}
.analyst-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 12px;
}

@keyframes gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes liquidSwirl {
  0% { background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%, 0% 0%; }
  25% { background-position: 65% 15%, 35% 75%, 85% 35%, 10% 45%, 50% 50%; }
  50% { background-position: 45% 85%, 20% 40%, 75% 65%, 90% 15%, 100% 100%; }
  75% { background-position: 80% 55%, 55% 25%, 15% 75%, 60% 40%, 50% 50%; }
  100% { background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%, 0% 0%; }
}
@keyframes heroGlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.04); }
}
@keyframes logoMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 17px)); }
}

@media (max-width: 1080px) {
  .page-signal { opacity: .2; right: 0; width: 48vw; }
  .quote-grid, .format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--home .hero-copy { padding-right: min(44vw, 480px); }
  .scene-panel--board { width: min(480px, 38vw); }
  .scene-panel--analyst { right: 10vw; width: min(360px, 32vw); }
  .scene-panel--integrations { width: min(320px, 26vw); }
}
@media (max-width: 980px) {
  .hero--home { padding: 108px 0 98px; }
  .hero--home .hero-copy { padding-right: 0; }
  .primary-nav {
    position: absolute;
    inset: 66px 18px auto 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-strong);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow);
  }
  .nav-dropdown { display: grid; }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 32px;
  }
  .nav-submenu {
    position: static;
    grid-template-columns: 1fr;
    left: auto;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid rgba(20,21,43,0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: none;
    display: none;
  }
  .nav-dropdown[data-open="true"] .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    /* Override the desktop open-state rule's translate(-50%, 0) which would
       otherwise push the in-flow mobile submenu off-screen to the left. */
    transform: none;
  }
  /* On mobile keep the cards' colored gradient backgrounds + borders so each
     solution reads as a distinct chip; only soften padding for the narrower
     menu panel. */
  .nav-submenu-card {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: none;
  }
  .primary-nav[data-open="true"] { display: flex; }
  .nav-toggle {
    display: inline-grid;
    gap: 4px;
    width: 42px;
    height: 42px;
    place-content: center;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--surface-strong);
  }
  .nav-toggle span { width: 18px; height: 2px; background: var(--ink); }
  .hero { min-height: auto; padding: 86px 0 52px; }
  .hero--compact { min-height: auto; }
  .hero--compact .hero-copy { padding-right: 0; }
  .hero-scene { opacity: .26; }
  .scene-panel--board, .scene-panel--analyst, .scene-panel--integrations { right: auto; left: 38%; width: 420px; }
  .scene-panel--board { top: 8%; }
  .scene-panel--analyst { top: 42%; }
  .scene-panel--integrations { top: auto; bottom: 16%; }
  .split, .pricing-panel, .contact-layout, .cta-grid, .footer-grid, .analyst-modal-grid { grid-template-columns: 1fr; }
  .step-grid, .proof-strip, .card-grid--three, .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-grid, .card-grid--two, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .section { padding: 62px 0; }
  h1 { font-size: 3.1rem; }
  .brand-wordmark { width: 132px; }
  .step-grid, .proof-strip, .card-grid--three, .format-grid, .scoreboard, .quote-grid, .board-kpis, .board-table, .explainer-output-grid, .footer-links { grid-template-columns: 1fr; }
  .integration-card { grid-template-columns: 1fr; }
  .page-signal { display: none; }
  .button { width: 100%; }
  .hero-scene { opacity: .15; }
  .scene-panel--board, .scene-panel--analyst, .scene-panel--integrations { left: 18%; width: 360px; }
  .side-panel { padding: 28px 20px; }
  .analyst-modal { inset: 2vh 2vw; padding: 22px; }
  /* Hide the decorative back cards in the client-stack on narrow viewports.
     Their +28px / +56px right-translate causes horizontal overflow and adds
     no value on mobile where the front card is the focal point. */
  .client-stack > .client-stack-card:nth-child(n+2) { display: none; }
}

/* Prompt list with click-to-explore behavior. The <li> becomes a button-style
   trigger that zooms on hover (mirroring card-grid--zoom) and opens the
   existing side panel with an animated walkthrough of the prompt.

   Layout note: each <li> becomes display:contents so the inner button takes
   over the grid cell. The button reuses the icon-list/prompt-list visuals
   (white card on dark surface) and adds hover/focus zoom + brand accent. */
.prompt-list--zoom li { display: contents; }
.prompt-list--zoom .prompt-trigger {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transform-origin: center;
  transition:
    transform .45s cubic-bezier(.2,.65,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background-color .35s ease;
}
.prompt-list--zoom .prompt-trigger:hover,
.prompt-list--zoom .prompt-trigger:focus-visible {
  transform: scale(1.03);
  background: #fff;
  border-color: var(--brand-1);
  box-shadow: 8px 8px 0 rgba(91, 92, 255, 0.28);
  outline: none;
  position: relative;
  z-index: 2;
}
.prompt-list--zoom .prompt-trigger .inline-svg {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--brand-2);
}
@media (prefers-reduced-motion: reduce) {
  .prompt-list--zoom .prompt-trigger { transition: none; }
  .prompt-list--zoom .prompt-trigger:hover,
  .prompt-list--zoom .prompt-trigger:focus-visible { transform: none; }
}

/* Prompt walkthrough illustration injected into the side panel body.
   Self-contained: renders a stylized chat window and auto-cycles through
   the four steps (Select data, Type prompt, View results, Save to
   artifacts) on a 12s loop. Mirrors the actual chat UI loosely:
   attachment chip → typed prompt → AI response with chart → save toast. */
.prompt-illustration {
  --illus-cycle: 12s;
  margin: 4px 0 18px;
  display: grid;
  gap: 14px;
  font-family: inherit;
}
.prompt-illustration .illus-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prompt-illustration .illus-step {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute-2);
  display: grid;
  gap: 6px;
}
.prompt-illustration .illus-step-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(20,21,43,.12);
  position: relative;
  overflow: hidden;
}
.prompt-illustration .illus-step-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left center;
}
/* All four step bars share the same 12s cycle (no animation-delay) so they
   reset together. Each fills only during its 25% slice of the cycle so the
   "active step" matches the visible chat content one-to-one. */
.prompt-illustration .illus-step:nth-child(1) .illus-step-bar::after { animation: illus-step1-fill var(--illus-cycle) infinite; }
.prompt-illustration .illus-step:nth-child(2) .illus-step-bar::after { animation: illus-step2-fill var(--illus-cycle) infinite; }
.prompt-illustration .illus-step:nth-child(3) .illus-step-bar::after { animation: illus-step3-fill var(--illus-cycle) infinite; }
.prompt-illustration .illus-step:nth-child(4) .illus-step-bar::after { animation: illus-step4-fill var(--illus-cycle) infinite; }
@keyframes illus-step1-fill {
  0% { transform: scaleX(0); }
  20% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes illus-step2-fill {
  0%, 25% { transform: scaleX(0); }
  45% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes illus-step3-fill {
  0%, 50% { transform: scaleX(0); }
  70% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes illus-step4-fill {
  0%, 75% { transform: scaleX(0); }
  95% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* Stage: a stylized chat window. */
.prompt-illustration .illus-window {
  background: #fffaf4;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(20,21,43,.16);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 320px;
  position: relative;
}
.prompt-illustration .illus-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ink);
  color: #fffaf4;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prompt-illustration .illus-window-bar .illus-window-dot {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,250,244,.32);
}
.prompt-illustration .illus-window-bar .illus-window-dot:nth-of-type(1) { background: #ff6b4a; }
.prompt-illustration .illus-window-bar .illus-window-dot:nth-of-type(2) { background: #ffb840; }
.prompt-illustration .illus-window-bar .illus-window-dot:nth-of-type(3) { background: #33d9a7; }
.prompt-illustration .illus-window-title { margin-left: 8px; }
.prompt-illustration .illus-window-spacer { flex: 1; }

/* Chat thread area (animated children). */
.prompt-illustration .illus-thread {
  position: relative;
  padding: 14px 14px 6px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.prompt-illustration .illus-thread > * {
  opacity: 0;
}

/* Stage 1: data source pill slides in from above. */
.prompt-illustration .illus-source-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(91,92,255,.18);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  align-self: start;
  animation: illus-fade-from-top var(--illus-cycle) infinite;
}
.prompt-illustration .illus-source-card span:last-child {
  display: block;
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--mute-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prompt-illustration .illus-source-card .illus-source-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
}
.prompt-illustration .illus-source-card .illus-source-icon svg { width: 18px; height: 18px; }

/* Stage 2: user prompt bubble with typing animation. */
.prompt-illustration .illus-prompt-bubble {
  justify-self: end;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(20,21,43,.18);
  display: grid;
  gap: 4px;
  animation: illus-fade-from-right var(--illus-cycle) infinite;
}
.prompt-illustration .illus-prompt-text {
  margin: 0;
  line-height: 1.35;
  position: relative;
  /* Explicit white — global `p { color: var(--muted) }` would otherwise win
     over inheritance from .illus-prompt-bubble, leaving dark text on the
     purple gradient. */
  color: #fff;
}
.prompt-illustration .illus-prompt-text .illus-caret {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: #fff;
  margin-left: 2px;
  vertical-align: -1px;
  animation: illus-caret 1s steps(2) infinite;
}
@keyframes illus-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Stage 3: AI response card with chart + summary. */
.prompt-illustration .illus-ai-bubble {
  justify-self: start;
  max-width: 96%;
  padding: 12px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(255,107,74,.22);
  display: grid;
  gap: 8px;
  animation: illus-fade-from-left var(--illus-cycle) infinite;
}
.prompt-illustration .illus-ai-eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-3);
}
.prompt-illustration .illus-ai-summary {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

/* Chart variants. Each is sized for a compact bubble (~260x80). */
.prompt-illustration .illus-chart {
  display: block;
  height: 80px;
  background: linear-gradient(180deg, rgba(91,92,255,0.06), rgba(91,92,255,0.02));
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.prompt-illustration .illus-chart--bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: end;
  padding: 8px;
}
.prompt-illustration .illus-chart--bars span {
  display: block;
  height: 100%;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand-1));
  transform: scaleY(0);
  transform-origin: bottom center;
}
.prompt-illustration .illus-chart--bars span:nth-child(1) { animation: illus-bar-grow var(--illus-cycle) infinite; --bar-height: 0.42; }
.prompt-illustration .illus-chart--bars span:nth-child(2) { animation: illus-bar-grow var(--illus-cycle) infinite; animation-delay: .1s; --bar-height: 0.65; }
.prompt-illustration .illus-chart--bars span:nth-child(3) { animation: illus-bar-grow var(--illus-cycle) infinite; animation-delay: .2s; --bar-height: 0.58; }
.prompt-illustration .illus-chart--bars span:nth-child(4) { animation: illus-bar-grow var(--illus-cycle) infinite; animation-delay: .3s; --bar-height: 0.84; }
.prompt-illustration .illus-chart--bars span:nth-child(5) { animation: illus-bar-grow var(--illus-cycle) infinite; animation-delay: .4s; --bar-height: 0.7; }
.prompt-illustration .illus-chart--bars span:nth-child(6) { animation: illus-bar-grow var(--illus-cycle) infinite; animation-delay: .5s; --bar-height: 0.92; }

.prompt-illustration .illus-chart--line svg { width: 100%; height: 100%; display: block; }
.prompt-illustration .illus-chart--line path.line {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: illus-line-draw var(--illus-cycle) infinite;
}
.prompt-illustration .illus-chart--line path.area {
  fill: rgba(91,92,255,0.18);
  opacity: 0;
  animation: illus-area-fade var(--illus-cycle) infinite;
}

.prompt-illustration .illus-chart--funnel {
  display: grid;
  gap: 4px;
  padding: 6px 10px;
  align-items: center;
}
.prompt-illustration .illus-chart--funnel span {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left center;
}
.prompt-illustration .illus-chart--funnel span:nth-child(1) { width: 100%; animation: illus-funnel-grow var(--illus-cycle) infinite; }
.prompt-illustration .illus-chart--funnel span:nth-child(2) { width: 78%; animation: illus-funnel-grow var(--illus-cycle) infinite; animation-delay: .15s; }
.prompt-illustration .illus-chart--funnel span:nth-child(3) { width: 52%; animation: illus-funnel-grow var(--illus-cycle) infinite; animation-delay: .3s; }
.prompt-illustration .illus-chart--funnel span:nth-child(4) { width: 28%; animation: illus-funnel-grow var(--illus-cycle) infinite; animation-delay: .45s; }

.prompt-illustration .illus-chart--kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
}
.prompt-illustration .illus-chart--kpi article {
  display: grid;
  gap: 2px;
  align-content: center;
  justify-items: center;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 4px;
  transform: scale(0.4);
  opacity: 0;
}
.prompt-illustration .illus-chart--kpi article:nth-child(1) { animation: illus-kpi-pop var(--illus-cycle) infinite; }
.prompt-illustration .illus-chart--kpi article:nth-child(2) { animation: illus-kpi-pop var(--illus-cycle) infinite; animation-delay: .1s; }
.prompt-illustration .illus-chart--kpi article:nth-child(3) { animation: illus-kpi-pop var(--illus-cycle) infinite; animation-delay: .2s; }
.prompt-illustration .illus-chart--kpi strong {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--brand-1);
  line-height: 1;
}
.prompt-illustration .illus-chart--kpi span {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute-2);
}

/* Stage 4: saved-to-artifacts toast. */
.prompt-illustration .illus-saved-toast {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--ink);
  color: #fffaf4;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(51,217,167,.42);
  align-self: end;
  animation: illus-fade-from-bottom var(--illus-cycle) infinite;
}
.prompt-illustration .illus-saved-toast strong {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #33d9a7;
}
.prompt-illustration .illus-saved-toast .illus-saved-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(51,217,167,0.16);
  color: #33d9a7;
}
.prompt-illustration .illus-saved-toast svg { width: 16px; height: 16px; }

/* Persistent input bar at bottom of the window. The pill + text reflect the
   selected data and prompt, which appear in sync with the thread animations. */
.prompt-illustration .illus-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 2px solid var(--ink);
  background: rgba(20,21,43,0.04);
}
.prompt-illustration .illus-input-pill {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  animation: illus-pill-in var(--illus-cycle) infinite;
}
.prompt-illustration .illus-input-text {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  position: relative;
}
.prompt-illustration .illus-input-text > span {
  display: inline-block;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: illus-typing var(--illus-cycle) infinite;
}
.prompt-illustration .illus-input-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  transform: scale(.85);
  opacity: .55;
  animation: illus-send-pulse var(--illus-cycle) infinite;
}
.prompt-illustration .illus-input-send svg { width: 14px; height: 14px; }

/* Keyframes — each timed against the 12s cycle (4 stages × 25%). Children
   in the thread fade in at the start of their stage and persist through
   the rest of the loop, then snap-reset at the seam. */
@keyframes illus-fade-from-top {
  0%, 1% { opacity: 0; transform: translateY(-12px) scale(0.96); }
  6%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes illus-fade-from-right {
  0%, 26% { opacity: 0; transform: translateX(20px); }
  31%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes illus-fade-from-left {
  0%, 51% { opacity: 0; transform: translateX(-20px); }
  56%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes illus-fade-from-bottom {
  0%, 76% { opacity: 0; transform: translateY(14px) scale(0.96); }
  82%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes illus-bar-grow {
  0%, 51% { transform: scaleY(0); }
  60%, 100% { transform: scaleY(var(--bar-height)); }
}
@keyframes illus-line-draw {
  0%, 51% { stroke-dashoffset: 320; }
  72%, 100% { stroke-dashoffset: 0; }
}
@keyframes illus-area-fade {
  0%, 60% { opacity: 0; }
  78%, 100% { opacity: 1; }
}
@keyframes illus-funnel-grow {
  0%, 51% { transform: scaleX(0); }
  62%, 100% { transform: scaleX(1); }
}
@keyframes illus-kpi-pop {
  0%, 51% { transform: scale(0.4); opacity: 0; }
  60%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes illus-pill-in {
  0%, 1% { opacity: 0; transform: scale(0.85); }
  10%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes illus-typing {
  0%, 26% { width: 0; }
  48% { width: 100%; }
  /* keep full width through stages 3 and 4 */
  100% { width: 100%; }
}
@keyframes illus-send-pulse {
  0%, 48% { transform: scale(0.85); opacity: 0.45; box-shadow: 0 0 0 0 rgba(91,92,255,0.0); }
  52% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 0 6px rgba(91,92,255,0.22); }
  60%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(91,92,255,0); }
}

/* The side panel needs slightly different chrome when hosting an
   illustration — hide panel-meta/learn-more (we don't use them here),
   shrink the title (prompts can be a full sentence, not a single word
   like "Salesforce"), and give the body a tighter top margin so the
   steps strip sits close to the title. */
.side-panel:has(.prompt-illustration) #panel-meta { display: none; }
.side-panel:has(.prompt-illustration) .panel-learn-more { display: none; }
.side-panel:has(.prompt-illustration) #panel-title {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  line-height: 1.15;
  margin: 6px 0 10px;
}
#panel-body .prompt-illustration { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .prompt-illustration .illus-thread > * { opacity: 1; transform: none; animation: none; }
  .prompt-illustration .illus-step-bar::after { transform: scaleX(1); animation: none; }
  .prompt-illustration .illus-chart--bars span,
  .prompt-illustration .illus-chart--funnel span { transform: scaleY(1) scaleX(1); animation: none; }
  .prompt-illustration .illus-chart--bars span { transform: scaleY(var(--bar-height, 1)); }
  .prompt-illustration .illus-chart--kpi article { transform: none; opacity: 1; animation: none; }
  .prompt-illustration .illus-chart--line path.line { stroke-dashoffset: 0; animation: none; }
  .prompt-illustration .illus-chart--line path.area { opacity: 1; animation: none; }
  .prompt-illustration .illus-input-pill,
  .prompt-illustration .illus-input-send { animation: none; opacity: 1; transform: none; }
  .prompt-illustration .illus-input-text > span { width: 100%; animation: none; }
}

/* HubSpot contact form: status messaging, disabled state, hidden honeypot. */
.contact-form__honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.form-status[data-state="success"] {
  background: #e6f4ea;
  color: #1e6f3a;
  border: 2px solid #1e6f3a;
}
.form-status[data-state="error"] {
  background: #fde7ea;
  color: #8b1a1a;
  border: 2px solid #8b1a1a;
}