/* ==========================================================================
   Beonsys · demo page (v2) · shared layer
   Sits on top of style.css. Every section of the demo page builds on these
   tokens and parts. Section CSS lives below this, one block per section,
   each scoped to its own prefix.
   ========================================================================== */

:root {
  /* Actors: who did a step. Used on tags, dots and timeline nodes. */
  --dv-agent: var(--c-agents);       /* an AI agent did it */
  --dv-rule: var(--c-integrations);  /* a hard rule in code checked it */
  --dv-person: var(--c-flow);        /* a person decided */
  --dv-done: var(--ok);              /* finished, signed off */
  --dv-flag: var(--danger);          /* needs an answer */

  /* Brand gradient: the same blue to violet as the particle signature. */
  --dv-grad: linear-gradient(100deg, var(--sig-a) 0%, var(--sig-b) 100%);
  --dv-grad-warm: linear-gradient(100deg, #f56300 0%, #e0306a 55%, #8a4bff 100%);

  /* Glass material for app windows and floating panels. */
  --dv-glass: rgba(255, 255, 255, 0.72);
  --dv-glass-edge: rgba(0, 0, 0, 0.08);
  --dv-window-bar: rgba(245, 245, 247, 0.85);
  --dv-row: #ffffff;

  --dv-radius: 1.25rem;
  --dv-radius-sm: 0.75rem;
  --dv-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --dv-glass: rgba(28, 28, 30, 0.72);
    --dv-glass-edge: rgba(255, 255, 255, 0.1);
    --dv-window-bar: rgba(44, 44, 46, 0.85);
    --dv-row: #1c1c1e;
  }
}
/* Inside a dark band the glass is always the dark material. */
.band {
  --dv-glass: rgba(28, 28, 30, 0.72);
  --dv-glass-edge: rgba(255, 255, 255, 0.1);
  --dv-window-bar: rgba(44, 44, 46, 0.85);
  --dv-row: #1c1c1e;
  --tile: #161617;
  --card: #1c1c1e;
  --bg-alt: #0f0f10;
  --accent: #2997ff;
  --ok: #32d74b;
  --warn: #ffb340;
  --danger: #ff6961;
  --dv-agent: #2997ff;
  --dv-rule: #a586ff;
  --dv-person: #ff9f0a;
  --dv-done: #32d74b;
  --dv-flag: #ff6961;
  --btn: #f5f5f7;
  --btn-hover: #ffffff;
  --btn-ink: #000000;
}

/* Sections ---------------------------------------------------------------- */

.dv-section { position: relative; padding-block: var(--section); }
.dv-section--alt { background: var(--bg-alt); }
.dv-head { max-width: 52rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.dv-head--center { margin-inline: auto; text-align: center; }
.dv-head .lead { margin-top: 1.25rem; max-width: 42rem; }
.dv-head--center .lead { margin-inline: auto; }

/* Gradient ink for the one phrase per headline that carries the promise. */
.dv-grad {
  background: var(--dv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dv-grad--warm { background-image: var(--dv-grad-warm); }

/* Numbers that change never shift the layout. */
.dv-num { font-variant-numeric: tabular-nums; }

/* Small "Sample data" marker on anything illustrative. */
.dv-sample {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dv-sample::before {
  content: "";
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: currentColor; opacity: 0.6;
}

/* Actor tags ------------------------------------------------------------- */

.dv-tag {
  --c: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.55rem 0.2rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.dv-tag::before {
  content: "";
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: currentColor;
}
.dv-tag--agent { --c: var(--dv-agent); }
.dv-tag--rule { --c: var(--dv-rule); }
.dv-tag--person { --c: var(--dv-person); }
.dv-tag--done { --c: var(--dv-done); }
.dv-tag--flag { --c: var(--dv-flag); }

/* App window: the frame every product scene sits in ------------------------ */

.dv-window {
  position: relative;
  border-radius: var(--dv-radius);
  background: var(--dv-glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 0 0 1px var(--dv-glass-edge), var(--shadow);
  overflow: hidden;
}
.dv-window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  background: var(--dv-window-bar);
  border-bottom: 1px solid var(--dv-glass-edge);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.dv-window__lights { display: flex; gap: 0.4rem; }
.dv-window__lights i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff5f57; }
.dv-window__lights i:nth-child(2) { background: #febc2e; }
.dv-window__lights i:nth-child(3) { background: #28c840; }
.dv-window__title { flex: 1; text-align: center; margin-right: 2.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-window__body { padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); }

/* Cards ------------------------------------------------------------------- */

.dv-card {
  border-radius: var(--radius-lg);
  background: var(--tile);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.dv-section--alt .dv-card { background: var(--card); }

/* Segmented control, Apple style ------------------------------------------ */

.dv-seg {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dv-seg::-webkit-scrollbar { display: none; }
.dv-seg__btn {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 200ms ease;
}
.dv-seg__btn[aria-selected="true"], .dv-seg__btn[aria-pressed="true"] { color: var(--ink); }
.dv-seg__pill {
  position: absolute;
  z-index: 0;
  top: 0.25rem; bottom: 0.25rem; left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 450ms var(--ease-out), width 450ms var(--ease-out);
}

/* Motion: headline words and entrances ----------------------------------- */

/* [data-dv-words] splits a headline into words that rise out of a soft blur,
   one after another, when it enters the viewport. */
.js [data-dv-words] .dv-w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.35em);
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.js [data-dv-words].is-in .dv-w { opacity: 1; filter: none; transform: none; }

/* [data-dv] entrances: rise (default), scale, blur, left, right. */
.js [data-dv] {
  opacity: 0;
  transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-dv=""], .js [data-dv="rise"] { transform: translateY(32px); }
.js [data-dv="scale"] { transform: scale(0.94); }
.js [data-dv="blur"] { filter: blur(12px); transform: scale(1.02); }
.js [data-dv="left"] { transform: translateX(-40px); }
.js [data-dv="right"] { transform: translateX(40px); }
.js [data-dv].is-in { opacity: 1; transform: none; filter: none; }
.reveal-all [data-dv], .reveal-all [data-dv-words] .dv-w { opacity: 1; transform: none; filter: none; }

/* Sticky dock: two buttons that follow on phones after the hero ----------- */

.dv-dock {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem;
  border-radius: 999px;
  background: var(--dv-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px var(--dv-glass-edge), 0 12px 32px -8px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, calc(100% + 2rem));
  transition: transform 500ms var(--ease-out);
}
.dv-dock.is-on { transform: translate(-50%, 0); }
.dv-dock .btn { min-height: 2.75rem; padding: 0 1.125rem; font-size: 0.9375rem; }
@media (min-width: 64rem) { .dv-dock { display: none; } }

/* Reduced motion: everything lands in its final state, only opacity moves. */
@media (prefers-reduced-motion: reduce) {
  .js [data-dv-words] .dv-w { filter: none; transform: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .js [data-dv] { transform: none !important; filter: none !important; transition: opacity 400ms ease; transition-delay: 0ms; }
  .dv-seg__pill, .dv-dock { transition: none; }
}


/* --------------------------------------------------------------------------
   Hero: centered copy over the Beonsys console.
   The console starts tilted back and settles flat as the page scrolls; the
   script writes that one transform. Everything inside it is a real layout
   (no screenshots), so it stays sharp at any size and in both schemes.
   -------------------------------------------------------------------------- */

.dvh {
  /* Surfaces inside the console. Light: white cards on a soft grey floor.
     Dark: lifted greys, so cards read apart from the glass. */
  --dvh-floor: color-mix(in srgb, var(--bg-alt) 72%, transparent);
  --dvh-card: #ffffff;
  --dvh-card-edge: rgba(0, 0, 0, 0.06);
  --dvh-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px -6px rgba(0, 0, 0, 0.1);
  --dvh-side: color-mix(in srgb, var(--bg-alt) 55%, transparent);
  --dvh-glow-a: rgba(0, 113, 227, 0.32);
  --dvh-glow-b: rgba(138, 75, 255, 0.26);
  overflow: clip;
}
@media (prefers-color-scheme: dark) {
  .dvh {
    --dvh-floor: rgba(255, 255, 255, 0.025);
    --dvh-card: #232325;
    --dvh-card-edge: rgba(255, 255, 255, 0.07);
    --dvh-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --dvh-side: rgba(255, 255, 255, 0.03);
    --dvh-glow-a: rgba(41, 151, 255, 0.4);
    --dvh-glow-b: rgba(165, 134, 255, 0.34);
  }
}

.dv-section.dvh { padding-block: clamp(1.75rem, 0.5rem + 4vw, 5rem) clamp(4rem, 2rem + 6vw, 8rem); }

/* Two soft lights high in the hero, drifting very slowly. */
.dvh-aura {
  position: absolute;
  inset: 0 0 auto;
  height: min(70rem, 140vh);
  z-index: 0;
  pointer-events: none;
}
.dvh-aura i {
  position: absolute;
  width: 46rem; height: 46rem;
  border-radius: 50%;
  opacity: 0.55;
}
.dvh-aura i:nth-child(1) {
  left: 50%; top: 22rem;
  margin-left: -38rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sig-a) 14%, transparent), transparent);
}
.dvh-aura i:nth-child(2) {
  left: 50%; top: 26rem;
  margin-left: -6rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sig-b) 12%, transparent), transparent);
}

.dvh-inner { position: relative; z-index: 1; }

/* Copy ------------------------------------------------------------------- */

.dvh-copy { max-width: 64rem; margin-inline: auto; text-align: center; }
.dvh-eyebrow { margin-bottom: 0.75rem; }
.dvh-title { text-wrap: balance; }
@media (min-width: 64rem) { .dvh-title { white-space: nowrap; } }
.dvh-lead { margin: 1.25rem auto 0; max-width: 40rem; }

.dvh-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: 1.75rem;
}
.dvh-cta { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--sig-a) 70%, transparent); }
.dvh-more svg { width: 0.95em; height: 0.95em; }
@media (hover: hover) and (pointer: fine) {
  .dvh-cta { transition: transform 300ms var(--ease-out), background-color 200ms ease, box-shadow 300ms var(--ease-out); }
  .dvh-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--sig-a) 80%, transparent); }
  .dvh-cta:active { transform: scale(0.97); }
  .dvh-more:hover svg { transform: translateY(3px); }
}

.dvh-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.dvh-points li { display: flex; align-items: center; gap: 0.4rem; }
.dvh-points svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Phones: the lead and button take the first screen, so the three proof
   points tuck under the console instead of pushing it below the fold. */
@media (max-width: 39.99rem) {
  .dvh-title { font-size: clamp(2.5rem, 1.2rem + 6.4vw, 3rem); line-height: 1.06; }
  .dvh-lead { margin-top: 1rem; font-size: 1.125rem; line-height: 1.36; }
  .dvh-ctas { margin-top: 1.25rem; flex-direction: column; gap: 0.125rem; }
  .dvh-cta { width: 100%; max-width: 22rem; }
  .dvh-inner { display: flex; flex-direction: column; }
  .dvh-copy { display: contents; }
  .dvh-eyebrow, .dvh-title, .dvh-lead, .dvh-ctas { text-align: center; align-self: stretch; }
  .dvh-ctas { align-items: center; }
  .dvh-points { order: 3; flex-direction: column; align-items: flex-start; align-self: center; gap: 0.625rem; margin-top: 2.25rem; font-size: 0.9375rem; }
}

/* Stage ------------------------------------------------------------------ */

.dvh-stage {
  position: relative;
  max-width: 68rem;
  margin: clamp(2rem, 1rem + 3vw, 3.5rem) auto 0;
}
.dvh-tilt {
  position: relative;
  transform-origin: 50% 0%;
}

/* A soft colored light behind the window; the script raises it as the
   console lands. Pre-blurred gradients, so nothing filters per frame. */
.dvh-glow {
  position: absolute;
  inset: 8% -6% -8%;
  z-index: 0;
  background:
    radial-gradient(30% 46% at 32% 52%, var(--dvh-glow-a), transparent),
    radial-gradient(30% 46% at 68% 50%, var(--dvh-glow-b), transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* Console --------------------------------------------------------------- */

.dvh-console {
  z-index: 1;
  margin: 0;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0;
  box-shadow:
    0 0 0 1px var(--dv-glass-edge),
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 24px 48px -16px rgba(0, 0, 0, 0.18),
    0 60px 120px -40px rgba(0, 0, 0, 0.22);
}
@media (prefers-color-scheme: dark) {
  .dvh-console { box-shadow: 0 0 0 1px var(--dv-glass-edge), 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset; }
}
@media (min-width: 48rem) { .dvh-console { font-size: 0.8125rem; } }

.dvh-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.dvh-bar__title { margin: 0; color: var(--ink); }
.dvh-bar__sample { justify-self: end; padding-block: 0.15rem; font-size: 0.6875rem; }

.dvh-app { display: grid; }
@media (min-width: 48rem) { .dvh-app { grid-template-columns: 12.5rem minmax(0, 1fr); } }
@media (min-width: 64rem) { .dvh-app { grid-template-columns: 14rem minmax(0, 1fr); } }

/* Sidebar */
.dvh-side { display: none; }
@media (min-width: 48rem) {
  .dvh-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0.75rem;
    background: var(--dvh-side);
    border-right: 1px solid var(--dv-glass-edge);
  }
}
.dvh-org { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.375rem; }
.dvh-org__mark {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 0.5rem;
  background: var(--dv-grad);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
}
.dvh-org__name { display: grid; font-weight: 600; color: var(--ink); line-height: 1.2; }
.dvh-org__name small { font-weight: 500; font-size: 0.6875rem; color: var(--ink-2); }

.dvh-nav { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.dvh-nav li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.875rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  color: var(--ink-2);
  font-weight: 500;
}
.dvh-nav li.is-on { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.dvh-nav b { margin-left: auto; font-weight: 500; font-size: 0.6875rem; color: var(--ink-2); }
.dvh-nav__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.dvh-nav--sub { padding-top: 0.75rem; border-top: 1px solid var(--dv-glass-edge); }

.dvh-crew {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.625rem 0.5rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--dv-person) 9%, transparent);
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 500;
}
.dvh-crew__faces { display: flex; }
.dvh-crew__faces i, .dvh-face {
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, #ff9f0a, #f56300);
  box-shadow: 0 0 0 2px var(--dvh-card);
}
.dvh-crew__faces i { width: 1.625rem; height: 1.625rem; }
.dvh-crew__faces i + i { margin-left: -0.3rem; background: linear-gradient(140deg, #ffb340, #e0306a); }
.dvh-crew__faces i:nth-child(3) { background: linear-gradient(140deg, #ff9f0a, #c2410c); }

/* Main column */
.dvh-main {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--dvh-floor);
  min-width: 0;
}
@media (min-width: 48rem) { .dvh-main { gap: 1rem; padding: 1.125rem 1.25rem 1rem; } }

/* KPI tiles */
.dvh-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40rem) { .dvh-kpis { grid-template-columns: 1.4fr 1fr 1fr; gap: 0.75rem; } }
.dvh-kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--dvh-card);
  box-shadow: 0 0 0 1px var(--dvh-card-edge), var(--dvh-card-shadow);
  overflow: hidden;
}
@media (min-width: 48rem) { .dvh-kpi { padding: 0.75rem 0.875rem; } }
.dvh-kpi__label { font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dvh-kpi__value {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
@media (min-width: 48rem) { .dvh-kpi__value { font-size: 1.75rem; } }
.dvh-kpi--main .dvh-kpi__value { color: var(--sig-a); }
.dvh-kpi__note { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvh-kpi--wide { display: none; }
@media (min-width: 40rem) { .dvh-kpi--wide { display: grid; } }

/* Odometer digits: each digit is a strip of 0-9 (+0) in a one-line window. */
.dvh-odo { display: inline-flex; overflow: hidden; height: 1.15em; vertical-align: top; }
.dvh-odo__d { display: block; height: 1.15em; overflow: hidden; }
.dvh-odo__s { display: block; white-space: pre; line-height: 1.15em; transition: transform 700ms var(--ease-out); }
.dvh-odo__c { display: block; line-height: 1.15em; }

/* Throughput bars in the main tile */
.dvh-spark {
  position: absolute;
  right: 0.75rem; bottom: 0.7rem;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 1.75rem;
}
.dvh-spark i {
  width: 4px; height: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, var(--sig-a), var(--sig-b));
  opacity: 0.85;
  transform: scaleY(var(--h, 0.5));
  transform-origin: 50% 100%;
  transition: transform 700ms var(--ease-out);
}
.dvh-spark i:nth-child(-n+4) { opacity: 0.45; }
@media (max-width: 39.99rem) {
  .dvh-spark { gap: 2px; height: 1.25rem; right: 0.625rem; }
  .dvh-spark i { width: 3px; }
  .dvh-spark i:nth-child(-n+5) { display: none; }
}

.dvh-pulse {
  position: relative;
  width: 0.4375rem; height: 0.4375rem; flex: none;
  border-radius: 50%;
  background: var(--dv-done);
}
.dvh-pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
}

/* Flow: intake lane, the reading beam, done lane ----------------------- */

.dvh-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 1rem minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  height: 15.5rem;
}
@media (min-width: 40rem) { .dvh-flow { grid-template-columns: minmax(0, 0.75fr) 2.5rem minmax(0, 1.25fr); height: 17rem; } }
@media (min-width: 64rem) { .dvh-flow { grid-template-columns: minmax(0, 16rem) 3.5rem minmax(0, 1fr); height: 19rem; } }

.dvh-lane { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dvh-lane__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-2);
}
.dvh-lane__count {
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  text-align: center;
  font-weight: 600;
}
.dvh-lane__live { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; color: var(--dv-done); }

.dvh-queue, .dvh-done { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dvh-queue { gap: 0.4rem; }
.dvh-done {
  gap: 0.375rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
}

/* Shared icon chip */
.dvh-ico {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.dvh-ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Intake documents */
.dvh-doc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 0.625rem;
  background: var(--dvh-card);
  box-shadow: 0 0 0 1px var(--dvh-card-edge), var(--dvh-card-shadow);
  overflow: hidden;
}
@media (min-width: 64rem) { .dvh-doc { height: 3.25rem; padding: 0 0.625rem; gap: 0.625rem; } }
.dvh-doc__text { display: grid; min-width: 0; line-height: 1.25; }
.dvh-doc__text b { font-weight: 600; color: var(--ink); }
.dvh-doc__text span, .dvh-row__main span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.dvh-doc__text span { border-radius: 0.25rem; }

/* The document being read: an outline in the agent color, a beam that
   sweeps down it, and the fields it found boxed. */
.dvh-doc::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--dv-agent), 0 0 0 4px color-mix(in srgb, var(--dv-agent) 16%, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
}
.dvh-doc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dv-agent) 22%, transparent) 70%, var(--dv-agent) 96%, transparent);
  opacity: 0;
  transform: translateY(-100%);
}
.dvh-doc.is-reading::before { opacity: 1; }
.dvh-doc.is-reading::after { animation: dvh-read 900ms var(--ease-in-out) both; }
.dvh-doc.is-reading .dvh-doc__text span {
  background: color-mix(in srgb, var(--dv-agent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dv-agent) 40%, transparent);
  color: var(--ink);
  transition: background-color 300ms ease 400ms, box-shadow 300ms ease 400ms, color 300ms ease 400ms;
}
@keyframes dvh-read {
  0% { opacity: 0; transform: translateY(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(250%); }
}

/* The beam between the lanes */
.dvh-gate { position: relative; }
.dvh-gate__beam {
  position: absolute;
  left: 50%; top: 1.75rem; bottom: 0.5rem;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--sig-a) 20%, var(--sig-b) 80%, transparent);
  opacity: 0.5;
}
.dvh-gate__beam::after {
  content: "";
  position: absolute;
  inset: 0 -6px;
  background: inherit;
  filter: blur(6px);
  opacity: 0.7;
}
.dvh-gate__spark {
  position: absolute;
  left: 50%; top: 1.75rem;
  width: 0.875rem; height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, color-mix(in srgb, var(--sig-a) 80%, transparent) 30%, transparent 70%);
  opacity: 0;
}
@media (max-width: 39.99rem) { .dvh-gate__beam { width: 1.5px; } }

/* Done rows */
.dvh-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  height: 2.75rem;
  padding: 0 0.625rem 0 0.5rem;
  border-radius: 0.625rem;
  background: var(--dvh-card);
  box-shadow: 0 0 0 1px var(--dvh-card-edge), var(--dvh-card-shadow);
}
@media (min-width: 64rem) { .dvh-row { height: 3.25rem; padding: 0 0.75rem 0 0.625rem; } }
.dvh-row__main { display: grid; min-width: 0; line-height: 1.25; }
.dvh-row__main b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
.dvh-row__tag { font-size: 0.6875rem; padding-block: 0.15rem; }
.dvh-row__tag .dvh-face { width: 1.125rem; height: 1.125rem; margin: -0.1rem 0 -0.1rem -0.25rem; font-size: 0.5rem; box-shadow: none; }
.dvh-row__tag:has(.dvh-face)::before { display: none; }

/* A row waiting on a person: an orange edge until it is signed off. */
.dvh-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dv-person);
  opacity: 0;
  transition: opacity 400ms ease;
}
.dvh-row.is-waiting::before { opacity: 1; }
.dvh-row.is-signed::before { background: var(--dv-done); }

/* Phones: the tag takes the second line of the row, under the title. */
@media (max-width: 39.99rem) {
  .dvh-row { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0.125rem; align-content: center; height: 3rem; gap: 0.125rem 0.5rem; padding-inline: 0.5rem; }
  .dvh-row .dvh-ico { grid-row: span 2; }
  .dvh-row__main span { display: none; }
  .dvh-row__tag { justify-self: start; font-size: 0.625rem; padding: 0.05rem 0.45rem 0.05rem 0.35rem; }
  .dvh-doc { height: 3rem; }
  .dvh-doc .dvh-ico, .dvh-row .dvh-ico { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; }
  .dvh-doc .dvh-ico svg, .dvh-row .dvh-ico svg { width: 0.875rem; height: 0.875rem; }
  .dvh-doc__text span { font-size: 0.6875rem; }
}

/* A fresh row glows once in the agent color as it lands. */
.dvh-row__flash {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, color-mix(in srgb, var(--sig-a) 16%, transparent), color-mix(in srgb, var(--sig-b) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig-a) 40%, transparent);
  pointer-events: none;
}

/* Live log line along the bottom */
.dvh-log {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 0.6875rem;
  min-width: 0;
}
@media (min-width: 48rem) { .dvh-log { font-size: 0.75rem; height: 2.25rem; } }
.dvh-log__label { flex: none; font-weight: 600; color: var(--ink); }
.dvh-log__lines { position: relative; flex: 1; min-width: 0; height: 1.25rem; overflow: hidden; }
.dvh-log__line {
  position: absolute; inset: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  line-height: 1.25rem;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--ink-2);
}
.dvh-log__line time { margin-right: 0.75em; color: var(--ink-3); }

/* Motion -------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Load: the window rises out of a soft blur just after the headline. */
  .js .dvh-stage { animation: dvh-in 1400ms var(--ease-out) 380ms both; }
  .js .dvh-glow { animation: dvh-glow-in 2200ms var(--ease-out) 500ms both; }
  .js .dvh-tilt { transform: perspective(1800px) translateY(2.5rem) rotateX(22deg) scale(0.9); }
  @media (max-width: 47.99rem) { .js .dvh-tilt { transform: perspective(1400px) translateY(1rem) rotateX(10deg) scale(0.96); } }

  .dvh-aura i:nth-child(1) { animation: dvh-drift 18s ease-in-out infinite alternate; }
  .dvh-aura i:nth-child(2) { animation: dvh-drift 22s ease-in-out -7s infinite alternate-reverse; }

  .dvh-pulse::after { animation: dvh-ping 2.2s var(--ease-out) infinite; }
  .dvh-gate__beam { animation: dvh-beam 3.2s ease-in-out infinite; }
}
@keyframes dvh-in {
  from { opacity: 0; transform: translateY(3rem); filter: blur(10px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes dvh-glow-in { from { transform: scale(0.7); } }
@keyframes dvh-drift { to { transform: translate3d(4rem, -2rem, 0) scale(1.1); } }
@keyframes dvh-ping {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(3); opacity: 0; }
}
@keyframes dvh-beam { 50% { opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .dvh-stage, .dvh-glow, .dvh-aura i, .dvh-pulse::after, .dvh-gate__beam { animation: none !important; }
  .dvh-tilt { transform: none !important; }
  .dvh-odo__s, .dvh-spark i { transition: none; }
}


/* --------------------------------------------------------------------------
   Statement: one large paragraph that lights up word by word as it scrolls
   through, then three pillars, each with its own small animated drawing.

   Each word keeps its real text in a dim color; an aria-hidden copy in full
   ink sits exactly on top and the script raises only its opacity, so the
   light moves without reflowing or recoloring text. Unlit words stay above
   3:1 so the sentence reads even before it is lit.
   -------------------------------------------------------------------------- */

.dvs {
  --dvs-dim: #8e8e93;            /* 3.3:1 on white: unlit words stay readable */
  --dvs-sheet: #ffffff;
  --dvs-edge: rgba(0, 0, 0, 0.1);
  --dvs-ink-soft: rgba(0, 0, 0, 0.16);
}
@media (prefers-color-scheme: dark) {
  .dvs {
    --dvs-dim: #5c5c61;
    --dvs-sheet: #2c2c2e;
    --dvs-edge: rgba(255, 255, 255, 0.12);
    --dvs-ink-soft: rgba(255, 255, 255, 0.22);
  }
}

.dv-section.dvs { padding-block: clamp(3.5rem, 1.5rem + 6vw, 8rem) var(--section); }

.dvs-eyebrow {
  margin: 0 0 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--ink-2);
}

.dvs-text {
  max-width: 21em;
  font-size: clamp(1.875rem, 1.05rem + 2.75vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 600;
  text-wrap: pretty;
}

/* Without the script (or with reduced motion) the paragraph is plain ink,
   with the key phrase already in the brand gradient. */
.dvs-text:not(.is-armed) .dvs-key {
  background: var(--dv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Armed by the script: words start dim and light as it scrolls. */
.dvs-text.is-armed .dvs-w { position: relative; color: var(--dvs-dim); }
.dvs-w__on {
  position: absolute;
  left: 0; top: 0;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
/* The key phrase lights in the brand gradient, one continuous sweep across
   its words: each word shows its own slice of a phrase-wide gradient. */
.dvs-key .dvs-w__on {
  background: var(--dv-grad);
  background-size: var(--gw, 100%) 100%;
  background-position: var(--gx, 0) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pillars -------------------------------------------------------------- */

.dvs-pillars {
  display: grid;
  gap: 1rem;
  margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
@media (min-width: 48rem) { .dvs-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.dvs-pillar {
  --tint: var(--dv-agent);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--tile);
  overflow: hidden;
  isolation: isolate;
}
.dvs-pillar--person { --tint: var(--dv-person); }
.dvs-pillar--done { --tint: var(--dv-done); }
@media (min-width: 64rem) { .dvs-pillar { padding: 0.875rem 0.875rem 2.25rem; } }

.dvs-glyph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius-lg) - 0.5rem);
  background:
    radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--tint) 13%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg) 55%, transparent);
  overflow: hidden;
}
.dvs-glyph::after {
  /* faint dot texture, like the page grid, to give the drawing a floor */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.dvs-svg { position: absolute; inset: 6% 4%; width: 92%; height: 88%; overflow: visible; }

.dvs-pillar__title {
  margin: 1.5rem 0.75rem 0;
  font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.17;
  letter-spacing: 0.002em;
  font-weight: 600;
}
.dvs-pillar__line {
  margin: 0.5rem 0.75rem 0;
  font-size: 1.0625rem;
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 64rem) {
  .dvs-pillar__title, .dvs-pillar__line { margin-inline: 1rem; }
}

/* Shared drawing materials */
.dvs-doc rect, .dvs-own__sheet, .dvs-token rect {
  fill: var(--dvs-sheet);
  stroke: var(--dvs-edge);
  stroke-width: 1;
}
.dvs-doc rect { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08)); }
.dvs-doc path { fill: none; stroke: var(--dvs-ink-soft); stroke-width: 3; stroke-linecap: round; }

/* 1 · volume */
.dvs-vol__tray { fill: var(--c); opacity: 0.85; }
.dvs-vol__beam { fill: color-mix(in srgb, var(--dv-agent) 20%, transparent); opacity: 0; }
.dvs-vol__tray { transform-box: fill-box; transform-origin: 50% 50%; }
.dvs-tick circle { fill: var(--dv-agent); }
.dvs-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 2 · ownership */
.dvs-own__sheet { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1)); }
.dvs-own__scan { fill: color-mix(in srgb, var(--dv-person) 16%, transparent); opacity: 0; }
.dvs-own__line { fill: none; stroke: var(--dvs-ink-soft); stroke-width: 6; stroke-linecap: round; }
.dvs-own__mark { fill: none; stroke: var(--dv-person); stroke-width: 2.5; }
.dvs-own__rule { fill: none; stroke: var(--dvs-edge); stroke-width: 1.5; }
.dvs-own__sig { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dvs-own__halo { fill: var(--tile); }
.dvs-own__avatar { fill: var(--dv-person); }
.dvs-own__head, .dvs-own__body { fill: #fff; }
.dvs-own__body { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
.dvs-own__seal-bg { fill: var(--dv-done); }
.dvs-own__seal-ring { fill: none; stroke: color-mix(in srgb, var(--dv-done) 40%, transparent); stroke-width: 2; }
.dvs-own__seal-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 3 · per result */
.dvs-pay__face { fill: var(--dvs-sheet); stroke: var(--ink-3); stroke-width: 3; }
.dvs-pay__ticks { stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.dvs-pay__hand { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.dvs-pay__hand--h { stroke-width: 4.5; }
.dvs-pay__pin { fill: var(--ink); }
.dvs-pay__strike { fill: none; stroke: var(--dv-flag); stroke-width: 4.5; stroke-linecap: round; }
.dvs-pay__clock { opacity: 0.55; }
.dvs-pay__label { font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--ink-2); letter-spacing: 0; }
.dvs-pay__label--on { fill: var(--dv-done); }
.dvs-pay__arrow { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dvs-pay__slots rect { fill: none; stroke: var(--dvs-ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dvs-token rect { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08)); }
.dvs-token__ico { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dvs-token__ok circle { fill: var(--dv-done); stroke: var(--tile); stroke-width: 2.5; }
.dvs-token__ok path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hands turn around the clock's center: the origin of their own group. */
.dvs-pay__hand { transform-box: view-box; transform-origin: 0 0; }
.dvs-pay__hand--h { transform: rotate(-60deg); }
.dvs-pay__hand--m { transform: rotate(60deg); }
.dvs-w__on { user-select: none; -webkit-user-select: none; }

/* Armed: the script hides only what the drawing adds. The first frame is
   already a composed picture (a heap of paper, a page to review, a clock
   beside four empty slots), so a card never shows an empty stage. Without
   the script all of it is shown in its finished state. */
.dvs-pillar.is-armed :is(.dvs-tick, .dvs-own__mark, .dvs-own__face, .dvs-own__seal, .dvs-token, .dvs-own__sig, .dvs-pay__strike) { opacity: 0; }
.dvs-pillar.is-armed .dvs-own__sig, .dvs-pillar.is-armed .dvs-pay__strike { stroke-dashoffset: 1; }
.dvs-own__sig, .dvs-pay__strike, .dvs-own__seal-ring, .dvs-own__seal-tick { stroke-dasharray: 1; }
.dvs-text.is-armed .dvs-w { display: inline-block; }
.dvs-text.is-armed .dvs-w__on { transition: opacity 220ms linear; }


/* --------------------------------------------------------------------------
   Showcase (dvx-): pick a job, watch it run
   A dark band. The app window floats over a soft light in the color of the
   chosen job; inside it, each job plays as a short film while the run log
   writes itself beside it. Scene type is sized in em from the stage width
   (container units), so a film reads the same on a phone and a desktop.
   -------------------------------------------------------------------------- */

/* Clip, not hide: a hidden band could still be scrolled sideways by focus. */
.dvx { isolation: isolate; overflow: hidden; overflow: clip; }
.dvx > .container { position: relative; z-index: 1; }
.dvx-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Light behind the window: one layer per job, crossfaded. Scroll sets
   --dvx-glow as the window arrives. */
.dvx-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--dvx-glow, 1);
}
.dvx-aura i {
  position: absolute;
  left: 50%;
  top: 62%;
  width: min(84rem, 150vw);
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 1400ms var(--ease-out);
  animation: dvx-drift 22s ease-in-out infinite alternate;
}
.dvx-aura i:nth-child(1) { --c: rgba(41, 151, 255, 0.26); }
.dvx-aura i:nth-child(2) { --c: rgba(165, 134, 255, 0.26); }
.dvx-aura i:nth-child(3) { --c: rgba(64, 196, 220, 0.22); }
.dvx-aura i:nth-child(4) { --c: rgba(255, 159, 10, 0.2); }
.dvx-aura i:nth-child(5) { --c: rgba(255, 92, 138, 0.22); }
.dvx-aura i.is-on { opacity: 1; }
.dvx:not(.is-live) .dvx-aura i { animation-play-state: paused; }
@keyframes dvx-drift {
  from { transform: translate(-52%, -50%) scale(1) rotate(0deg); }
  to { transform: translate(-48%, -53%) scale(1.08) rotate(6deg); }
}


/* Picker ------------------------------------------------------------------ */

.dvx-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.dvx-seg { max-width: 100%; }
.dvx-seg.is-more-right { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.dvx-seg.is-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
.dvx-seg.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.dvx-seg .dv-seg__btn { min-height: 2.75rem; }
/* On the dark band the card-colored pill nearly vanishes; lift it like a
   dark-mode segmented control, with a hairline of light on top. */
.dvx-seg .dv-seg__pill {
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media (hover: hover) and (pointer: fine) {
  .dvx-seg .dv-seg__btn:hover { color: var(--ink); }
}
.dvx-seg .dv-seg__btn:active { transform: scale(0.97); }
.dvx-seg .dv-seg__btn { transition: color 200ms ease, transform 160ms var(--ease-out); }
.dvx-blurb {
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
}
.dvx-blurb__out { color: var(--ink); }


/* Rig: window and log ------------------------------------------------------ */

.dvx-rig {
  display: grid;
  gap: 1.25rem;
  perspective: 2000px;
}
@media (min-width: 64rem) {
  .dvx-rig { grid-template-columns: minmax(0, 1fr) 20.5rem; gap: 1.5rem; }
}
.dvx-main { min-width: 0; transform-origin: 50% 0; }

.dvx-win {
  box-shadow: 0 0 0 1px var(--dv-glass-edge), 0 40px 80px -24px rgba(0, 0, 0, 0.8), 0 0 120px -40px rgba(41, 151, 255, 0.25);
}
.dvx-win .dv-window__bar { position: relative; }
.dvx-win__title {
  flex: 1;
  min-width: 0;
  margin-right: 0;
  text-align: left;
  color: var(--ink);
}
.dvx-win__title span { display: none; color: var(--ink-2); font-weight: 500; }
@media (min-width: 40rem) {
  .dvx-win__title {
    position: absolute;
    left: 50%;
    max-width: calc(100% - 20rem);
    transform: translateX(-50%);
    text-align: center;
  }
  .dvx-win__title span { display: inline; }
}

/* Status pill in the title bar: who has the work right now. */
.dvx-status {
  --c: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.dvx-status i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.dvx-status[data-s="agent"] { --c: var(--dv-agent); }
.dvx-status[data-s="rule"] { --c: var(--dv-rule); }
.dvx-status[data-s="person"] { --c: var(--dv-person); }
.dvx-status[data-s="done"] { --c: var(--dv-done); }
.dvx-status:is([data-s="agent"], [data-s="rule"], [data-s="person"]) i { animation: dvx-pulse 1.4s ease-in-out infinite; }
@keyframes dvx-pulse { 50% { opacity: 0.35; transform: scale(0.7); } }

/* Run progress, a hairline of light under the title bar. */
.dvx-bar { height: 2px; background: rgba(255, 255, 255, 0.06); }
.dvx-bar i {
  display: block;
  height: 100%;
  background: var(--dv-grad);
  box-shadow: 0 0 10px rgba(41, 151, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}

/* The stage every film plays on. */
.dvx-stage {
  position: relative;
  height: 30rem;
  overflow: hidden;
  container: dvx / inline-size;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}
@media (min-width: 40rem) { .dvx-stage { height: 32rem; } }
@media (min-width: 64rem) { .dvx-stage { height: 32.5rem; } }

/* Controls under the window */
.dvx-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin-top: 1rem;
}
.dvx-replay {
  min-height: 2.75rem;
  padding: 0 1rem 0 0.875rem;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}
.dvx-replay[hidden] { display: none; }
.dvx-replay svg { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .dvx-replay:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }
  .dvx-replay:hover svg { transform: rotate(-40deg); }
}
.dvx-next {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.75rem 0 1.125rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2);
  font-size: 0.875rem;
  transition: transform 160ms var(--ease-out);
  animation: dvx-fade-up 500ms var(--ease-out) both;
}
.dvx-next[hidden] { display: none; }
.dvx-next:active { transform: scale(0.97); }
.dvx-next b { color: var(--ink); font-weight: 600; }
.dvx-next__text { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvx-next svg { position: relative; flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvx-next__fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}
.dvx-next.is-counting .dvx-next__fill { transform: scaleX(1); transition: transform 3200ms linear; }
@keyframes dvx-fade-up { from { opacity: 0; transform: translateY(6px); } }

.dvx-foot {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-3);
}


/* Run log -------------------------------------------------------------------- */

.dvx-log {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.125rem 1.25rem 1.125rem;
  border-radius: var(--dv-radius);
  background: rgba(28, 28, 30, 0.6);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 0 0 1px var(--dv-glass-edge);
}
.dvx-log__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.dvx-log__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.dvx-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--ink-2); text-align: right; }
.dvx-live i { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dv-done); box-shadow: 0 0 8px var(--dv-done); animation: dvx-pulse 2s ease-in-out infinite; }

.dvx-log__list {
  list-style: none;
  max-height: 19rem;
  margin: 0;
  padding: 0.5rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent);
}
.dvx-log__list::-webkit-scrollbar { display: none; }
.dvx-log__list.is-fresh { animation: dvx-fade 400ms ease both; }
@keyframes dvx-fade { from { opacity: 0; } }
@media (min-width: 64rem) {
  .dvx-log__list { flex: 1 1 0; min-height: 0; max-height: none; }
}

/* One line per step: time, then who, then what. A rail joins the steps. */
.dvx-line {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 0.55rem 0;
}
.dvx-line time { grid-row: span 2; padding-top: 0.15rem; font-size: 0.75rem; color: var(--ink-3); }
.dvx-line .dv-tag { justify-self: start; font-size: 0.6875rem; }
.dvx-line p { font-size: 0.875rem; line-height: 1.38; color: var(--ink-2); text-wrap: pretty; }
.dvx-line.is-now p { color: var(--ink); }
.dvx-line.is-enter { animation: dvx-line-in 700ms var(--ease-out) both; }
@keyframes dvx-line-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
}

/* Result for the run */
.dvx-result { margin-top: auto; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.dvx-result__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; }
.dvx-result__title { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.dvx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.dvx-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.15rem; min-width: 0; }
.dvx-stat dd { margin: 0; font-size: 1.5rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-3); }
.dvx-stat dt { font-size: 0.75rem; line-height: 1.25; color: var(--ink-2); }
.dvx-result.is-done .dvx-stat dd { color: var(--ink); }


/* Scene system -------------------------------------------------------------- */
/* .dvx-scene  > .dvx-cam (depth: pushed back under overlays)
               > .dvx-track (pan: zones side by side, or one at a time on phones)
               > .dvx-zone
   .dvx-over   cards that land on top of the scene. */

.dvx-scene {
  position: absolute;
  inset: 0;
  font-size: clamp(12px, 0.5rem + 0.9cqi, 0.95rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.dvx-scene.is-entering { animation: dvx-scene-in 850ms var(--ease-out) both; }
@keyframes dvx-scene-in { from { opacity: 0; transform: scale(1.035); filter: blur(10px); } }
.dvx-scene.is-leaving {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(8px);
  transition: opacity 450ms ease, transform 500ms var(--ease-out), filter 450ms ease;
}
.dvx-scene b { font-weight: 600; }
.dvx-scene small { font-size: max(0.82em, 11px); color: var(--ink-2); }
.dvx-scene .dv-tag { font-size: max(0.74em, 11px); }
.dvx-scene .dv-num { font-variant-numeric: tabular-nums; }

.dvx-cam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 45%;
  transition: transform 900ms var(--ease-in-out), opacity 700ms ease;
}
.dvx-scene.is-back .dvx-cam { transform: scale(0.92); opacity: 0.28; }

.dvx-track {
  --cols: minmax(0, 1fr) minmax(0, 1fr);
  position: absolute;
  inset: 1.5em;
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1.5em;
  transition: transform 950ms var(--ease-in-out);
}
.dvx-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-width: 0;
  min-height: 0;
  transition: opacity 800ms ease;
}
/* The zone being worked on is lit; the other rests. */
.dvx-scene[data-shot="0"]:not([data-all]) .dvx-zone:nth-child(2),
.dvx-scene[data-shot="1"]:not([data-all]) .dvx-zone:nth-child(1) { opacity: 0.42; }

/* Phones: one zone at a time and the camera pans between them. */
@container dvx (max-width: 37.5rem) {
  .dvx-track { inset: 1.25em 0; display: flex; gap: 0; }
  .dvx-zone { flex: 0 0 100%; padding-inline: 1.25em; }
  .dvx-scene[data-shot="1"] .dvx-track { transform: translateX(-100%); }
}

.dvx-over { position: absolute; z-index: 3; }


/* Shared parts --------------------------------------------------------------- */

.dvx-panel {
  position: relative;
  padding: 1em 1.1em;
  border-radius: 1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 1.2em 2.4em -1.2em rgba(0, 0, 0, 0.6);
}
.dvx-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-bottom: 0.8em;
  font-size: max(0.92em, 11px);
}
.dvx-meta { color: var(--ink-2); font-size: max(0.9em, 11px); white-space: nowrap; }
.dvx-block__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.6em;
  font-size: max(0.86em, 11px);
  font-weight: 600;
}
.dvx-block__title > span { color: var(--ink-2); font-weight: 500; }
.dvx-block__title > .dvx-count {
  min-width: 1.6em;
  padding: 0.05em 0.5em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  text-align: center;
}

/* Paper: documents stay paper-white on the dark stage. */
.dvx-paper {
  position: relative;
  overflow: hidden;
  border-radius: 0.45em;
  background: #fbfbfa;
  color: #1d1d1f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3em 0.8em rgba(0, 0, 0, 0.3), 0 1.6em 3em -1em rgba(0, 0, 0, 0.7);
}
.dvx-paper small { color: #6e6e73; }
.dvx-ln { display: block; width: var(--w); height: 0.42em; margin-top: 0.55em; border-radius: 1em; background: rgba(0, 0, 0, 0.08); }

/* The scan beam: a line of light with a soft wake. */
.dvx-beam { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.dvx-beam i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4em;
  transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(41, 151, 255, 0), rgba(41, 151, 255, 0.16) 75%, rgba(41, 151, 255, 0.4));
}
.dvx-beam i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #2997ff;
  box-shadow: 0 0 0.6em 0.15em rgba(41, 151, 255, 0.8), 0 0 2em 0.4em rgba(41, 151, 255, 0.35);
}

/* A field the agent read, boxed with its confidence. */
.dvx-hl { position: relative; display: inline-block; }
.dvx-hl::before {
  content: "";
  position: absolute;
  inset: -0.2em -0.35em;
  border-radius: 0.35em;
  border: 1.5px solid #0071e3;
  background: rgba(0, 113, 227, 0.08);
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 250ms ease, transform 550ms var(--dv-spring);
}
.dvx-hl[data-l]::after {
  content: attr(data-l);
  position: absolute;
  left: -0.35em;
  bottom: calc(100% + 0.35em);
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  background: #0071e3;
  color: #fff;
  font-size: 11px;
  font-size: max(0.62em, 11px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 300ms ease 120ms, transform 500ms var(--ease-out) 120ms;
}
.dvx-hl.is-on::before, .dvx-hl.is-on::after { opacity: 1; transform: none; }

/* Inputs: an empty box until a value lands in it with a flash of light. */
.dvx-field { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.dvx-field--wide { grid-column: 1 / -1; }
.dvx-input {
  position: relative;
  display: block;
  min-height: 2.2em;
  padding: 0.45em 0.65em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: max(0.92em, 11px);
}
.dvx-input::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px #2997ff, 0 0 1.2em rgba(41, 151, 255, 0.5);
  opacity: 0;
}
.dvx-input:has(> .is-on)::after { animation: dvx-flash 1300ms ease-out both; }
@keyframes dvx-flash { 20% { opacity: 1; } 100% { opacity: 0; } }
.dvx-field__v {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 350ms ease, transform 500ms var(--ease-out);
}
.dvx-field__v.is-on { opacity: 1; transform: none; }

/* Value that rolls from one text to another. */
.dvx-roll { display: inline-grid; justify-items: start; overflow: hidden; vertical-align: bottom; }
.dvx-roll > span { grid-area: 1 / 1; white-space: nowrap; transition: transform 650ms var(--ease-out), opacity 400ms ease; }
.dvx-roll > span:last-child { transform: translateY(100%); opacity: 0; }
.dvx-roll.is-on > span:first-child { transform: translateY(-100%); opacity: 0; }
.dvx-roll.is-on > span:last-child { transform: none; opacity: 1; }

/* Ticks and crosses: a disc pops, then the mark draws. */
.dvx-ok, .dvx-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: #32d74b;
  color: #062b10;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 200ms ease, transform 550ms var(--dv-spring);
}
.dvx-no { background: #ff6961; color: #3a0705; }
.dvx-ok svg, .dvx-no svg {
  width: 0.95em;
  height: 0.95em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 450ms var(--ease-out) 180ms;
}
.dvx-ok.is-on, .is-on > .dvx-ok, .is-on > .dvx-no { opacity: 1; transform: none; }
.dvx-ok.is-on svg, .is-on > .dvx-ok svg, .is-on > .dvx-no svg { clip-path: inset(0 0 0 0); }

.dvx-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 50%, #000));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: max(0.78em, 11px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Buttons a person presses inside a scene. */
.dvx-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 2.4em;
  padding: 0.4em 0.95em;
  border-radius: 0.7em;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: max(0.86em, 11px);
  font-weight: 600;
  text-align: center;
  transition: transform 160ms var(--ease-out);
}
.dvx-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #248a3d;
  opacity: 0;
  transition: opacity 300ms ease;
}
.dvx-btn > span {
  position: relative;
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: opacity 300ms ease, transform 450ms var(--ease-out);
}
.dvx-btn__b { opacity: 0; transform: translateY(0.6em); }
.dvx-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dvx-btn.is-press { transform: scale(0.93); }
.dvx-btn.is-done::before { opacity: 1; }
.dvx-btn.is-done .dvx-btn__a { opacity: 0; transform: translateY(-0.6em); }
.dvx-btn.is-done .dvx-btn__b { opacity: 1; transform: none; }
.dvx-btn--yes { background: #0a84ff; color: #fff; }
.dvx-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
.dvx-btn--pick { background: rgba(255, 159, 10, 0.12); color: #ffb340; box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.45); }
.dvx-btn--pick::before { background: rgba(255, 159, 10, 0.24); }

/* A fingertip, for the moment a person decides. */
.dvx-touch {
  position: absolute;
  z-index: 6;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0.4em 1.2em rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
}

/* A value on its way from the document to the form. */
.dvx-ghost {
  position: absolute;
  z-index: 5;
  padding: 0.3em 0.65em;
  border-radius: 0.5em;
  background: rgba(10, 132, 255, 0.92);
  color: #fff;
  font-size: max(0.86em, 11px);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0.6em 1.6em rgba(10, 132, 255, 0.45);
  pointer-events: none;
}
.dvx-ghost-clone { position: absolute; z-index: 5; margin: 0; pointer-events: none; }

/* Approval card that drops in from the top, like a notification. */
.dvx-toast {
  left: 50%;
  top: 1.25em;
  translate: -50% 0;
  width: min(23em, calc(100% - 2em));
  padding: 0.9em 1em 1em;
  border-radius: 1.1em;
  background: rgba(50, 50, 52, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1.5em 3em -0.5em rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(-125%) scale(0.96);
  transition: transform 450ms cubic-bezier(0.5, 0, 0.75, 0), opacity 400ms ease;
}
.dvx-toast.is-on { opacity: 1; transform: none; transition: transform 750ms var(--dv-spring), opacity 250ms ease; }
.dvx-toast__head { display: flex; align-items: center; gap: 0.6em; font-size: max(0.82em, 11px); }
.dvx-toast__head > span { display: flex; flex-direction: column; }
.dvx-toast__head small { font-size: max(0.9em, 11px); }
.dvx-toast__head time { margin-left: auto; align-self: flex-start; color: var(--ink-3); font-size: max(0.9em, 11px); }
.dvx-toast__title { display: block; margin-top: 0.7em; font-size: max(0.95em, 11px); }
.dvx-toast p { margin-top: 0.2em; font-size: max(0.84em, 11px); color: var(--ink-2); }
.dvx-toast__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 0.85em; }

/* Rule banner */
.dvx-rulebar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.9em;
  padding: 0.55em 0.7em;
  border-radius: 0.65em;
  background: rgba(165, 134, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(165, 134, 255, 0.4);
  font-size: max(0.84em, 11px);
  opacity: 0;
  transform: translateY(0.5em) scale(0.98);
  transition: opacity 350ms ease, transform 600ms var(--dv-spring);
}
.dvx-rulebar.is-on { opacity: 1; transform: none; }
.dvx-rulebar .dv-tag { font-size: max(0.85em, 11px); }

/* Status tag in a panel head ("Posted as draft", "Entered") */
.dvx-posted { opacity: 0; transform: scale(0.7); transition: opacity 250ms ease, transform 550ms var(--dv-spring); }
.dvx-posted.is-on { opacity: 1; transform: none; }

/* Email */
.dvx-mail { opacity: 0; transform: translateY(1.2em) scale(0.98); transition: opacity 500ms ease, transform 800ms var(--ease-out); }
.dvx-mail.is-on { opacity: 1; transform: none; }
.dvx-mail__from { display: flex; align-items: center; gap: 0.6em; font-size: max(0.84em, 11px); }
.dvx-mail__from > span { display: flex; flex-direction: column; }
.dvx-mail__from time { margin-left: auto; align-self: flex-start; color: var(--ink-3); font-size: max(0.9em, 11px); }
.dvx-mail__subj { display: block; margin: 0.85em 0 0.35em; font-size: max(0.98em, 11px); }
.dvx-mail p { font-size: max(0.88em, 11px); line-height: 1.5; color: var(--ink-2); }
.dvx-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.85em;
  padding: 0.35em 0.65em 0.35em 0.5em;
  border-radius: 0.55em;
  background: rgba(255, 255, 255, 0.08);
  font-size: max(0.78em, 11px);
  font-weight: 500;
}
.dvx-attach svg { width: 1.25em; height: 1.25em; fill: none; stroke: #ff6961; stroke-width: 1.8; stroke-linejoin: round; }

/* Centered card that lands over the scene at the end */
.dvx-pl, .dvx-cert, .dvx-reply {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(24em, calc(100% - 2.5em));
  opacity: 0;
  transform: translateY(2.5em) scale(0.95);
  transition: opacity 500ms ease, transform 1000ms var(--ease-out);
}
.dvx-pl.is-on, .dvx-reply.is-on { opacity: 1; transform: none; }
/* Dark result cards frost what's behind them, so the scene never reads
   through their text, even mid-fade. */
.dvx-pl, .dvx-reply { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }


/* 1 · Month-end close ------------------------------------------------------- */

.dvx-close { --cols: minmax(0, 1.3fr) minmax(0, 1fr); }
.dvx-rows { list-style: none; display: grid; }
.dvx-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "who who amt" "date acct clip";
  align-items: center;
  gap: 0.25em 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.6em;
  font-size: max(0.9em, 11px);
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 450ms ease, transform 700ms var(--ease-out);
}
.dvx-row + .dvx-row { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06); }
.dvx-row.is-on { opacity: 1; transform: none; }
.dvx-row__who { grid-area: who; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.dvx-row__amt { grid-area: amt; justify-self: end; position: relative; }
.dvx-row__amt.is-in { color: #32d74b; }
.dvx-row__date { grid-area: date; color: var(--ink-3); font-size: max(0.86em, 11px); min-width: 3em; }
.dvx-row__acct { grid-area: acct; min-width: 0; display: flex; }
.dvx-clip { grid-area: clip; width: 1.1em; height: 1.1em; color: #69b4ff; opacity: 0; transform: scale(0.4) rotate(-30deg); transition: opacity 200ms ease, transform 600ms var(--dv-spring); }
.dvx-clip.is-on { opacity: 1; transform: none; }
.dvx-clip svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.dvx-acct {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: 100%;
  padding: 0.12em 0.55em;
  border-radius: 1em;
  background: rgba(41, 151, 255, 0.16);
  color: #6cb6ff;
  font-size: max(0.86em, 11px);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: perspective(12em) rotateX(-85deg);
  transform-origin: 50% 0;
  transition: opacity 250ms ease, transform 700ms var(--dv-spring);
}
.dvx-acct em { font-style: normal; font-weight: 500; opacity: 0.7; }
.dvx-acct.is-on { opacity: 1; transform: none; }
.dvx-acct--rule { background: rgba(165, 134, 255, 0.18); color: #c3b0ff; }

/* The duplicate pair glows violet; the copy is held, struck through. */
.dvx-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px #a586ff, 0 0 1.4em rgba(165, 134, 255, 0.3);
  background: rgba(165, 134, 255, 0.08);
  opacity: 0;
  transition: opacity 350ms ease;
}
.dvx-row.is-pair::after { opacity: 1; }
.dvx-row__who, .dvx-row__date { transition: opacity 400ms ease; }
.dvx-row.is-held .dvx-row__who, .dvx-row.is-held .dvx-row__date, .dvx-row.is-held .dvx-row__amt { opacity: 0.45; }
.dvx-row__amt::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 52%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out) 150ms;
}
.dvx-row.is-held .dvx-row__amt::after { transform: none; }

/* Receipts waiting in the tray */
.dvx-tray {
  display: flex;
  align-items: flex-end;
  gap: 0.7em;
  margin-top: auto;
  padding: 0.75em 0.9em;
  border-radius: 0.9em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}
.dvx-tray { position: relative; min-height: 6.4em; }
.dvx-tray__label { align-self: center; margin-right: auto; font-size: max(0.8em, 11px); color: var(--ink-2); }
.dvx-tray__done {
  position: absolute;
  right: 0.9em;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #32d74b;
  font-size: max(0.82em, 11px);
  font-weight: 600;
  opacity: 0;
  transform: translateY(-50%) scale(0.85);
  transition: opacity 300ms ease, transform 600ms var(--dv-spring);
}
.dvx-tray__done.is-on { opacity: 1; transform: translateY(-50%); }
.dvx-tray__done svg, .dvx-cert__sign svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dvx-receipt {
  --r: -4deg;
  display: flex;
  flex-direction: column;
  width: 5.4em;
  padding: 0.55em 0.55em 1em;
  background: #fbfbfa;
  color: #1d1d1f;
  font-size: max(0.68em, 11px);
  line-height: 1.2;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.4em), 93.75% 100%, 87.5% calc(100% - 0.4em), 81.25% 100%, 75% calc(100% - 0.4em), 68.75% 100%, 62.5% calc(100% - 0.4em), 56.25% 100%, 50% calc(100% - 0.4em), 43.75% 100%, 37.5% calc(100% - 0.4em), 31.25% 100%, 25% calc(100% - 0.4em), 18.75% 100%, 12.5% calc(100% - 0.4em), 6.25% 100%, 0 calc(100% - 0.4em));
  opacity: 0;
  transform: translateY(-2.5em) rotate(calc(var(--r) * -2));
  transition: opacity 300ms ease, transform 750ms var(--dv-spring);
}
.dvx-receipt:nth-of-type(2) { --r: 3deg; }
.dvx-receipt:nth-of-type(3) { --r: -1.5deg; }
.dvx-receipt .dvx-ln { height: 0.45em; margin-top: 0.45em; }
.dvx-receipt .dv-num { margin-top: 0.6em; font-weight: 700; }
.dvx-receipt.is-on { opacity: 1; transform: rotate(var(--r)); }
.dvx-receipt.is-gone { opacity: 0; transform: scale(0.8); transition-duration: 150ms; }
.dvx-ghost-clone.dvx-receipt { opacity: 1; clip-path: none; box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.5); }

/* Close checklist */
.dvx-close__list { flex: 1; display: flex; flex-direction: column; }
.dvx-block { padding: 0.8em 0; }
.dvx-block + .dvx-block { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.dvx-panel__head + .dvx-block { padding-top: 0.1em; }
.dvx-recon { display: grid; grid-template-columns: auto auto; justify-content: space-between; row-gap: 0.15em; font-size: max(0.86em, 11px); }
.dvx-recon span { color: var(--ink-2); }
.dvx-recon b { text-align: right; }
.dvx-meter { height: 0.45em; margin: 0.65em 0 0.55em; border-radius: 1em; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dvx-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2997ff, #32d74b);
  transform: scaleX(0.08);
  transform-origin: left;
  transition: transform 1400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dvx-meter i.is-on { transform: none; }
.dvx-diff { display: flex; align-items: center; gap: 0.5em; font-size: max(0.86em, 11px); }
.dvx-diff span:first-child { color: var(--ink-2); }
.dvx-diff b { margin-left: auto; color: #ff8a80; }
.dvx-diff.is-on b { color: #32d74b; }
.dvx-diff .dvx-ok { width: 1.3em; height: 1.3em; }

.dvx-qs { list-style: none; display: grid; gap: 0.4em; }
.dvx-q {
  position: relative;
  padding: 0.45em 0.65em 0.45em 1.5em;
  border-radius: 0.6em;
  background: rgba(255, 105, 97, 0.08);
  font-size: max(0.82em, 11px);
  line-height: 1.3;
  opacity: 0;
  transform: translateX(1.5em);
  transition: opacity 400ms ease, transform 700ms var(--ease-out);
}
.dvx-q::before {
  content: "";
  position: absolute;
  left: 0.65em;
  top: 0.95em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: #ff6961;
}
.dvx-q.is-on { opacity: 1; transform: none; }

.dvx-signoff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av who tag" "sig sig sig";
  align-items: center;
  gap: 0.35em 0.65em;
  margin-top: auto;
  opacity: 0.4;
  transition: opacity 500ms ease;
}
.dvx-signoff.is-on { opacity: 1; }
.dvx-signoff .dvx-av { grid-area: av; }
.dvx-signoff__who { grid-area: who; display: flex; flex-direction: column; font-size: max(0.86em, 11px); }
.dvx-signoff__tag { grid-area: tag; opacity: 0; transform: scale(0.7); transition: opacity 250ms ease, transform 600ms var(--dv-spring); }
.dvx-signoff__tag.is-on { opacity: 1; transform: none; }
.dvx-sig {
  grid-area: sig;
  width: 8.5em;
  height: 2.4em;
  margin-left: 2.6em;
  fill: none;
  stroke: #f5f5f7;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms cubic-bezier(0.45, 0, 0.3, 1);
}
.dvx-sig.is-on { clip-path: inset(0 0 0 0); }

/* Profit and loss, with the stamp */
.dvx-pl {
  width: min(26em, calc(100% - 2.5em));
  padding: 1.3em 1.4em 1.1em;
  font-size: 1.04em;
  border-radius: 1.1em;
  background: rgba(40, 40, 42, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2em 4em -1em rgba(0, 0, 0, 0.8);
}
.dvx-pl__head { display: flex; flex-direction: column; gap: 0.1em; margin-bottom: 0.6em; }
.dvx-pl__head b { font-size: 1.1em; }
.dvx-pl__head span { color: var(--ink-2); font-size: max(0.84em, 11px); }
.dvx-pl__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35em 0.5em;
  padding: 0.6em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: max(0.9em, 11px);
}
.dvx-pl__row span { color: var(--ink-2); }
.dvx-pl__row i {
  grid-column: 1 / -1;
  height: 0.4em;
  border-radius: 1em;
  background: linear-gradient(90deg, #2997ff, #a586ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out) 350ms;
}
.dvx-pl__row:nth-of-type(3) i { transition-delay: 470ms; }
.dvx-pl__row--net i { background: linear-gradient(90deg, #30d158, #a8f0b8); transition-delay: 590ms; }
.dvx-pl__row--net span { color: var(--ink); font-weight: 600; }
.dvx-pl__row--net b { font-size: 1.15em; }
.dvx-pl.is-on .dvx-pl__row i { transform: scaleX(var(--v)); }
.dvx-stamp {
  position: absolute;
  right: 1em;
  top: 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.75em 0.3em 0.55em;
  border: 0.16em solid #32d74b;
  border-radius: 0.5em;
  background: rgba(16, 40, 22, 0.9);
  color: #32d74b;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-10deg);
}
.dvx-stamp.is-on { opacity: 1; }
.dvx-stamp svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dvx-ring { position: absolute; inset: -0.25em; border: 2px solid #32d74b; border-radius: 0.65em; pointer-events: none; }


/* 2 · Invoices and bills ----------------------------------------------------- */

.dvx-bills { --cols: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.dvx-zone--paper { justify-content: center; }
.dvx-inv {
  padding: 1.2em 1.25em 1.3em;
  font-size: max(0.8em, 11px);
  opacity: 0;
  transform: translateY(2em) rotate(-3deg) scale(0.96);
  transition: opacity 500ms ease, transform 1000ms var(--dv-spring);
}
.dvx-inv.is-on { opacity: 1; transform: rotate(-0.6deg); }
.dvx-inv__top { display: flex; align-items: flex-start; gap: 0.7em; margin-bottom: 1.4em; }
.dvx-logo { flex: none; width: 2.3em; height: 2.3em; border-radius: 0.6em; background: conic-gradient(from 210deg, #0a95ad, #1f3a68, #40c4dc, #0a95ad); }
.dvx-inv__from { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; }
.dvx-inv__from b { font-size: 1.1em; }
.dvx-inv__kind { margin-left: auto; font-size: max(0.75em, 11px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #86868b; }
.dvx-inv__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 0.9em;
  padding: 0.75em 0;
  border-block: 1px solid rgba(0, 0, 0, 0.08);
}
.dvx-inv__meta > span { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; font-weight: 600; }
.dvx-inv__lines { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5em 1em; font-size: max(0.95em, 11px); }
.dvx-inv__lines span:nth-child(3n + 2), .dvx-inv__lines span:nth-child(3n) { text-align: right; }
.dvx-inv__lines span:nth-child(3n + 1) { color: #424245; }
.dvx-inv__total { display: flex; justify-content: space-between; align-items: center; margin: 1em 0 0.6em; padding-top: 0.8em; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.dvx-inv__total b { font-size: 1.4em; letter-spacing: -0.01em; }

.dvx-bill { flex: 1; display: flex; flex-direction: column; }
.dvx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65em 0.8em; }
.dvx-match { margin-top: 1em; padding-top: 0.85em; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.dvx-match__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.35em 0;
  font-size: max(0.86em, 11px);
  opacity: 0.3;
  transition: opacity 400ms ease;
}
.dvx-match__row span:nth-child(2) { color: var(--ink-2); }
.dvx-match__row.is-on { opacity: 1; }
.dvx-match__row .dvx-ok { width: 1.35em; height: 1.35em; }
.dvx-slot2 { display: grid; margin-top: auto; }
.dvx-slot2 > * { grid-area: 1 / 1; margin: 0; }
.dvx-rulebar.is-on.is-past { opacity: 0; transform: translateY(-0.6em) scale(0.98); }
.dvx-donebar {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6em 0.75em;
  border-radius: 0.65em;
  background: rgba(50, 215, 75, 0.1);
  box-shadow: inset 0 0 0 1px rgba(50, 215, 75, 0.4);
  font-size: max(0.84em, 11px);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(0.7em) scale(0.98);
  transition: opacity 400ms ease 120ms, transform 700ms var(--dv-spring) 120ms;
}
.dvx-donebar.is-on { opacity: 1; transform: none; }
.dvx-donebar svg { flex: none; width: 1.35em; height: 1.35em; fill: none; stroke: #32d74b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvx-donebar span { color: var(--ink-2); }
.dvx-donebar b { color: var(--ink); }


/* 3 · Insurance paperwork ---------------------------------------------------- */

.dvx-coi { --cols: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.dvx-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 0.4em 0.3em 0; }
.dvx-doc {
  --r: -2.5deg;
  padding: 0.9em 0.9em 1.1em;
  font-size: max(0.78em, 11px);
  opacity: 0;
  transform: translateY(2em) rotate(calc(var(--r) * 3));
  transition: opacity 500ms ease, transform 900ms var(--dv-spring);
}
.dvx-doc + .dvx-doc { --r: 2deg; }
.dvx-doc small { display: block; font-size: max(0.85em, 11px); }
.dvx-doc b { display: block; margin-bottom: 0.3em; }
.dvx-doc.is-on { opacity: 1; transform: rotate(var(--r)); }

.dvx-cmp { flex: 1; display: flex; flex-direction: column; }
.dvx-cmp__grid { font-size: max(0.84em, 11px); }
.dvx-cmp__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) 1.6em;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.5em;
  opacity: 0.3;
  transition: opacity 450ms ease;
}
.dvx-cmp__row + .dvx-cmp__row { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07); }
.dvx-cmp__row--h { opacity: 1; padding-block: 0 0.5em; color: var(--ink-3); font-size: max(0.88em, 11px); }
.dvx-cmp__row.is-on { opacity: 1; }
.dvx-cmp__row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.6em;
  background: rgba(255, 105, 97, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 105, 97, 0.45);
  opacity: 0;
  transition: opacity 350ms ease;
}
.dvx-cmp__row--bad.is-on::before { opacity: 1; }
.dvx-cmp__row--bad.is-on .dv-num:nth-child(3) { color: #ff8a80; font-weight: 600; }
.dvx-cmp__row > * { position: relative; }
.dvx-cmp__row .dvx-ok, .dvx-cmp__row .dvx-no { width: 1.35em; height: 1.35em; justify-self: end; }

.dvx-decide {
  margin-top: auto;
  padding: 0.85em;
  border-radius: 0.85em;
  background: rgba(255, 159, 10, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.3);
  opacity: 0;
  transform: translateY(1em);
  transition: opacity 400ms ease, transform 750ms var(--ease-out);
}
.dvx-decide.is-on { opacity: 1; transform: none; }
.dvx-decide__who { display: flex; align-items: center; gap: 0.6em; font-size: max(0.84em, 11px); }
.dvx-decide__who > span { display: flex; flex-direction: column; }
.dvx-decide__opts { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.75em; }

.dvx-cert { padding: 1.3em 1.4em 1.4em; font-size: max(0.86em, 11px); transform: translateY(2.5em) scale(0.95) rotate(-1.5deg); }
.dvx-cert.is-on { opacity: 1; transform: rotate(-0.4deg); }
.dvx-cert__kicker { display: block; font-size: max(0.78em, 11px); font-weight: 600; letter-spacing: 0.04em; }
.dvx-cert__title { display: block; margin: 0.15em 0 0.9em; font-size: 1.12em; line-height: 1.2; }
.dvx-cert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em 1em; padding-top: 0.8em; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.dvx-cert [data-k="cl"] { display: flex; flex-direction: column; font-weight: 600; opacity: 0; transform: translateY(0.5em); transition: opacity 350ms ease, transform 600ms var(--ease-out); }
.dvx-cert [data-k="cl"] small { font-weight: 400; }
.dvx-cert [data-k="cl"].is-on { opacity: 1; transform: none; }
.dvx-cert .dvx-cert__note { display: block; margin-top: 0.9em; padding: 0.45em 0.6em; border-radius: 0.45em; background: rgba(245, 99, 0, 0.1); color: #a33f00; font-size: max(0.86em, 11px); font-weight: 600; }
.dvx-cert__sig {
  position: relative;
  margin-top: 1.4em;
  padding-top: 0.35em;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  width: 60%;
}
.dvx-cert__sign {
  position: absolute;
  left: calc(100% + 0.6em);
  bottom: 0.2em;
  white-space: nowrap;
  padding: 0.35em 0.9em 0.35em 1.3em;
  background: #ffd60a;
  color: #1d1d1f;
  font-size: max(0.8em, 11px);
  font-weight: 700;
  clip-path: polygon(0.8em 0, 100% 0, 100% 100%, 0.8em 100%, 0 50%);
  opacity: 0;
  transform: translateX(1.5em);
  transition: opacity 300ms ease, transform 700ms var(--dv-spring);
}
.dvx-cert__sign.is-on { opacity: 1; transform: none; }



/* 4 · Orders ------------------------------------------------------------------ */

.dvx-orders { --cols: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.dvx-mail mark {
  position: relative;
  z-index: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}
.dvx-mail mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.05em -0.2em;
  border-radius: 0.3em;
  background: rgba(41, 151, 255, 0.3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.dvx-mail mark.is-on { color: var(--ink); }
.dvx-mail mark.is-on::before { transform: none; }

.dvx-order { flex: 1; display: flex; flex-direction: column; }
.dvx-order__meta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.7em; margin-bottom: 0.6em; }
.dvx-new { margin-left: 0.3em; padding: 0.05em 0.45em; border-radius: 1em; background: rgba(255, 159, 10, 0.2); color: #ffb340; font-size: max(0.78em, 11px); font-style: normal; font-weight: 600; }
.dvx-oline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.4em 3.6em;
  align-items: center;
  gap: 0.7em;
  padding: 0.65em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.3;
  transition: opacity 450ms ease;
}
.dvx-oline.is-on { opacity: 1; }
.dvx-swatch { width: 1.7em; height: 1.7em; border-radius: 0.5em; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.dvx-oline__name { display: grid; gap: 0.3em; min-width: 0; font-size: max(0.84em, 11px); }
.dvx-oline__name b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dvx-oline__name small { font-size: max(0.86em, 11px); }
.dvx-stock { display: block; height: 0.3em; border-radius: 1em; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dvx-stock i { display: block; height: 100%; border-radius: inherit; background: #a586ff; transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--ease-out); }
.dvx-stock i.is-on { transform: scaleX(var(--s)); }
.dvx-input--qty { min-height: 2em; padding: 0.35em 0.5em; text-align: right; }
.dvx-price { position: relative; justify-self: end; padding: 0.15em 0.35em; font-size: max(0.88em, 11px); font-weight: 600; text-align: right; }
.dvx-price::before, .dvx-price::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.4em;
  opacity: 0;
  transition: opacity 300ms ease;
}
.dvx-price::before { box-shadow: inset 0 0 0 1.5px #ff6961; background: rgba(255, 105, 97, 0.12); }
.dvx-price::after { box-shadow: inset 0 0 0 1.5px #a586ff; background: rgba(165, 134, 255, 0.14); }
.dvx-price.is-flag:not(.is-fixed)::before { opacity: 1; }
.dvx-price.is-fixed::after { opacity: 1; }
.dvx-price .dvx-roll { position: relative; z-index: 1; }
.dvx-order__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; margin-top: auto; padding-top: 0.8em; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.dvx-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.7em 0.35em 0.5em;
  border-radius: 0.7em;
  background: rgba(41, 151, 255, 0.14);
  color: #6cb6ff;
  font-size: max(0.8em, 11px);
  font-weight: 600;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 300ms ease, transform 600ms var(--dv-spring);
}
.dvx-proof.is-on { opacity: 1; transform: none; }
.dvx-proof svg { width: 1.1em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dvx-order__total { display: flex; flex-direction: column; align-items: flex-end; opacity: 0; transition: opacity 400ms ease; }
.dvx-order__total.is-on { opacity: 1; }
.dvx-order__total b { font-size: 1.15em; }

.dvx-reply { padding: 1.1em 1.2em; border-radius: 1.1em; background: rgba(40, 40, 42, 0.95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2em 4em -1em rgba(0, 0, 0, 0.8); }
.dvx-reply__to { display: flex; align-items: baseline; gap: 0.5em; padding-bottom: 0.6em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: max(0.86em, 11px); }
.dvx-reply__to small:last-child { margin-left: auto; }
.dvx-reply p { margin: 0.8em 0 0.9em; font-size: max(0.88em, 11px); line-height: 1.5; color: var(--ink-2); }
.dvx-reply__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.dvx-reply__foot .dvx-attach { margin-top: 0; }
.dvx-send { border-radius: 999px; min-width: 5.5em; }
.dvx-plane { position: absolute; right: 1.6em; top: 0.2em; width: 1.5em; height: 1.5em; color: #6cb6ff; opacity: 0; pointer-events: none; }
.dvx-plane svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.dvx-plane.is-on { animation: dvx-plane 1200ms cubic-bezier(0.5, 0, 0.6, 1) both; }
@keyframes dvx-plane {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 1; transform: translate(-0.4em, 0.3em) scale(1); }
  100% { opacity: 0; transform: translate(8em, -9em) rotate(-10deg) scale(0.6); }
}


/* 5 · Customer support ---------------------------------------------------------- */

.dvx-chat { --cols: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.dvx-thread { flex: 1; display: flex; flex-direction: column; }
.dvx-thread .dvx-panel__head { justify-content: flex-start; padding-bottom: 0.8em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dvx-thread__who { display: flex; flex-direction: column; }
.dvx-msgs { display: flex; flex-direction: column; gap: 0.55em; }
.dvx-msg {
  max-width: 84%;
  padding: 0.55em 0.85em;
  border-radius: 1.15em;
  font-size: max(0.88em, 11px);
  line-height: 1.38;
  opacity: 0;
  transform: translateY(0.5em) scale(0.6);
  transition: opacity 250ms ease, transform 600ms var(--dv-spring);
}
.dvx-msg--them { align-self: flex-end; border-bottom-right-radius: 0.35em; background: #0a84ff; color: #fff; transform-origin: 100% 100%; }
.dvx-msg--us { align-self: flex-start; border-bottom-left-radius: 0.35em; background: rgba(255, 255, 255, 0.13); transform-origin: 0 100%; }
.dvx-msg.is-on { opacity: 1; transform: none; }
.dvx-slot { position: relative; display: flex; flex-direction: column; }
.dvx-typing {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 0.28em;
  padding: 0.8em 0.95em;
  border-radius: 1.15em;
  border-bottom-left-radius: 0.35em;
  background: rgba(255, 255, 255, 0.13);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 0 100%;
  transition: opacity 200ms ease, transform 450ms var(--dv-spring);
}
.dvx-typing.is-on { opacity: 1; transform: none; }
.dvx-typing i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--ink-2); animation: dvx-dot 1.1s ease-in-out infinite; }
.dvx-typing i:nth-child(2) { animation-delay: 150ms; }
.dvx-typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes dvx-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-0.3em); opacity: 1; } }
.dvx-resolved {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.4em;
  margin-top: auto;
  padding: 0.4em 0.85em 0.4em 0.65em;
  border-radius: 999px;
  background: rgba(50, 215, 75, 0.14);
  color: #32d74b;
  font-size: max(0.8em, 11px);
  font-weight: 600;
  opacity: 0;
  transform: translateY(0.6em) scale(0.95);
  transition: opacity 350ms ease, transform 700ms var(--dv-spring);
}
.dvx-resolved.is-on { opacity: 1; transform: none; }
.dvx-resolved svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.dvx-side { display: flex; flex-direction: column; gap: 0.8em; }
.dvx-ordercard small, .dvx-policy small { display: block; margin-bottom: 0.35em; }
.dvx-ordercard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; font-size: max(0.88em, 11px); }
.dvx-ordercard__row > span { color: var(--ink-2); }
.dvx-policy, .dvx-hand { opacity: 0; transform: translateY(1em); transition: opacity 400ms ease, transform 750ms var(--ease-out); }
.dvx-policy.is-on, .dvx-hand.is-on { opacity: 1; transform: none; }
.dvx-policy p { font-size: max(0.84em, 11px); line-height: 1.5; color: var(--ink-2); }
.dvx-policy .dvx-hl { display: block; padding: 0.45em 0.6em; color: var(--ink); }
.dvx-policy .dvx-hl::before { inset: 0; border-color: #2997ff; background: rgba(41, 151, 255, 0.12); }
.dvx-hand .dvx-rulebar { margin: 0 0 0.8em; }
.dvx-hand__sum { margin: 0.6em 0 0.75em; font-size: max(0.82em, 11px); line-height: 1.45; color: var(--ink-2); }
.dvx-hand__sum small { display: block; color: var(--ink-3); }
.dvx-hand .dvx-btn { width: 100%; }


/* Orders: the PO, the price list and the proof */
.dvx-podoc {
  padding: 1em 1.1em 1.1em;
  font-size: max(0.8em, 11px);
  opacity: 0;
  transform: translateY(2em) rotate(2.5deg) scale(0.96);
  transition: opacity 500ms ease, transform 1000ms var(--dv-spring);
}
.dvx-podoc.is-on { opacity: 1; transform: rotate(0.8deg); }
.dvx-podoc__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.6em; margin-bottom: 0.6em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.dvx-podoc__top span { color: #6e6e73; font-weight: 600; }
.dvx-podoc__lines { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.55em 1em; }
.dvx-podoc__lines > span:nth-child(3n + 1) { color: #424245; }
.dvx-podoc__lines > span:nth-child(3n), .dvx-podoc__lines > .dvx-hl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dvx-podoc__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.8em; padding-top: 0.6em; border-top: 1px solid rgba(0, 0, 0, 0.1); font-weight: 600; }

.dvx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; margin-top: 0.9em; }
.dvx-mini {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.7em 0.8em;
  border-radius: 0.8em;
  font-size: max(0.84em, 11px);
  opacity: 0;
  transform: translateY(0.8em) scale(0.96);
  transition: opacity 350ms ease, transform 700ms var(--dv-spring);
}
.dvx-mini.is-on { opacity: 1; transform: none; }
.dvx-mini small { font-size: max(0.86em, 11px); }
.dvx-mini .dv-num { color: var(--ink-2); font-size: max(0.92em, 11px); }
.dvx-mini--rule { background: rgba(165, 134, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(165, 134, 255, 0.35); }
.dvx-mini--proof { flex-direction: row; align-items: center; gap: 0.7em; background: rgba(41, 151, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.3); }
.dvx-mini--proof span { display: flex; flex-direction: column; }
.dvx-mini--proof svg { flex: none; width: 2em; height: 2.6em; fill: none; stroke: #6cb6ff; stroke-width: 1.6; stroke-linejoin: round; }
.dvx-mini--proof .dvx-cup { fill: #1f3a68; }
.dvx-mini--proof .dvx-logo-dot { fill: #f5f5f7; stroke: none; transform-origin: 20px 24px; transform: scale(0); transition: transform 700ms var(--dv-spring) 350ms; }
.dvx-mini--proof.is-on .dvx-logo-dot { transform: none; }

/* A band of light that passes over a row as it's checked */
.dvx-sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dvx-sweep i {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.14) 45%, rgba(165, 200, 255, 0.22) 50%, rgba(255, 255, 255, 0.14) 55%, transparent 80%);
  transform: translateX(-100%);
}
.dvx-block[data-k="recon"], .dvx-match__row, .dvx-oline { position: relative; }


/* Finished views and reduced motion ------------------------------------------- */

/* A finished view is applied in one frame, never animated. */
#showcase .dvx-scene.is-instant,
#showcase .dvx-scene.is-instant * { transition: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .dvx-scene, .dvx-scene *, .dvx-line, .dvx-log__list, .dvx-aura i, .dvx-status i, .dvx-live i,
  .dvx-next, .dvx-next__fill, .dvx-seg .dv-seg__btn {
    animation: none !important;
    transition: none !important;
  }
  .dvx-main { transform: none !important; }
}

/* Without JS there is nothing to replay. */
:root:not(.js) .dvx-replay { display: none; }


/* Polish: payoffs, the phone subtitle -------------------------------------- */

/* Subtitle under the stage on phones and tablets: the step now running. */
.dvx-cap {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--dv-glass-edge);
  background: rgba(44, 44, 46, 0.55);
}
.dvx-cap__in { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }
.dvx-cap .dv-tag { flex: none; margin-top: 0.1rem; font-size: 0.6875rem; }
.dvx-cap__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
@media (min-width: 64rem) { .dvx-cap { display: none; } }
:root:not(.js) .dvx-cap { display: none; }

/* Close: who signed, under the P&L. */
.dvx-pl__foot {
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin-top: 0.3em;
  padding-top: 0.85em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: max(0.86em, 11px);
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 400ms ease, transform 700ms var(--ease-out);
}
.dvx-pl__foot.is-on { opacity: 1; transform: none; }
.dvx-pl__foot > span:nth-child(2) { display: flex; flex-direction: column; margin-right: auto; }
.dvx-pl__foot .dvx-av { width: 2em; height: 2em; }

/* A stamp in ink on paper: darker green, pressed into the page. */
.dvx-stamp--paper {
  top: auto;
  right: auto;
  left: 1.1em;
  bottom: 1.1em;
  z-index: 3;
  border-color: #1f9d45;
  background: rgba(52, 199, 89, 0.1);
  color: #1f8a3e;
  font-size: 1.15em;
  mix-blend-mode: multiply;
}
.dvx-stamp--paper .dvx-ring { border-color: #1f9d45; }
.dvx-cert { width: min(27em, calc(100% - 2.5em)); font-size: max(0.92em, 11px); }
.dvx-cert .dvx-stamp--paper { left: auto; bottom: auto; right: 1em; top: 1.35em; font-size: max(0.95em, 11px); }
.dvx-cert__title { padding-right: 7.5em; }
/* Room above the supplier and the total for their confidence labels, and
   under the lines for the stamp, so nothing touches or crosses the edge. */
.dvx-inv { padding-top: 2em; padding-bottom: 3.4em; }
.dvx-inv .dvx-inv__total { margin-top: 1.6em; padding-top: 1.1em; }
.dvx-inv .dvx-stamp--paper { left: 1.1em; bottom: 1.1em; }

/* Phones: one zone fills the stage, so the film can afford bigger type.
   With the floors above, nothing in a scene reads smaller than 11px. */
@container dvx (max-width: 37.5rem) {
  .dvx-scene { font-size: 14px; }
  /* Room for the customer's name and its "New" badge; the date is short. */
  .dvx-order__meta { grid-template-columns: minmax(0, 1fr) 5.5em; }
}


/* --------------------------------------------------------------------------
   Story: one receipt, four chapters, pinned to the scroll.
   The scene is drawn in em on one of two fixed grids and its font size
   scales it to fit the stage: a stacked 22 by 34 composition, and a 44 by 34
   one that the stage switches to (a container query) only when it is big
   enough for its smallest text to stay at 11px or more. Every text in the
   stacked scene is at least 0.8em, and the pinned layout only runs where
   its em stays at 13.75px or more; every text in the wide scene is at
   least 0.72em. CSS holds the layout and the finished state; section.js
   only moves things toward it as the page scrolls, so without JS (or with
   reduced motion) the finished scene shows as is, with all four chapters
   listed beside it.
   -------------------------------------------------------------------------- */

.dvp {
  --dvp-card: var(--card);
  --dvp-card-edge: rgba(0, 0, 0, 0.06);
  --dvp-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -10px rgba(0, 0, 0, 0.16);
  --dvp-paper: #fffdf8;
  --dvp-paper-ink: #2c2b29;
  --dvp-coffee: 122, 74, 34;
  --dvp-glow-a: rgba(0, 113, 227, 0.16);
  --dvp-glow-b: rgba(138, 75, 255, 0.13);
  --dvp-glow-c: rgba(31, 157, 77, 0.2);
  --dvp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  .dvp {
    --dvp-card: #1f1f21;
    --dvp-card-edge: rgba(255, 255, 255, 0.08);
    --dvp-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px -14px rgba(0, 0, 0, 0.8);
    --dvp-paper: #ece8df;
    --dvp-paper-ink: #232220;
    --dvp-glow-a: rgba(41, 151, 255, 0.24);
    --dvp-glow-b: rgba(165, 134, 255, 0.18);
    --dvp-glow-c: rgba(50, 215, 75, 0.2);
  }
}

.dvp .dv-head { margin-bottom: clamp(2rem, 1rem + 3vw, 4rem); }


/* Layout: unpinned first (no JS, reduced motion, very short screens) ------ */

.dvp-grid { display: grid; gap: 1.75rem; }
.dvp-copy { order: 2; }
.dvp-stage { order: 1; }
@media (min-width: 64rem) {
  .dvp-grid { grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3vw, 5rem); align-items: center; }
  .dvp-copy, .dvp-stage { order: 0; }
}

.dvp-index { display: none; }
.dvp-chapters { list-style: none; display: grid; gap: 1.75rem; }
.dvp-ch__num {
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dvp-ch__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.004em;
  font-weight: 600;
  text-wrap: balance;
}
.dvp-ch__text {
  margin-top: 0.625rem;
  max-width: 34rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.42;
  text-wrap: pretty;
}

/* The stage: a soft tile the scene sits in, centered. */
.dvp-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 22 / 36.5;
  padding: 2.25rem 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--tile);
  overflow: hidden;
  container: dvp-stage / size;
  isolation: isolate;
}
/* Unpinned, the tile is square where the stacked scene will show and wide
   where the wide one fits. */
@media (min-width: 40rem) {
  .dvp-stage { aspect-ratio: 1; padding: 2.5rem 1.25rem 1.25rem; }
}
@media (min-width: 50rem) and (max-width: 63.99rem), (min-width: 75rem) {
  .dvp-stage { aspect-ratio: 44 / 37.5; }
}
.dvp-stage__sample { position: absolute; z-index: 2; top: 0.75rem; left: 0.875rem; }
@media (min-width: 40rem) { .dvp-stage__sample { top: 0.875rem; left: 1.25rem; } }


/* Layout: pinned ----------------------------------------------------------- */

/* Pinned only where the stage gets tall enough for the scene's text to stay
   at 11px or more (keep in step with pinMq in section.js). */
@media (prefers-reduced-motion: no-preference) and (max-width: 39.99rem) and (min-height: 38rem),
  (prefers-reduced-motion: no-preference) and (min-width: 40rem) and (max-width: 63.99rem) and (min-height: 44rem),
  (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 40rem) {
  .js .dvp-scroller { height: 220vh; }
  .js .dvp-pin {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
  }
  .js .dvp-grid {
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
    /* Room at the bottom for the dock that floats over the page below
       64rem: its offset, its height (3.5rem) and a hairline more, so it
       never covers the chapter text. */
    padding-block: 0.5rem calc(max(0.75rem, env(safe-area-inset-bottom)) + 3.625rem);
  }
  .js .dvp-stage { aspect-ratio: auto; min-height: 0; align-self: stretch; }

  /* Chapters share one cell and crossfade; the index shows where you are. */
  .js .dvp-index { display: flex; gap: 0.375rem; margin-bottom: 1rem; }
  .js .dvp-chapters { gap: 0; }
  .js .dvp-ch {
    grid-area: 1 / 1;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.75rem);
    transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out), filter 450ms var(--ease-out);
    pointer-events: none;
  }
  .js .dvp-ch.is-on { opacity: 1; filter: none; transform: none; transition-delay: 120ms; pointer-events: auto; }
  .js .dvp-ch__num { display: none; }
  .js .dvp-ch__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.75rem); }
  .js .dvp-ch__text { margin-top: 0.5rem; font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.1875rem); }

  /* Phones: every pixel of height goes to the stage. The chapter index
     becomes four story bars in the tile's top band, beside the sample
     pill, and the band tucks into the scene's empty top edge. */
  @media (max-width: 39.99rem) {
    .js .dvp-grid { gap: 0.625rem; padding-top: 0.25rem; }
    .js .dvp-copy { display: contents; }
    .js .dvp-stage { grid-area: 1 / 1; padding: 1.5rem 0.5rem 0.375rem; }
    .js .dvp-stage__sample { top: 0.5rem; left: 0.75rem; }
    .js .dvp-index { grid-area: 1 / 1; align-self: start; justify-self: end; position: relative; z-index: 3; gap: 0; margin: 0 0.375rem 0 0; }
    .js .dvp-index__btn { flex: none; width: 2.75rem; padding: 1.1875rem 0.25rem 0; align-content: start; }
    .js .dvp-index__label { display: none; }
    .js .dvp-chapters { grid-area: 2 / 1; }
    .js .dvp-ch__title { font-size: 1.25rem; }
  }
  @media (min-width: 40rem) {
    .js .dvp-scroller { height: 280vh; }
  }
  @media (min-width: 64rem) {
    .js .dvp-scroller { height: 320vh; }
    .js .dvp-grid { grid-template-rows: minmax(0, 1fr); padding-block: clamp(1.25rem, 4vh, 2.75rem); }
    .js .dvp-index { margin-bottom: 2rem; }
    .js .dvp-ch__text { margin-top: 1rem; }
  }
}

/* Chapter index: four bars that fill as you scroll; each jumps to its part. */
.dvp-index__btn {
  flex: 1;
  display: grid;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink-3);
  transition: color 300ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dvp-index__btn[aria-current="step"] { color: var(--ink); }
.dvp-index__bar {
  position: relative;
  height: 0.1875rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.dvp-index__bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.dvp-index__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
.dvp-index__btn:focus-visible { outline-offset: 2px; border-radius: 0.375rem; }
@media (hover: hover) and (pointer: fine) {
  .dvp-index__btn:hover { color: var(--ink); }
}
@media (max-width: 23rem) { .dvp-index__label { font-size: 0.6875rem; } }


/* The scene ---------------------------------------------------------------- */

.dvp-scene {
  position: relative;
  flex: none;
  width: 22em;
  height: 34em;
  font-size: 15px;
  font-size: min(calc(100cqw / 22), calc(100cqh / 34), 1.25rem);
  line-height: 1.25;
  color: var(--ink);
  font-optical-sizing: none;
  perspective: 70em;
  user-select: none;
  -webkit-user-select: none;
}
@container dvp-stage (min-width: 42.1rem) and (min-height: 32.5rem) {
  .dvp-scene { width: 44em; font-size: min(calc(100cqw / 44), calc(100cqh / 34)); }
}
.dvp-scene > * { position: absolute; }

/* Ambient light that follows the focus of each chapter. */
.dvp-glow {
  z-index: 0;
  left: 50%; top: 50%;
  width: 30em; height: 30em;
  margin: -15em 0 0 -15em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dvp-glow-a), transparent);
  pointer-events: none;
}
.dvp-glow--b { background: radial-gradient(closest-side, var(--dvp-glow-b), transparent); transform: translate(6em, 4em); }
.dvp-glow--c { width: 20em; height: 20em; margin: -10em 0 0 -10em; background: radial-gradient(closest-side, var(--dvp-glow-c), transparent); opacity: 0; }


/* 1. Phone ----------------------------------------------------------------- */

.dvp-phone {
  z-index: 1;
  left: 6.8em; top: 7em;
  width: 8.4em; height: 17.2em;
  padding: 0.36em;
  border-radius: 1.6em;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 0.06em rgba(255, 255, 255, 0.18), 0 1.4em 2.6em -1em rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.dvp-phone__screen {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 1.28em;
  background: radial-gradient(80% 60% at 50% 45%, #2a2a2d, #0c0c0d);
  overflow: hidden;
}
.dvp-phone__island {
  position: absolute; left: 50%; top: 0.5em;
  width: 2.6em; height: 0.72em; margin-left: -1.3em;
  border-radius: 999px; background: #000;
}
.dvp-phone__finder { position: absolute; inset: 2.2em 0.7em 3.6em; }
.dvp-phone__finder i {
  position: absolute;
  width: 1em; height: 1em;
  border: 0.12em solid #ffd60a;
  border-radius: 0.2em;
}
.dvp-phone__finder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.dvp-phone__finder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.dvp-phone__finder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.dvp-phone__finder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.dvp-phone__mode {
  position: absolute; left: 0; right: 0; bottom: calc(2.55em / 0.86);
  text-align: center;
  font-size: 0.86em; font-weight: 600; letter-spacing: 0.12em;
  color: #ffd60a;
}
.dvp-phone__shutter {
  position: absolute; left: 50%; bottom: 0.6em;
  width: 1.7em; height: 1.7em; margin-left: -0.85em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.14em #0c0c0d, 0 0 0 0.26em rgba(255, 255, 255, 0.9);
}
.dvp-phone__flash { position: absolute; inset: 0; background: #fff; opacity: 0; }

.dvp-sources {
  z-index: 1;
  left: 0; right: 0; top: 25.6em;
  display: flex;
  justify-content: center;
  gap: 0.4em;
  opacity: 0;
}
.dvp-src {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.7em 0.35em 0.55em;
  border-radius: 999px;
  background: var(--dvp-card);
  box-shadow: 0 0 0 1px var(--dvp-card-edge);
  color: var(--ink-2);
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}
.dvp-src svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dvp-src.is-on { color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }


/* 2. Receipt --------------------------------------------------------------- */

/* Positioned at its home pose; JS moves it to the phone, home and thumbnail
   poses. The default transform is the finished thumbnail pose. */
.dvp-rc {
  z-index: 3;
  left: 6em; top: 3em;
  width: 10em; height: 16.786em;
  --ph-dx: 0; --ph-dy: 4.2; --ph-s: 0.54;
  --th-dx: -8.1; --th-dy: -7.09; --th-s: 0.4;
  transform: translate(calc(var(--th-dx) * 1em), calc(var(--th-dy) * 1em)) rotate(-3deg) scale(var(--th-s));
  transform-style: preserve-3d;
}
.dvp-rc__paper { position: relative; width: 100%; height: 100%; overflow: visible; }
.dvp-rc__sheet { fill: var(--dvp-paper); }
.dvp-rc__shadow {
  position: absolute;
  left: 4%; right: 4%; top: 6%; bottom: -2%;
  border-radius: 8%;
  background: rgba(0, 0, 0, 0.32);
  filter: blur(0.9em);
  transform: translate(0.25em, 0.6em);
  opacity: 0.55;
}
.dvp-rc__shade { fill: url(#dvp-shade-g); opacity: 0; }
.dvp-rc__coffee { fill: rgba(var(--dvp-coffee), 0.13); stroke: rgba(var(--dvp-coffee), 0.2); }
.dvp-rc__coffee circle:first-child { stroke: rgba(var(--dvp-coffee), 0.16); }
.dvp-rc__coffee ellipse, .dvp-rc__coffee circle:last-child { stroke: none; fill: rgba(var(--dvp-coffee), 0.16); }
.dvp-rc__ink text {
  fill: var(--dvp-paper-ink);
  font-family: var(--dvp-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.dvp-rc__ink .dvp-rc__brand { font-size: 23px; font-weight: 800; letter-spacing: 0.08em; }
.dvp-rc__ink .dvp-rc__sub { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; }
.dvp-rc__ink .dvp-rc__big { font-size: 15px; font-weight: 700; }
.dvp-rc__ink .dvp-rc__dim { opacity: 0.62; font-size: 9.5px; }
.dvp-rc__rule { stroke: var(--dvp-paper-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.4; fill: none; }
.dvp-rc__bars { fill: var(--dvp-paper-ink); opacity: 0.85; }
.dvp-rc__boxes path {
  fill: rgba(0, 113, 227, 0.1);
  stroke: #0071e3;
  stroke-width: 1.6;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

/* The scan: a block whose bottom edge is the beam, with its light behind it. */
.dvp-rc__scan { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dvp-rc__beam {
  position: absolute;
  left: 0; right: 0; top: -100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 55%, rgba(41, 151, 255, 0.16));
  opacity: 0;
}
.dvp-rc__beam::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.1em;
  height: 0.2em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #2997ff 18%, #a586ff 82%, transparent);
  box-shadow: 0 0 0.8em 0.15em rgba(41, 151, 255, 0.55);
}

/* Intake tags, stuck to the top of the paper. */
.dvp-rc__tags {
  position: absolute;
  left: 50%; bottom: calc(100% + 0.5em);
  display: flex;
  gap: 0.35em;
  transform: translateX(-50%);
  opacity: 0;
}
.dvp-tagx {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.36em 0.65em;
  border-radius: 999px;
  background: var(--dvp-card);
  box-shadow: 0 0 0 1px var(--dvp-card-edge), 0 0.4em 1em -0.4em rgba(0, 0, 0, 0.25);
  font-size: 0.84em;
  font-weight: 600;
  white-space: nowrap;
  transform-origin: 50% 100%;
}
.dvp-tagx b { font-weight: 500; color: var(--dv-agent); }


/* Read values: a readout card on phones, callouts with leader lines wider -- */

.dvp-leads { display: none; }
.dvp-readout {
  z-index: 2;
  left: 0; top: 20.4em;
  width: 22em; height: 13.3em;
  border-radius: 1em;
  background: var(--dvp-card);
  box-shadow: var(--dvp-card-shadow);
  /* Hairlines between the five rows the labels sit in. */
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.1em - 1px), var(--line) calc(2.1em - 1px) 2.1em);
  background-size: calc(100% - 2em) 10.5em;
  background-position: 1em 0.25em;
  background-repeat: no-repeat;
  opacity: 0;
}
.dvp-status {
  z-index: 6;
  left: 1em; top: 21em;
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
}
.dvp-status__text { font-size: 0.8em; font-weight: 600; }
.dvp-status__dot { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--dv-agent); box-shadow: 0 0 0 0.16em color-mix(in srgb, var(--dv-agent) 22%, transparent); }
.dvp-status.is-done .dvp-status__dot { background: var(--dv-done); box-shadow: 0 0 0 0.16em color-mix(in srgb, var(--dv-done) 22%, transparent); }

.dvp-lbl {
  z-index: 6;
  left: 1em; right: 1em;
  top: calc(22.75em + var(--r) * 2.1em);
  height: 2.1em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.dvp-lbl__k {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 7.4em;
  color: var(--ink-2);
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0;
}
.dvp-lbl__k b {
  order: 2;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-agent) 12%, transparent);
  color: var(--dv-agent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dvp-lbl__v {
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
}

@container dvp-stage (min-width: 42.1rem) and (min-height: 32.5rem) {
  .dvp-leads {
    display: block;
    z-index: 3;
    left: 0; top: 0;
    width: 44em; height: 34em;
    overflow: visible;
    fill: none;
    stroke: var(--dv-agent);
    stroke-width: 1.2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .dvp-leads path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; vector-effect: non-scaling-stroke; }
  .dvp-readout { display: none; }
  .dvp-status { left: 30.8em; top: 7.6em; }
  .dvp-status__text { font-size: 0.76em; }

  /* Callouts: key and confidence above, the value below. */
  .dvp-lbl {
    top: calc(var(--y) * 1em - 1.2em);
    left: auto; right: auto;
    height: auto;
    display: grid;
    gap: 0.2em;
    border: 0;
  }
  .dvp-lbl--l { left: 2em; width: 11.2em; justify-items: end; text-align: right; }
  .dvp-lbl--r { left: 30.8em; width: 11em; justify-items: start; }
  .dvp-lbl__k { width: auto; gap: 0.5em; justify-content: flex-start; font-size: 0.74em; }
  .dvp-lbl--l .dvp-lbl__k b { order: 0; }
  .dvp-lbl__v { font-size: 0.86em; }
}


/* Cards shared by the ledger, rules, ring, bank line and log --------------- */

.dvp-card {
  z-index: 4;
  border-radius: 1em;
  background: var(--dvp-card);
  box-shadow: var(--dvp-card-shadow);
}
.dvp-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  height: 2em;
  padding: 0 0.9em;
  border-bottom: 1px solid var(--line);
}
.dvp-card__bar > span:first-child { font-size: 0.86em; font-weight: 600; }
.dvp-card__meta { font-size: 0.8em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvp-card .dv-tag { font-size: 0.8em; }


/* 3. Ledger ---------------------------------------------------------------- */

/* Phones: no column heads; each row reads like a bank app line, payee and
   amount on top, date (card, tax) under them, the account last. From 40rem
   it becomes a four-column table. */
.dvp-ledger { left: 0; top: 8.3em; width: 22em; }
.dvp-lg {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "payee payee amt" "date card tax" "acct acct acct";
  column-gap: 0.9em;
  row-gap: 0.15em;
  align-items: baseline;
  padding: 0.6em 1.3em 0.65em;
  font-size: 0.86em;
  border-bottom: 1px solid var(--line);
}
.dvp-lg:not(.dvp-lg--new) > :nth-child(1) { grid-area: date; }
.dvp-lg:not(.dvp-lg--new) > :nth-child(2) { grid-area: payee; }
.dvp-lg__amt { grid-area: amt; text-align: right; }
.dvp-lg > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dvp-lg--head { display: none; min-height: 2.2em; font-weight: 600; color: var(--ink-2); }
.dvp-lg--head .dvp-lg__acct, .dvp-lg--old .dvp-lg__acct { display: none; }
.dvp-lg--old { color: var(--ink-2); }
.dvp-lg--old > :first-child { font-size: 0.94em; }
.dvp-lg--extra { display: none; }
.dvp-lg--new {
  padding-block: 0.7em 0.8em;
  border-bottom: 0;
  font-weight: 600;
}
.dvp-lg--new .dvp-lg__acct { grid-area: acct; display: flex; align-items: center; gap: 0.6em; margin-top: 0.45em; }
/* Phones: the payee and amount cells dissolve so their parts join the grid. */
.dvp-lg--new .dvp-lg__payee, .dvp-lg--new .dvp-lg__amt { display: contents; }
.dvp-lg__payee > .dvp-t { grid-area: payee; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvp-lg__payee > .dvp-lg__sub { grid-area: card; }
.dvp-lg__amt > .dvp-lg__total { grid-area: amt; justify-self: end; }
.dvp-lg__amt > .dvp-lg__sub { grid-area: tax; justify-self: end; }
.dvp-lg__date { grid-area: date; font-size: 0.94em; font-weight: 500; color: var(--ink-2); }
.dvp-lg__sub { font-size: 0.94em; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dvp-t { display: inline-block; }

/* The new row lights up blue while it is worked on, then green once matched. */
.dvp-lg--new::before, .dvp-lg--new::after {
  content: "";
  position: absolute;
  inset: 0.25em 0.45em 0.3em;
  border-radius: 0.8em;
  z-index: -1;
}
.dvp-lg--new::before { background: color-mix(in srgb, var(--dv-agent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-agent) 28%, transparent); opacity: var(--dvp-hl, 0); }
.dvp-lg--new::after { background: color-mix(in srgb, var(--dv-done) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-done) 30%, transparent); opacity: var(--dvp-ok, 1); }
.dvp-lg--new { isolation: isolate; }

/* The account picker rolls through options and lands on one. */
.dvp-slot {
  position: relative;
  flex: none;
  display: inline-block;
  height: 1.7em;
  padding: 0 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-agent) 12%, transparent);
  color: var(--dv-agent);
  overflow: hidden;
  transition: background-color 300ms ease, color 300ms ease;
}
.dvp-slot.is-open { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.dvp-slot__list { display: grid; transform: translateY(-5.1em); }
.dvp-slot__list span { height: 1.7em; line-height: 1.7em; white-space: nowrap; }
.dvp-lg__hint { font-size: 0.94em; font-weight: 500; color: var(--ink-3); white-space: nowrap; }

.dvp-rules { left: 0; top: 19.9em; width: 13.6em; height: 8.6em; opacity: 0; }
.dvp-rules__list { list-style: none; padding: 0.45em 0.9em 0.6em; }
.dvp-rules__list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.3em;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}
.dvp-tick {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.dvp-tick::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--dv-done);
  transform: scale(var(--k, 1));
  opacity: var(--k, 1);
}
.dvp-tick svg { position: relative; width: 1em; height: 1em; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dvp-tick path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }

.dvp-ring {
  left: 14.4em; top: 19.9em;
  width: 7.6em; height: 8.6em;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5em;
  opacity: 0;
}
.dvp-ring__dial { position: relative; width: 4.6em; height: 4.6em; }
.dvp-ring__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 5.5; stroke-linecap: round; }
.dvp-ring__track { stroke: color-mix(in srgb, var(--ink) 9%, transparent); }
.dvp-ring__arc { stroke: var(--dv-agent); stroke-dasharray: 100 100; stroke-dashoffset: 3; }
.dvp-ring__num {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  grid-auto-flow: column;
  align-items: baseline;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dvp-ring__num small { font-size: 0.7em; font-weight: 600; margin-left: 0.05em; color: var(--ink-2); }
.dvp-ring__cap { max-width: 7.5em; font-size: 0.8em; font-weight: 500; line-height: 1.2; color: var(--ink-2); text-align: center; text-wrap: balance; }


/* 4. Bank line, the link between them, the log ------------------------------ */

.dvp-bank { left: 0; top: 19.9em; width: 22em; }
.dvp-bank .dvp-card__bar { justify-content: flex-start; gap: 0.7em; }
.dvp-bank__amt span { display: inline-block; transition: color 300ms ease; }
.dvp-lg__total { transition: color 300ms ease; }
.is-matched .dvp-bank__amt span, .is-matched .dvp-lg__total { color: var(--dv-done); }
.dvp-bank__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "desc amt" "date ok";
  column-gap: 1em;
  row-gap: 0.3em;
  align-items: center;
  padding: 0.6em 1.3em 0.7em;
  font-size: 0.84em;
}
.dvp-bank__desc { grid-area: desc; font-family: var(--dvp-mono); font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvp-bank__date { grid-area: date; color: var(--ink-2); }
.dvp-bank__amt { grid-area: amt; justify-self: end; font-weight: 600; }
.dvp-bank__ok {
  grid-area: ok;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.6em 0.15em 0.4em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-done) 14%, transparent);
  color: var(--dv-done);
  font-size: 0.95em;
  font-weight: 600;
}
.dvp-bank__ok svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* JS places it between the two amounts; it is hidden until then. */
.dvp-link { z-index: 7; left: 0; top: 0; width: 0; height: 0; display: none; transform-origin: 0 0; }
.dvp-link.is-ready { display: block; }
.dvp-link i { position: absolute; display: block; }
.dvp-link__line {
  left: 0; top: -0.07em;
  width: var(--len, 4em); height: 0.14em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dv-done), color-mix(in srgb, var(--dv-done) 60%, var(--dv-agent)));
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--dv-done) 60%, transparent);
  transform-origin: 0 50%;
}
.dvp-link__dot {
  left: -0.3em; top: -0.3em;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--dv-done);
  box-shadow: 0 0 0 0.18em var(--dvp-card);
}
.dvp-link__dot--b, .dvp-link__pulse { left: calc(var(--len, 4em) - 0.3em); }
.dvp-link__pulse {
  top: -0.3em;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.12em var(--dv-done);
  opacity: 0;
}

.dvp-log { left: 0; top: 26.05em; width: 22em; }
.dvp-log__live { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.8em; font-weight: 600; color: var(--dv-done); }
.dvp-log__live::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.dvp-log__list { list-style: none; padding: 0.35em 0.9em 0.6em; }
.dvp-log__list li {
  display: grid;
  grid-template-columns: 4.9em auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.7em;
  padding: 0.42em 0;
  font-size: 0.8em;
  color: var(--ink-2);
}
.dvp-log__list li + li { border-top: 1px solid var(--line); }
.dvp-log__list time { font-family: var(--dvp-mono); font-size: 1em; font-variant-numeric: tabular-nums; }
.dvp-log__list .dv-tag { font-size: 1em; }
.dvp-log__list .dvp-log__extra { display: none; }
.dvp-log__new { color: var(--ink); font-weight: 500; }
.dvp-log__typed { min-height: 1.25em; }
.dvp-log__typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em; height: 1.05em;
  margin-left: 0.08em;
  vertical-align: -0.15em;
  background: var(--dv-agent);
  animation: dvp-caret 900ms steps(1) infinite;
}
@keyframes dvp-caret { 50% { opacity: 0; } }

/* Phones: what the thumbnail is, beside it. */
.dvp-doc {
  z-index: 4;
  left: 6.2em; top: 1.5em; right: 0;
  display: grid;
  gap: 0.25em;
}
.dvp-doc__title { font-size: 0.9em; font-weight: 600; }
.dvp-doc__meta { font-size: 0.8em; color: var(--ink-2); }
.dvp-attach { z-index: 6; left: 6.2em; top: 4.6em; opacity: 0; }
.dvp-attach__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.7em 0.25em 0.45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-done) 14%, transparent);
  color: var(--dv-done);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}
.dvp-attach__pill svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Flying copies of the read values. */
.dvp-fly {
  z-index: 8;
  left: 0; top: 0;
  padding: 0;
  border-radius: 0.35em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
.dvp-fly > span { display: block; line-height: 1.2; }
.dvp-fly::before {
  content: "";
  position: absolute;
  inset: -0.2em -0.4em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--dv-agent) 14%, var(--dvp-card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dv-agent) 35%, transparent), 0 0.6em 1.2em -0.4em color-mix(in srgb, var(--dv-agent) 45%, transparent);
  opacity: var(--chip, 0);
  z-index: -1;
}


/* Wide layout: the same scene on a 44 by 34 grid ------------------------- */

/* Used only when the stage gives it an em of 15.29px or more, so its
   smallest text (0.72em) never drops below 11px. */
@container dvp-stage (min-width: 42.1rem) and (min-height: 32.5rem) {
  .dvp-phone { left: 17.2em; top: 5.4em; width: 9.6em; height: 19.6em; border-radius: 1.8em; padding: 0.4em; }
  .dvp-phone__screen { border-radius: 1.45em; }
  .dvp-phone__mode { bottom: calc(2.6em / 0.8); font-size: 0.8em; letter-spacing: 0.12em; }
  .dvp-sources { top: 26.8em; }
  .dvp-src { font-size: 0.76em; }
  .dvp-tagx { padding: 0.36em 0.7em; font-size: 0.77em; }
  .dvp-card__bar > span:first-child { font-size: 0.8em; }
  .dvp-card__meta { font-size: 0.74em; }
  .dvp-card .dv-tag { font-size: 0.74em; }

  .dvp-rc {
    left: 15em; top: 6em;
    width: 14em; height: 23.5em;
    --ph-dx: 0; --ph-dy: -2.9; --ph-s: 0.54;
    --th-dx: -13.6; --th-dy: -5.15; --th-s: 0.66;
  }
  .dvp-doc { display: none; }
  .dvp-attach { left: 5.6em; top: 21em; }

  /* The ledger keeps the stacked rows of the phone layout (payee and
     amount on top; date, card and tax under them) and gives the account
     its own column, so every line stays large. */
  .dvp-ledger { left: 15.6em; top: 2.1em; width: 28em; }
  .dvp-lg {
    grid-template-columns: auto minmax(0, 1fr) 9.6em 6em;
    grid-template-areas: "payee payee acct amt" "date card acct tax";
    column-gap: 0.8em;
    row-gap: 0.15em;
    padding: 0.55em 1.1em 0.6em;
    font-size: 0.8em;
  }
  .dvp-lg--head {
    display: grid;
    grid-template-areas: "payee payee acct amt";
    min-height: 0;
    padding-block: 0.5em 0.45em;
  }
  .dvp-lg--head > span { font-size: 0.92em; }
  .dvp-lg--head > :first-child { display: none; }
  .dvp-lg--extra { display: grid; }
  .dvp-lg--head .dvp-lg__acct, .dvp-lg--old .dvp-lg__acct { display: block; grid-area: acct; }
  /* Older rows: the account sits on the payee's line. */
  .dvp-lg--old { grid-template-areas: "payee payee acct amt" "date date . ."; }
  .dvp-lg--new { padding-block: 0.65em 0.75em; }
  .dvp-lg__sub { font-size: 0.92em; }
  .dvp-lg__hint { font-size: 0.92em; }
  .dvp-lg--new .dvp-lg__acct { flex-direction: column; align-items: flex-start; gap: 0.25em; align-self: start; margin-top: -0.2em; }

  .dvp-rules { left: 15.6em; top: 16.3em; width: 13.6em; height: 8.35em; }
  .dvp-rules__list li { font-size: 0.76em; height: 2.2em; }
  .dvp-ring { left: 30.2em; top: 16.3em; width: 13.4em; height: 8.35em; }
  .dvp-ring__dial { width: 5em; height: 5em; }
  .dvp-ring__num small { font-size: 0.66em; }
  .dvp-ring__cap { max-width: none; font-size: 0.76em; white-space: nowrap; }

  /* The bank line uses the ledger's type and inset, so the two amounts
     sit on one vertical and the link between them runs straight. */
  .dvp-bank { left: 15.6em; top: 16.3em; width: 28em; }
  .dvp-bank__row { font-size: 0.8em; padding: 0.6em 1.1em 0.7em; }
  .dvp-bank__desc { font-size: 0.92em; }
  .dvp-bank__ok { font-size: 0.92em; }

  .dvp-log { left: 2.4em; top: 23.6em; width: 41.2em; }
  .dvp-log__list li { grid-template-columns: 5.2em 5.2em minmax(0, 1fr); font-size: 0.78em; padding-block: 0.34em; }
  .dvp-log__list .dvp-log__extra { display: grid; }
  .dvp-log__list time { font-size: 0.94em; }
  .dvp-log__list .dv-tag { font-size: 0.93em; }
  .dvp-log__live { font-size: 0.76em; }
  .dvp-attach__pill { font-size: 0.76em; }
}

/* Reduced motion: the finished scene, no caret, chapters listed. */
@media (prefers-reduced-motion: reduce) {
  .dvp-log__typed.is-typing::after { animation: none; }
  .dvp-slot { transition: none; }
}


/* --------------------------------------------------------------------------
   Rules: answers that become rules, and the checking ladder.
   CSS holds both finished states (two rules saved; a job at Level 3), so the
   section reads fully without JS. section.js adds .is-live, turns the
   questions into a deck and drives the morphs and the climb.
   -------------------------------------------------------------------------- */

.dvr {
  overflow-x: clip;                   /* the glow may reach past a phone's edge */
  --dvr-card: var(--card);
  --dvr-edge: rgba(0, 0, 0, 0.06);
  --dvr-lift: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  --dvr-lift-hi: 0 2px 6px rgba(0, 0, 0, 0.06), 0 30px 60px -18px rgba(40, 20, 90, 0.35);
  --dvr-fill: color-mix(in srgb, var(--ink) 5%, transparent);
  --dvr-rule-ink: #6a2fd6;            /* violet text on white: 6.3:1 */
  --dvr-person-ink: #b54700;
  --dvr-rule-grad: linear-gradient(135deg, #8a4bff 0%, #5b5bff 55%, #0071e3 100%);
  --dvr-glow-a: rgba(138, 75, 255, 0.22);
  --dvr-glow-b: rgba(0, 113, 227, 0.16);
}
@media (prefers-color-scheme: dark) {
  .dvr {
    --dvr-card: #212123;
    --dvr-edge: rgba(255, 255, 255, 0.08);
    --dvr-lift: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 36px -14px rgba(0, 0, 0, 0.8);
    --dvr-lift-hi: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -16px rgba(0, 0, 0, 0.85);
    --dvr-fill: color-mix(in srgb, var(--ink) 8%, transparent);
    --dvr-rule-ink: #c0a6ff;
    --dvr-person-ink: #ffb067;
    --dvr-rule-grad: linear-gradient(135deg, #a586ff 0%, #6f6bff 55%, #2997ff 100%);
    --dvr-glow-a: rgba(165, 134, 255, 0.2);
    --dvr-glow-b: rgba(41, 151, 255, 0.14);
  }
}


/* A. Questions window ------------------------------------------------------ */

.dvr-qa { position: relative; max-width: 64rem; margin-inline: auto; }

/* Soft light behind the window; it breathes when a rule is saved. */
.dvr-glow {
  position: absolute;
  inset: -12% -8% -14%;
  z-index: 0;
  background:
    radial-gradient(45% 50% at 72% 45%, var(--dvr-glow-a), transparent 70%),
    radial-gradient(40% 45% at 28% 60%, var(--dvr-glow-b), transparent 70%);
  pointer-events: none;
}
.dvr-win { z-index: 1; }
.dvr-win .dv-window__title { margin-right: 0; }
.dvr-win .dv-window__bar .dv-sample { flex: none; padding-block: 0.15rem; }
.dvr-wide { display: none; }
@media (min-width: 40rem) { .dvr-wide { display: inline; } }

.dvr-win__body { display: grid; }
@media (min-width: 48rem) {
  .dvr-win__body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.dvr-pane { padding: clamp(1rem, 0.6rem + 1.8vw, 2rem); min-width: 0; }
.dvr-pane--rules {
  border-top: 1px solid var(--dv-glass-edge);
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
@media (min-width: 48rem) {
  .dvr-pane--rules { border-top: 0; border-left: 1px solid var(--dv-glass-edge); }
}
.dvr .dv-head .title .muted { white-space: nowrap; }
.dvr-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.75rem; }
.dvr-pane__title { font-size: 1.0625rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.dvr-pane__meta, .dvr-pane__sub { font-size: 0.875rem; color: var(--ink-2); }
.dvr-pane__sub { margin-top: 0.25rem; }
.dvr-left { display: inline-block; font-weight: 600; color: var(--ink); }
/* The rolling count stays inside its line. */
.dvr-pane__meta { overflow: hidden; }


/* Question cards ----------------------------------------------------------- */

.dvr-deck { list-style: none; display: grid; gap: 1rem; margin-top: 1.25rem; }

.dvr-q__tilt {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 1.25rem;
  perspective: 1400px;
}
.dvr-q__flip {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}
.dvr-q__face {
  border-radius: inherit;
  border-radius: 1.25rem;
  background: var(--dvr-card);
  box-shadow: var(--dvr-lift);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dvr-q__front {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.125rem, 0.8rem + 1vw, 1.5rem);
}
.dvr-q__back {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.125rem, 0.8rem + 1vw, 1.5rem);
  transform: rotateY(180deg);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--dv-rule) 14%, transparent), transparent 70%),
    var(--dvr-card);
}
.is-live .dvr-q__back { display: flex; }

/* A sheen that sweeps the back face once, as the rule is "minted". */
.dvr-q__back::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-70%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .dvr-q__back::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); }
}
.dvr-q.is-shine .dvr-q__back::after { animation: dvr-sheen 1100ms var(--ease-out) both; }
@keyframes dvr-sheen {
  0% { transform: translateX(-70%); opacity: 1; }
  100% { transform: translateX(70%); opacity: 1; }
}

.dvr-q__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.dvr-q__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--dv-agent) 11%, transparent);
  color: var(--dv-agent);
}
.dvr-q__icon--new { background: color-mix(in srgb, var(--dv-person) 13%, transparent); color: var(--dv-person); }
.dvr-q__icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dvr-q__name { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.dvr-q__new {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-person) 13%, transparent);
  color: var(--dvr-person-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.dvr-q__meta { margin-top: 0.1rem; font-size: 0.8125rem; color: var(--ink-2); }
.dvr-q__amt { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; }

.dvr-q__ask {
  margin-top: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.dvr-q__ask:focus { outline: none; }
.dvr-q__ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0.375rem; }
.dvr-q__why { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--ink-2); }

.dvr-q__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
}

/* Answer buttons: big, soft, with a tick that springs in when chosen. */
.dvr-ans {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 1rem;
  background: var(--dvr-fill);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 180ms var(--ease-out), background-color 220ms ease, color 220ms ease, opacity 300ms ease, box-shadow 220ms ease;
}
.dvr-ans:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .dvr-ans:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); transform: translateY(-1px); }
  .dvr-ans:active { transform: scale(0.96); }
}
.dvr-ans__label { transition: transform 420ms var(--dv-spring); }
.dvr-ans__tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  opacity: 0;
  transform: scale(0.3);
  transition: transform 420ms var(--dv-spring), opacity 200ms ease;
}
.dvr-ans__tick svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dvr-ans.is-chosen {
  background: var(--dvr-rule-grad);
  color: #fff;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--dv-rule) 70%, transparent);
}
.dvr-ans.is-chosen .dvr-ans__tick { opacity: 1; transform: translateX(var(--dvr-tick-x, -3.5rem)) scale(1); }
.dvr-ans.is-chosen .dvr-ans__label { transform: translateX(0.75rem); }
.dvr-ans.is-other { opacity: 0.35; }

.dvr-q__saved {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dvr-rule-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.dvr-q__saved svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.dvr-q.is-shine .dvr-q__saved svg { animation: dvr-twinkle 900ms var(--ease-out) both; }
@keyframes dvr-twinkle {
  0% { transform: scale(0.4) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.dvr-q__plate { margin-top: 0.875rem; }
.dvr-q__note { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink-2); }


/* Phones: the vendor icon gives its width to the name and amount, and rule
   rows tighten so the account fits on one line. */
@media (max-width: 39.99rem) {
  .dvr-q__top { grid-template-columns: minmax(0, 1fr) auto; }
  .dvr-q__icon { display: none; }
  .dvr-rule { grid-template-columns: 1.875rem minmax(0, 1fr); gap: 0.625rem; padding: 0.75rem 0.875rem; }
  .dvr-rule__icon { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; }
  .dvr-rule__icon svg { width: 1rem; height: 1rem; }
  .dvr-rule__line { grid-template-columns: 3.25rem minmax(0, 1fr); }
}

/* The deck (JS on): cards share one cell, the next one peeks out behind. */
.dvr-qa.is-live .dvr-deck { gap: 0; margin-bottom: 0.875rem; }
.dvr-qa.is-live .dvr-q,
.dvr-qa.is-live .dvr-done { grid-area: 1 / 1; }
.dvr-qa.is-live .dvr-q {
  --pos: 0;
  z-index: calc(10 - var(--pos));
  transform: translateY(calc(var(--pos) * 0.875rem)) scale(calc(1 - var(--pos) * 0.05));
  transform-origin: 50% 100%;
  transition: transform 750ms var(--dv-spring), opacity 400ms ease;
}
.dvr-qa.is-live .dvr-q[data-pos="1"] .dvr-q__front { box-shadow: var(--dvr-lift); }
.dvr-qa.is-live .dvr-q[data-pos="1"] .dvr-q__front > *,
.dvr-qa.is-live .dvr-q[data-pos="2"] .dvr-q__front > * { opacity: 0; }
.dvr-qa.is-live .dvr-q[data-pos="2"] { opacity: 0; }
/* Answered cards keep their place in the cell, so the window never resizes. */
.dvr-qa.is-live .dvr-q.is-gone { visibility: hidden; }
.dvr-qa.is-live .dvr-q__front > * { transition: opacity 320ms var(--ease-out); }
.dvr-qa.is-live .dvr-q[data-pos="1"] .dvr-q__face { background: color-mix(in srgb, var(--dvr-card) 82%, var(--ink) 4%); }
/* Start over restores the deck in one frame, with nothing fading across. */
.dvr-qa.is-snap .dvr-q, .dvr-qa.is-snap .dvr-q *, .dvr-qa.is-snap .dvr-q *::before, .dvr-qa.is-snap .dvr-q *::after { transition: none; }

/* Done state: in the same cell as the cards, once both are answered. */
.dvr-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  text-align: center;
}
.dvr-done[hidden] { display: none; }
.dvr-done__mark { width: 3.25rem; height: 3.25rem; color: var(--dv-done); }
.dvr-done__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dvr-done__mark circle { stroke-width: 2; opacity: 0.35; }
.dvr-done__title { margin-top: 1rem; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); font-weight: 600; letter-spacing: -0.01em; }
.dvr-done__title:focus { outline: none; }
.dvr-done__text { margin-top: 0.375rem; max-width: 22rem; color: var(--ink-2); font-size: 0.9375rem; text-wrap: balance; }
.dvr-done .dvr-reset { margin-top: 1.25rem; min-height: 2.75rem; }
.dvr-done.is-in .dvr-done__mark path { stroke-dasharray: 40; animation: dvr-draw 700ms var(--ease-out) 150ms both; }
.dvr-done.is-in .dvr-done__mark circle { stroke-dasharray: 150; animation: dvr-draw 900ms var(--ease-out) both; }
.dvr-done.is-in > * { animation: dvr-rise 800ms var(--ease-out) both; }
.dvr-done.is-in > :nth-child(2) { animation-delay: 120ms; }
.dvr-done.is-in > :nth-child(3) { animation-delay: 200ms; }
.dvr-done.is-in > :nth-child(4) { animation-delay: 280ms; }
@keyframes dvr-draw { from { stroke-dashoffset: var(--len, 40); } to { stroke-dashoffset: 0; } }
.dvr-done.is-in .dvr-done__mark circle { --len: 150; }
@keyframes dvr-rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }


/* Rules: one row design, used in the card, in flight and in the list. ---- */

.dvr-rule {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dv-rule) 10%, transparent), transparent 65%),
    var(--dvr-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-rule) 24%, transparent), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dvr-rule__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--dvr-rule-grad);
  color: #fff;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--dv-rule) 70%, transparent);
}
.dvr-rule__icon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvr-rule__body { display: grid; row-gap: 0.15rem; }
.dvr-rule__line {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.dvr-rule__line--sub { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.dvr-rule__kw {
  color: var(--dvr-rule-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.dvr-rule__acct {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-rule) 13%, transparent);
  color: var(--dvr-rule-ink);
  white-space: nowrap;
}

.dvr-slots { list-style: none; display: grid; gap: 0.75rem; margin-top: 1.125rem; }
.dvr-slot { position: relative; min-height: 5.25rem; border-radius: 0.875rem; }
.dvr-slot__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: inherit;
  color: var(--ink-3);
  font-size: 0.8125rem;
  text-align: center;
  transition: opacity 300ms ease, border-color 300ms ease, transform 500ms var(--ease-out);
}
.dvr-slot.is-filled .dvr-slot__hint { opacity: 0; }
/* The slot a rule is flying into lights up to receive it. */
.dvr-slot.is-target .dvr-slot__hint {
  border-color: color-mix(in srgb, var(--dv-rule) 60%, transparent);
  color: var(--dvr-rule-ink);
  transform: scale(1.02);
}
.dvr-slot .dvr-rule { position: relative; }
.dvr-slot .dvr-rule.is-pending { opacity: 0; }
.dvr-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--dv-rule), 0 0 24px 2px color-mix(in srgb, var(--dv-rule) 40%, transparent);
  opacity: 0;
  pointer-events: none;
}
.dvr-slot.is-landed::after { animation: dvr-ping 900ms var(--ease-out) both; }
@keyframes dvr-ping {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

.dvr-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--dvr-rule-grad);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
}
.dvr-count__n { display: inline-block; }
.dvr-reset--aside { margin-top: 0.75rem; min-height: 2.75rem; padding-inline: 0.25rem; }
.dvr-reset--aside svg { width: 1rem; height: 1rem; }
.dvr-reset--aside[hidden] { display: none; }

/* The rule in flight: absolutely placed in the section, so a scroll mid-flight
   moves it with the page. Its shadow is a layer, faded with opacity. */
.dvr { isolation: isolate; }
.dvr-ghost {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.dvr-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.875rem;
  box-shadow: var(--dvr-lift-hi);
}
.dvr-ghost > .dvr-rule { position: absolute; top: 0; left: 0; width: 100%; }
.dvr-ghost > .dvr-ghost__to { transform-origin: 0 0; opacity: 0; }


/* B. The checking ladder --------------------------------------------------- */

.dvr-trust { margin-top: clamp(5rem, 3rem + 6vw, 9rem); }
.dvr-sub { max-width: 44rem; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem); text-align: center; }
.dvr-sub__title {
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
.dvr-sub__lead {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.38;
  color: var(--ink-2);
  text-wrap: pretty;
}

.dvr-lad {
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.dvr-lad__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dvr-lad__job { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.dvr-lad__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dv-agent);
}
.dvr-lad__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dv-agent);
  animation: dvr-beat 2s var(--ease-out) infinite;
  animation-play-state: paused;
}
.dvr-lad.is-vis .dvr-lad__dot::after { animation-play-state: running; }
@keyframes dvr-beat { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3); opacity: 0; } }

.dvr-lad__grid { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .dvr-lad__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); margin-top: 2rem; }
}

.dvr-ladder {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 0.75rem;
}
@media (min-width: 48rem) { .dvr-ladder { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; } }

.dvr-rungs { grid-column: 2; list-style: none; display: flex; flex-direction: column-reverse; gap: 0.625rem; }
.dvr-rung {
  position: relative;
  padding: 0.875rem 1rem 0.9375rem;
  border-radius: 1rem;
  background: var(--dvr-fill);
  opacity: 0.6;
  transform: scale(0.98);
  transform-origin: 0 50%;
  transition: opacity 500ms ease, transform 700ms var(--dv-spring), background-color 500ms ease, box-shadow 500ms ease;
}
.dvr-rung[aria-current="step"] {
  opacity: 1;
  transform: none;
  background: var(--dvr-card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), var(--dvr-lift);
}
@media (prefers-color-scheme: light) {
  .dvr-rung[aria-current="step"] { background: #fff; }
}
.dvr-rung__lvl {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 400ms ease;
}
.dvr-rung[aria-current="step"] .dvr-rung__lvl { color: var(--accent); }
.dvr-rung__title { margin-top: 0.2rem; font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.dvr-rung__sub { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--ink-2); }

/* Eight items of work: orange ones a person checks, blue ones run by agents. */
.dvr-strip { display: flex; gap: 0.3rem; margin-top: 0.625rem; }
.dvr-strip i, .dvr-legend i {
  width: 0.75rem;
  height: 0.9rem;
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dv-agent) 55%, transparent);
}
.dvr-strip i.is-p, .dvr-legend i.is-p { background: var(--dv-person); box-shadow: none; }
.dvr-rung[aria-current="step"] .dvr-strip i { animation: dvr-work 2.4s ease-in-out infinite; animation-play-state: paused; }
.dvr-lad.is-vis .dvr-rung[aria-current="step"] .dvr-strip i { animation-play-state: running; }
.dvr-strip i:nth-child(2) { animation-delay: 120ms; }
.dvr-strip i:nth-child(3) { animation-delay: 240ms; }
.dvr-strip i:nth-child(4) { animation-delay: 360ms; }
.dvr-strip i:nth-child(5) { animation-delay: 480ms; }
.dvr-strip i:nth-child(6) { animation-delay: 600ms; }
.dvr-strip i:nth-child(7) { animation-delay: 720ms; }
.dvr-strip i:nth-child(8) { animation-delay: 840ms; }
@keyframes dvr-work { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

.dvr-legend {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.dvr-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dvr-legend i { width: 0.6rem; height: 0.72rem; }

/* Rail and token. Without JS the token waits at the top rung (Level 3). */
.dvr-rail { position: absolute; top: 0; bottom: 0; left: 0; width: 3rem; }
@media (min-width: 48rem) { .dvr-rail { width: 3.5rem; } }
.dvr-rail__track, .dvr-rail__fill {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
}
.dvr-rail__track { background: var(--line-strong); }
.dvr-rail__fill { background: linear-gradient(to top, var(--sig-a), var(--sig-b)); transform-origin: 50% 100%; }
.dvr-rail__node {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: box-shadow 400ms ease;
  display: none;
}
.dvr-lad.is-live .dvr-rail__node { display: block; }
.dvr-rail__node.is-on { box-shadow: inset 0 0 0 2px var(--accent); }

.dvr-token {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  will-change: transform;
}
.dvr-lad.is-live .dvr-token { top: 0; }
.dvr-token__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dvr-token__ring circle { fill: none; stroke-width: 3; }
.dvr-token__track { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.dvr-token__arc {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.dvr-token__core, .dvr-token__alert {
  position: absolute;
  inset: 0.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.dvr-token__core {
  background: linear-gradient(135deg, var(--sig-a), var(--sig-b));
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--sig-a) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--sig-a) 12%, transparent);
}
.dvr-token__alert {
  background: var(--dv-flag);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--dv-flag) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--dv-flag) 16%, transparent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 260ms ease, transform 500ms var(--dv-spring);
}
.dvr-token.is-alert .dvr-token__alert { opacity: 1; transform: none; }
.dvr-token__core svg, .dvr-token__alert svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvr-token__alert svg { stroke-width: 2.6; }

/* Side: where the job is now, the months so far, the log and the controls. */
.dvr-side { display: flex; flex-direction: column; min-width: 0; }
.dvr-now { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 0.125rem; }
.dvr-now__k {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dvr-now__lvl { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.dvr-roll { display: inline-block; height: 1.05em; overflow: hidden; vertical-align: bottom; }
.dvr-roll__n { display: inline-block; }
.dvr-now__month { overflow: hidden; padding-bottom: 0.35rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); }
.dvr-now__m { display: inline-block; color: var(--ink); font-weight: 600; }

.dvr-hist { list-style: none; display: flex; gap: 0.3rem; min-height: 0.375rem; margin-top: 0.875rem; }
.dvr-hist li {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--dv-done);
  transform-origin: 0 50%;
}
.dvr-hist li.is-x { background: var(--dv-flag); }
.dvr-hist li.is-new { animation: dvr-grow 600ms var(--ease-out) both; }
@keyframes dvr-grow { from { transform: scaleX(0); } to { transform: none; } }

.dvr-log {
  list-style: none;
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 17.5rem;
  margin-top: 1.125rem;
  border-top: 1px solid var(--line);
}
.dvr-log li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.35;
}
.dvr-log li:nth-child(n + 2) { opacity: 0.72; }
.dvr-log li:nth-child(n + 3) { opacity: 0.5; }
.dvr-log__m { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); min-width: 3.75rem; }
.dvr-log__t { flex-basis: 100%; color: var(--ink); }
.dvr-log li.is-new { animation: dvr-line 600ms var(--ease-out) both; }
@keyframes dvr-line { from { opacity: 0; transform: translateY(-8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.dvr-ctrl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.25rem; }
.dvr-mistake, .dvr-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 200ms ease;
}
.dvr-mistake { background: color-mix(in srgb, var(--dv-flag) 11%, transparent); color: var(--danger); }
.dvr-play { background: var(--dvr-fill); color: var(--ink); }
.dvr-play[hidden] { display: none; }
.dvr-mistake:active, .dvr-play:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .dvr-mistake:hover { background: color-mix(in srgb, var(--dv-flag) 17%, transparent); }
  .dvr-play:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
}
.dvr-mistake svg, .dvr-play svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvr-mistake[aria-disabled="true"] { opacity: 0.5; }
.dvr-play__go { display: none; }
.dvr-play[data-mode="play"] .dvr-play__pause, .dvr-play[data-mode="replay"] .dvr-play__pause { display: none; }
.dvr-play[data-mode="replay"] .dvr-play__go { display: block; }
.dvr-play[data-mode="play"]::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.65rem;
  border-color: transparent transparent transparent currentColor;
  margin-right: 0.1rem;
}

/* Phones: status on top, then the ladder, then the controls right under it
   (so the drop is in view when you press), then the log. */
@media (max-width: 47.99rem) {
  .dvr-lad__grid { gap: 0; }
  .dvr-side { display: contents; }
  .dvr-now { order: 1; }
  .dvr-hist { order: 2; margin-bottom: 1.5rem; }
  .dvr-ladder { order: 3; }
  .dvr-ctrl { order: 4; padding-top: 1.25rem; }
  .dvr-log { order: 5; min-height: 0; margin-top: 1.5rem; }
  .dvr-now__lvl { font-size: 2.25rem; }
}
@media (max-width: 24rem) {
  .dvr-ctrl { flex-wrap: nowrap; }
  .dvr-mistake, .dvr-play { padding: 0 0.875rem; font-size: 0.875rem; }
}

/* Three laws under the ladder. */
.dvr-laws {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  max-width: 64rem;
  margin: 0.75rem auto 0;
}
@media (min-width: 48rem) { .dvr-laws { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } }
.dvr-law { padding: 1.25rem 1.375rem 1.375rem; border-radius: 1.25rem; background: var(--card); }
.dvr-law__icon {
  --c: var(--dv-done);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: var(--c);
}
.dvr-law__icon--down { --c: var(--dv-flag); }
.dvr-law__icon--lock { --c: var(--dv-person); }
.dvr-law__icon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dvr-law__title { margin-top: 0.875rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.dvr-law__text { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
.dvr-law__shackle { transform-box: fill-box; transform-origin: 100% 100%; }
.dvr-law.is-in .dvr-law__shackle { animation: dvr-lock 900ms var(--ease-out) 700ms both; }
@keyframes dvr-lock {
  0% { transform: translateY(-3px) rotate(-14deg); }
  55% { transform: translateY(0.5px); }
  100% { transform: none; }
}
.dvr-law.is-in .dvr-law__icon--up svg { animation: dvr-nudge 900ms var(--ease-out) 600ms both; }
.dvr-law.is-in .dvr-law__icon--down svg { animation: dvr-nudge-down 900ms var(--ease-out) 680ms both; }
@keyframes dvr-nudge { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes dvr-nudge-down { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }


/* Reduced motion: final states, opacity only. ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dvr-qa.is-live .dvr-q, .dvr-rung, .dvr-ans, .dvr-ans__label, .dvr-ans__tick, .dvr-slot__hint, .dvr-token__alert { transition-property: opacity, background-color, color, box-shadow !important; }
  .dvr-qa.is-live .dvr-q { transform: none !important; }
  .dvr-rung { transform: none !important; }
  .dvr-ans.is-chosen .dvr-ans__tick { transform: translateX(var(--dvr-tick-x, -3.5rem)) !important; }
  .dvr-q__back::after, .dvr-lad__dot::after { display: none; }
  .dvr-q.is-shine .dvr-q__saved svg, .dvr-done.is-in > *, .dvr-done.is-in .dvr-done__mark path, .dvr-done.is-in .dvr-done__mark circle,
  .dvr-strip i, .dvr-hist li.is-new, .dvr-log li.is-new, .dvr-slot.is-landed::after,
  .dvr-law.is-in .dvr-law__shackle, .dvr-law.is-in .dvr-law__icon--up svg, .dvr-law.is-in .dvr-law__icon--down svg { animation: none !important; }
  .dvr-mistake:active, .dvr-play:active, .dvr-ans:active { transform: none; }
}


/* --------------------------------------------------------------------------
   Compare: an Apple-style "compare models" table, then a pinned chart.
   Without JS everything is in its finished state: all rows shown, both
   lines drawn, every note placed. section.js adds .is-armed (rows land as
   they enter) and .is-live on the chart (the scroll draws it).
   -------------------------------------------------------------------------- */

.dvc {
  overflow-x: clip;   /* the column glow may reach past the window edge */
  --dvc-hl-bg: color-mix(in srgb, var(--accent) 4%, var(--bg));
  --dvc-hl-edge: color-mix(in srgb, var(--accent) 22%, transparent);
  --dvc-glow-a: rgba(0, 113, 227, 0.16);
  --dvc-glow-b: rgba(138, 75, 255, 0.14);
  --dvc-icon-bg: var(--tile);
  --dvc-pop-bg: var(--card);
  --dvc-pop-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 22px -8px rgba(0, 0, 0, 0.22);
}
@media (prefers-color-scheme: dark) {
  .dvc {
    --dvc-hl-bg: color-mix(in srgb, var(--accent) 9%, #0a0a0b);
    --dvc-hl-edge: color-mix(in srgb, var(--accent) 34%, transparent);
    --dvc-glow-a: rgba(41, 151, 255, 0.2);
    --dvc-glow-b: rgba(165, 134, 255, 0.18);
    --dvc-pop-bg: #2c2c2e;
    --dvc-pop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -8px rgba(0, 0, 0, 0.8);
  }
}


/* Head: the two clauses sit on their own lines from tablets up. */
.dvc .dv-head { max-width: 62rem; }
.dvc .dv-head .title .muted { display: block; }

/* Phone picker ------------------------------------------------------------- */

.dvc-picker__label { margin-bottom: 0.75rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.dvc-picker {
  position: sticky;
  top: calc(var(--header-h) + 0.625rem);
  z-index: 5;
  display: grid;
  justify-items: center;
  margin-bottom: 2rem;
  pointer-events: none;
}
/* A floating glass pill, so it reads over the table when it sticks. */
.dvc-seg {
  pointer-events: auto;
  background: var(--dv-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px var(--dv-glass-edge), 0 10px 28px -12px rgba(0, 0, 0, 0.3);
}
.dvc-seg .dv-seg__btn { min-height: 2.75rem; padding-inline: 1.05rem; }
.dvc-seg .dv-seg__btn:active { transform: scale(0.96); }
.dvc-seg .dv-seg__btn { transition: color 200ms ease, transform 160ms var(--ease-out); }
@media (min-width: 48rem) { .dvc-picker, .dvc-picker__label { display: none; } }


/* Table grid ----------------------------------------------------------------
   One column template for the table rows and the highlight behind them.
   Phones: the chosen approach and Beonsys. Tablets: all four, labels above
   each row. Desktop: a label column, then all four. */

.dvc-grid {
  --cols: repeat(2, minmax(0, 1fr));
  --gap: 0.5rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
  touch-action: pan-y;
}
@media (min-width: 48rem) { .dvc-grid { --cols: repeat(4, minmax(0, 1fr)); --gap: 0.875rem; } }
@media (min-width: 64rem) { .dvc-grid { --cols: minmax(8.5rem, 0.82fr) repeat(4, minmax(0, 1fr)); --gap: 1rem; } }

.dvc-table {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  border-collapse: collapse;
}
.dvc-table > thead, .dvc-table > tbody, .dvc-table > tfoot { display: block; }
.dvc-row {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
}
.dvc-row > * { padding: 0; font-weight: inherit; text-align: center; }

/* The empty corner over the label column exists only on desktop. */
.dvc-corner { display: none; }
@media (min-width: 64rem) { .dvc-corner { display: block; } }

/* Phones show one approach beside Beonsys. */
@media (max-width: 47.99rem) {
  .dvc-grid[data-vs="0"] :is(.dvc-c1, .dvc-c2),
  .dvc-grid[data-vs="1"] :is(.dvc-c0, .dvc-c2),
  .dvc-grid[data-vs="2"] :is(.dvc-c0, .dvc-c1) { display: none; }
}

/* Column heads */
.dvc-col {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  padding: 1.5rem 0.5rem 1.375rem;
}
.dvc-ico {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 0.625rem;
  border-radius: 50%;
  background: var(--dvc-icon-bg);
  color: var(--ink-2);
}
.dvc-ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dvc-ico--be { background: var(--dv-grad); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--sig-b) 70%, transparent); }
.dvc-ico--be svg { width: 1.6rem; height: 1.6rem; stroke-width: 5.5; }
.dvc-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.dvc-sub { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
@media (min-width: 64rem) { .dvc-name { font-size: 1.1875rem; } }

/* Row labels: their own line above the cells, until desktop gives them a
   column. The line between rows rides on the label there. */
.dvc-label {
  grid-column: 1 / -1;
  padding: 1.25rem 0 0.375rem;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.dvc-cell {
  padding: 0.5rem 0.625rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
.dvc-cell.dvc-be { padding-inline: 0.75rem; font-weight: 500; }
@media (min-width: 64rem) {
  .dvc-label {
    grid-column: auto;
    display: flex;
    align-items: flex-start;
    padding: 1.5rem 0.5rem 1.5rem 0;
    font-size: 0.9375rem;
    color: var(--ink);
  }
  .dvc-cell {
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--line);
    font-size: 1rem;
    color: var(--ink-2);
  }
  .dvc-cell.dvc-be { padding-inline: 1.25rem; border-top-color: var(--dvc-hl-edge); color: var(--ink); }
}

/* The Beonsys tick: a filled disc whose check draws as the row lands. */
.dvc-tick {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  margin: 0 0.4rem 0 0;
  vertical-align: -0.28em;
  overflow: visible;
}
.dvc-tick circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.dvc-tick path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }

.dvc-foot { padding: 0.5rem 0.5rem 1.5rem; }
.dvc-row--foot > :not(.dvc-foot) { min-height: 1px; }
.dvc-cta { gap: 0; width: 100%; max-width: 15rem; min-height: 2.75rem; padding-inline: 1rem; font-size: 0.9375rem; }
.dvc-wide { display: none; }
@media (min-width: 30rem) { .dvc-wide { display: inline; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .dvc-wide { display: none; } }
@media (min-width: 64rem) { .dvc-foot { padding: 0.75rem 1.25rem 1.75rem; } .dvc-cta { min-height: 3rem; font-size: 1rem; } }


/* The highlight behind the Beonsys column ------------------------------------
   A tinted panel with a gradient edge. --lit (0..1, from the scroll) brings
   up its edge and the light around it; --sweep moves a soft band of light
   down it. */

.dvc-hl {
  --lit: 1;
  --sweep: 1;
  position: relative;
  z-index: 0;
  grid-row: 1;
  grid-column: -2 / -1;
  border-radius: var(--dv-radius);
  background: var(--dvc-hl-bg);
  isolation: isolate;
}
.dvc-hl::before {
  /* Gradient edge, drawn as a ring with a mask. */
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--dv-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(0.25 + var(--lit) * 0.75);
}
.dvc-hl__glow {
  position: absolute;
  inset: -6% -28%;
  z-index: -1;
  background:
    radial-gradient(50% 32% at 50% 18%, var(--dvc-glow-a), transparent 70%),
    radial-gradient(50% 34% at 50% 78%, var(--dvc-glow-b), transparent 70%);
  opacity: var(--lit);
  pointer-events: none;
}
.dvc-hl__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.dvc-hl__sheen::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sig-b) 12%, transparent) 50%, transparent);
  transform: translateY(calc(-100% + var(--sweep) * 440%));
  opacity: calc(1 - var(--sweep));
}

/* Row entrances (only once JS has armed them) ------------------------------ */

.dvc-c0 { --c: 1; } .dvc-c1 { --c: 2; } .dvc-c2 { --c: 3; } .dvc-c3 { --c: 4; }

.dvc.is-armed .dvc-row > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--c, 0) * 70ms);
}
.dvc.is-armed .dvc-row.is-in > * { opacity: 1; transform: none; }
.dvc.is-armed .dvc-row > .dvc-be { transform: translateY(14px) scale(0.98); }
.dvc.is-armed .dvc-row.is-in > .dvc-be { transform: none; }
.dvc.is-armed .dvc-tick circle { transform: scale(0); transition: transform 600ms var(--dv-spring); transition-delay: calc(var(--c, 0) * 70ms + 180ms); }
.dvc.is-armed .dvc-tick path { stroke-dashoffset: 14; transition: stroke-dashoffset 450ms var(--ease-out); transition-delay: calc(var(--c, 0) * 70ms + 380ms); }
.dvc.is-armed .dvc-row.is-in .dvc-tick circle { transform: none; }
.dvc.is-armed .dvc-row.is-in .dvc-tick path { stroke-dashoffset: 0; }

.dvc-note-foot {
  max-width: 34rem;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}


/* Chart: pay for hours vs pay for results -----------------------------------
   The scroller is tall; the stage inside it sticks while the lines draw.
   Without JS (or with reduced motion) it is a normal block. */

.dvc-pin { margin-top: clamp(4rem, 2rem + 6vw, 8rem); }
.dvc.is-armed .dvc-pin { height: 230vh; }
@media (min-width: 64rem) { .dvc.is-armed .dvc-pin { height: 250vh; } }
.dvc.is-armed .dvc-stage {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 0.75rem) 0 0.75rem;
}

.dvc-chart {
  --enter: 1;
  --gap: 1;
  position: relative;
  margin: 0;
  padding: clamp(1.375rem, 0.8rem + 2.2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--tile);
  transform: translateY(calc((1 - var(--enter)) * 4rem)) scale(calc(0.94 + var(--enter) * 0.06));
  opacity: calc(0.3 + var(--enter) * 0.7);
  transform-origin: 50% 0;
}

.dvc-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dvc-chart__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
.dvc-chart__sub { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-2); }
.dvc-chart__head .dv-sample { flex: none; margin-top: 0.3rem; }

.dvc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}
.dvc-key { display: inline-flex; align-items: center; gap: 0.5rem; }
.dvc-key::before { content: ""; width: 1.5rem; height: 3px; border-radius: 3px; background: var(--ink-3); }
.dvc-key--be::before { background: var(--dv-grad); }

.dvc-plot {
  position: relative;
  height: clamp(13.5rem, 34vh, 24rem);
  margin: 3rem 0.25rem 2.25rem;
}
@media (min-width: 48rem) { .dvc-plot { height: clamp(15rem, 40vh, 24rem); margin-inline: 0.5rem; } }
.dvc-svg { width: 100%; height: 100%; overflow: visible; }

.dvc-gridlines path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.dvc-gap { fill: url(#dvc-g-gap); opacity: var(--gap); }
.dvc-stop-a { stop-color: var(--sig-a); }
.dvc-stop-b { stop-color: var(--sig-b); }
.dvc-stop-gap { stop-color: var(--sig-a); stop-opacity: 0.14; }
.dvc-stop-gap--end { stop-color: var(--sig-b); stop-opacity: 0.02; }

.dvc-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dvc-line--hours { stroke: var(--ink-3); stroke-width: 3; }
.dvc-line--be { stroke: url(#dvc-g-line); stroke-width: 3.5; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--sig-a) 30%, transparent)); }
.dvc-chart.is-live .dvc-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

.dvc-tip { opacity: 0; }
.dvc-chart:not(.is-live) .dvc-tip { opacity: 1; }
.dvc-tip__dot { fill: var(--card); stroke-width: 3; }
.dvc-tip--hours .dvc-tip__dot { stroke: var(--ink-3); }
.dvc-tip--be .dvc-tip__dot { stroke: var(--sig-b); }
.dvc-tip__halo { transform-box: fill-box; transform-origin: center; }
.dvc-tip--hours .dvc-tip__halo { fill: var(--ink-3); opacity: 0.14; }
.dvc-tip--be .dvc-tip__halo { fill: var(--sig-b); opacity: 0.22; animation: dvc-breathe 2.4s var(--ease-in-out) infinite; animation-play-state: paused; }
.dvc-chart.is-vis .dvc-tip--be .dvc-tip__halo { animation-play-state: running; }
@keyframes dvc-breathe { 50% { transform: scale(1.45); opacity: 0.08; } }

/* Axis labels: words only, no numbers on cost. */
.dvc-axis { position: absolute; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dvc-axis--y { left: 0; bottom: calc(100% + 0.875rem); }
.dvc-axis--x { top: calc(100% + 0.75rem); }
.dvc-axis--x0 { left: 0; }
.dvc-axis--x1 { left: 45.45%; transform: translateX(-50%); }
.dvc-axis--x2 { right: 0; }

/* Notes pop out of the line where it happens, on a small stem. */
.dvc-pop {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--dvc-pop-bg);
  box-shadow: var(--dvc-pop-shadow);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  width: max-content;
  transform-origin: 72% 100%;
}
.dvc-pop svg { flex: none; width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dvc-pop--hire svg { color: var(--dv-person); }
.dvc-pop--rule { transform: translate(-30%, 1rem); transform-origin: 30% 0; }
.dvc-pop--rule svg { color: var(--dv-rule); }
.dvc-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 0.75rem;
  background: currentColor;
  opacity: 0.25;
}
.dvc-pop--rule::after { top: auto; bottom: 100%; left: 30%; height: 0.85rem; }
/* The hire notes lean left of their step so a later one never covers it. */
.dvc-pop--hire { transform: translate(-72%, calc(-100% - 0.875rem)); }
.dvc-pop--hire::after { left: 72%; }
@media (max-width: 47.99rem) {
  .dvc-pop { gap: 0.3rem; padding: 0.28rem 0.6rem 0.28rem 0.45rem; font-size: 0.75rem; }
  .dvc-pop svg { width: 0.85rem; height: 0.85rem; }
}

.dvc-chart.is-live .dvc-pop {
  opacity: 0;
  scale: 0.6;
  transition: opacity 260ms ease, scale 260ms var(--ease-out);
}
.dvc-chart.is-live .dvc-pop.is-on {
  opacity: 1;
  scale: 1;
  transition: opacity 300ms var(--ease-out), scale 650ms var(--dv-spring);
}

.dvc-cap {
  max-width: 44rem;
  margin-top: 1rem;
  font-size: clamp(1.1875rem, 0.95rem + 1vw, 1.75rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.dvc-cap .dv-grad { display: inline; }
.dvc-chart.is-live .dvc-cap .dv-grad {
  opacity: 0.15;
  filter: blur(6px);
  transition: opacity 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.dvc-chart.is-live.is-done .dvc-cap .dv-grad { opacity: 1; filter: none; }

@media (max-width: 47.99rem) {
  .dvc-chart__head { flex-direction: column-reverse; gap: 0.75rem; }
  .dvc-chart__head .dv-sample { margin-top: 0; }
}


/* Reduced motion: finished states, no pin, nothing travels. ---------------- */

@media (prefers-reduced-motion: reduce) {
  .dvc.is-armed .dvc-row > *, .dvc.is-armed .dvc-row > .dvc-be { transform: none !important; transition: opacity 400ms ease; transition-delay: 0ms; }
  .dvc.is-armed .dvc-tick circle { transform: none !important; transition: none; }
  .dvc.is-armed .dvc-tick path { stroke-dashoffset: 0 !important; transition: none; }
  .dvc.is-armed .dvc-pin { height: auto; }
  .dvc.is-armed .dvc-stage { position: static; min-height: 0; padding: 0; }
  .dvc-chart { transform: none !important; opacity: 1 !important; }
  .dvc-tip--be .dvc-tip__halo { animation: none; }
  .dvc-hl__sheen { display: none; }
  .dvc-seg .dv-seg__btn:active { transform: none; }
}


/* Readability pass ----------------------------------------------------------
   The table sits on its own solid panel, so the page's dots and particles
   never run behind the text. Rows get clearer dividers and a hover band, and
   the other approaches' text is brighter, so the comparison reads at a glance. */

.dvc {
  --dvc-panel: var(--tile);
  --dvc-panel-edge: rgba(0, 0, 0, 0.05);
  --dvc-panel-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.22);
  --dvc-rule: rgba(0, 0, 0, 0.1);
  --dvc-row-hover: rgba(0, 0, 0, 0.03);
  --dvc-text: #3a3a3f;
  --dvc-icon-bg: var(--card);
}
@media (prefers-color-scheme: dark) {
  .dvc {
    --dvc-panel: #111113;
    --dvc-panel-edge: rgba(255, 255, 255, 0.1);
    --dvc-panel-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
    --dvc-rule: rgba(255, 255, 255, 0.13);
    --dvc-row-hover: rgba(255, 255, 255, 0.045);
    --dvc-text: #d6d6db;
    --dvc-icon-bg: #232326;
  }
}
.dvc-grid {
  z-index: 1;
  padding: 0.75rem 0.75rem 0.25rem;
  border-radius: var(--radius-lg);
  background: var(--dvc-panel);
  box-shadow: 0 0 0 1px var(--dvc-panel-edge), var(--dvc-panel-shadow);
}
@media (min-width: 64rem) { .dvc-grid { padding: 1rem 1.25rem 0.5rem 2rem; } }

.dvc-label { color: var(--ink); border-top-color: var(--dvc-rule); }
.dvc-cell { color: var(--dvc-text); }
.dvc-cell.dvc-be { color: var(--ink); }
@media (min-width: 64rem) {
  .dvc-label { font-weight: 600; }
  .dvc-cell { color: var(--dvc-text); border-top-color: var(--dvc-rule); }
  .dvc-cell.dvc-be { color: var(--ink); border-top-color: var(--dvc-hl-edge); }
}
@media (min-width: 64rem) and (hover: hover) {
  .dvc-table > tbody > .dvc-row { border-radius: 0.875rem; transition: background-color 200ms ease; }
  .dvc-table > tbody > .dvc-row:hover { background: var(--dvc-row-hover); }
}


/* --------------------------------------------------------------------------
   Pricing: plans, calculator, other work, ways to start.
   Readable as-is without JS (prices are plain text, the calculator shows a
   worked example for 8 ledgers). section.js adds .is-armed, turns prices
   into odometers and wires the calculator.
   -------------------------------------------------------------------------- */

.dvq {
  --dvq-card: var(--card);
  --dvq-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -14px rgba(0, 0, 0, 0.16);
  --dvq-lift-hi: 0 2px 6px rgba(0, 0, 0, 0.05), 0 30px 60px -22px rgba(30, 30, 80, 0.28);
  --dvq-pop-glow: 0 30px 70px -28px color-mix(in srgb, var(--sig-b) 45%, transparent);
  --dvq-soft: color-mix(in srgb, var(--ink) 5%, transparent);
  --dvq-track: color-mix(in srgb, var(--ink) 12%, transparent);
  --dvq-out: color-mix(in srgb, var(--accent) 3.5%, var(--card));
  --dvq-glow-a: rgba(0, 113, 227, 0.14);
  --dvq-glow-b: rgba(138, 75, 255, 0.12);
  --dvq-warm: linear-gradient(135deg, #ff9f0a, #e0306a);
}
@media (prefers-color-scheme: dark) {
  .dvq {
    --dvq-lift: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 36px -16px rgba(0, 0, 0, 0.8);
    --dvq-lift-hi: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
    --dvq-soft: color-mix(in srgb, var(--ink) 8%, transparent);
    --dvq-track: color-mix(in srgb, var(--ink) 16%, transparent);
    --dvq-out: color-mix(in srgb, var(--accent) 4%, var(--card));
    --dvq-glow-a: rgba(41, 151, 255, 0.16);
    --dvq-glow-b: rgba(165, 134, 255, 0.14);
  }
}

/* The calculator's glow spills past the card; never past the page edge. */
.dvq { overflow-x: clip; }
/* On phones the headline breaks between its two clauses, never mid-clause. */
@media (max-width: 39.99rem) { .dvq .dv-head .title .muted { display: block; } }

.dvq-glyph svg, .dvq-way__ico svg {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}


/* Plans -------------------------------------------------------------------- */

.dvq-plans {
  display: grid;
  gap: 1rem;
  max-width: 68rem;
  margin-inline: auto;
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .dvq-plans { max-width: 36rem; } }
@media (min-width: 64rem) { .dvq-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } }

.dvq-plan {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--dvq-card);
  box-shadow: var(--dvq-lift);
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow 500ms var(--ease-out), translate 500ms var(--ease-out);
}
.dvq-plan__spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(28rem 20rem at var(--mx) var(--my), color-mix(in srgb, var(--sig-a) 8%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .dvq-plan:hover { translate: 0 -4px; box-shadow: var(--dvq-lift-hi); }
  .dvq-plan:hover .dvq-plan__spot { opacity: 1; }
  .dvq-plan--pop:hover { box-shadow: var(--dvq-lift-hi), var(--dvq-pop-glow); }
}

/* The popular plan: a slowly turning gradient edge and a soft glow. */
.dvq-plan--pop { box-shadow: var(--dvq-lift), var(--dvq-pop-glow); }
.dvq-plan__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.dvq-plan__ring::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, var(--sig-a), var(--sig-b), #e0306a, var(--sig-b), var(--sig-a));
  animation: dvq-spin 9s linear infinite;
  animation-play-state: paused;
}
.dvq-plans.is-vis .dvq-plan__ring::before { animation-play-state: running; }
@keyframes dvq-spin { to { transform: rotate(1turn); } }

.dvq-plan__badge {
  position: absolute;
  top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  right: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--dv-grad);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dvq-plan__name { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.dvq-plan__for { margin-top: 0.375rem; font-size: 1rem; color: var(--ink-2); }
.dvq-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-size: clamp(2.75rem, 2rem + 2.2vw, 3.75rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dvq-plan__price--word { font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.375rem); letter-spacing: -0.015em; min-height: 1em; }
@media (min-width: 64rem) { .dvq-plan__price--word { min-height: 1.4em; align-items: flex-end; } }
.dvq-plan__per { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.dvq-plan__unit { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-2); }
.dvq-plan__unit .dv-num { font-weight: 600; color: var(--ink); }
.dvq-plan__cta { margin-top: auto; width: 100%; }
.dvq-plan .btn--quiet { background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (hover: hover) and (pointer: fine) { .dvq-plan .btn--quiet:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); } }
.dvq-plan__unit { margin-bottom: 1.75rem; }

/* The plan the calculator lands on says so, once the calculator is used. */
.dvq-plan__fit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.4em;
  margin: -1rem 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 300ms ease, translate 500ms var(--ease-out);
}
.dvq-plan__fit::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.dvq.is-calc .dvq-plan.is-fit .dvq-plan__fit { opacity: 1; translate: 0 0; }

.dvq-define {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
}
.dvq-define svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }


/* Odometer ------------------------------------------------------------------ */

.dvq-odo.is-odo { display: inline-flex; align-items: baseline; }
.dvq-d {
  position: relative;
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.1;
  /* Soft top and bottom edges, so a rolling digit fades rather than cuts. */
  -webkit-mask-image: linear-gradient(transparent, #000 0.14em, #000 0.96em, transparent);
  mask-image: linear-gradient(transparent, #000 0.14em, #000 0.96em, transparent);
}
/* Measures the column at the width of a 0 (tabular), so nothing shifts. */
.dvq-d::before { content: "0"; visibility: hidden; }
.dvq-d__s {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  white-space: pre;
  text-align: center;
  line-height: 1.1;
  transform: translateY(calc(var(--d, 0) * -1.1em));
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dvq-c { display: inline-block; line-height: 1.1; }
/* A new leading digit (900 to 1,500) rises in already on its value. */
.dvq-odo .is-new { animation: dvq-new 600ms var(--ease-out) both; }
@keyframes dvq-new { from { opacity: 0; transform: translateY(0.3em); } }


/* Included in every plan ----------------------------------------------------- */

.dvq-incl {
  max-width: 68rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  text-align: center;
}
.dvq-incl__title { font-size: 1.0625rem; font-weight: 600; color: var(--ink-2); }
.dvq-incl__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 1.75rem;
  list-style: none;
}
@media (min-width: 48rem) { .dvq-incl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .dvq-incl__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dvq-incl__list li {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 500;
  text-wrap: balance;
}
.dvq-glyph {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 0.875rem;
  background: var(--dvq-card);
  color: var(--accent);
  box-shadow: var(--dvq-lift);
}
.dvq-glyph svg { width: 1.5rem; height: 1.5rem; }


/* Calculator ------------------------------------------------------------------ */

.dvq-calc {
  --p: 0.2414;
  position: relative;
  max-width: 68rem;
  margin: clamp(4rem, 2.5rem + 5vw, 7rem) auto 0;
}
.dvq-calc__glow {
  position: absolute;
  inset: -10% -6%;
  background:
    radial-gradient(40% 50% at 25% 40%, var(--dvq-glow-a), transparent 70%),
    radial-gradient(40% 50% at 78% 60%, var(--dvq-glow-b), transparent 70%);
  pointer-events: none;
}
.dvq-calc__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-lg);
  background: var(--dvq-card);
  box-shadow: var(--dvq-lift-hi);
  overflow: hidden;
}
@media (min-width: 56rem) { .dvq-calc__card { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.dvq-calc__in, .dvq-calc__out { padding: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.dvq-calc__out {
  display: flex;
  flex-direction: column;
  background: var(--dvq-out);
  border-top: 1px solid var(--line);
}
@media (min-width: 56rem) { .dvq-calc__out { border-top: 0; border-left: 1px solid var(--line); } }

.dvq-calc__title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.008em; }
.dvq-calc__hint { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-2); }

.dvq-count { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; }
.dvq-count__label { font-size: 1.0625rem; font-weight: 600; padding-bottom: 0.4rem; }
.dvq-count__value { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 600; }
.dvq-odo--count { font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem); letter-spacing: -0.02em; line-height: 1; }
.dvq-count__unit { font-size: 1rem; color: var(--ink-2); font-weight: 500; min-width: 3.6em; }

/* Slider: a painted track under a native input whose own track is clear.
   The fill is clipped to the thumb's center, which travels from half a
   thumb in from each end. */
.dvq-range { --thumb: 1.75rem; position: relative; margin-top: 1rem; }
.dvq-range__track {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--thumb) / 2 + 0.5rem - 3px);
  height: 6px;
  border-radius: 999px;
  background: var(--dvq-track);
}
.dvq-range__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dv-grad);
  clip-path: inset(0 calc(100% - (var(--thumb) / 2 + var(--p) * (100% - var(--thumb)))) 0 0 round 999px);
}
.dvq-range__tick {
  position: absolute;
  top: 50%;
  left: calc(var(--thumb) / 2 + (var(--at) - 1) / 29 * (100% - var(--thumb)));
  width: 2px; height: 14px;
  margin: -7px 0 0 -1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.dvq-range__input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(var(--thumb) + 1rem);
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.dvq-range__input:focus-visible { outline: none; }
.dvq-range__input::-webkit-slider-runnable-track { height: var(--thumb); background: transparent; }
.dvq-range__input::-moz-range-track { height: var(--thumb); background: transparent; }
.dvq-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb); height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.dvq-range__input::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.dvq-range__input:active::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent); }
.dvq-range__input:active::-moz-range-thumb { transform: scale(1.14); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .dvq-range__input:hover::-webkit-slider-thumb { transform: scale(1.06); }
  .dvq-range__input:hover::-moz-range-thumb { transform: scale(1.06); }
}
/* The track thickens a touch while the slider is held or focused. */
.dvq-range__track { transition: transform 300ms var(--ease-out); }
.dvq-range:has(.dvq-range__input:active) .dvq-range__track,
.dvq-range:has(.dvq-range__input:focus-visible) .dvq-range__track { transform: scaleY(1.35); }
.dvq-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent), 0 3px 8px rgba(0, 0, 0, 0.16); }
.dvq-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent), 0 3px 8px rgba(0, 0, 0, 0.16); }

.dvq-zones { position: relative; height: 1.25rem; margin-top: 0.125rem; }
.dvq-zone {
  position: absolute;
  top: 0;
  translate: -50% 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 250ms ease;
}
.dvq-zone[data-zone="0"] { left: calc(var(--thumb) / 2 + 2 / 29 * (100% - var(--thumb))); translate: -35% 0; }
.dvq-zone[data-zone="1"] { left: calc(var(--thumb) / 2 + 7 / 29 * (100% - var(--thumb))); }
.dvq-zone[data-zone="2"] { left: calc(var(--thumb) / 2 + 19.5 / 29 * (100% - var(--thumb))); }
.dvq-zone.is-on { color: var(--ink); font-weight: 600; }
@media (max-width: 39.99rem) {
  .dvq-zone { font-size: 0.75rem; }
  .dvq-zone[data-zone="0"] { left: 0; translate: 0 0; }
}

.dvq-field { margin-top: 2.25rem; }
.dvq-field__label { display: block; font-size: 0.9375rem; font-weight: 600; }
.dvq-field__label span { font-weight: 400; color: var(--ink-2); }
.dvq-field__box {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.625rem;
  padding: 0 1rem;
  min-height: 3.25rem;
  border-radius: 0.875rem;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 200ms ease;
}
.dvq-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.dvq-field__cur { font-size: 1.25rem; font-weight: 600; color: var(--ink-2); }
.dvq-field__input {
  flex: 1;
  min-width: 0;
  height: 3.25rem;
  border: 0;
  background: none;
  font-size: 1.25rem;
  font-weight: 600;
}
.dvq-field__input:focus { outline: none; }
.dvq-field__input::placeholder { color: var(--ink-3); font-weight: 500; }
.dvq-field__note { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.625rem; font-size: 0.8125rem; color: var(--ink-2); }
.dvq-field__note svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Phones and tablets: one column in reading order, with the result right
   under the slider so the price is in view while you drag. The two panes
   dissolve into the card's grid and their parts are re-ordered. */
@media (max-width: 55.99rem) {
  .dvq-calc__card { padding: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
  .dvq-calc__in, .dvq-calc__out { display: contents; }
  .dvq-calc__title { order: 1; }
  .dvq-calc__hint { order: 2; }
  .dvq-count { order: 3; }
  .dvq-range { order: 4; }
  .dvq-out__label { order: 5; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .dvq-out__plan { order: 6; }
  .dvq-out__price { order: 7; }
  .dvq-out__facts { order: 8; }
  .dvq-cap { order: 9; margin-bottom: 0; }
  .dvq-field { order: 10; margin-top: 2rem; }
  .dvq-diff { order: 11; }
  .dvq-calc__out > .sr-only { order: 12; }
  .dvq-out__cta { order: 13; }
}

/* Result */
.dvq-out__label { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.dvq-out__plan { margin-top: 0.25rem; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.dvq-swap { display: inline-block; }

.dvq-out__price { margin-top: 1.25rem; }
.dvq-out__big { display: grid; align-items: end; font-weight: 600; }
.dvq-out__big > * { grid-area: 1 / 1; }
.dvq-odo--big {
  font-size: clamp(3.5rem, 2.4rem + 3.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.dvq-out__per { justify-self: start; align-self: end; translate: 0 -0.55rem; font-size: 1.0625rem; font-weight: 500; color: var(--ink-2); }
.dvq-out__big { grid-template-columns: auto 1fr; }
.dvq-odo--big { grid-column: 1; }
.dvq-out__per { grid-column: 2; grid-row: 1; padding-left: 0.4rem; }
.dvq-out__word {
  grid-column: 1 / -1;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  translate: 0 0.5em;
  filter: blur(6px);
  pointer-events: none;
}
.dvq-odo--big, .dvq-out__per, .dvq-out__word { transition: opacity 400ms var(--ease-out), translate 500ms var(--ease-out), filter 400ms var(--ease-out); }
.is-custom .dvq-odo--big, .is-custom .dvq-out__per { opacity: 0; translate: 0 -0.4em; filter: blur(6px); }
.is-custom .dvq-out__word { opacity: 1; translate: 0 0; filter: none; }

.dvq-out__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.dvq-out__facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.dvq-out__facts dd { margin: 0.25rem 0 0; font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; }

.dvq-cap { margin-top: 1.5rem; margin-bottom: 2rem; }
.dvq-cap__cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.375rem; }
.dvq-cap__cells i {
  height: 1.75rem;
  border-radius: 0.45rem;
  background: var(--dvq-track);
  opacity: 0.2;
  transform: scale(0.82);
  transition: opacity 300ms ease, transform 500ms var(--dv-spring), background-color 300ms ease, box-shadow 300ms ease;
}
.dvq-cap__cells i.is-in { opacity: 1; transform: none; }
.dvq-cap__cells i.is-on {
  background: var(--dv-grad);
  background-size: 1000% 100%;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--sig-a) 55%, transparent);
}
/* Each cell takes its slice of one gradient, so the row reads as one bar. */
.dvq-cap__cells i:nth-child(1) { background-position: 0% 0; }
.dvq-cap__cells i:nth-child(2) { background-position: 11.1% 0; }
.dvq-cap__cells i:nth-child(3) { background-position: 22.2% 0; }
.dvq-cap__cells i:nth-child(4) { background-position: 33.3% 0; }
.dvq-cap__cells i:nth-child(5) { background-position: 44.4% 0; }
.dvq-cap__cells i:nth-child(6) { background-position: 55.5% 0; }
.dvq-cap__cells i:nth-child(7) { background-position: 66.6% 0; }
.dvq-cap__cells i:nth-child(8) { background-position: 77.7% 0; }
.dvq-cap__cells i:nth-child(9) { background-position: 88.8% 0; }
.dvq-cap__cells i:nth-child(10) { background-position: 100% 0; }
.dvq-cap__label { margin-top: 0.625rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }

.dvq-diff { margin-top: 1.5rem; }
.dvq-diff[hidden] { display: none; }
.dvq-bars { display: grid; gap: 0.625rem; }
.dvq-bar { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.dvq-bar span { color: var(--ink-2); font-weight: 500; }
.dvq-bar i {
  --w: 1;
  display: block;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--ink-3);
  transform: scaleX(var(--w));
  transform-origin: left;
  transition: transform 700ms var(--ease-out);
}
.dvq-bar--be i { background: var(--dv-grad); }
.dvq-bar b { font-weight: 600; min-width: 4.5rem; text-align: right; }
.dvq-diff.is-quote .dvq-bars { display: none; }
.dvq-diff__line { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.4; font-weight: 500; }

.dvq-out__cta { margin-top: 2rem; align-self: stretch; }
@media (min-width: 56rem) { .dvq-out__cta { margin-top: auto; } .dvq-diff:not([hidden]) { margin-bottom: 2rem; } }


/* Other work ---------------------------------------------------------------- */

.dvq-other {
  display: grid;
  gap: 1.75rem;
  max-width: 68rem;
  margin: clamp(1.25rem, 0.8rem + 1.5vw, 2rem) auto 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--dvq-card);
  box-shadow: var(--dvq-lift);
}
@media (min-width: 64rem) { .dvq-other { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 2.5rem; } }
.dvq-other__title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.15; }
.dvq-other__line { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.dvq-other__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}
@media (min-width: 40rem) { .dvq-other__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dvq-other__list li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.625rem;
  padding: 1rem 0.5rem;
  border-radius: 1rem;
  background: var(--dvq-soft);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.dvq-other__list .dvq-glyph { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; box-shadow: none; background: var(--dvq-card); }
.dvq-other__list .dvq-glyph svg { width: 1.3rem; height: 1.3rem; }


/* Ways to start --------------------------------------------------------------- */

.dvq-start { max-width: 68rem; margin: clamp(5rem, 3rem + 6vw, 9rem) auto 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.dvq-start__head { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.dvq-start__title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.006em; text-wrap: balance; }

.dvq-ways { display: grid; gap: 1rem; list-style: none; counter-reset: way; }
@media (min-width: 40rem) { .dvq-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .dvq-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.125rem; } }

.dvq-way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.625rem;
  border-radius: var(--radius-lg);
  background: var(--dvq-card);
  box-shadow: var(--dvq-lift);
  transition: box-shadow 500ms var(--ease-out), translate 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dvq-way:hover { translate: 0 -4px; box-shadow: var(--dvq-lift-hi); }
  .dvq-way:hover .dvq-way__ico { scale: 1.06; }
}
.dvq-way__ico {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: 1.25rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  transition: scale 400ms var(--dv-spring);
}
.dvq-way__ico svg { width: 1.375rem; height: 1.375rem; }
.dvq-way--demo .dvq-way__ico { background: var(--dv-grad); color: #fff; }
.dvq-way--found .dvq-way__ico { background: var(--dvq-warm); color: #fff; }
.dvq-way__name { font-size: 1.1875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.008em; }
.dvq-way__price { margin-top: 0.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--accent); }
.dvq-way--found .dvq-way__price { color: var(--warn); }
.dvq-way__text { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.dvq-way__cta { margin-top: 1.25rem; align-self: flex-start; min-height: 2.75rem; }
@media (min-width: 64rem) { .dvq-way__cta { margin-top: auto; } .dvq-way--demo .dvq-way__text { margin-bottom: 1.25rem; } }

.dvq-terms { display: grid; justify-items: center; gap: 1.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; }
.dvq-terms__line { font-size: 1.0625rem; font-weight: 500; text-wrap: balance; }
.dvq-terms__line svg { display: inline-block; margin-right: 0.5rem; vertical-align: -0.2em; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dvq-terms__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.25rem; }


/* Entrances: icons draw as their block lands (armed by JS only). ------------- */

.dvq.is-armed :is(.dvq-glyph, .dvq-way__ico) svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}
.dvq.is-armed .is-in :is(.dvq-glyph, .dvq-way__ico) svg *,
.dvq.is-armed .is-in.dvq-way .dvq-way__ico svg * { stroke-dashoffset: 0; }
.dvq.is-armed :is(.dvq-incl, .dvq-other) li {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.dvq.is-armed .is-in li { opacity: 1; translate: 0 0; }
.reveal-all .dvq :is(.dvq-incl, .dvq-other) li { opacity: 1; translate: 0 0; }
.reveal-all .dvq :is(.dvq-glyph, .dvq-way__ico) svg * { stroke-dashoffset: 0; }


/* Reduced motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dvq-plan__ring::before { animation: none; }
  .dvq-d__s, .dvq-bar i { transition: none; }
  .dvq-odo .is-new { animation: none; }
  .dvq-cap__cells i, .dvq-range__track { transition: opacity 200ms ease, background-color 200ms ease; transform: none !important; }
  .dvq-range__input:active::-webkit-slider-thumb, .dvq-range__input:hover::-webkit-slider-thumb { transform: none; }
  .dvq-plan, .dvq-way, .dvq-way__ico { transition: box-shadow 200ms ease; }
  .dvq-plan:hover, .dvq-way:hover { translate: none !important; }
  .dvq-way:hover .dvq-way__ico { scale: none !important; }
  .dvq.is-armed :is(.dvq-glyph, .dvq-way__ico) svg * { stroke-dashoffset: 0 !important; transition: none; }
  .dvq.is-armed :is(.dvq-incl, .dvq-other) li { translate: none !important; transition: opacity 400ms ease; transition-delay: 0ms; }
  .dvq-odo--big, .dvq-out__per, .dvq-out__word { transition: opacity 200ms ease; translate: none !important; filter: none !important; }
  .dvq-range__input::-webkit-slider-thumb { transition: none; }
  .dvq-range__input:active::-webkit-slider-thumb { transform: none; }
}


/* --------------------------------------------------------------------------
   Scoreboard (dvk-): the weekly dashboard on the dark band.
   The window rises out of a soft glow as it scrolls in. Once it is in view
   the tiles land one after another while their numbers count up in step
   with the ring and lines, the pips pop and the ledgers tick green; all of
   it lands in about 1.2 s. The log under it
   glides up one row at a time while visible.
   No JS: everything below shows its final state. section.js adds .is-armed
   (hidden starting states) and then .is-on (play).
   -------------------------------------------------------------------------- */

.dvk { isolation: isolate; }

/* Two slow lights behind the window, so the glass has something to blur. */
.dvk-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.dvk-aura i {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: 0.55;
  animation: dvk-drift 26s var(--ease-in-out) infinite alternate;
}
.dvk-aura i:nth-child(1) { left: -25vmax; top: 30%; background: radial-gradient(closest-side, rgba(41, 151, 255, 0.28) 0%, rgba(41, 151, 255, 0.174) 28%, rgba(41, 151, 255, 0.095) 52%, rgba(41, 151, 255, 0.039) 72%, rgba(41, 151, 255, 0.011) 88%, rgba(41, 151, 255, 0.0) 100%); }
.dvk-aura i:nth-child(2) { right: -28vmax; top: 18%; background: radial-gradient(closest-side, rgba(165, 134, 255, 0.24) 0%, rgba(165, 134, 255, 0.149) 28%, rgba(165, 134, 255, 0.082) 52%, rgba(165, 134, 255, 0.034) 72%, rgba(165, 134, 255, 0.01) 88%, rgba(165, 134, 255, 0.0) 100%); animation-duration: 32s; animation-delay: -9s; }
.dvk-aura i:nth-child(3) { left: 20%; bottom: -50vmax; background: radial-gradient(closest-side, rgba(64, 196, 220, 0.14) 0%, rgba(64, 196, 220, 0.087) 28%, rgba(64, 196, 220, 0.048) 52%, rgba(64, 196, 220, 0.02) 72%, rgba(64, 196, 220, 0.006) 88%, rgba(64, 196, 220, 0.0) 100%); animation-duration: 38s; animation-delay: -17s; }
.dvk.is-off .dvk-aura i { animation-play-state: paused; }
@keyframes dvk-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vmax, -4vmax, 0) scale(1.12); }
}


/* Stage and window ------------------------------------------------------- */

.dvk-stage {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  perspective: 1800px;
}
.dvk-glow {
  position: absolute;
  inset: 8% 4% -6%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 30% 50%, rgba(41, 151, 255, 0.36), transparent 70%),
    radial-gradient(50% 50% at 72% 55%, rgba(165, 134, 255, 0.3), transparent 70%);
  opacity: var(--dvk-glow, 0.9);
  transform: scale(var(--dvk-glow-s, 1));
  pointer-events: none;
}
.dvk-win {
  transform-origin: 50% 0%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 120px -40px rgba(41, 151, 255, 0.45);
}
.dvk-win .dv-window__bar { color: var(--ink-2); }
.dvk-body { display: grid; gap: 0.75rem; }

.dvk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.125rem 0.125rem 0.25rem;
}
.dvk-top__scope {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.dvk .dv-sample { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }

/* A breathing green dot: "this is live". */
.dvk-live {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--dv-done);
  box-shadow: 0 0 10px rgba(50, 215, 75, 0.7);
}
.dvk-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dv-done);
  animation: dvk-ping 2.4s var(--ease-out) infinite;
}
.dvk.is-off .dvk-live::after { animation-play-state: paused; }
@keyframes dvk-ping {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}


/* Tiles ------------------------------------------------------------------ */

.dvk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) {
  .dvk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}

.dvk-tile {
  --c: var(--dv-agent);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 500ms var(--ease-out);
}
@media (min-width: 48rem) { .dvk-tile { padding: 1.25rem 1.25rem 1.125rem; } }
.dvk-tile--wide { grid-column: span 2; }
.dvk-tile--agent { --c: var(--dv-agent); }
.dvk-tile--done, .dvk-tile--close { --c: var(--dv-done); }
.dvk-tile--person { --c: var(--dv-person); }
.dvk-tile--flag { --c: var(--dv-flag); }
.dvk-tile--rule { --c: var(--dv-rule); }

/* A light in the tile's color that follows the pointer (fine pointers). */
.dvk-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 16%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dvk-tile:hover { transform: translateY(-3px); }
  .dvk-tile:hover::before { opacity: 1; }
}

.dvk-tile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.dvk-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--ink-2);
}
.dvk-delta {
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.dvk-foot {
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Big numbers. */
.dvk-big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 0.375rem;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dvk-tile--wide .dvk-big { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); }
.dvk-of {
  margin-left: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}
.dvk-n { white-space: nowrap; }
/* A counting number: a hidden copy of the widest value sets the box, the
   live value sits on top of it. While it counts it rises out of a light
   blur, so the figure reads as arriving rather than flickering. */
.dvk-roll { display: inline-grid; }
.dvk-roll > span { grid-area: 1 / 1; }
.dvk-roll__ghost { visibility: hidden; }
.dvk-roll__live { justify-self: start; }
.dvk-ring .dvk-roll__live, .dvk-tile--close .dvk-roll__live { justify-self: end; }
.dvk.is-armed .dvk-roll__live { opacity: 0.35; filter: blur(5px); transform: translateY(0.12em); }
.dvk.is-on .dvk-roll__live {
  opacity: 1;
  filter: none;
  transform: none;
  transition: opacity 500ms var(--ease-out), filter 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(120ms + var(--i, 0) * 40ms);
}

/* Visually hidden text for screen readers. */
.dvk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Items handled: six weeks of growth with a scrubbable line. */
.dvk-chart {
  position: relative;
  margin-top: 0.75rem;
  color: var(--dv-agent);
  touch-action: pan-y;
}
.dvk-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dvk-chart__grid line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 2 4; }
.dvk-chart__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 4px 10px rgba(41, 151, 255, 0.45));
}
.dvk-chart__dot { fill: #fff; stroke: #a586ff; stroke-width: 2.5; }
.dvk-chart__pulse { fill: #a586ff; transform-box: fill-box; transform-origin: center; opacity: 0; }
.dvk.is-on:not(.is-off) .dvk-chart__pulse { animation: dvk-pulse 2.6s var(--ease-out) 2.4s infinite; }
@keyframes dvk-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(4); opacity: 0; }
}
.dvk-chart__guide {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity 200ms ease;
}
.dvk-chart.is-scrub .dvk-chart__guide { opacity: 1; }
.dvk-chart__mark, .dvk-chart__guide { transition: transform 260ms var(--ease-out), opacity 200ms ease; }

.dvk-chart__tip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 0.6rem;
  background: rgba(44, 44, 46, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) translate(-50%, -150%) scale(0.92);
  transition: opacity 200ms ease, transform 260ms var(--ease-out);
}
.dvk-chart__tip b { margin-right: 0.35rem; color: var(--ink-2); font-weight: 500; }
.dvk-chart.is-scrub .dvk-chart__tip { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) translate(-50%, -150%); }

.dvk-chart__weeks {
  position: relative;
  height: 1.25rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
}
.dvk-chart__weeks li { position: absolute; top: 0; transform: translateX(-50%); transition: color 200ms ease; }
.dvk-chart__weeks li:nth-child(1) { left: 3.125%; }
.dvk-chart__weeks li:nth-child(2) { left: 21.875%; }
.dvk-chart__weeks li:nth-child(3) { left: 40.625%; }
.dvk-chart__weeks li:nth-child(4) { left: 59.375%; }
.dvk-chart__weeks li:nth-child(5) { left: 78.125%; }
.dvk-chart__weeks li:nth-child(6) { left: 96.875%; color: var(--ink); }
.dvk-chart__weeks li.is-hot { color: var(--ink); }
.dvk-chart.is-scrub .dvk-chart__weeks li:nth-child(6):not(.is-hot) { color: var(--ink-3); }

/* Finished without a person: a ring. */
.dvk-ring {
  position: relative;
  width: clamp(6.75rem, 5.5rem + 3vw, 8.5rem);
  aspect-ratio: 1;
  margin: auto;
  padding-top: 0.875rem;
  box-sizing: content-box;
}
.dvk-ring__svg { display: block; width: 100%; height: auto; aspect-ratio: 1; transform: rotate(-90deg); overflow: visible; }
.dvk-ring__track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 11; }
.dvk-ring__arc {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--v));
  filter: drop-shadow(0 0 6px rgba(50, 215, 75, 0.45));
}
.dvk-ring__value {
  position: absolute;
  inset: 0.875rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dvk-ring__pct { font-size: 0.6em; margin-left: 0.05em; color: var(--ink-2); align-self: center; }
.dvk-tile--done .dvk-foot { margin-top: 0; text-align: center; }

/* Sent to a person: a falling line. */
.dvk-spark { display: block; width: 100%; height: auto; margin-top: auto; padding-top: 1rem; overflow: visible; color: var(--c); }
.dvk-tile--person .dvk-foot { margin-top: 0; }
.dvk-spark__line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dvk-spark__area { fill: url(#dvk-spark-fill); }
.dvk-spark__dot { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }

/* Questions for you: weekly bars. */
.dvk-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 2.75rem;
  margin-top: 0.75rem;
}
.dvk-bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 0.3rem 0.3rem 0.15rem 0.15rem;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: 50% 100%;
}
.dvk-bars i:last-child { background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }

/* Corrections turned into rules: one pip per rule. */
.dvk-pips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.3rem;
  margin-top: 0.75rem;
  max-width: 9.5rem;
}
.dvk-pips i {
  aspect-ratio: 1;
  border-radius: 0.3rem;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 100%, #fff 20%), var(--c));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent);
}

/* Closed on the agreed day: ten ledgers. */
.dvk-ledgers {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.3rem;
  margin: auto 0 0;
  padding: 0.875rem 0 0;
  list-style: none;
}
.dvk-ledgers li {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.25rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.dvk-ledgers li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50, 215, 75, 0.34), rgba(50, 215, 75, 0.16));
  box-shadow: inset 0 0 0 1px rgba(50, 215, 75, 0.35);
  border-radius: inherit;
}
.dvk-ledgers svg {
  position: relative;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--dv-done);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dvk-ledgers path { stroke-dasharray: 12; stroke-dashoffset: 0; }


/* Live log ticker ---------------------------------------------------------- */

.dvk-log {
  --rh: 3.75rem;
  --rows: 3;
  padding: 0.875rem 1rem 0.375rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
@media (min-width: 48rem) { .dvk-log { --rh: 2.75rem; --rows: 4; padding-inline: 1.25rem; } }
.dvk-log__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.dvk-log__hint { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.dvk-log__view {
  position: relative;
  height: calc(var(--rows) * var(--rh));
  margin-top: 0.375rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.9rem, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 0.9rem, #000 100%);
}
.dvk-log__list { margin: 0; padding: 0; list-style: none; }
.dvk-log__list.is-gliding { transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }

.dvk-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tag t" "x x";
  align-content: center;
  align-items: center;
  gap: 0.3rem 0.625rem;
  height: var(--rh);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.875rem;
}
.dvk-row__t { grid-area: t; justify-self: end; font-size: 0.75rem; color: var(--ink-3); }
.dvk-row .dv-tag { grid-area: tag; justify-self: start; }
.dvk-row__x { grid-area: x; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
@media (min-width: 48rem) {
  .dvk-row { grid-template-columns: 3rem 5.25rem minmax(0, 1fr); grid-template-areas: "t tag x"; gap: 0.875rem; }
  .dvk-row__t { justify-self: start; }
}

/* The newest row arrives with a soft wash of light and a small tag pop. */
.dvk-row::after {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 60%, transparent);
  opacity: 0;
  pointer-events: none;
}
.dvk-row.is-new::after { animation: dvk-wash 1800ms var(--ease-out) 300ms; }
.dvk-row.is-new .dv-tag { animation: dvk-pop 650ms var(--dv-spring) 200ms both; }
@keyframes dvk-wash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dvk-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.dvk-note {
  max-width: 40rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.004em;
  text-wrap: balance;
}


/* Play states (JS only) --------------------------------------------------- */

/* Armed: everything waits in its starting position. */
.dvk.is-armed .dvk-tile {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  filter: blur(6px);
}
.dvk.is-armed .dvk-ring__arc { stroke-dashoffset: 100; }
.dvk.is-armed .dvk-chart__line, .dvk.is-armed .dvk-spark__line { stroke-dashoffset: 1; }
.dvk.is-armed .dvk-chart__area, .dvk.is-armed .dvk-spark__area { clip-path: inset(0 100% 0 0); }
.dvk.is-armed .dvk-chart__dot, .dvk.is-armed .dvk-spark__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.dvk.is-armed .dvk-bars i { transform: scaleY(0); }
.dvk.is-armed .dvk-pips i { transform: scale(0); opacity: 0; }
.dvk.is-armed .dvk-ledgers li::before { opacity: 0; transform: scale(0.6); }
.dvk.is-armed .dvk-ledgers path { stroke-dashoffset: 12; }
.dvk.is-armed .dvk-log { opacity: 0; transform: translateY(14px); }
.dvk.is-armed .dvk-delta { opacity: 0; transform: translateX(-6px); }

/* On: each piece plays on its own clock, timed after its tile lands. */
.dvk.is-on .dvk-tile {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out), filter 600ms var(--ease-out);
  transition-delay: calc(var(--i) * 50ms);
}
@media (hover: hover) and (pointer: fine) {
  .dvk.is-on.is-landed .dvk-tile { transition: transform 500ms var(--ease-out); transition-delay: 0ms; }
  .dvk.is-on.is-landed .dvk-tile:hover { transform: translateY(-3px); }
}
.dvk.is-on .dvk-delta { opacity: 1; transform: none; transition: opacity 500ms ease 1000ms, transform 600ms var(--ease-out) 1000ms; }
/* The ring's arc is drawn by section.js, in step with its number. */
.dvk.is-on .dvk-chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1050ms cubic-bezier(0.22, 0.8, 0.3, 1) 120ms; }
.dvk.is-on .dvk-chart__area { clip-path: inset(0 0 0 0); transition: clip-path 1050ms cubic-bezier(0.22, 0.8, 0.3, 1) 120ms; }
.dvk.is-on .dvk-chart__dot { transform: scale(1); transition: transform 500ms var(--dv-spring) 1050ms; }
.dvk.is-on .dvk-spark__line { stroke-dashoffset: 0; transition: stroke-dashoffset 950ms cubic-bezier(0.22, 0.8, 0.3, 1) 200ms; }
.dvk.is-on .dvk-spark__area { clip-path: inset(0 0 0 0); transition: clip-path 950ms cubic-bezier(0.22, 0.8, 0.3, 1) 200ms; }
.dvk.is-on .dvk-spark__dot { transform: scale(1); transition: transform 500ms var(--dv-spring) 1050ms; }
.dvk.is-on .dvk-bars i { transform: none; transition: transform 650ms var(--ease-out); transition-delay: calc(260ms + var(--b) * 55ms); }
.dvk.is-on .dvk-pips i { transform: none; opacity: 1; transition: transform 420ms var(--ease-out), opacity 200ms ease; transition-delay: calc(290ms + var(--p) * 30ms); }
.dvk.is-on .dvk-ledgers li::before { opacity: 1; transform: none; transition: opacity 300ms ease, transform 420ms var(--ease-out); transition-delay: calc(330ms + var(--l) * 35ms); }
.dvk.is-on .dvk-ledgers path { stroke-dashoffset: 0; transition: stroke-dashoffset 320ms var(--ease-out); transition-delay: calc(390ms + var(--l) * 35ms); }
.dvk.is-on .dvk-log { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 600ms, transform 1000ms var(--ease-out) 600ms; }


/* Reduced motion: final states, nothing drifts, the log holds still. ----- */
@media (prefers-reduced-motion: reduce) {
  .dvk-aura i, .dvk-live::after, .dvk-chart__pulse { animation: none !important; }
  .dvk-win { transform: none !important; }
  .dvk-tile, .dvk-tile:hover { transform: none !important; filter: none !important; transition: none !important; }
  .dvk-row.is-new::after, .dvk-row.is-new .dv-tag { animation: none !important; }
}

/* Desktop: the note sits on two clean lines, ink then grey. */
@media (min-width: 48rem) {
  .dvk-note { max-width: none; }
  .dvk-note .muted { display: block; }
}


/* --------------------------------------------------------------------------
   FAQ (dvf-): eight questions as native <details>.
   Desktop: the heading sits in a sticky column beside the list. Each row is
   a hairline list item; the round icon turns from plus to minus and fills
   when open. section.js animates the height and lets the answer rise out of
   a soft blur; without JS the rows simply open.
   -------------------------------------------------------------------------- */

.dvf-wrap { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 64rem) {
  .dvf-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .dvf-head { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.dvf-lead {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0.004em;
  color: var(--ink);
  text-wrap: pretty;
}

/* "Something we haven't covered?" A quiet card with a direct line. */
.dvf-ask {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border-radius: 1.25rem;
  background: var(--tile);
}
.dvf-ask__face {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--dv-grad);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sig-b) 60%, transparent);
}
.dvf-ask__face svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dvf-ask__title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.dvf-ask__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 2.75rem;
  margin: -0.5rem 0 -0.75rem;
  font-size: 0.9375rem;
  color: var(--accent);
}
.dvf-ask__link svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .dvf-ask__link:hover svg { transform: translate(2px, -2px); }
}


/* The list ----------------------------------------------------------------- */

.dvf-list { border-top: 1px solid var(--line-strong); }
.dvf-item {
  position: relative;
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
}
.dvf-item.is-busy { will-change: height; }

.dvf-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.002em;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.dvf-q::-webkit-details-marker { display: none; }
.dvf-q::marker { content: ""; }
.dvf-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0.75rem; }
.dvf-q__text { text-wrap: pretty; transition: transform 450ms var(--ease-out); }

/* Plus to minus: the vertical bar turns flat, the circle fills with ink. */
.dvf-icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--tile);
  transition: background-color 350ms ease, transform 500ms var(--ease-out);
}
.dvf-icon::before, .dvf-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.875rem;
  height: 2px;
  margin: -1px 0 0 -0.4375rem;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 500ms var(--ease-out), background-color 350ms ease;
}
.dvf-icon::after { transform: rotate(90deg); }
.dvf-item[open]:not(.is-closing) .dvf-icon { background: var(--ink); transform: rotate(180deg); }
.dvf-item[open]:not(.is-closing) .dvf-icon::before,
.dvf-item[open]:not(.is-closing) .dvf-icon::after { background: var(--bg); transform: none; }

@media (hover: hover) and (pointer: fine) {
  .dvf-q:hover .dvf-q__text { transform: translateX(4px); }
  .dvf-q:hover .dvf-icon { background: color-mix(in srgb, var(--ink) 12%, var(--tile)); }
  .dvf-item[open]:not(.is-closing) .dvf-q:hover .dvf-icon { background: var(--ink); }
}
.dvf-q:active .dvf-icon { transform: scale(0.9); }
.dvf-item[open]:not(.is-closing) .dvf-q:active .dvf-icon { transform: rotate(180deg) scale(0.9); }

.dvf-a { padding: 0 3.75rem 1.75rem 0.25rem; }
.dvf-a p {
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.dvf-a .link { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .dvf-a { padding-right: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dvf-icon, .dvf-icon::before, .dvf-icon::after, .dvf-q__text { transition: none !important; }
}


/* --------------------------------------------------------------------------
   Closing (dvz-): the last card on the page, and the most cinematic.
   A night sky in both schemes: aurora light drifting behind a dark
   horizon whose rim glows, motes rising, a slow sweep of light, and the
   Beonsys mark inside a turning ring of color. As the card scrolls in its
   surface (never the text) grows to full size while the horizon rises and
   the aurora brightens.
   Every moving layer is transform or opacity, paused off-screen, and still
   with reduced motion.
   -------------------------------------------------------------------------- */

/* The FAQ above sits on the same background, so its bottom padding already
   gives the card room; a full second section gap reads as a hole. */
.dvz { padding-top: calc(var(--section) * 0.4); }

.dvz-card {
  /* The card is always night, so it carries the dark ink. */
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #8e8e93;
  --accent: #5cb0ff; /* a touch lighter than the band blue: it sits on aurora */
  --btn: #f5f5f7;
  --btn-hover: #ffffff;
  --btn-ink: #000000;
  --dv-grad: linear-gradient(100deg, #7cc8ff 0%, #2997ff 28%, #a586ff 68%, #e58cff 100%);
  --rise: 0;
  --glow: 1;

  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) clamp(1.25rem, 0.5rem + 4vw, 5rem) clamp(10rem, 7rem + 9vw, 16rem);
  border-radius: calc(var(--radius-lg) * 1.25);
  color: var(--ink);
  text-align: center;
}


/* The sky ------------------------------------------------------------------ */

/* The sky is the card's surface: background, edge and glow all live here,
   so the scroll-in growth scales only this layer and never the text. */
.dvz-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, #12131f 0%, #07070c 55%, #040407 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 60px 120px -60px rgba(0, 20, 60, 0.55);
  transform: scale(var(--grow, 1));
  transform-origin: 50% 70%;
}
/* A hairline that catches light along the top edge and fades down the sides. */
.dvz-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 70%, rgba(140, 160, 255, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Dark scheme: the page is black too, so the card needs a clear rim and a
   colored glow around it to read as a card. */
@media (prefers-color-scheme: dark) {
  .dvz-sky {
    background: radial-gradient(120% 70% at 50% 0%, #181a2a 0%, #0b0b13 55%, #06060a 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 60px -10px rgba(41, 151, 255, 0.32),
      0 30px 140px -20px rgba(138, 75, 255, 0.38),
      0 -20px 120px -40px rgba(41, 151, 255, 0.3);
  }
}

/* Aurora: four soft lights, each on its own slow orbit, mixing as they cross. */
.dvz-aurora {
  position: absolute;
  mix-blend-mode: screen;
  opacity: calc(var(--o, 0.8) * var(--glow));
  animation: dvz-float-a 18s var(--ease-in-out) infinite alternate;
}
.dvz-aurora--a {
  --o: 0.85;
  left: -12%; bottom: -8%;
  width: 70%; height: 85%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, 0.85) 0%, rgba(41, 151, 255, 0.527) 28%, rgba(41, 151, 255, 0.289) 52%, rgba(41, 151, 255, 0.119) 72%, rgba(41, 151, 255, 0.034) 88%, rgba(41, 151, 255, 0.0) 100%);
}
.dvz-aurora--b {
  --o: 0.8;
  right: -14%; bottom: -4%;
  width: 72%; height: 90%;
  background: radial-gradient(closest-side, rgba(138, 75, 255, 0.85) 0%, rgba(138, 75, 255, 0.527) 28%, rgba(138, 75, 255, 0.289) 52%, rgba(138, 75, 255, 0.119) 72%, rgba(138, 75, 255, 0.034) 88%, rgba(138, 75, 255, 0.0) 100%);
  animation-name: dvz-float-b;
  animation-duration: 22s;
}
.dvz-aurora--c {
  --o: 0.55;
  left: 28%; bottom: -14%;
  width: 46%; height: 70%;
  background: radial-gradient(closest-side, rgba(255, 92, 168, 0.8) 0%, rgba(255, 92, 168, 0.496) 28%, rgba(255, 92, 168, 0.272) 52%, rgba(255, 92, 168, 0.112) 72%, rgba(255, 92, 168, 0.032) 88%, rgba(255, 92, 168, 0.0) 100%);
  animation-name: dvz-float-c;
  animation-duration: 16s;
}
.dvz-aurora--d {
  --o: 0.45;
  left: 18%; bottom: 18%;
  width: 40%; height: 46%;
  background: radial-gradient(closest-side, rgba(64, 196, 220, 0.7) 0%, rgba(64, 196, 220, 0.434) 28%, rgba(64, 196, 220, 0.238) 52%, rgba(64, 196, 220, 0.098) 72%, rgba(64, 196, 220, 0.028) 88%, rgba(64, 196, 220, 0.0) 100%);
  animation-name: dvz-float-b;
  animation-duration: 26s;
  animation-direction: alternate-reverse;
}
@keyframes dvz-float-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(18%, -8%, 0) rotate(25deg) scale(1.15); }
}
@keyframes dvz-float-b {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); }
  to { transform: translate3d(-20%, -12%, 0) rotate(-20deg) scale(0.92); }
}
@keyframes dvz-float-c {
  from { transform: translate3d(-12%, 4%, 0) scale(0.9); }
  to { transform: translate3d(14%, -10%, 0) scale(1.2); }
}

/* Motes: tiny lights that rise from behind the horizon and fade. */
.dvz-motes { position: absolute; inset: 0; }
.dvz-motes i {
  position: absolute;
  left: var(--x);
  bottom: 14%;
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(170, 200, 255, 0.9);
  opacity: 0;
  animation: dvz-mote var(--t) linear var(--d) infinite;
}
@keyframes dvz-mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { transform: translate3d(12px, -26rem, 0); opacity: 0; }
}

/* The horizon: a vast dark disc whose rim catches the light behind it. */
.dvz-horizon {
  position: absolute;
  left: 50%;
  top: calc(100% - clamp(5.5rem, 4rem + 4vw, 8.5rem));
  width: max(190%, 40rem);
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(70% 60% at 50% 0%, #0d0e18 0%, #030305 70%);
  box-shadow:
    inset 0 1px 0 rgba(220, 232, 255, 0.75),
    inset 0 10px 30px -12px rgba(140, 180, 255, 0.35),
    0 -1px 10px rgba(150, 190, 255, 0.55),
    0 -12px 40px rgba(80, 150, 255, 0.45),
    0 -40px 120px rgba(150, 110, 255, 0.4);
  transform: translate3d(-50%, calc(var(--rise) * 40%), 0);
}

/* A slow band of light that crosses the sky now and then. */
.dvz-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 70%, transparent 100%);
  transform: translate3d(-120%, 0, 0) skewX(-14deg);
  animation: dvz-sweep 10s var(--ease-in-out) 1.2s infinite;
}
@keyframes dvz-sweep {
  0% { transform: translate3d(-120%, 0, 0) skewX(-14deg); }
  32%, 100% { transform: translate3d(320%, 0, 0) skewX(-14deg); }
}

/* Pointer light (fine pointers only; section.js moves it). */
.dvz-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 30%), rgba(120, 160, 255, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 500ms ease;
}
.dvz-card.is-pointer .dvz-spot { opacity: 1; }

/* Ambient loops rest while the card is off-screen. */
.dvz-card.is-off .dvz-aurora,
.dvz-card.is-off .dvz-motes i,
.dvz-card.is-off .dvz-sweep,
.dvz-card.is-off .dvz-emblem i,
.dvz-card.is-off .dvz-cta::before { animation-play-state: paused; }


/* Content ------------------------------------------------------------------ */

.dvz-content { position: relative; }

/* The mark inside a ring of turning color. */
.dvz-emblem {
  position: relative;
  width: clamp(4.5rem, 4rem + 1.5vw, 5.5rem);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}
.dvz-emblem i {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #2997ff, #a586ff, #ff6fb5, #ff9f0a, #40c4dc, #2997ff);
  animation: dvz-turn 9s linear infinite;
}
.dvz-emblem__ring {
  inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.dvz-emblem__halo {
  inset: -22%;
  opacity: 0.7;
  filter: blur(14px);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 70%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 50%, #000 70%, transparent 100%);
}
@keyframes dvz-turn { to { transform: rotate(360deg); } }
.dvz-emblem__core {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, #23232b, #060609 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -10px 20px rgba(41, 151, 255, 0.12);
}
.dvz-emblem__core svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(160, 190, 255, 0.6));
}

.dvz-eyebrow { color: var(--ink-2); }
.dvz-title { max-width: 14em; margin-inline: auto; }
.dvz-lead { max-width: 36rem; margin: 1.25rem auto 0; color: rgba(245, 245, 247, 0.8); text-wrap: balance; }

.dvz-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}

/* The primary button carries a soft breathing halo in the brand colors.
   The halo is only a shadow, so it glows around the button, never on it. */
.dvz-cta { position: relative; }
.dvz-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 22px 1px rgba(140, 160, 255, 0.45),
    -14px 8px 44px 0 rgba(41, 151, 255, 0.5),
    14px 8px 44px 0 rgba(255, 111, 181, 0.38);
  pointer-events: none;
  animation: dvz-breathe 4.5s var(--ease-in-out) infinite alternate;
}
@keyframes dvz-breathe {
  from { opacity: 0.45; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.03); }
}
/* Fine pointers: both buttons lean a few pixels toward the cursor. */
.dvz-cta, .dvz-founder {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 500ms var(--ease-out), background-color 200ms ease;
}
.dvz-cta:active, .dvz-founder:active { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(0.97); transition-duration: 160ms; }
.dvz-founder svg { transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .dvz-founder:hover svg { transform: translate(2px, -2px); }
}

.dvz-small {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  margin-top: 2rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-2);
  text-align: left;
  text-wrap: pretty;
}
.dvz-small::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dv-grad);
  box-shadow: 0 0 10px rgba(165, 134, 255, 0.8);
}


/* Reduced motion: the sky holds still, fully lit. ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dvz-aurora, .dvz-motes i, .dvz-sweep, .dvz-emblem i, .dvz-cta::before { animation: none !important; }
  .dvz-motes, .dvz-sweep { display: none; }
  .dvz-sky { transform: none !important; }
  .dvz-horizon { transform: translate3d(-50%, 0, 0) !important; }
}