/* VAERION — marketing site design system.
   Light and luminous: pearl and lavender grounds, deep indigo ink, and one
   violet-to-sky gradient that carries the brand. No rules grids, no black bands. */

:root {
  --bg: #F7F6FC;
  --mist: #EFECFB;
  --mist-2: #E6E1FA;
  --paper: #FFFFFF;
  --ink: #16133A;
  --ink-2: #3D3A66;
  --muted: #6E6B8E;
  --faint: #A4A1BE;
  --line: rgba(58, 43, 217, .09);
  --line-2: rgba(22, 19, 58, .14);
  --violet: #5B4CFF;
  --violet-deep: #3A2BD9;
  --iris: #8E80FF;
  --sky: #4FA8F5;
  --mint: #2EBFA5;
  --peach: #FFB59A;
  --violet-soft: #ECE9FF;
  --ok: #138A4B;
  --warn: #B45309;
  --grad: linear-gradient(120deg, #3A2BD9 0%, #5B4CFF 38%, #8E80FF 68%, #4FA8F5 100%);
  --grad-text: linear-gradient(100deg, #4434EE 0%, #7B5CFF 45%, #3E9BF0 100%);
  --grad-soft: linear-gradient(160deg, #F4F1FF 0%, #ECE7FD 55%, #E4EEFD 100%);
  --shadow-1: 0 1px 2px rgba(22, 19, 58, .04), 0 10px 30px -14px rgba(58, 43, 217, .16);
  --shadow-2: 0 2px 4px rgba(22, 19, 58, .04), 0 30px 60px -28px rgba(58, 43, 217, .32);
  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --header-h: 72px;
  --r: 22px;
  --r-s: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --space: clamp(80px, 10vw, 144px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--violet); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--mist); }
.section--glow { background: var(--grad-soft); overflow: hidden; isolation: isolate; }
.section--glow::before, .section--glow::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.section--glow::before { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -10vw; top: -20%; background: rgba(142, 128, 255, .32); }
.section--glow::after { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -8vw; bottom: -30%; background: rgba(79, 168, 245, .26); }
.grid-2 { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.split { display: grid; gap: clamp(24px, 4vw, 64px); }
@media (min-width: 960px) { .split { grid-template-columns: 6fr 5fr; align-items: end; } }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.display { font-size: clamp(46px, 7vw, 100px); line-height: 1; letter-spacing: -.045em; font-weight: 400; }
.h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.04em; font-weight: 400; }
.h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.035em; font-weight: 400; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.02em; font-weight: 400; }
.h4 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.accent {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  background: var(--grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em; animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.stack-s > * + * { margin-top: 12px; }
.stack-m > * + * { margin-top: 22px; }
.stack-l > * + * { margin-top: 40px; }
.measure { max-width: 62ch; }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 960px) { .head--split { grid-template-columns: 6fr 5fr; align-items: end; gap: 64px; } }
.head--center { text-align: center; justify-items: center; }
.head--center .lede { margin-inline: auto; }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--grad); background-size: 140% 100%; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .005em;
  box-shadow: 0 10px 24px -12px rgba(58, 43, 217, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-position .6s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(58, 43, 217, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn--light { background: #fff; color: var(--violet-deep); box-shadow: 0 10px 30px -12px rgba(22, 19, 58, .45); }
.btn--light:hover { background: #fff; color: var(--violet); }
.btn--ghost { background: rgba(255, 255, 255, .6); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost::after { display: none; }
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--violet), 0 10px 24px -14px rgba(58, 43, 217, .5); color: var(--violet-deep); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn .arr, .link .arr { transition: transform .35s var(--ease); }
.btn:hover .arr, .link:hover .arr { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--violet-deep); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease), color .2s; }
.link:hover { background-size: 100% 1px; color: var(--violet); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

/* ---------- Announcement, progress + header ---------- */
.announce { background: var(--grad); color: #fff; font-size: 13.5px; }
.announce .container { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; text-align: center; }
.announce a { font-weight: 500; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.announce a:hover { border-color: #fff; }
@media (max-width: 560px) { .announce { font-size: 12.5px; } .announce .container { padding-block: 8px; justify-content: space-between; text-align: left; } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

.header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(247, 246, 252, .78); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s;
}
.header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(58, 43, 217, .35); }
.header .container { display: flex; align-items: center; height: 100%; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: .16em; font-size: 15px; }
.brand-mark {
  width: 28px; height: 28px; background: var(--grad);
  -webkit-mask: url(/assets/brand/vaerion-mark.png) center / contain no-repeat; mask: url(/assets/brand/vaerion-mark.png) center / contain no-repeat;
}
.brand small { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--muted); font-weight: 400; margin-left: 2px; }
.nav { display: none; margin-left: 8px; }
.nav > ul { display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; font-size: 15px; color: var(--ink-2);
  border-radius: 999px; transition: color .2s, background .2s;
}
.nav-link:hover, .nav-item.is-open > .nav-link, .nav-link[aria-current="page"] { color: var(--ink); background: rgba(91, 76, 255, .08); }
.nav-link svg { transition: transform .25s var(--ease); }
.nav-item.is-open > .nav-link svg { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 14px); left: -12px; width: min(720px, 90vw);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 20px; padding: 10px;
  box-shadow: 0 40px 80px -36px rgba(58, 43, 217, .35);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 20% 0; translate: var(--mx, 0px) 0;
  transition: opacity .2s, transform .35s var(--ease), visibility .2s;
}
.mega::before { content: ''; position: absolute; inset: -16px 0 auto 0; height: 16px; }
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 14px; border-radius: 14px; transition: background .2s; }
.mega a:hover { background: var(--mist); }
.mega .n { grid-row: span 2; font-family: var(--mono); font-size: 12px; color: var(--violet); padding-top: 3px; }
.mega .t { font-size: 15px; font-weight: 500; }
.mega .d { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 14px; border-radius: 14px; background: var(--grad-soft); font-size: 14px; color: var(--muted); }
.mega-foot a { display: inline-flex; grid-template-columns: none; padding: 0; color: var(--violet-deep); font-weight: 500; }
.mega-foot a:hover { background: none; color: var(--violet); }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-cta .signin { display: none; font-size: 15px; color: var(--ink-2); }
.header-cta .signin:hover { color: var(--violet); }
.header-cta .btn { display: none; }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; }
.menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-btn span + span { margin-top: 6px; width: 14px; justify-self: end; }
.menu-btn i { display: grid; }
@media (min-width: 560px) { .header-cta .btn { display: inline-flex; } }
@media (min-width: 1080px) {
  .nav { display: block; }
  .header-cta .signin { display: inline; }
  .menu-btn { display: none; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto;
  display: flex; flex-direction: column; padding: 0 var(--gutter) 40px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.mobile-menu .bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); flex: none; }
.mobile-menu .close { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; }
.mobile-menu details { border-bottom: 1px solid var(--line); }
.mobile-menu summary, .mobile-menu .m-link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 26px; letter-spacing: -.02em; list-style: none; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu .m-link { border-bottom: 1px solid var(--line); }
.mobile-menu details[open] summary .pm { transform: rotate(45deg); }
.mobile-menu .pm { transition: transform .25s var(--ease); font-weight: 300; color: var(--violet); }
.mobile-menu .sub { padding: 0 0 18px; display: grid; gap: 4px; }
.mobile-menu .sub a { padding: 8px 0; font-size: 17px; color: var(--ink-2); }
.mobile-menu .m-actions { margin-top: 32px; display: grid; gap: 12px; }
.mobile-menu .m-actions .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* ---------- Aurora (shared animated light field) ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .75; will-change: transform; }
.aurora i:nth-child(1) { width: 52%; aspect-ratio: 1; left: -8%; top: -18%; background: radial-gradient(circle, rgba(142, 128, 255, .75), rgba(142, 128, 255, 0) 70%); animation: drift-a 22s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 46%; aspect-ratio: 1; right: -10%; top: 4%; background: radial-gradient(circle, rgba(79, 168, 245, .6), rgba(79, 168, 245, 0) 70%); animation: drift-b 26s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 40%; aspect-ratio: 1; left: 30%; bottom: -30%; background: radial-gradient(circle, rgba(255, 181, 154, .55), rgba(255, 181, 154, 0) 70%); animation: drift-c 30s ease-in-out infinite; }
@keyframes drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, 10%) scale(1.12); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14%, 12%) scale(.92); } }
@keyframes drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10%, -14%) scale(1.15); } }

/* ---------- Hero (full-bleed, live 3D story of one claim) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(640px, calc(100svh - var(--header-h) - 40px));
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(70% 80% at 12% 10%, #F6F3FF 0%, rgba(246, 243, 255, 0) 60%), linear-gradient(180deg, #F1EEFF 0%, #E9E5FC 70%, var(--bg) 100%);
}
.hero-scene { position: absolute; inset: 0; z-index: 0; }
.hero-scene::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(240, 237, 254, .9) 0%, rgba(240, 237, 254, .55) 32%, rgba(240, 237, 254, 0) 52%); }
.hero-scene > .iso { position: absolute; inset: 0 0 0 30%; width: 70%; height: 100%; animation: float 9s ease-in-out infinite; }
.hero-scene.is-3d > .iso { display: none; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.hero-scene.is-3d .hero-canvas { opacity: 1; }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; z-index: 1; background: linear-gradient(180deg, rgba(247, 246, 252, 0), var(--bg)); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 112px) clamp(72px, 9vw, 120px); display: grid; gap: clamp(40px, 6vw, 88px); pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-copy { max-width: 620px; }
.hero-copy .lede { margin-top: 26px; max-width: 32ch; }
.hero-copy .actions { margin-top: 38px; }
.tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.tag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); margin-right: 8px; vertical-align: 1px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Stage chips name the parts of the story; hovering or tapping one shows its step. */
.hero-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.hero-scene.is-3d .hero-chips { display: block; }
.hero-chips span {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px -14px rgba(58, 43, 217, .45), inset 0 0 0 1px rgba(255, 255, 255, .9);
  opacity: 0; transition: opacity .6s var(--ease), color .3s, background-color .3s, box-shadow .3s; will-change: transform;
}
.hero-chips span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background .3s, box-shadow .3s; }
.hero-chips span.on { opacity: .82; pointer-events: auto; }
.hero-chips span.on:hover, .hero-chips span.on.is-active { opacity: 1; color: var(--ink); background: #fff; box-shadow: 0 12px 28px -12px rgba(58, 43, 217, .6), inset 0 0 0 1px rgba(91, 76, 255, .28); }
.hero-chips span.is-active::before { background: var(--grad); box-shadow: 0 0 0 3px rgba(91, 76, 255, .16); }

/* The step bar narrates the story; each step can be shown on demand. */
.hero-story { display: none; }
.hero-scene.is-3d ~ .hero-story {
  display: grid; gap: 10px; position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(24px, 3.4vw, 48px);
  width: min(540px, 42vw); padding: 14px 18px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .68); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 26px 60px -34px rgba(58, 43, 217, .5), inset 0 0 0 1px rgba(255, 255, 255, .92);
}
.story-head { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story-k { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.story-k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(46, 191, 165, .45); animation: live 2.4s var(--ease) infinite; }
.hero-story.is-paused .story-k::before, .vg.is-paused .story-k::before { animation: none; background: var(--faint); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(46, 191, 165, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(46, 191, 165, 0); } }
.story-note { margin-left: auto; color: var(--faint); }
.story-toggle { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--violet); background: rgba(91, 76, 255, .08); transition: background .2s; }
.story-toggle:hover { background: rgba(91, 76, 255, .16); }
.story-toggle span { width: 9px; height: 10px; box-sizing: border-box; border-inline: 3px solid currentColor; }
.hero-story.is-paused .story-toggle span, .vg.is-paused .story-toggle span { width: 0; height: 0; border-inline: 0; border-left: 9px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }
.story-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.story-step { position: relative; width: 100%; min-height: 44px; display: grid; align-content: center; gap: 2px; padding: 4px 0 10px; text-align: left; }
.story-step .sn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--faint); transition: color .3s; }
.story-step .sl { font-size: 12.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; transition: color .3s; }
.story-step::before, .story-step::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; }
.story-step::before { background: rgba(91, 76, 255, .14); }
.story-step::after { background: var(--grad); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.story-step:hover .sl, .story-step[aria-current] .sl { color: var(--ink); }
.story-step[aria-current] .sn { color: var(--violet); }
.story-cap-k { display: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.story-cap { font-size: 15px; line-height: 1.45; color: var(--ink); min-height: 2.9em; }
@media (max-width: 1239px) {
  .hero-story .story-step { justify-items: center; text-align: center; }
  .hero-story .story-step .sl { display: none; }
  .hero-story .story-cap-k { display: block; margin-bottom: -4px; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .hero-scene { position: relative; inset: auto; order: 2; height: clamp(360px, 96vw, 540px); margin-top: -8px; }
  .hero-scene > .iso { inset: 0; width: 100%; }
  .hero-canvas { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%); }
  .hero-scene::after { display: none; }
  .hero-inner { order: 1; padding-block: 48px 0; }
  .hero-chips span { font-size: 9.5px; padding: 5px 9px 5px 7px; gap: 6px; }
  .hero-chips span:not(.is-active) { opacity: 0 !important; pointer-events: none !important; }
  .hero-scene.is-3d ~ .hero-story { position: relative; order: 3; right: auto; bottom: auto; width: auto; margin: -20px var(--gutter) 40px; }
  .story-cap { font-size: 14.5px; }
}
@media (max-width: 420px) {
  .story-note { display: none; }
  .story-head .story-toggle { margin-left: auto; }
}

.page-hero { position: relative; isolation: isolate; padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(40px, 6vw, 80px); }
.page-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; background: radial-gradient(60% 70% at 85% 0%, rgba(142, 128, 255, .18), transparent 70%), radial-gradient(40% 50% at 0% 20%, rgba(79, 168, 245, .12), transparent 70%); pointer-events: none; }
.page-hero .crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.page-hero .crumbs a:hover { color: var(--violet); }
.page-hero .lede { margin-top: 0; }
.page-hero .actions { margin-top: 32px; }
.page-hero-media { position: relative; margin-top: clamp(40px, 6vw, 72px); border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 7; max-width: 100%; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.page-hero-media .iso { width: 100%; height: 100%; }
@media (max-width: 700px) { .page-hero-media { aspect-ratio: 4 / 3; } }
.page-hero-media--vg, .page-hero-media--vg[class] { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }

/* ---------- Iso illustrations ---------- */
.iso-label { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; fill: var(--muted); }
.iso-flow { animation: iso-flow 2.4s linear infinite; }
.iso-flow--slow { animation-duration: 5s; }
.iso-pulse { animation: iso-pulse 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes iso-flow { to { stroke-dashoffset: -160; } }
@keyframes iso-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .7; } }

/* ---------- Statement + numbers ---------- */
.statement { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.14; letter-spacing: -.03em; max-width: 22ch; }
.statement .muted { color: var(--faint); }
.numbers { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .numbers { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.numbers > div { padding: 28px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-1); }
.numbers .k { font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -.045em; line-height: 1; font-weight: 300; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numbers .v { margin-top: 14px; color: var(--muted); max-width: 30ch; }
/* A word in a row of figures: smaller, but on the same baseline. */
.numbers .k--word { font-size: clamp(28px, 2.9vw, 40px); letter-spacing: -.03em; padding-top: calc(clamp(44px, 4.6vw, 64px) - clamp(28px, 2.9vw, 40px)); }

/* ---------- Cards (illustrated) ---------- */
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; display: block; padding: 12px 12px 28px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card .media { aspect-ratio: 4 / 3; max-width: 100%; border-radius: calc(var(--r) - 8px); overflow: hidden; background: var(--grad-soft); }
.card .media .iso { width: 100%; height: 100%; transform: scale(1.18); transition: transform 1.2s var(--ease); }
.card:hover .media .iso { transform: scale(1.24); }
.card h3 { margin: 24px 16px 0; }
.card p { margin: 10px 16px 0; color: var(--muted); max-width: 40ch; }
.card .rule { display: none; }

/* ---------- Feature tiles ---------- */
.features { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .features { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 1080px) { .features--3 { grid-template-columns: repeat(3, 1fr); } }
.feature {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px 28px 30px; border-radius: var(--r); background: var(--paper);
  box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feature::before, .card::before, .row::before, .path a::before, .trust > div::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(142, 128, 255, .16), transparent 70%);
}
.feature:hover, .trust > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.feature:hover::before, .card:hover::before, .row:hover::before, .path a:hover::before, .trust > div:hover::before { opacity: 1; }
.section--paper .feature, .section--paper .numbers > div, .section--paper .trust > div, .section--paper .faq details { background: var(--bg); box-shadow: none; }
.section--paper .feature:hover, .section--paper .trust > div:hover { background: var(--paper); box-shadow: var(--shadow-2); }
.feature .n {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--violet-deep); letter-spacing: .04em;
  background: linear-gradient(135deg, rgba(142, 128, 255, .18), rgba(79, 168, 245, .14));
}
.feature h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.25; font-weight: 500; margin-top: 20px; }
.feature .n + h3 { margin-top: 20px; }
.feature h3:first-child { margin-top: 0; }
.feature p { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.feature a.more { display: inline-flex; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--violet-deep); }
.feature a.more:hover { color: var(--violet); }
.feature h3 .muted { font-weight: 400; }

.specs { display: grid; grid-template-columns: 1fr; column-gap: clamp(28px, 4vw, 64px); }
@media (min-width: 680px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 0 26px; border-top: 1px solid var(--line-2); }
.spec::before { content: ''; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; border-radius: 2px; background: var(--grad); }
.spec h3 { font-size: 17px; letter-spacing: -.01em; line-height: 1.3; font-weight: 500; }
.spec p { color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 38ch; }

/* ---------- Steps (sticky visual) ---------- */
.steps { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 960px) { .steps { grid-template-columns: 6fr 5fr; } }
.steps-visual { position: relative; }
.steps-visual .frame { position: sticky; top: calc(var(--header-h) + 32px); aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--r); overflow: hidden; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.steps-visual .frame > .iso { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.96); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.steps-visual .frame > .iso.is-active { opacity: 1; transform: none; }
.no-js .steps-visual .frame > .iso:first-child { opacity: 1; }
@media (max-width: 959px) { .steps-visual { display: none; } }
.step { position: relative; padding: 32px 0 36px 28px; transition: opacity .5s var(--ease); }
.step::before { content: ''; position: absolute; left: 0; top: 36px; bottom: 36px; width: 2px; border-radius: 2px; background: var(--line-2); opacity: .5; }
.step::after { content: ''; position: absolute; left: 0; top: 36px; bottom: 36px; width: 2px; border-radius: 2px; background: var(--grad); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease); }
.step.is-active::after { transform: none; }
.js .steps--live .step { opacity: .4; }
.js .steps--live .step.is-active { opacity: 1; }
@media (max-width: 959px) { .js .steps--live .step { opacity: 1; } .step::after { transform: none; } }
.step .n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--violet); text-transform: uppercase; }
.step h3 { margin-top: 14px; }
.step p { margin-top: 12px; color: var(--muted); max-width: 46ch; }
.step ul { margin-top: 16px; display: grid; gap: 8px; }
.step li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.step li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); margin-top: 9px; flex: none; }
.step .ui { margin-top: 22px; }

/* ---------- Big metrics ---------- */
.metrics { display: grid; grid-template-columns: 1fr; gap: 32px 24px; }
@media (min-width: 640px) { .metrics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .metrics--4 { grid-template-columns: repeat(4, 1fr); } .metrics--3 { grid-template-columns: repeat(3, 1fr); } }
.metric { position: relative; padding-top: 4px; }
.metric .k {
  font-size: clamp(56px, 6.6vw, 104px); line-height: .95; letter-spacing: -.055em; font-weight: 300; font-variant-numeric: tabular-nums;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em;
}
.metrics--4 .metric .k { font-size: clamp(44px, 4.8vw, 76px); }
.metric .k { white-space: nowrap; }
.metric .v { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 24ch; }
.metric .b { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.footnote { margin-top: 36px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 80ch; }

/* ---------- Rows (index list) ---------- */
.rows { display: grid; gap: 10px; }
.row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 40px 1fr auto; gap: 6px 18px; align-items: center;
  padding: 22px 22px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (min-width: 900px) { .row { grid-template-columns: 64px 5fr 6fr 48px; padding: 26px 28px; } }
.section--paper .row { background: var(--bg); box-shadow: none; }
.row .n { font-family: var(--mono); font-size: 13px; color: var(--violet); }
.row .t { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.15; }
.row .d { color: var(--muted); grid-column: 2 / 4; }
@media (min-width: 900px) { .row .d { grid-column: auto; } }
.row .go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--violet-deep); transition: background .3s, color .3s, transform .5s var(--ease); grid-row: 1; grid-column: 3; }
@media (min-width: 900px) { .row .go { grid-column: 4; } }
a.row:hover { transform: translateX(6px); box-shadow: var(--shadow-2); }
a.row:hover .go { background: var(--grad); color: #fff; transform: rotate(-45deg); }

/* ---------- Tabs ---------- */
.tabs-nav { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 5px; border-radius: 999px; background: var(--mist); max-width: 100%; }
.tabs-nav button { position: relative; padding: 10px 18px; font-size: 15px; color: var(--muted); border-radius: 999px; transition: color .25s, background .35s var(--ease), box-shadow .35s var(--ease); }
.tabs-nav button[aria-selected="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 6px 16px -8px rgba(58, 43, 217, .4); }
.tabs-nav button:hover { color: var(--ink); }
.tab-panel { padding-top: clamp(32px, 4vw, 56px); display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 960px) { .tab-panel { grid-template-columns: 5fr 6fr; } }
.tab-panel[hidden] { display: none; }
.js .tab-panel:not([hidden]) { animation: panel-in .7s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
.tab-panel h3 { margin-top: 12px; }
.tab-panel .prose p + p { margin-top: 16px; }
.tab-panel .prose p { color: var(--ink-2); }
.tab-panel .prose .label { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); margin-top: 28px; display: block; }
.tab-stats { display: grid; gap: 10px; align-self: start; }
.tab-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4px 24px; min-width: 0; padding: 22px 26px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1); }
.tab-stats .k { min-width: 0; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.035em; line-height: 1.08; font-weight: 300; overflow-wrap: break-word; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tab-stats .v { min-width: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 480px) { .tab-stats > div { grid-template-columns: 1fr; padding: 18px 20px; } }
.screen-tabs .tabs-nav { margin-bottom: 28px; }
.screen-tabs .screen[hidden] { display: none; }

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .trust { grid-template-columns: repeat(6, 1fr); } }
.trust > div { position: relative; isolation: isolate; overflow: hidden; padding: 22px 20px 24px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.trust .k { font-size: 19px; letter-spacing: -.015em; font-weight: 500; }
.trust .k::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--grad); margin-bottom: 16px; }
.trust .v { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }

.logos { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--mono); font-size: 12.5px; padding: 9px 14px; border-radius: 999px; color: var(--ink-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Checks ---------- */
.checks { display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: baseline; font-size: clamp(17px, 1.4vw, 19px); letter-spacing: -.005em; color: var(--ink-2); }
.checks li::before {
  content: ''; flex: none; width: 20px; height: 20px; transform: translateY(4px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235B4CFF'/%3E%3Cstop offset='1' stop-color='%234FA8F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)'/%3E%3Cpath d='M6 10.3l2.6 2.5L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Thesis ---------- */
.thesis { font-size: clamp(28px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -.035em; max-width: 24ch; }
/* ---------- Story (problem / answer) ---------- */
.story { display: grid; gap: 16px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 20px; } }
.story > div { padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-1); }
.story > div + div { background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(142, 128, 255, .22); }
.story .label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story > div + div .label { color: var(--violet); }
.story p { margin-top: 16px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.42; letter-spacing: -.01em; }

.path { display: grid; gap: 12px; }
@media (min-width: 760px) { .path { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.path a { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 26px 26px 28px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.path a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.path .s { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); }
.path .m { margin-top: 12px; font-size: 24px; letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Product UI (screens) ---------- */
.ui {
  background: var(--paper); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(58, 43, 217, .08), 0 40px 80px -44px rgba(58, 43, 217, .45); font-size: 13.5px; color: var(--ink);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease);
}
.ui-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #FBFAFF; }
.ui-dots { display: flex; gap: 6px; }
.ui-dots i { width: 9px; height: 9px; border-radius: 50%; background: #DCD8F2; }
.ui-dots i:first-child { background: #FFB4A6; } .ui-dots i:nth-child(2) { background: #FFD98A; } .ui-dots i:nth-child(3) { background: #9FE0B8; }
.ui-url { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-body { padding: 18px; }
/* Product screens assemble on reveal: rows land in order, then their statuses settle. */
.js .ui .ui-body > * { opacity: 0; translate: 0 10px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.js .ui.in .ui-body > * { opacity: 1; translate: none; }
.js .ui.in .ui-body > :nth-child(2) { transition-delay: 0.07s; }
.js .ui.in .ui-body > :nth-child(3) { transition-delay: 0.14s; }
.js .ui.in .ui-body > :nth-child(4) { transition-delay: 0.21s; }
.js .ui.in .ui-body > :nth-child(5) { transition-delay: 0.28s; }
.js .ui.in .ui-body > :nth-child(6) { transition-delay: 0.35s; }
.js .ui.in .ui-body > :nth-child(7) { transition-delay: 0.42s; }
.js .ui.in .ui-body > :nth-child(8) { transition-delay: 0.49s; }
.js .ui.in .ui-body > :nth-child(9) { transition-delay: 0.56s; }
.js .ui.in .ui-body > :nth-child(10) { transition-delay: 0.63s; }
.js .ui .ui-body .pill { scale: .8; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1); }
.js .ui.in .ui-body .pill { scale: 1; transition-delay: .5s; }
.ui-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ui-title { font-weight: 500; font-size: 15px; }
.ui-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.ui-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; background: #F6F4FD; }
.ui-row + .ui-row { margin-top: 6px; }
.ui-row .code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ui-row .who { min-width: 0; }
.ui-row .who b { display: block; font-weight: 500; font-size: 13.5px; }
.ui-row .who span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row .amt { font-family: var(--mono); font-size: 13px; }
.ui-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ui-kv:last-child { border-bottom: 0; }
.ui-kv span:first-child { color: var(--muted); }
.ui-big { font-size: 40px; letter-spacing: -.04em; line-height: 1; font-weight: 300; }
.ui-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.ui-cell { background: #F6F4FD; border-radius: 10px; padding: 12px; }
.ui-cell .l { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ui-cell .v { margin-top: 6px; font-size: 20px; letter-spacing: -.02em; }
.ui-bar-track { height: 6px; border-radius: 3px; background: #ECE9FF; overflow: hidden; margin-top: 10px; }
.ui-bar-track i { display: block; height: 100%; background: var(--grad); border-radius: 3px; width: 0; transition: width 1.4s var(--ease); }
.ui-note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--violet-soft); color: #2C2296; font-size: 13.5px; line-height: 1.5; }
.ui-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-col { background: #F6F4FD; border-radius: 10px; padding: 14px; }
.ui-col h5 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 8px; }
.ui-col h5 i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ui-col h5 i.v { background: var(--violet); }
.ui-col li { font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); }
.ui-col ul { margin: 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: #E4F6EC; color: var(--ok); }
.pill--v { background: var(--violet-soft); color: var(--violet); }
.pill--warn { background: #FDF0E1; color: var(--warn); }
.pill--n { background: #EFEDF7; color: var(--ink-2); }
.ui-hash { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ui-vote { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: #F6F4FD; border-radius: 10px; }
.ui-vote + .ui-vote { margin-top: 6px; }
.ui-vote b { font-weight: 500; }
.ui-dist { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin-top: 14px; }
.ui-dist i { flex: 1; background: #E2E0F0; border-radius: 2px 2px 0 0; }
.ui-dist i.on { background: var(--violet); }

.showcase { display: grid; gap: clamp(32px, 4vw, 72px); align-items: center; }
@media (min-width: 960px) { .showcase { grid-template-columns: 5fr 7fr; } .showcase--rev { grid-template-columns: 7fr 5fr; } .showcase--rev > :first-child { order: 2; } }
.showcase .h2 { font-size: clamp(30px, 3.3vw, 46px); }
.showcase-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: clamp(20px, 4vw, 56px); background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.showcase-stage::before { content: ''; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -20%; top: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(142, 128, 255, .35), transparent 70%); filter: blur(30px); animation: drift-b 24s ease-in-out infinite; }
.showcase-stage::after { content: ''; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; left: -18%; bottom: -34%; border-radius: 50%; background: radial-gradient(circle, rgba(79, 168, 245, .3), transparent 70%); filter: blur(30px); animation: drift-a 28s ease-in-out infinite; }
/* Grid children may shrink below their content, so mockups never widen the page. */
.showcase > *, .split > *, .grid-2 > *, .steps > *, .tab-panel > *, .faq-wrap > * { min-width: 0; }
.badge-card { display: flex; flex-direction: column; align-items: center; gap: 18px; background: #fff; border-radius: 20px; padding: clamp(24px, 4vw, 40px); text-align: center; box-shadow: var(--shadow-2); transition: transform .5s var(--ease); }
.badge-card:hover { transform: translateY(-4px) rotate(-.5deg); }
.badge-card img { width: min(240px, 70%); height: auto; }
.badge-card span { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.badge-card:hover span { color: var(--violet); }
@media (max-width: 560px) {
  .showcase-stage { padding: 12px; border-radius: 20px; }
  .ui { font-size: 12.5px; }
  .ui-body { padding: 12px; }
  .ui-row { grid-template-columns: 1fr auto; gap: 8px; }
  .ui-row .code, .ui-row .amt { display: none; }
  .ui-grid { grid-template-columns: 1fr 1fr; }
  .ui-cols { grid-template-columns: 1fr; }
  .ui-big { font-size: 32px; }
}

/* ---------- Availability ---------- */
.avail { border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-1); padding: 6px clamp(18px, 2.5vw, 32px); }
.section--paper .avail { background: var(--bg); box-shadow: none; }
.avail-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 2fr); gap: 10px 32px; align-items: baseline; padding: 18px 0; }
.avail-row + .avail-row { border-top: 1px solid var(--line); }
.avail-row .cap { font-size: 17px; letter-spacing: -.01em; font-weight: 500; }
.avail-row .note { color: var(--muted); font-size: 15px; line-height: 1.5; }
.st { justify-self: start; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.st--on { background: #E4F6EC; color: var(--ok); }
.st--gate { background: #FDF0E1; color: var(--warn); }
.st--eval { background: var(--violet-soft); color: var(--violet); }
.st--built { background: #E6EEF9; color: #2D5A8A; }
.st--dev { background: #EFEDF7; color: var(--ink-2); }
.avail-key { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 24px 0 0; }
.avail-key div { display: flex; align-items: baseline; gap: 10px; }
.avail-key dd { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .avail-row { grid-template-columns: 1fr auto; } .avail-row .note { grid-column: 1 / -1; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1); transition: box-shadow .4s var(--ease); }
.faq details[open] { box-shadow: var(--shadow-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 24px; cursor: pointer; list-style: none; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--mist); color: var(--violet-deep); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s, color .3s; font-family: var(--mono); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--grad); color: #fff; }
.faq .a { padding: 0 24px 24px; color: var(--ink-2); max-width: 70ch; }
.js .faq details[open] .a { animation: panel-in .5s var(--ease); }
@media (min-width: 960px) { .faq-wrap { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; } .faq-wrap > .stack-m { position: sticky; top: calc(var(--header-h) + 32px); } }
.faq-wrap > .stack-m { margin-bottom: 32px; }
@media (min-width: 960px) { .faq-wrap > .stack-m { margin-bottom: 0; } }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; color: #fff; margin: 0 clamp(8px, 1.4vw, 20px); border-radius: 32px; background: var(--grad); background-size: 160% 160%; animation: cta-shift 18s ease-in-out infinite; }
@keyframes cta-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cta > .iso { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.cta > .aurora i { mix-blend-mode: screen; opacity: .45; }
.cta .container { position: relative; z-index: 2; padding-block: clamp(88px, 12vw, 176px); }
.cta h2 { max-width: 15ch; }
.cta .lede { margin-top: 22px; color: rgba(255, 255, 255, .82); }
.cta .actions { margin-top: 36px; }
.cta .eyebrow { color: rgba(255, 255, 255, .85); }
.cta .eyebrow::before { background: #fff; }
.cta .accent { background: linear-gradient(100deg, #fff, #DCD6FF 50%, #CFE8FF); -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; }
.cta::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(42, 30, 190, .55) 0%, rgba(42, 30, 190, .2) 55%, rgba(42, 30, 190, 0) 100%); pointer-events: none; }
.cta .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.cta .btn--ghost:hover { background: #fff; color: var(--violet-deep); }

/* ---------- Forms ---------- */
.form { background: var(--paper); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-2); }
.form h2 { font-size: 26px; letter-spacing: -.02em; font-weight: 400; }
.form .hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
.fields { display: grid; gap: 18px; margin-top: 28px; }
.fields-2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(91, 76, 255, .12); }
.field textarea { resize: vertical; min-height: 120px; }
.form .btn { width: 100%; margin-top: 28px; min-height: 54px; font-size: 16px; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form .alt { margin-top: 18px; font-size: 14px; color: var(--muted); }
.form .alt a { color: var(--violet-deep); }
.form-error { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 14.5px; }
.form-done h2 { font-size: 30px; }
.form-done p { margin-top: 14px; color: var(--ink-2); }
.form-done .ref { margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.form-done .btn { width: auto; }
.assure { display: grid; gap: 10px; margin-top: 28px; }
.assure span { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.assure span::before { content: ''; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(46, 191, 165, .15); }

/* ---------- ROI calculator ---------- */
.roi { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .roi { grid-template-columns: 1fr 1fr; align-items: start; } }
.roi-input { display: grid; gap: 36px; align-content: start; padding-top: 8px; }
.roi-input label { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-2); }
.roi-input output { font-family: var(--mono); color: var(--violet-deep); }
.roi input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--iris), var(--sky)); margin-top: 18px; }
.roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(91, 76, 255, .18), 0 4px 10px rgba(58, 43, 217, .4); cursor: pointer; }
.roi input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(91, 76, 255, .18), 0 4px 10px rgba(58, 43, 217, .4); cursor: pointer; }
.roi-out { position: relative; overflow: hidden; isolation: isolate; background: var(--grad); background-size: 160% 160%; animation: cta-shift 16s ease-in-out infinite; color: #fff; border-radius: var(--r); padding: clamp(28px, 3.5vw, 48px); box-shadow: 0 40px 80px -40px rgba(58, 43, 217, .7); }
.roi-out .muted, .roi-out .eyebrow { color: rgba(255, 255, 255, .8); }
.roi-out .eyebrow::before { background: #fff; }
.roi-out .big { font-size: clamp(48px, 6vw, 80px); letter-spacing: -.05em; line-height: 1; font-weight: 300; margin-top: 16px; font-variant-numeric: tabular-nums; }
.roi-out .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.roi-out .grid > div { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .12); }
.roi-out .grid .k { font-size: 22px; letter-spacing: -.02em; }
.roi-out .grid .v { font-size: 13px; color: rgba(255, 255, 255, .78); margin-top: 4px; }

/* ---------- Legal prose ---------- */
.prose-legal { max-width: 760px; }
.legal { display: grid; gap: 28px; }
.legal-toc { font-size: 14px; }
.legal-toc summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: var(--r-s); background: var(--paper); box-shadow: var(--shadow-1); font-weight: 500; cursor: pointer; list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after { content: '+'; font-family: var(--mono); color: var(--violet); }
.legal-toc[open] summary::after { content: '–'; }
.legal-toc-k { display: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 14px 0 0; padding: 0; border-left: 1px solid var(--line-2); }
.legal-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; line-height: 1.35; color: var(--muted); transition: color .3s, border-color .3s; }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a[aria-current] { color: var(--violet-deep); border-left-color: var(--violet); }
@media (min-width: 1024px) {
  .legal { grid-template-columns: 220px minmax(0, 760px); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 36px); max-height: calc(100vh - var(--header-h) - 72px); overflow-y: auto; }
  .legal-toc summary { display: none; }
  .legal-toc-k { display: block; }
}
.prose-legal h1 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -.04em; line-height: 1.02; font-weight: 400; }
.prose-legal h1 + p { margin-top: 20px; font-size: 20px; color: var(--ink-2); }
.prose-legal h2 { font-size: 28px; letter-spacing: -.02em; font-weight: 400; margin-top: 56px; }
.prose-legal h3 { font-size: 20px; letter-spacing: -.01em; font-weight: 500; margin-top: 36px; }
.prose-legal p, .prose-legal li { color: var(--ink-2); }
.prose-legal p { margin-top: 14px; }
.prose-legal ul, .prose-legal ol { margin-top: 14px; padding-left: 22px; }
.prose-legal li + li { margin-top: 6px; }
.prose-legal a { color: var(--violet-deep); border-bottom: 1px solid rgba(91, 76, 255, .3); }
.prose-legal a:hover { color: var(--violet); border-color: var(--violet); }
.prose-legal strong { font-weight: 500; color: var(--ink); }
.prose-legal table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.prose-legal th, .prose-legal td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(64px, 8vw, 104px); background: linear-gradient(180deg, var(--bg) 0%, #EEEAFD 60%, #E6EEFD 100%); color: var(--ink); }
.cta + .footer, main:has(> .cta:last-child) + .footer { margin-top: clamp(20px, 2vw, 28px); }
.footer-top { display: grid; gap: 48px; padding-bottom: 48px; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer .blurb { margin-top: 18px; color: var(--muted); max-width: 32ch; font-size: 15px; }
.footer .blurb + .btn { margin-top: 26px; }
.footer h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); font-weight: 400; }
.footer ul { margin-top: 18px; display: grid; gap: 10px; }
.footer ul a { font-size: 15px; color: var(--ink-2); transition: color .2s; }
.footer ul a:hover { color: var(--violet); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; padding: 24px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom a:hover { color: var(--violet); }
/* The wordmark spans the content width exactly and is never cropped: 24cqi fits "VAERION" (≈3.94em wide in
   Geist 500 at -.06em tracking) with room to spare, and the gradient only paints inside the box, so the
   box keeps every glyph inside it: full line height, and end padding for the last letter's tracking. */
.footer .container { container-type: inline-size; }
.wordmark {
  font-size: 24cqi; line-height: 1; letter-spacing: -.06em; font-weight: 500;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .16;
  padding: .04em .06em .1em 0; user-select: none; white-space: nowrap; text-align: center;
}

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }
.js .reveal.words { opacity: 1; transform: none; filter: none; }
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.words .w > .wi { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.words.in .w > .wi { transform: none; }
.words .w--accent { padding-right: .08em; margin-right: -.08em; }
.js .showcase-stage.reveal, .js .page-hero-media.reveal { transform: translateY(40px) scale(.97); }
.js .showcase-stage.reveal.in, .js .page-hero-media.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .showcase-stage.reveal, .js .page-hero-media.reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .words .w > .wi { transform: none; transition: none; }
  .iso-flow, .iso-pulse, .hero-scene > .iso, .story-k::before, .aurora i, .accent, .cta, .roi-out, .showcase-stage::before, .showcase-stage::after, .hero-stage::before, .hero-stage::after { animation: none; }
  .card .media .iso, .ui-bar-track i, .ui, .feature, .card, .row, .path a, .trust > div, .btn { transition: none; }
  .js .ui .ui-body > *, .js .ui .ui-body .pill { opacity: 1; translate: none; scale: 1; transition: none; }
  .legal-toc a { transition: none; }
  .progress { display: none; }
}

/* ---------- 404 ---------- */
.nf { min-height: 64vh; display: grid; align-content: center; align-items: center; gap: clamp(40px, 6vw, 88px); }
@media (min-width: 960px) { .nf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nf .vg-stage { border-radius: var(--r); min-height: 340px; }
.vc--held { width: 20em; }
.vc-path { margin-bottom: .6em; padding: .55em .75em; border-radius: .6em; font-size: .86em; color: var(--ink-2); background: var(--violet-soft); overflow-wrap: anywhere; }
.nf .k { font-family: var(--mono); color: var(--violet); }

/* ---------- Spacing helpers & contextual fixes ---------- */
.spacer-m { margin-top: 32px; }
.spacer-l { height: clamp(40px, 5vw, 72px); }
.grid-2 + .numbers { margin-top: clamp(48px, 6vw, 88px); }
.footnote + .actions, .metrics + .actions { margin-top: 28px; }
.head + .trust, .head + .features, .head + .rows { margin-top: 0; }
.footer ul, .step ul, .checks { list-style: none; padding: 0; }
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; }
.sheet figure { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.sheet .a { aspect-ratio: 4/3; } .sheet .b { aspect-ratio: 16/7; }
.sheet .a .iso, .sheet .b .iso { width: 100%; height: 100%; }
.sheet figcaption { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; }

/* ---------- Living stories (vignettes): state machinery ----------
   a0…aN mark the steps reached, data-s the current one. Generated selectors, k = 0…7. */
.vg [data-from] { opacity: 0; translate: 0 .7em; transition: opacity .6s var(--ease), translate .8s var(--ease), transform .9s var(--ease); }
.vg .grow[data-from] { translate: none; transform: scaleX(0); transform-origin: left center; }
.vg .drop[data-from] { translate: 0 -1.8em; }
.vg.a0 [data-from="0"], .vg.a1 [data-from="1"], .vg.a2 [data-from="2"], .vg.a3 [data-from="3"], .vg.a4 [data-from="4"], .vg.a5 [data-from="5"], .vg.a6 [data-from="6"], .vg.a7 [data-from="7"] { opacity: 1; translate: none; transform: none; }
.vg.a0 [data-until="0"], .vg.a1 [data-until="1"], .vg.a2 [data-until="2"], .vg.a3 [data-until="3"], .vg.a4 [data-until="4"], .vg.a5 [data-until="5"], .vg.a6 [data-until="6"], .vg.a7 [data-until="7"] { opacity: 0; translate: 0 -.5em; }
.vg-instant, .vg-instant * { transition: none !important; }
.vg-stage.is-out { opacity: 0; }

/* ---------- Living stories: frame, cards, primitives ---------- */
.vg { position: relative; container: vg / inline-size; }
.vg-stage {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  padding: clamp(22px, 5cqi, 64px) clamp(14px, 4cqi, 56px);
  font-size: clamp(11.5px, 1.27cqi, 15px); line-height: 1.4; color: var(--ink);
  background: var(--grad-soft); transition: opacity .45s var(--ease);
}
.vg-stage::before, .vg-stage::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; animation-play-state: paused; }
.vg-stage::before { width: 60%; aspect-ratio: 1; right: -18%; top: -40%; background: radial-gradient(circle, rgba(142, 128, 255, .34), transparent 70%); animation: drift-b 26s ease-in-out infinite; }
.vg-stage::after { width: 50%; aspect-ratio: 1; left: -14%; bottom: -44%; background: radial-gradient(circle, rgba(79, 168, 245, .26), transparent 70%); animation: drift-a 30s ease-in-out infinite; }
.vg.is-live .vg-stage::before, .vg.is-live .vg-stage::after { animation-play-state: running; }
.vg .mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.vg .pill { font-size: .66em; padding: .4em .8em; gap: .45em; }
.vg .pill::before { width: .5em; height: .5em; }
.swap { display: inline-grid; justify-items: end; align-items: center; }
.swap > * { grid-area: 1 / 1; }

.vg-flow { position: relative; display: flex; align-items: center; justify-content: center; }
.vg-col { display: grid; gap: 1em; }
.vg-link { position: relative; flex: 0 0 3.4em; height: 2px; margin: 0 .5em; border-radius: 2px; overflow: hidden; background: rgba(91, 76, 255, .22); }
.vg-link::after { content: ''; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--violet), transparent); animation: vg-pulse 1.9s linear infinite paused; }
.vg.is-live .vg-link::after { animation-play-state: running; }
@keyframes vg-pulse { from { translate: -110% 0; } to { translate: 230% 0; } }

.vc {
  position: relative; width: 19em; max-width: 100%; padding: 1.1em 1.25em 1.2em; border-radius: 1.15em;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(22, 19, 58, .05), 0 1.8em 3.4em -2em rgba(58, 43, 217, .4), inset 0 0 0 1px rgba(255, 255, 255, .95);
  transition: opacity .6s var(--ease), translate .8s var(--ease), box-shadow .6s var(--ease), scale .8s var(--ease);
}
.vg[data-s="0"] .vc[data-on~="0"], .vg[data-s="1"] .vc[data-on~="1"], .vg[data-s="2"] .vc[data-on~="2"], .vg[data-s="3"] .vc[data-on~="3"], .vg[data-s="4"] .vc[data-on~="4"], .vg[data-s="5"] .vc[data-on~="5"], .vg[data-s="6"] .vc[data-on~="6"], .vg[data-s="7"] .vc[data-on~="7"] { box-shadow: 0 1px 2px rgba(22, 19, 58, .05), 0 2.2em 4em -2em rgba(58, 43, 217, .55), 0 0 0 1.5px rgba(91, 76, 255, .38); scale: 1.025; }
.vc-h { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; margin-bottom: .75em; }
.vc-t { font-weight: 500; font-size: 1.02em; letter-spacing: -.01em; }
.vc-s { font-family: var(--mono); font-size: .64em; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vc-r { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .5em 0; border-top: 1px solid var(--line); font-size: .88em; }
.vc-r > span:first-child { color: var(--muted); }
.vc-r > span:last-child { text-align: right; }
.vc-h + .vc-r, .vc-h + .stg > :first-child { border-top: 0; }
.vc-ck { display: flex; align-items: center; gap: .65em; padding: .46em 0; font-size: .88em; }
.vc-ck + .vc-ck { border-top: 1px solid var(--line); }
.vc-ck > span { color: var(--ink-2); }
.vc-ck > i + span { flex: 1; min-width: 0; }
.vc-ck > span + * { flex: none; }
.vc-ck > span b { display: block; font-weight: 500; color: var(--ink); }
.vc-ck > span:has(> b) { font-size: .9em; line-height: 1.3; color: var(--muted); }
.vc-ck > span:has(> b) b { font-size: 1.11em; }
.vc-ck > i, .jr-row > i { flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(91, 76, 255, .3); transition: background .5s var(--ease), box-shadow .5s; }
.vc-ck[data-hold] > i { box-shadow: inset 0 0 0 1.5px rgba(180, 83, 9, .55); }
.vg.a0 .vc-ck[data-done="0"] > i, .vg.a1 .vc-ck[data-done="1"] > i, .vg.a2 .vc-ck[data-done="2"] > i, .vg.a3 .vc-ck[data-done="3"] > i, .vg.a4 .vc-ck[data-done="4"] > i, .vg.a5 .vc-ck[data-done="5"] > i, .vg.a6 .vc-ck[data-done="6"] > i, .vg.a7 .vc-ck[data-done="7"] > i, .vg.a0 .jr-row[data-done="0"] > i, .vg.a1 .jr-row[data-done="1"] > i, .vg.a2 .jr-row[data-done="2"] > i, .vg.a3 .jr-row[data-done="3"] > i, .vg.a4 .jr-row[data-done="4"] > i, .vg.a5 .jr-row[data-done="5"] > i, .vg.a6 .jr-row[data-done="6"] > i, .vg.a7 .jr-row[data-done="7"] > i {
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235B4CFF'/%3E%3Cstop offset='1' stop-color='%234FA8F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)'/%3E%3Cpath d='M6 10.3l2.6 2.5L14 7.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stg > :nth-child(2) { transition-delay: .08s; } .stg > :nth-child(3) { transition-delay: .16s; } .stg > :nth-child(4) { transition-delay: .24s; } .stg > :nth-child(5) { transition-delay: .32s; } .stg > :nth-child(6) { transition-delay: .4s; }
.vc-big { font-size: 2.9em; line-height: 1; letter-spacing: -.045em; font-weight: 300; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.vc-cap { margin-top: .4em; font-family: var(--mono); font-size: .64em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.vc-cap .pill { font-size: 1em; }
.vc-tag { margin-top: .75em; }
.vc-foot { margin-top: .95em; display: flex; }
.vc-foot .swap { justify-items: start; }
.vc-note { margin-top: .8em; padding: .6em .75em; border-radius: .7em; background: var(--violet-soft); color: #2C2296; font-size: .78em; line-height: 1.45; }
.vc-range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7em; margin: 1.05em 0 .55em; font-size: .78em; color: var(--muted); }
.vc-range .track { position: relative; height: .6em; }
.vc-range .band { position: absolute; inset: 0; border-radius: 1em; background: var(--grad); opacity: .85; transition: transform 1.1s var(--ease), opacity .6s; }
.vc-range .mark { position: absolute; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .22em #1FA971, 0 .4em .9em rgba(19, 138, 75, .45); transition: opacity .5s var(--ease), translate .9s cubic-bezier(.34, 1.56, .64, 1); }
.vc-person { display: flex; align-items: center; gap: .7em; margin-top: .9em; padding: .65em .75em; border-radius: .9em; background: var(--violet-soft); }
.vc-person > span:last-child { display: grid; font-size: .8em; color: var(--ink-2); line-height: 1.35; }
.vc-person b { font-weight: 500; color: var(--ink); font-size: 1.08em; }
.vg .av { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .74em; letter-spacing: .04em; color: #fff; background: var(--grad); box-shadow: 0 .5em 1em -.5em rgba(58, 43, 217, .7); }
.vc-spark { display: block; width: 100%; height: 3em; margin: .35em 0 .55em; overflow: visible; }
.vc-spark polyline { stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Narrow containers show one card at a time: the focus of the current step. */
@container vg (max-width: 859px) {
  .vg-stage { font-size: clamp(12px, 3.1cqi, 15px); }
  .vg-flow { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; }
  .vg-flow > .vc, .vg-col > .vc { grid-area: 1 / 1; width: min(23em, 100%) !important; opacity: 0 !important; translate: 0 .8em !important; scale: 1 !important; pointer-events: none; }
  .vg[data-s="0"] .vg-flow > .vc[data-on~="0"], .vg[data-s="1"] .vg-flow > .vc[data-on~="1"], .vg[data-s="2"] .vg-flow > .vc[data-on~="2"], .vg[data-s="3"] .vg-flow > .vc[data-on~="3"], .vg[data-s="4"] .vg-flow > .vc[data-on~="4"], .vg[data-s="5"] .vg-flow > .vc[data-on~="5"], .vg[data-s="6"] .vg-flow > .vc[data-on~="6"], .vg[data-s="7"] .vg-flow > .vc[data-on~="7"], .vg[data-s="0"] .vg-col > .vc[data-on~="0"], .vg[data-s="1"] .vg-col > .vc[data-on~="1"], .vg[data-s="2"] .vg-col > .vc[data-on~="2"], .vg[data-s="3"] .vg-col > .vc[data-on~="3"], .vg[data-s="4"] .vg-col > .vc[data-on~="4"], .vg[data-s="5"] .vg-col > .vc[data-on~="5"], .vg[data-s="6"] .vg-col > .vc[data-on~="6"], .vg[data-s="7"] .vg-col > .vc[data-on~="7"] { opacity: 1 !important; translate: none !important; }
  .vg-col { display: contents; }
  .vg-flow > .vc--phone { width: min(16.5em, 100%) !important; }
  .vg-link { display: none; }
}
@container vg (min-width: 860px) { .n-only { display: none; } }

/* ---------- Living stories: the step bar ---------- */
.vg--story { border-radius: var(--r); overflow: hidden; background: var(--grad-soft); box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .8); }
.vg--story .vg-stage { min-height: clamp(280px, 32cqi, 420px); }
.vg-story { position: relative; display: grid; gap: 10px 36px; padding: 16px clamp(16px, 2.4cqi, 28px) 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(91, 76, 255, .08); }
.vg-story .story-steps { display: grid; gap: 6px; }
.story-steps[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .story-steps[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-steps[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .story-steps[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vg-story .story-cap { min-height: 2.9em; }
.vg-story .story-step.is-cur::after { animation: vg-prog var(--dur, 3.4s) linear forwards; }
.vg.is-paused .vg-story .story-step.is-cur::after, .vg.is-pinned .vg-story .story-step.is-cur::after { animation: none; transform: scaleX(1); }
@keyframes vg-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@container vg (min-width: 860px) {
  .vg-story { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; }
  .vg-story .story-cap { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; min-height: 0; }
  .vg-story .story-cap-k { display: none; }
}
@container vg (max-width: 600px) {
  .vg-story .story-step { justify-items: center; text-align: center; }
  .vg-story .story-step .sl { display: none; }
  .vg-story .story-cap-k { display: block; margin-bottom: -4px; }
  .vg-story .story-note { display: none; }
  .vg-story .story-head .story-toggle { margin-left: auto; }
}

/* ---------- Living stories: per-story layouts ---------- */
.vg--eob .vc--eob { width: 17.5em; } .vg--eob .vc--checks { width: 20em; }

.vc-text p { padding: .32em 0; font-size: .88em; color: var(--ink-2); border-top: 1px solid var(--line); }
.vc-text p:first-child { border-top: 0; }
.vc-text mark { background: transparent; color: inherit; border-radius: .3em; padding: .05em .2em; margin: 0 -.2em; transition: background .6s var(--ease), color .6s; }
.vg[data-s="0"] mark[data-on~="0"], .vg[data-s="1"] mark[data-on~="1"], .vg[data-s="2"] mark[data-on~="2"], .vg[data-s="3"] mark[data-on~="3"], .vg[data-s="4"] mark[data-on~="4"], .vg[data-s="5"] mark[data-on~="5"], .vg[data-s="6"] mark[data-on~="6"], .vg[data-s="7"] mark[data-on~="7"] { background: rgba(91, 76, 255, .14); color: var(--ink); }
.vg--consensus .vc--votes { width: 21em; }

.vc-arch { position: relative; height: 1.5em; margin: -.2em 0 .7em; }
.vc-arch i { position: absolute; bottom: 0; width: .5em; height: 1.4em; border-radius: .2em .2em 0 0; background: linear-gradient(180deg, #B3AAFF, #5B4CFF); }
.vc-arch i:first-child { left: 0; } .vc-arch i:nth-child(2) { right: 0; }
.vc-arch b { position: absolute; left: 0; right: 0; top: 0; height: .32em; border-radius: .3em; background: #CFC8FF; transition: background .5s var(--ease), box-shadow .5s; }
.vg[data-s="2"] .vc-arch b { background: #F59E0B; box-shadow: 0 0 1em rgba(245, 158, 11, .6); }
.vg.a3 .vc-arch b { background: #1FA971; box-shadow: 0 0 1em rgba(31, 169, 113, .5); }
.vg--gate .vc--gate { width: 20.5em; }
.vc-blocks { display: grid; gap: .55em; }
.blk { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; padding: .55em .7em; border-radius: .7em; background: #F6F4FD; font-size: .82em; }
.blk + .blk::before { content: ''; position: absolute; left: 1.4em; top: -.6em; width: 2px; height: .65em; background: rgba(91, 76, 255, .35); }
.blk .h { color: var(--muted); }
.blk--new { background: #fff; box-shadow: 0 0 0 1.5px rgba(91, 76, 255, .35), 0 .8em 1.6em -1em rgba(58, 43, 217, .5); }

.vc-wave { display: flex; align-items: center; gap: 2px; height: 3.2em; margin: .1em 0 .75em; }
.vc-wave i { flex: 1; min-height: 3px; border-radius: 2px; background: rgba(91, 76, 255, .28); transform-origin: center; transition: background .5s var(--ease); }
.vg[data-s="2"] .vc-wave i.seg, .vg[data-s="0"] .vc-wave i.seg { background: var(--violet); }
.vg.is-live[data-s="0"] .vc-wave i { animation: vg-eq .9s ease-in-out infinite alternate; }
.vc-wave i:nth-child(3n) { animation-delay: -.3s; } .vc-wave i:nth-child(3n+1) { animation-delay: -.6s; } .vc-wave i:nth-child(4n) { animation-duration: 1.2s; }
@keyframes vg-eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.vc-say { display: flex; gap: .7em; padding: .45em 0; border-top: 1px solid var(--line); font-size: .84em; }
.vc-say > .mono { color: var(--muted); font-size: .82em; padding-top: .25em; }
.vc-say b { display: block; font-family: var(--mono); font-size: .74em; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.vg--scribe .vc--draft { width: 21em; }
.vc-lines p { display: grid; grid-template-columns: 1.3em minmax(0, 1fr) auto; gap: .5em; align-items: start; padding: .45em 0; border-top: 1px solid var(--line); font-size: .86em; color: var(--ink-2); }
.vc-lines p:first-child { border-top: 0; }
.vc-lines b { font-family: var(--mono); font-weight: 500; color: var(--violet); }
.vc-lines em { font-style: normal; font-size: .8em; padding: .15em .45em; border-radius: .5em; color: var(--violet-deep); background: var(--violet-soft); transition: opacity .6s var(--ease), translate .8s var(--ease), background .5s, color .5s; }
.vg[data-s="2"] .vc-lines em { background: var(--violet); color: #fff; }

.vg--portal .vg-flow { gap: 2.4em; }
.vc--thread { width: 15.5em; }
.bub { max-width: 88%; padding: .55em .8em; border-radius: 1em; background: #F3F1FB; font-size: .86em; }
.bub.me { margin-left: auto; color: #fff; background: var(--grad); border-bottom-right-radius: .3em; }
.bub + .bub { margin-top: .55em; border-bottom-left-radius: .3em; transition-delay: .5s; }
.vc--phone { width: 15em; padding: 1em .9em 1.1em; border-radius: 2.1em; box-shadow: 0 0 0 .45em #E6E2FB, 0 0 0 .5em rgba(91, 76, 255, .12), 0 2.4em 4.4em -2em rgba(58, 43, 217, .5); }
.ph-top { display: flex; justify-content: space-between; align-items: baseline; padding: .2em .4em .8em; font-weight: 500; }
.ph-top .mono { font-weight: 400; color: var(--muted); font-size: .76em; }
.ph-row { display: grid; grid-template-columns: 1fr auto; gap: 0 .6em; padding: .55em .5em; border-radius: .6em; font-size: .86em; transition: background .5s var(--ease); }
.ph-row + .ph-row { box-shadow: 0 -1px 0 var(--line); }
.ph-row span { color: var(--muted); }
.ph-row b { font-weight: 500; }
.ph-row em { grid-column: 2; justify-self: end; font-style: normal; font-size: .82em; color: var(--ok); }
.vg[data-s="0"] .ph-row[data-on~="0"], .vg[data-s="1"] .ph-row[data-on~="1"], .vg[data-s="2"] .ph-row[data-on~="2"], .vg[data-s="3"] .ph-row[data-on~="3"], .vg[data-s="4"] .ph-row[data-on~="4"], .vg[data-s="5"] .ph-row[data-on~="5"], .vg[data-s="6"] .ph-row[data-on~="6"], .vg[data-s="7"] .ph-row[data-on~="7"] { background: var(--violet-soft); }
.ph-btn { margin-top: .55em; padding: .62em .8em; border-radius: 1em; text-align: center; font-size: .8em; font-weight: 500; color: var(--violet-deep); background: var(--violet-soft); transition: background .5s var(--ease), color .5s, box-shadow .5s; }
.ph-btn--q { background: #fff; box-shadow: inset 0 0 0 1px rgba(91, 76, 255, .25); }
.vg[data-s="0"] .ph-btn[data-on~="0"], .vg[data-s="1"] .ph-btn[data-on~="1"], .vg[data-s="2"] .ph-btn[data-on~="2"], .vg[data-s="3"] .ph-btn[data-on~="3"], .vg[data-s="4"] .ph-btn[data-on~="4"], .vg[data-s="5"] .ph-btn[data-on~="5"], .vg[data-s="6"] .ph-btn[data-on~="6"], .vg[data-s="7"] .ph-btn[data-on~="7"], .ph-btn.on { color: #fff; background: var(--grad); box-shadow: 0 .6em 1.2em -.6em rgba(58, 43, 217, .8); }
.vc--fix, .vc--log { width: 17em; }
.vg--portal .vg-col { gap: 1.25em; }

.vg-seats { position: relative; width: min(100%, 46em); aspect-ratio: 16 / 10; }
.seat-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seat-lines line { stroke: rgba(91, 76, 255, .18); stroke-width: 1.2; stroke-dasharray: 3 5; transition: stroke .5s var(--ease); }
.vg[data-s="0"] .seat-lines line[data-on~="0"], .vg[data-s="1"] .seat-lines line[data-on~="1"], .vg[data-s="2"] .seat-lines line[data-on~="2"], .vg[data-s="3"] .seat-lines line[data-on~="3"], .vg[data-s="4"] .seat-lines line[data-on~="4"], .vg[data-s="5"] .seat-lines line[data-on~="5"], .vg[data-s="6"] .seat-lines line[data-on~="6"], .vg[data-s="7"] .seat-lines line[data-on~="7"] { stroke: var(--violet); stroke-dasharray: none; stroke-width: 1.6; }
.seat { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: .35em; transition: opacity .5s var(--ease); }
.seat:not([data-on]) { opacity: .5; }
.seat .av { width: 2.7em; height: 2.7em; color: var(--violet-deep); background: #fff; box-shadow: 0 .6em 1.2em -.8em rgba(58, 43, 217, .5), inset 0 0 0 1px rgba(91, 76, 255, .18); transition: color .5s, background .5s, box-shadow .5s, scale .6s var(--ease); }
.seat .nm { font-size: .74em; color: var(--muted); white-space: nowrap; transition: color .5s; }
.vg[data-s="0"] .seat[data-on~="0"] .av, .vg[data-s="1"] .seat[data-on~="1"] .av, .vg[data-s="2"] .seat[data-on~="2"] .av, .vg[data-s="3"] .seat[data-on~="3"] .av, .vg[data-s="4"] .seat[data-on~="4"] .av, .vg[data-s="5"] .seat[data-on~="5"] .av, .vg[data-s="6"] .seat[data-on~="6"] .av, .vg[data-s="7"] .seat[data-on~="7"] .av { color: #fff; background: var(--grad); box-shadow: 0 0 0 .4em rgba(91, 76, 255, .14), 0 .8em 1.6em -.6em rgba(58, 43, 217, .8); scale: 1.12; }
.vg[data-s="0"] .seat[data-on~="0"] .nm, .vg[data-s="1"] .seat[data-on~="1"] .nm, .vg[data-s="2"] .seat[data-on~="2"] .nm, .vg[data-s="3"] .seat[data-on~="3"] .nm, .vg[data-s="4"] .seat[data-on~="4"] .nm, .vg[data-s="5"] .seat[data-on~="5"] .nm, .vg[data-s="6"] .seat[data-on~="6"] .nm, .vg[data-s="7"] .seat[data-on~="7"] .nm { color: var(--ink); font-weight: 500; }
.vg-seats .vc--rec1 { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 16.5em; }
.vg-seats .vc--rec1:is([data-on]) { scale: 1; }
.vg-seats .vc-r { transition: opacity .6s var(--ease), translate .8s var(--ease), background .5s; border-radius: .4em; padding-inline: .35em; margin-inline: -.35em; }
.vg[data-s="0"] .vg-seats .vc-r[data-on~="0"], .vg[data-s="1"] .vg-seats .vc-r[data-on~="1"], .vg[data-s="2"] .vg-seats .vc-r[data-on~="2"], .vg[data-s="3"] .vg-seats .vc-r[data-on~="3"], .vg[data-s="4"] .vg-seats .vc-r[data-on~="4"], .vg[data-s="5"] .vg-seats .vc-r[data-on~="5"], .vg[data-s="6"] .vg-seats .vc-r[data-on~="6"], .vg[data-s="7"] .vg-seats .vc-r[data-on~="7"] { background: var(--violet-soft); }
@container vg (max-width: 600px) {
  .vg-seats { aspect-ratio: 1; }
  .seat .nm { display: none; }
  .vg[data-s="0"] .seat[data-on~="0"] .nm, .vg[data-s="1"] .seat[data-on~="1"] .nm, .vg[data-s="2"] .seat[data-on~="2"] .nm, .vg[data-s="3"] .seat[data-on~="3"] .nm, .vg[data-s="4"] .seat[data-on~="4"] .nm, .vg[data-s="5"] .seat[data-on~="5"] .nm, .vg[data-s="6"] .seat[data-on~="6"] .nm, .vg[data-s="7"] .seat[data-on~="7"] .nm { display: block; position: absolute; top: 100%; margin-top: .3em; padding: .15em .5em; border-radius: .6em; background: rgba(255, 255, 255, .92); }
  .vg-seats .vc--rec1 { width: 14.5em; }
}

.vg-stack { position: relative; width: min(100%, 50em); height: 25em; }
.tool { position: absolute; width: 12.5em; border-radius: .9em; background: rgba(255, 255, 255, .9); box-shadow: 0 1.4em 2.6em -1.6em rgba(58, 43, 217, .45), inset 0 0 0 1px rgba(255, 255, 255, .9); transition: opacity .7s var(--ease), translate 1s var(--ease), rotate 1s var(--ease), scale 1s var(--ease); }
.tl-bar { display: flex; align-items: center; gap: .3em; padding: .5em .7em; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .66em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-bar i { width: .55em; height: .55em; border-radius: 50%; background: #DCD8F2; }
.tl-bar span { margin-left: .5em; }
.tl-body { display: grid; gap: .25em; justify-items: start; padding: .6em .8em .75em; font-size: .84em; }
.tl-body b { font-weight: 500; }
.tl-body > span { color: var(--muted); }
.tool0 { left: 2%; top: 4%; rotate: -4deg; } .tool1 { left: 37%; top: 0; rotate: 2deg; } .tool2 { right: 2%; top: 8%; rotate: 5deg; }
.tool3 { left: 9%; bottom: 3%; rotate: 3deg; } .tool4 { right: 8%; bottom: 0; rotate: -3deg; }
.vg.a1 .tool { rotate: 0deg; scale: .7; }
.vg.a1 .tool0 { translate: 14em 7em; } .vg.a1 .tool1 { translate: 0 8em; } .vg.a1 .tool2 { translate: -14em 6em; } .vg.a1 .tool3 { translate: 12em -6em; } .vg.a1 .tool4 { translate: -12em -7em; }
.core { position: absolute; inset: 0; display: grid; place-items: center; }
.core .vc--one { width: 17em; }
.axiom { position: absolute; width: 27em; height: 16em; border-radius: 50%; background: radial-gradient(closest-side, rgba(142, 128, 255, .28), rgba(142, 128, 255, 0)); box-shadow: inset 0 0 0 1.5px rgba(91, 76, 255, .28); }
.axiom span { position: absolute; left: 50%; top: -.8em; translate: -50% 0; padding: .3em .8em; border-radius: 1em; font-family: var(--mono); font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--grad); box-shadow: 0 .6em 1.2em -.6em rgba(58, 43, 217, .8); }
.orb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-lines line { stroke: rgba(91, 76, 255, .3); stroke-width: 1.2; stroke-dasharray: 3 5; }
.orb { position: absolute; translate: -50% -50%; }
.orb b { display: block; padding: .45em .9em; border-radius: 1em; font-size: .76em; font-weight: 500; white-space: nowrap; color: var(--violet-deep); background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(58, 43, 217, .6), inset 0 0 0 1px rgba(91, 76, 255, .18); }
.orb:nth-of-type(2) b { transition-delay: .08s; } .orb:nth-of-type(3) b { transition-delay: .16s; } .orb:nth-of-type(4) b { transition-delay: .24s; } .orb:nth-of-type(5) b { transition-delay: .32s; }
.core .vc--one { z-index: 1; }
.axiom { pointer-events: none; }
@container vg (max-width: 600px) {
  .vg-stack { height: 24em; }
  .tool { width: 10.5em; }
  .tool1 { left: 30%; top: 30%; } .tool3 { left: 0; } .tool4 { right: 0; }
  .axiom { width: 21em; height: 15em; }
  .core .vc--one { width: 15em; }
}

.vc--core { width: 14em; text-align: center; }
.vc--core .ring { position: relative; width: 7em; height: 7em; margin: .3em auto 1em; border-radius: 50%; display: grid; place-content: center; color: #fff; background: var(--grad); box-shadow: 0 0 0 .5em rgba(91, 76, 255, .12), 0 1.2em 2.4em -1em rgba(58, 43, 217, .7); }
.vc--core .ring::after { content: ''; position: absolute; inset: -.9em; border-radius: 50%; border: 1.5px dashed rgba(91, 76, 255, .45); animation: vg-spin 8s linear infinite paused; }
.vg.is-live .vc--core .ring::after { animation-play-state: running; }
.vc--core .ring b { font-weight: 500; }
.vc--core .ring span { font-size: .78em; opacity: .85; }
.vc--core .vc-r { text-align: left; }
@keyframes vg-spin { to { rotate: 360deg; } }
.vg--drg .vc--drg { width: 17em; }

.vg-ten { display: grid; justify-items: center; gap: 1.5em; width: min(100%, 54em); }
.ten-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; width: 100%; }
.ten-row .vc { width: auto; }
.ten-row .vc-h { flex-direction: column; align-items: flex-start; gap: .25em; }
.ten-row .vc::after { content: ''; position: absolute; left: 50%; bottom: -1.5em; width: 2px; height: 1.5em; background: linear-gradient(rgba(91, 76, 255, .4), rgba(91, 76, 255, .1)); }
.vc--new { box-shadow: 0 0 0 1.5px rgba(91, 76, 255, .4), 0 1.8em 3.4em -2em rgba(58, 43, 217, .4); }
.spine { position: relative; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1em; flex-wrap: wrap; padding: .9em 1.3em; border-radius: 1em; color: #fff; background: var(--grad); background-size: 160% 100%; box-shadow: 0 1.4em 2.8em -1.4em rgba(58, 43, 217, .7); }
.spine span { font-weight: 500; letter-spacing: .16em; font-size: .9em; }
.spine em { font-style: normal; font-family: var(--mono); font-size: .68em; letter-spacing: .06em; opacity: .9; }
.team { width: min(100%, 24em); margin-top: 0; background: #fff; box-shadow: 0 1.4em 2.6em -1.6em rgba(58, 43, 217, .5); }
@container vg (max-width: 700px) {
  .ten-row { grid-template-columns: 1fr 1fr; }
  .ten-row .vc::after { display: none; }
  .ten-row .vc { padding: .9em 1em 1em; }
}

.vg-loop { position: relative; width: min(100%, 31em); aspect-ratio: 1; }
.vg-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: rgba(91, 76, 255, .16); stroke-width: .7; }
.ring-run { fill: none; stroke: var(--violet); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 75; transition: stroke-dashoffset 1.2s var(--ease); }
.vg[data-s="1"] .ring-run { stroke-dashoffset: 50; } .vg[data-s="2"] .ring-run { stroke-dashoffset: 33.3; } .vg[data-s="3"] .ring-run { stroke-dashoffset: 8.3; } .vg[data-s="4"] .ring-run { stroke-dashoffset: 0; }
.vg-loop .lp { position: absolute; translate: -50% -50%; width: 0; height: 0; }
.vg-loop .lp i { position: absolute; left: -.42em; top: -.42em; width: .84em; height: .84em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(91, 76, 255, .35), 0 .3em .8em -.3em rgba(58, 43, 217, .5); transition: background .5s, box-shadow .5s, scale .5s var(--ease); }
.vg-loop .lp b { position: absolute; top: -.62em; left: 1em; font-weight: 400; font-size: .8em; white-space: nowrap; color: var(--muted); transition: color .5s; }
.vg-loop .lp.l b { left: auto; right: 1em; }
.vg.a4 .vg-loop .lp-x { scale: 1; }
.vg-loop .lp.up b, .vg-loop .lp.dn b { left: 0; translate: -50% 0; }
.vg-loop .lp.up b { top: -2.2em; }
.vg-loop .lp.dn b { top: .95em; }
.vg-loop .lp-x { position: absolute; width: 1.7em; height: 1.7em; margin: -.85em 0 0 -.85em; translate: none !important; scale: .3; transition: opacity .5s var(--ease), scale .7s cubic-bezier(.34, 1.56, .64, 1); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .72em; font-weight: 500; color: #fff; background: #F59E0B; box-shadow: 0 0 0 .25em rgba(245, 158, 11, .2); }
.vg[data-s="0"] .vg-loop .lp[data-on~="0"] i, .vg[data-s="1"] .vg-loop .lp[data-on~="1"] i, .vg[data-s="2"] .vg-loop .lp[data-on~="2"] i, .vg[data-s="3"] .vg-loop .lp[data-on~="3"] i, .vg[data-s="4"] .vg-loop .lp[data-on~="4"] i, .vg[data-s="5"] .vg-loop .lp[data-on~="5"] i, .vg[data-s="6"] .vg-loop .lp[data-on~="6"] i, .vg[data-s="7"] .vg-loop .lp[data-on~="7"] i { background: var(--grad); box-shadow: 0 0 0 .3em rgba(91, 76, 255, .16); scale: 1.15; }
.vg[data-s="0"] .vg-loop .lp[data-on~="0"] b, .vg[data-s="1"] .vg-loop .lp[data-on~="1"] b, .vg[data-s="2"] .vg-loop .lp[data-on~="2"] b, .vg[data-s="3"] .vg-loop .lp[data-on~="3"] b, .vg[data-s="4"] .vg-loop .lp[data-on~="4"] b, .vg[data-s="5"] .vg-loop .lp[data-on~="5"] b, .vg[data-s="6"] .vg-loop .lp[data-on~="6"] b, .vg[data-s="7"] .vg-loop .lp[data-on~="7"] b { color: var(--ink); }
.vg-loop .hub { position: absolute; inset: 27%; display: grid; place-content: center; justify-items: center; gap: .3em; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 1.6em 3.2em -2em rgba(58, 43, 217, .55), inset 0 0 0 1px rgba(255, 255, 255, .95); }
.hub .mono { font-size: .68em; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.hub-k { justify-items: center; }
.hub-k b { font-weight: 500; font-size: 1.05em; letter-spacing: -.01em; max-width: 9em; }
@container vg (max-width: 480px) {
  .vg-loop .lp b { display: none; }
  .vg[data-s="0"] .vg-loop .lp[data-on~="0"] b, .vg[data-s="1"] .vg-loop .lp[data-on~="1"] b, .vg[data-s="2"] .vg-loop .lp[data-on~="2"] b, .vg[data-s="3"] .vg-loop .lp[data-on~="3"] b, .vg[data-s="4"] .vg-loop .lp[data-on~="4"] b, .vg[data-s="5"] .vg-loop .lp[data-on~="5"] b, .vg[data-s="6"] .vg-loop .lp[data-on~="6"] b, .vg[data-s="7"] .vg-loop .lp[data-on~="7"] b { display: block; }
  .vg[data-s="4"] .vg-loop .lp b { display: none; }
}

.vg-dent { display: grid; justify-items: center; gap: 1.1em; width: 100%; }
.vg-dent .vg-flow { gap: 6em; padding: 2.6em 1.4em 1.4em; border-radius: 1.6em; transition: gap 1s var(--ease); }
.vg-dent .vg-flow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed rgba(91, 76, 255, .38); background: rgba(255, 255, 255, .32); opacity: 0; transition: opacity .8s var(--ease); }
.vg.a2 .vg-dent .vg-flow { gap: 1.2em; }
.vg.a2 .vg-dent .vg-flow::before { opacity: 1; }
.dent-frame { position: absolute; left: 1.5em; top: .85em; font-size: .78em; color: var(--violet); }
.dent-frame .mono { letter-spacing: .06em; text-transform: uppercase; font-size: .9em; }
.dent-note { font-size: .86em; color: var(--ink-2); text-align: center; max-width: 30em; }
.vc--med, .vc--perio { width: 17em; }
.perio { display: flex; align-items: flex-end; gap: .4em; height: 4.6em; margin: .4em 0 .5em; }
.perio span { position: relative; flex: 1; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: .2em; }
.perio i { align-self: end; width: 100%; border-radius: .25em .25em .1em .1em; background: rgba(91, 76, 255, .25); }
.perio .deep i { background: linear-gradient(180deg, #F7B955, #F59E0B); }
.perio em { font-style: normal; font-family: var(--mono); font-size: .66em; color: var(--muted); }
.perio u { position: absolute; top: 0; width: .45em; height: .45em; border-radius: 50%; background: #E5484D; }
@container vg (max-width: 859px) {
  .vg-dent .vg-flow { padding: 0; gap: 0; }
  .vg-dent .vg-flow::before, .dent-frame { display: none; }
}

.vg--wellness .vc--book { width: 15em; } .vg--wellness .vc--est { width: 18.5em; } .vg--wellness .vc--wchart { width: 17.5em; }
.vc-r.tot > span { color: var(--ink); font-weight: 500; }
.vc-trend { display: grid; gap: .1em; margin-top: .9em; padding-top: .7em; border-top: 1px solid var(--line); }
.vc-trend .vc-spark { height: 2.4em; margin: .3em 0 .2em; }
.vc-trend > .mono { font-size: .8em; color: var(--ok); }

.vg-fit { display: grid; justify-items: center; gap: 1.2em; width: min(100%, 46em); }
.fit-k { justify-items: center; }
.fit-k b { font-weight: 400; font-size: 1.5em; letter-spacing: -.025em; }
.fit-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; width: 100%; }
.mod { display: flex; align-items: center; gap: .7em; padding: 1em 1.1em; border-radius: 1em; font-size: .92em; color: var(--muted); background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(91, 76, 255, .12); transition: background .6s var(--ease), color .6s, box-shadow .6s, opacity .6s, translate .8s var(--ease); }
.mod i { flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--faint); transition: background .6s, box-shadow .6s; }
.vg[data-s="0"] .mod[data-on~="0"], .vg[data-s="1"] .mod[data-on~="1"], .vg[data-s="2"] .mod[data-on~="2"], .vg[data-s="3"] .mod[data-on~="3"], .vg[data-s="4"] .mod[data-on~="4"], .vg[data-s="5"] .mod[data-on~="5"], .vg[data-s="6"] .mod[data-on~="6"], .vg[data-s="7"] .mod[data-on~="7"] { color: var(--ink); background: #fff; box-shadow: 0 1.2em 2.4em -1.6em rgba(58, 43, 217, .55), inset 0 0 0 1px rgba(91, 76, 255, .2); }
.vg[data-s="0"] .mod[data-on~="0"] i, .vg[data-s="1"] .mod[data-on~="1"] i, .vg[data-s="2"] .mod[data-on~="2"] i, .vg[data-s="3"] .mod[data-on~="3"] i, .vg[data-s="4"] .mod[data-on~="4"] i, .vg[data-s="5"] .mod[data-on~="5"] i, .vg[data-s="6"] .mod[data-on~="6"] i, .vg[data-s="7"] .mod[data-on~="7"] i { background: var(--grad); box-shadow: 0 0 0 .3em rgba(91, 76, 255, .15); }
.mod--ehr { grid-column: 1 / -1; justify-content: center; background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(91, 76, 255, .35) !important; border-radius: 1em; }
.mod--ehr em { font-style: normal; font-size: .76em; padding: .2em .55em; border-radius: .6em; color: #fff; background: var(--grad); }
.spine--fit { justify-content: center; }
.spine--fit span { letter-spacing: .04em; font-weight: 400; }
@container vg (max-width: 600px) { .fit-board { grid-template-columns: 1fr 1fr; } .fit-k b { font-size: 1.25em; } }

.vg-claim { position: relative; display: grid; justify-items: center; align-items: center; width: 100%; }
.vc--journey { width: 22em; }
.vc--journey .vc-h .swap { justify-items: end; }
.jr { display: grid; }
.jr-row { position: relative; display: grid; grid-template-columns: 1.1em auto minmax(0, 1fr); gap: .7em; align-items: center; padding: .55em .45em; margin-inline: -.45em; border-radius: .55em; font-size: .87em; transition: background .5s var(--ease); }
.jr-row + .jr-row { box-shadow: 0 -1px 0 var(--line); }
.jr-row > span { color: var(--ink-2); }
.jr-row > b { justify-self: end; text-align: right; font-weight: 400; font-size: .94em; color: var(--ink); }
.vg[data-s="0"] .jr-row[data-on~="0"], .vg[data-s="1"] .jr-row[data-on~="1"], .vg[data-s="2"] .jr-row[data-on~="2"], .vg[data-s="3"] .jr-row[data-on~="3"], .vg[data-s="4"] .jr-row[data-on~="4"], .vg[data-s="5"] .jr-row[data-on~="5"], .vg[data-s="6"] .jr-row[data-on~="6"], .vg[data-s="7"] .jr-row[data-on~="7"] { background: var(--violet-soft); }
.vg-ev { display: grid; }
.vg-ev > .vc { grid-area: 1 / 1; width: 15em; opacity: 0; translate: 0 .8em; }
.vg[data-s="0"] .vg-ev > .vc[data-on~="0"], .vg[data-s="1"] .vg-ev > .vc[data-on~="1"], .vg[data-s="2"] .vg-ev > .vc[data-on~="2"], .vg[data-s="3"] .vg-ev > .vc[data-on~="3"], .vg[data-s="4"] .vg-ev > .vc[data-on~="4"], .vg[data-s="5"] .vg-ev > .vc[data-on~="5"], .vg[data-s="6"] .vg-ev > .vc[data-on~="6"], .vg[data-s="7"] .vg-ev > .vc[data-on~="7"] { opacity: 1; translate: none; scale: 1; }
@container vg (min-width: 860px) { .vg-claim { grid-template-columns: auto auto; justify-content: center; gap: 2.6em; } }
/* Mid widths: a cascade, the evidence card stepping down and right of the claim, never covering its values. */
@container vg (min-width: 480px) and (max-width: 859px) { .vg-claim { justify-items: start; gap: .9em; width: min(100%, 27em); } .vg-ev { justify-self: end; } }
@container vg (max-width: 479px) { .vg-claim { gap: .9em; } .vg-ev > .vc { width: min(20em, 100%); } }

.vg-cov { display: grid; gap: 1.3em; width: 100%; max-width: 62em; }
.cov-k { display: grid; gap: .5em; }
.cov-k .swap { justify-items: start; }
.cov-k b { font-weight: 400; font-size: 1.6em; letter-spacing: -.03em; }
.cov-k .g { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cov { width: 100%; height: auto; overflow: visible; }
.cov--25 { display: none; }
.cov .rg { fill: rgba(91, 76, 255, .2); transition: fill .6s var(--ease); }
.cov .pd { fill: var(--violet); opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34, 1.56, .64, 1), fill .6s; }
.vg.a1 .cov .pd { opacity: 1; transform: none; }
.vg.a2 .cov g:not(.out) .pd { fill: #1FA971; }
.vg.a2 .cov .out .pd { fill: #F59E0B; }
.vg.a2 .cov .out .rg { fill: rgba(245, 158, 11, .28); }
.cov g:nth-child(10n+1) .pd { transition-delay: 0.06s; } .cov g:nth-child(10n+2) .pd { transition-delay: 0.12s; } .cov g:nth-child(10n+3) .pd { transition-delay: 0.18s; } .cov g:nth-child(10n+4) .pd { transition-delay: 0.24s; } .cov g:nth-child(10n+5) .pd { transition-delay: 0.30s; } .cov g:nth-child(10n+6) .pd { transition-delay: 0.36s; } .cov g:nth-child(10n+7) .pd { transition-delay: 0.42s; } .cov g:nth-child(10n+8) .pd { transition-delay: 0.48s; } .cov g:nth-child(10n+9) .pd { transition-delay: 0.54s; } .cov g:nth-child(10n+10) .pd { transition-delay: 0.60s; }
.cov-key { display: flex; flex-wrap: wrap; gap: .6em 1.6em; font-size: .82em; color: var(--muted); }
.cov-key span { display: inline-flex; align-items: center; gap: .5em; }
.cov-key i { display: inline-block; }
.cov-key i.rg { width: .5em; height: 1.1em; border-radius: .3em; background: rgba(91, 76, 255, .25); }
.cov-key i.pd { width: .65em; height: .65em; border-radius: 50%; background: #1FA971; }
.cov-key i.pd.out { background: #F59E0B; }
@container vg (max-width: 600px) { .cov--50 { display: none; } .cov--25 { display: block; } .cov-k b { font-size: 1.3em; } }

.vg-split { position: relative; width: min(100%, 30em); aspect-ratio: 1; }
.sp { position: absolute; padding: .85em 1.05em; border-radius: 1em; background: rgba(255, 255, 255, .95); box-shadow: 0 1.4em 2.6em -1.6em rgba(58, 43, 217, .5); transition: opacity .7s var(--ease), translate 1s var(--ease), scale 1s var(--ease); }
.sp b { display: block; font-weight: 500; }
.sp span { font-family: var(--mono); font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp--med { left: 4%; top: 40%; rotate: -3deg; } .sp--den { right: 4%; top: 40%; rotate: 3deg; }
.sp--tool { padding: .6em .9em; font-size: .86em; }
.sp0 { left: 10%; top: 10%; } .sp1 { right: 12%; top: 6%; } .sp2 { left: 6%; bottom: 12%; } .sp3 { right: 8%; bottom: 16%; }
.sp-late { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.vg.a2 .sp-late { translate: -50% -50%; }
.vg.a3 .sp { scale: .6; }
.vg.a3 .sp--med { translate: 8em 0; } .vg.a3 .sp--den { translate: -8em 0; } .vg.a3 .sp0 { translate: 6em 6em; } .vg.a3 .sp1 { translate: -6em 6em; } .vg.a3 .sp2 { translate: 6em -6em; } .vg.a3 .sp3 { translate: -6em -6em; }
.vg-split .vc--whole { position: absolute; left: 50%; top: 50%; translate: -50% -40%; width: 17em; }
.vg.a3 .vg-split .vc--whole { translate: -50% -50%; }

/* Living stories inside cards and sticky step frames */
.card .media .vg, .steps-visual .frame > .vg { position: absolute; inset: 0; }
.card .media { position: relative; }
.card .media .vg-stage, .steps-visual .frame .vg-stage { height: 100%; background: none; }
.card .media .vg-stage { font-size: clamp(10.5px, 2.5cqi, 13.5px); padding: 18px; }
.steps-visual .frame > .vg { opacity: 0; transition: opacity .7s var(--ease); }
.steps-visual .frame > .vg.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vg *, .vg-stage { transition: none !important; animation: none !important; }
}