/* Brand tokens sampled from valuecase.com (2026-07-30):
   page #FAF9FA · ink #070707 / #141414 · lime #D8F950 · grey button #EDEDED
   surface #F4F4F4 · border #D6D6D6 · blue #2A4EEF · radius 10px
   The site sets NeueFaktum; Inter is the closest widely available stand-in. */
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body {
  background:#faf9fa; color:#070707;
  font-family:'NeueFaktum','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- website context (review only – stripped from the Webflow embed) ---- */
.vc-site-nav {
  width:min(1280px,100%); margin:0 auto; padding:22px 24px;
  display:flex; align-items:center; gap:32px;
}
.vc-site-logo {
  display:flex; align-items:center; gap:9px; color:#070707;
  font-size:22px; font-weight:700; letter-spacing:-.02em; text-decoration:none;
}
.vc-site-links { display:flex; gap:26px; color:#070707; font-size:15px; }
.vc-site-nav-ctas { margin-left:auto; display:flex; align-items:center; gap:10px; }
.vc-site-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:10px; color:#070707; font-size:15px; font-weight:600; white-space:nowrap;
}
.vc-site-btn.lime { background:#d8f950; }
.vc-site-btn.grey { background:#ededed; }
.vc-site-btn.ghost { background:transparent; }
.vc-site-btn.big { padding:16px 20px; font-size:18px; }
.vc-site-btn b { font-weight:600; }

.vc-site-hero { margin:26px auto 44px; text-align:center; }
.vc-site-eyebrow {
  display:inline-block; margin-bottom:22px; padding:8px 16px;
  border:1px solid #9e9bac; border-radius:999px; font-size:14px;
}
.vc-site-hero h1 {
  max-width:15ch; margin:0 auto; font-size:70px; font-weight:500;
  line-height:84px; letter-spacing:-.015em;
}
.vc-site-hero h1 em {
  position:relative; font-style:normal; white-space:nowrap;
}
.vc-site-hero h1 em::after {
  content:''; position:absolute; z-index:-1; right:-6px; bottom:6px; left:-6px; height:22px;
  border-radius:4px; background:#d8f950;
}
.vc-site-hero > p {
  max-width:56ch; margin:20px auto 0; color:#3d3d42; font-size:19px; line-height:30px;
}
.vc-site-ctas { display:flex; justify-content:center; gap:12px; margin-top:28px; }
.vc-site-proof { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; }
.vc-site-avatars { display:flex; }
.vc-site-avatars img {
  width:38px; height:38px; margin-left:-10px; object-fit:cover;
  border:2px solid #faf9fa; border-radius:50%;
}
.vc-site-avatars img:first-child { margin-left:0; }
.vc-site-rating { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.vc-site-rating b { color:#f5b301; font-size:15px; letter-spacing:2px; }
.vc-site-rating small { color:#3d3d42; font-size:14px; }

.vc-test-page { width:min(1220px,100%); margin:0 auto; padding:0 24px 80px; }
.vc-test-player {
  position:relative; overflow:visible;
}
/* lime accent blocks peeking out behind the player, as on the site */
.vc-site-accent {
  position:absolute; z-index:0; background:#d8f950; pointer-events:none;
}
.vc-site-accent.tl {
  top:96px; left:-38px; width:180px; height:190px; border-radius:14px 0 0 14px;
}
.vc-site-accent.bl {
  bottom:-34px; left:64px; width:300px; height:120px; border-radius:0 0 14px 14px;
}
.vc-test-topbar {
  position:relative; z-index:1; width:calc(100% - 130px); margin:0 auto;
}
.vc-test-bar {
  display:flex; align-items:center; gap:14px; padding:11px 16px 34px;
  border:1px solid #e2e2e2; border-radius:14px; background:#fff;
  box-shadow:0 1px 3px rgba(7,7,7,.05);
}
.vc-test-viewport {
  position:relative; z-index:2; width:100%; aspect-ratio:8/5; overflow:hidden;
  margin-top:-24px; border:1px solid #e2e2e2; border-radius:14px; background:#9e9bac;
  box-shadow:0 30px 70px -34px rgba(7,7,7,.4),0 2px 8px rgba(7,7,7,.06);
}
.vc-test-stage {
  position:absolute; top:0; left:0; width:1440px; height:900px;
  overflow:hidden; transform-origin:0 0; isolation:isolate; background:#9e9bac;
}
.vc-test-stage::before {
  content:''; position:absolute; z-index:0; inset:-120px;
  background:
    radial-gradient(circle at 78% 16%,rgba(255,255,255,.20),transparent 34%),
    radial-gradient(circle at 15% 82%,rgba(47,43,72,.12),transparent 38%);
  opacity:.32; transform:translate3d(-20px,10px,0); pointer-events:none;
  transition:opacity .45s ease,transform .7s ease;
}
.vc-test-stage[data-perspective="customer"]::before {
  opacity:.78; transform:translate3d(24px,-14px,0);
}
.vc-test-product-window {
  position:absolute; z-index:2; inset:0; overflow:hidden; border-radius:18px;
  background:#e5e9f6;
  box-shadow:
    0 28px 72px rgba(33,29,51,.28),
    0 5px 18px rgba(33,29,51,.16),
    0 0 0 1px rgba(255,255,255,.22);
  transform:scale(.93); transform-origin:center;
  will-change:transform,opacity,border-radius,box-shadow;
}
.vc-test-product-window iframe {
  position:absolute; z-index:1; inset:0; width:1440px; height:900px;
  border:0; opacity:0; pointer-events:none; background:#e5e9f6;
  will-change:opacity,transform;
}
.vc-test-handoff {
  position:absolute; z-index:42; inset:0; display:flex; align-items:center; justify-content:center;
  background:transparent; opacity:0; pointer-events:none;
  will-change:opacity;
}
.vc-test-opening-card {
  position:relative; width:122px; height:56px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid #e0e2e7; border-radius:12px; background:#fff;
  box-shadow:0 14px 42px rgba(21,29,57,.12);
  opacity:0; transform:translateY(8px) scale(.97); will-change:transform,opacity;
}
.vc-test-opening-card::after {
  content:''; position:absolute; right:12px; bottom:7px; left:12px; height:2px;
  border-radius:999px; background:linear-gradient(90deg,#2a4cfa 0 54%,#e0e2e7 54%);
  transform-origin:left; animation:vc-test-load 1.1s ease-in-out infinite;
}
.vc-test-opening-card > img { width:88px; height:auto; margin-top:-5px; }
.vc-test-handoff[data-mode="opening"] .vc-test-opening-card { opacity:1; }

.vc-test-access-card {
  position:absolute; width:520px; height:132px; display:flex; align-items:center;
  padding:20px 24px; border:1px solid #e0e2e7; border-radius:16px; background:#fff;
  box-shadow:0 20px 58px rgba(21,29,57,.16);
  opacity:0; transform:translateY(10px) scale(.98); will-change:transform,opacity;
}
.vc-test-handoff[data-mode="sharing"] .vc-test-access-card { opacity:1; }
.vc-test-access-person {
  width:94px; flex:0 0 94px; display:flex; flex-direction:column;
  align-items:center; gap:8px; color:#31333a;
}
.vc-test-access-person b { font-size:12px; font-weight:700; line-height:16px; }
.vc-test-access-logo,
.vc-test-access-avatar {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e0e2e7; border-radius:50%; background:#fff;
  box-shadow:0 3px 12px rgba(21,29,57,.08);
}
.vc-test-access-logo img { width:38px; height:auto; }
.vc-test-access-avatar {
  border-color:#b9eadb; background:#e8f8f2; color:#0e805e;
  font-size:13px; font-weight:700; will-change:transform,box-shadow;
}
.vc-test-access-path { position:relative; height:80px; flex:1; }
.vc-test-access-path > i {
  position:absolute; top:38px; right:8px; left:8px; height:2px;
  overflow:hidden; border-radius:999px; background:#e0e2e7;
}
.vc-test-access-path > i em {
  display:block; width:100%; height:100%; border-radius:inherit; background:#2a4cfa;
  transform:scaleX(0); transform-origin:left; will-change:transform;
}
.vc-test-access-path > span {
  position:absolute; z-index:2; top:19px; left:6px; height:38px;
  display:flex; align-items:center; gap:6px; padding:0 11px;
  border:1px solid #cfd8ff; border-radius:999px; background:#fff; color:#2a4cfa;
  box-shadow:0 5px 16px rgba(42,76,250,.14);
  font-size:11px; font-weight:700; white-space:nowrap; will-change:transform;
}
.vc-test-access-path small {
  position:absolute; right:0; bottom:0; left:0; color:#767880;
  font-size:10px; line-height:14px; text-align:center;
}
@keyframes vc-test-load {
  0% { transform:scaleX(.25); opacity:.55; }
  65% { transform:scaleX(1); opacity:1; }
  100% { transform:scaleX(1); opacity:.35; }
}

.vc-test-cursor {
  position:absolute; z-index:50; top:0; left:0; display:flex; align-items:flex-start;
  --cursor-color:#2a4cfa; color:var(--cursor-color);
  opacity:0; transform:translate3d(0,0,0);
  pointer-events:none; filter:drop-shadow(0 2px 4px rgba(21,29,57,.24));
  will-change:transform,opacity;
}
.vc-test-cursor.customer { --cursor-color:#0eab7c; }
.vc-test-cursor svg { display:block; }
.vc-test-cursor-label {
  position:absolute; top:56px; left:36px; padding:7px 18px;
  border-radius:999px; background:var(--cursor-color); color:#fff;
  font-size:20px; font-weight:700; line-height:27px; white-space:nowrap;
  box-shadow:0 3px 12px rgba(21,29,57,.28);
}
.vc-test-click {
  position:absolute; z-index:49; width:96px; height:96px; border:3px solid #2a4cfa;
  border-radius:50%; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.45);
  will-change:transform,opacity;
}
.vc-test-click.customer { border-color:#0eab7c; }

.vc-test-confetti {
  position:absolute; z-index:48; inset:0; overflow:hidden; opacity:0; pointer-events:none;
}
.vc-test-confetti i {
  position:absolute; top:270px; left:var(--x); width:9px; height:16px;
  border-radius:2px; background:var(--c); opacity:0;
  transform:translate3d(0,-30px,0) rotate(0deg);
  will-change:transform,opacity;
}
.vc-test-file-drag {
  position:absolute; z-index:49; top:0; left:0; min-width:212px; height:52px;
  display:flex; align-items:center; padding:7px 10px; border:1px solid #c2eee1;
  border-radius:9px; background:rgba(255,255,255,.97);
  box-shadow:0 12px 28px rgba(21,29,57,.18); opacity:0; pointer-events:none;
  will-change:transform,opacity;
}
.vc-test-file-drag > span {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:#fff1f2; color:#f45359; font-size:8px; font-weight:800;
}
.vc-test-file-drag > b {
  margin-left:9px; color:#31333a; font-size:11px; font-weight:700; line-height:15px;
}
.vc-test-file-drag small {
  display:block; color:#767880; font-size:9px; font-weight:400; line-height:13px;
}

.vc-test-workflow-card {
  position:absolute; width:560px; padding:26px 30px 24px;
  border:1px solid #e0e2e7; border-radius:16px; background:#fff;
  box-shadow:0 20px 58px rgba(21,29,57,.16);
  opacity:0; transform:translateY(10px) scale(.98); will-change:transform,opacity;
}
.vc-test-handoff[data-mode="workflow"] .vc-test-workflow-card { opacity:1; }
.vc-test-workflow-head {
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px;
  color:#31333a; font-size:15px; line-height:20px;
}
.vc-test-workflow-bolt {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e0d2fb; border-radius:50%; background:#f3ecfe; color:#7c3aed;
}
.vc-test-workflow-flow { display:flex; align-items:flex-start; gap:14px; }
.vc-test-workflow-node {
  width:130px; flex:0 0 130px; display:flex; flex-direction:column;
  align-items:center; gap:9px; color:#31333a;
}
.vc-test-workflow-node b { font-size:12px; font-weight:700; line-height:16px; text-align:center; }
.vc-test-workflow-node .ic {
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; box-shadow:0 3px 12px rgba(21,29,57,.08);
}
.vc-test-workflow-node .ic.done {
  border:1px solid #b9eadb; background:#e8f8f2; color:#0e805e;
}
.vc-test-workflow-node .ic.unlock {
  border:1px solid #e0d2fb; background:#f3ecfe; color:#7c3aed;
  will-change:transform,box-shadow;
}
.vc-test-workflow-path { position:relative; flex:1; height:46px; }
.vc-test-workflow-path > i {
  position:absolute; top:22px; right:2px; left:2px; height:2px;
  overflow:hidden; border-radius:999px; background:#e0e2e7;
}
.vc-test-workflow-path > i em {
  display:block; width:100%; height:100%; border-radius:inherit; background:#7c3aed;
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

.vc-test-loading {
  position:absolute; z-index:80; inset:0; display:flex; align-items:center; justify-content:center;
  gap:10px; background:#9e9bac; color:rgba(255,255,255,.92); font-size:13px; font-weight:600;
  transition:opacity .2s ease;
}
.vc-test-loading span {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.34); border-top-color:#fff;
  border-radius:50%; animation:vc-test-spin .8s linear infinite;
}
.vc-test-loading.ready { opacity:0; pointer-events:none; }
@keyframes vc-test-spin { to { transform:rotate(360deg); } }

.vc-test-play {
  width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:10px; background:#141414; color:#fff; cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.vc-test-play:hover { background:#d8f950; color:#070707; }
.vc-test-play .play { display:none; }
.vc-test-play.paused .pause { display:none; }
.vc-test-play.paused .play { display:block; }
.vc-test-chapters { display:flex; align-items:flex-end; margin:0; padding:0 8px 8px; }
.vc-test-chapters button {
  min-width:0; padding:0 9px 0 0; overflow:hidden; border:0; background:transparent;
  color:#8a8a8a; font:500 11px/15px 'NeueFaktum','Inter',sans-serif; text-align:left;
  text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.vc-test-chapters button:hover { color:#070707; }
.vc-test-chapters button:nth-child(1) { flex:5.5 1 0; }
.vc-test-chapters button:nth-child(2) { flex:5.25 1 0; }
.vc-test-chapters button:nth-child(3) { flex:5.4 1 0; }
.vc-test-chapters button:nth-child(4) { flex:7.7 1 0; }
.vc-test-chapters button:nth-child(5) { flex:10.3 1 0; }
.vc-test-chapters button:nth-child(6) { flex:7.35 1 0; }
.vc-test-chapters button[data-active] { color:#070707; font-weight:700; }
.vc-test-range { position:relative; height:14px; flex:1; min-width:0; display:flex; align-items:center; }
.vc-test-range i {
  position:absolute; z-index:2; top:4px; width:3px; height:6px;
  background:#fff; pointer-events:none;
}
.vc-test-bar input[type=range] {
  --fill:0%; width:100%; height:6px; margin:0; border-radius:999px;
  appearance:none; background:linear-gradient(90deg,#141414 var(--fill),#e6e6e6 var(--fill));
  cursor:pointer;
}
.vc-test-bar input[type=range]::-webkit-slider-thumb {
  width:15px; height:15px; appearance:none; border:2px solid #141414; border-radius:50%;
  background:#d8f950; box-shadow:0 1px 4px rgba(7,7,7,.25);
}
.vc-test-bar input[type=range]::-moz-range-thumb {
  width:12px; height:12px; border:2px solid #141414; border-radius:50%;
  background:#d8f950; box-shadow:0 1px 4px rgba(7,7,7,.25);
}
.vc-test-time {
  width:84px; flex:0 0 84px; color:#6b6b6b; font-size:13px;
  font-variant-numeric:tabular-nums; text-align:right;
}
.vc-test-note { margin:64px 0 0; color:#8a8a8a; font-size:13px; text-align:center; }
.vc-test-note code {
  padding:2px 6px; border:1px solid #e2e2e2; border-radius:6px; background:#fff;
  color:#070707; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (max-width:1000px) {
  .vc-site-hero h1 { font-size:46px; line-height:56px; }
  .vc-site-hero h1 em::after { height:15px; bottom:4px; }
  .vc-site-links { display:none; }
}
@media (max-width:720px) {
  .vc-test-page { padding:0 10px 50px; }
  .vc-site-nav { padding:16px 14px; }
  .vc-site-hero h1 { font-size:34px; line-height:42px; }
  .vc-site-hero > p { font-size:16px; line-height:26px; }
  .vc-site-btn.big { padding:13px 16px; font-size:16px; }
  .vc-site-accent { display:none; }
  .vc-test-topbar { width:calc(100% - 40px); }
  .vc-test-chapters button { font-size:10px; }
}