/* Homepage v2. Built by _hv/assemble.mjs; edit the parts, not this file. */

/* ==========================================================================
   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; }
}


/* --------------------------------------------------------------------------
   Homepage v2: shell-level layout. Sections built as parts keep their own
   CSS below this, each under its own prefix.
   -------------------------------------------------------------------------- */

/* Hero: the headline runs the full width on large screens, then the copy and
   the live job card sit side by side under it. */
.hvh-top { min-width: 0; }
/* Phones: the headline sits close to its lead; the job card keeps its space. */
.hero__grid.hvh-grid { gap: 0; }
.hvh-grid .hero__copy { margin-top: 1.5rem; }
.hvh-grid .hero__visual { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.hvh-title { text-wrap: balance; }
.hvh-title .dv-grad { padding-right: 0.04em; }

@media (min-width: 64rem) {
  .hero__grid.hvh-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem);
    align-items: center;
  }
  .hvh-top { grid-column: 1 / -1; }
  .hvh-grid .hero__copy, .hvh-grid .hero__visual { margin-top: 0; }
  .hvh-title > span { display: inline; }
  .hvh-grid .hero__lead { margin-top: 0; }
}

/* Two-tone headlines: the second clause always starts its own line, so every
   section title breaks at the same place on a phone. */
#features .section__head .title { text-wrap: balance; }
#features .section__head .title .muted { display: block; }

/* Answers with receipts: the conversation uses the tile's whole width, the
   customer on the right edge and the agent on the left, like Messages. */
.tile--agents .chat { max-width: none; }
.tile--agents .chat__msg { max-width: min(82%, 26rem); }
@media (min-width: 56rem) {
  .tile--agents .chat.is-scripted { height: 17rem; }
}

/* Tap targets on touch screens: 44px or more, without changing the look. */
.brand { min-height: 2.75rem; }
@media (pointer: coarse) {
  .flow .seg__btn { position: relative; }
  .flow .seg__btn::after { content: ""; position: absolute; inset: -5px -1px; }
  .footer__nav a { padding-block: 0.75rem; }
  .footer__nav h2 { margin-bottom: 0; }
}

/* Job card footer on iPhone widths: label above value, each on one line. */
@media (max-width: 26rem) {
  .flow__foot { flex-direction: column; gap: 0.125rem; }
  .flow__foot span:last-child { text-align: left; }
}

/* Signature without scripts (or if main.js never reports): the tagline and
   service chips are part of the content, so they show in their final place. */
html:not(.js) .signature .signature__caption,
html:not(.js) .signature .sig-chip,
.reveal-all .signature .signature__caption,
.reveal-all .signature .sig-chip { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 40rem) {
  html:not(.js) .signature .signature__caption,
  html:not(.js) .signature .sig-chip,
  .reveal-all .signature .signature__caption,
  .reveal-all .signature .sig-chip { transform: none; }
}

/* Phone dock -----------------------------------------------------------------
   core.js shows it (.is-on) after the hero and hides it at the closing card.
   home.js adds .hv-dock-off over the how scene and the pricing section, and
   .hv-dock-band while it floats over a dark band. A hidden dock is also
   invisible and inert, so focus and screen readers never land on it. */
.dv-dock {
  visibility: hidden;
  transition: transform 500ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease,
    visibility 0s linear 500ms;
}
.dv-dock.is-on { visibility: visible; transition-delay: 0s; }
.dv-dock.is-on.hv-dock-off {
  visibility: hidden;
  transform: translate(-50%, calc(100% + 2rem));
  transition-delay: 0s, 0s, 0s, 500ms;
}
.dv-dock.hv-dock-band {
  --dv-glass: rgba(28, 28, 30, 0.72);
  --dv-glass-edge: rgba(255, 255, 255, 0.12);
  --tile: #2c2c2e;
  --ink: #f5f5f7;
  --btn: #f5f5f7;
  --btn-hover: #ffffff;
  --btn-ink: #000000;
}
.dv-dock .btn { transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .dv-dock, .dv-dock.is-on, .dv-dock.is-on.hv-dock-off { transition: none; }
}
/* Dark scheme: the quiet button keeps the same raised grey as over a band,
   so crossing a band changes nothing in dark mode. */
@media (prefers-color-scheme: dark) { .dv-dock { --tile: #2c2c2e; } }

/* Signature chips: anchored by their outer edge, not their centre, so the
   left pair lines up on one edge and the right pair on the other, the same
   distance in from the frame. Each chip sits in a box centred where it was;
   the chip hugs the box's outer side, and the lower pair shares the
   tagline's line. Wide screens only: on tablets the tagline needs the room. */
@media (min-width: 64rem) {
  .sig-chip { display: flex; width: 14%; }
  .sig-chip:nth-child(even) { justify-content: flex-end; }
  .sig-chip:nth-child(-n+2) { top: 11%; }
  .sig-chip:nth-child(n+3) { top: 89%; }
}

/* Dark scheme: past the hero the particle field steps back behind reading
   text (home.js adds .hv-quiet). Light mode is already faint. */
@media (prefers-color-scheme: dark) {
  .particles { transition: opacity 800ms ease; }
  .particles.hv-quiet { opacity: 0.55; }
}

/* Sample pill under the chat tile copy. */
.hv-tile-sample { margin-top: 0.875rem; }


/* ==== examples ==== */
/* ==========================================================================
   Examples (hvx-): the showcase gallery
   A dark band with five live scenes in a horizontal gallery. The first card
   lines up with the container's left edge; the gallery bleeds to the
   viewport's right edge. Scenes are drawn in em, so each one scales with its
   card like a picture, and never below an 11px base.
   ========================================================================== */

.hvx {
  --hvx-gap: clamp(0.75rem, 0.45rem + 0.9vw, 1.25rem);
  --hvx-r: clamp(1.5rem, 1.1rem + 1vw, 1.875rem);
  /* Light shades of the actor colours, for small text on dark glass. */
  --hvx-agent-ink: #6cb8ff;
  --hvx-rule-ink: #c6b5ff;
  --hvx-person-ink: #ffbf5e;
  --hvx-flag-ink: #ff8f87;
  isolation: isolate;
}

.hvx-head { margin-bottom: clamp(0.75rem, 0.25rem + 1.6vw, 1.75rem); }
.hvx-key { font-weight: 600; }
.hvx-key--agent { color: var(--hvx-agent-ink); }
.hvx-key--rule { color: var(--hvx-rule-ink); }
.hvx-key--person { color: var(--hvx-person-ink); }


/* Gallery ------------------------------------------------------------------ */

.hvx-gallery {
  position: relative;
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hvx-gallery::-webkit-scrollbar { display: none; }
.hvx-gallery:focus { outline: none; }
.hvx:not(.is-ready) .hvx-gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.hvx-track {
  /* Same left edge as .container, worked out from the gallery's own width. */
  --inset: max(var(--gutter), env(safe-area-inset-left), (100cqi - var(--maxw)) / 2);
  position: relative;
  display: flex;
  gap: var(--hvx-gap);
  width: max-content;
  margin: 0;
  /* Room above and below for the glow and shadows the scroller would clip. */
  padding: clamp(1.75rem, 1rem + 2vw, 3rem) var(--inset) clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  list-style: none;
}

.hvx-card {
  --w: 85cqi;
  position: relative;
  isolation: isolate;
  flex: none;
  width: var(--w);
  container-type: inline-size;
  scroll-snap-align: start;
  scroll-margin-inline-start: var(--inset);
}
@media (min-width: 40rem) {
  .hvx-card { --w: min(28rem, 64cqi); }
}
@media (min-width: 64rem) {
  /* About 2.2 cards in view: two whole ones and the next one peeking. */
  .hvx-card { --w: min(40rem, (100cqi - var(--inset) - 2 * var(--hvx-gap)) / 2.2); }
}

/* Soft light behind the cards in view. */
.hvx-card::before {
  content: "";
  position: absolute;
  inset: -9% -7% -6%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 40%, color-mix(in srgb, var(--hvx-c) 34%, transparent), transparent 72%);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 1200ms var(--ease-out);
}
.hvx-card.is-lit::before,
.hvx:not(.is-ready) .hvx-card::before { opacity: 1; }

.hvx-card__in {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--hvx-r);
  background: linear-gradient(180deg, #19191b 0%, #131314 100%);
  box-shadow: 0 2.5rem 4rem -2.5rem rgba(0, 0, 0, 0.9);
}
/* Hairline edge, drawn over the content so the stage never hides it. */
.hvx-card__in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  pointer-events: none;
  transition: box-shadow 200ms ease;
}
.hvx-gallery:focus-visible .hvx-card.is-lit .hvx-card__in::after {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Entrance: the cards are dealt in from the right, then each scene's window
   rises into place a beat later. Armed only once the script runs. The move
   uses `translate` on the inner card, never the list item: snap points are
   measured from the item's box, and the hover lift keeps `transform`. */
.hvx-card__in { transition: transform 600ms var(--ease-out); }
.hvx.is-ready .hvx-card__in {
  opacity: 0;
  translate: 3rem 0;
  transition:
    opacity 900ms var(--ease-out) calc(var(--i) * 90ms + 80ms),
    translate 1300ms var(--ease-out) calc(var(--i) * 90ms + 80ms),
    transform 600ms var(--ease-out);
}
.hvx.is-ready .hvx-par > * {
  opacity: 0;
  translate: 0 1.25em;
  scale: 0.97;
  transition:
    opacity 900ms var(--ease-out) calc(var(--i) * 90ms + 380ms),
    translate 1300ms var(--ease-out) calc(var(--i) * 90ms + 380ms),
    scale 1300ms var(--ease-out) calc(var(--i) * 90ms + 380ms);
}
.hvx.is-ready .hvx-gallery.is-in .hvx-card__in,
.hvx.is-ready .hvx-gallery.is-in .hvx-par > * { opacity: 1; translate: none; scale: none; }
.hvx.is-ready .hvx-gallery:not(.is-in) .hvx-card::before { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .hvx-card:hover .hvx-card__in { transform: translateY(-4px); }
}


/* Card text ------------------------------------------------------------------ */

.hvx-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.375rem 1.5rem;
}
@media (min-width: 40rem) {
  .hvx-card__text { padding: 1.5rem 1.75rem 1.75rem; }
}
.hvx-card__title {
  font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: 0.002em;
  font-weight: 600;
}
.hvx-card__line {
  margin: 0.5rem 0 1.25rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 64rem) {
  .hvx-card__line { font-size: 1.0625rem; }
}
.hvx-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.375rem 0.8rem 0.375rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}
.hvx-card__chip::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--hvx-c);
  box-shadow: 0 0 0.6rem var(--hvx-c);
}


/* Stage: where each scene lives ------------------------------------------- */

.hvx-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2.75rem 0.625rem 0.75rem;
  /* 11.5px on a phone card, about 16px on a wide desktop card. */
  font-size: clamp(0.6875rem, 0.45rem + 1.3cqi, 0.9375rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
@media (min-width: 40rem) {
  .hvx-stage {
    aspect-ratio: 4 / 3;
    min-height: calc(22em + 4.5rem);
    padding: 3rem 1.25rem 1.5rem;
  }
}
/* A faint dot field, brightest in the middle. */
.hvx-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
  background-size: 1.375rem 1.375rem;
  background-position: center;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 80%);
  opacity: 0.6;
  pointer-events: none;
}
.hvx-glow {
  position: absolute;
  inset: -6% -18% 0;
  background:
    radial-gradient(46% 44% at 50% 58%, color-mix(in srgb, var(--hvx-c) 46%, transparent), transparent 74%),
    radial-gradient(70% 42% at 50% 0%, color-mix(in srgb, var(--hvx-c) 16%, transparent), transparent 75%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 1200ms var(--ease-out);
}
.hvx-card.is-lit .hvx-glow,
.hvx:not(.is-ready) .hvx-glow { opacity: 1; }

/* The parallax layer (moved by the script while the gallery scrolls). */
.hvx-par {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  transition: opacity 600ms var(--ease-out);
}
.hvx-stage.is-out .hvx-par { opacity: 0; transition-duration: 450ms; }
.hvx-gallery.is-moving .hvx-par,
.hvx-gallery.is-moving .hvx-glow { will-change: transform; }

.hvx-sample.dv-sample {
  position: absolute;
  z-index: 3;
  top: 0.875rem;
  left: 0.875rem;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #d1d1d6;
}
@media (min-width: 40rem) {
  .hvx-sample.dv-sample { top: 1.125rem; left: 1.125rem; }
}

/* Frames: the glass windows the scenes are drawn in. */
.hvx .hvx-frame {
  position: relative;
  width: min(100%, 30em);
  height: 22em;
  border-radius: 1.1em;
  background: rgba(30, 30, 32, 0.86);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1.75em 3.5em -1.25em rgba(0, 0, 0, 0.8);
}
.hvx .hvx-frame .dv-window__bar {
  height: 2.3em;
  gap: 0.75em;
  padding: 0 0.85em;
  font-size: 1em;
  background: rgba(44, 44, 46, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.hvx .hvx-frame .dv-window__lights { gap: 0.4em; }
.hvx .hvx-frame .dv-window__lights i { width: 0.7em; height: 0.7em; }
.hvx .hvx-frame .dv-window__title { margin-right: 2.9em; color: var(--ink-2); }

/* Finishing light: one sweep across the window when the work is done. */
.hvx-close::after,
.hvx-coi::after,
.hvx-order::after,
.hvx-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%);
  transform: translateX(110%);
  pointer-events: none;
  transition: transform 1400ms var(--ease-in-out) 250ms;
}
.hvx-stage.is-armed:not(.is-done) .hvx-frame::after { transform: translateX(-110%); }


/* Step engine ---------------------------------------------------------------
   The finished state is the default. While a scene is armed, anything marked
   data-s="N" waits in its "from" pose until the stage gets .is-sN; anything
   marked data-out="N" shows until .is-sN, then leaves. Each element says how
   it arrives with --from (transform), --from-o (opacity), --d (delay),
   --td / --te (duration and curve of the move). */

.hvx-stage [data-s],
.hvx-stage [data-out] {
  transition:
    opacity var(--od, 380ms) var(--ease-out) var(--d, 0ms),
    transform var(--td, 620ms) var(--te, var(--ease-out)) var(--d, 0ms);
}
.hvx-stage [data-out] { opacity: 0; transform: var(--to, translateY(-0.45em)); }

.hvx-stage.is-armed:not(.is-s1) [data-out="1"],
.hvx-stage.is-armed:not(.is-s2) [data-out="2"],
.hvx-stage.is-armed:not(.is-s3) [data-out="3"],
.hvx-stage.is-armed:not(.is-s4) [data-out="4"],
.hvx-stage.is-armed:not(.is-s5) [data-out="5"],
.hvx-stage.is-armed:not(.is-s6) [data-out="6"],
.hvx-stage.is-armed:not(.is-s7) [data-out="7"],
.hvx-stage.is-armed:not(.is-s8) [data-out="8"],
.hvx-stage.is-armed:not(.is-s9) [data-out="9"] { opacity: 1; transform: none; }

.hvx-stage.is-armed:not(.is-s1) [data-s="1"],
.hvx-stage.is-armed:not(.is-s2) [data-s="2"],
.hvx-stage.is-armed:not(.is-s3) [data-s="3"],
.hvx-stage.is-armed:not(.is-s4) [data-s="4"],
.hvx-stage.is-armed:not(.is-s5) [data-s="5"],
.hvx-stage.is-armed:not(.is-s6) [data-s="6"],
.hvx-stage.is-armed:not(.is-s7) [data-s="7"],
.hvx-stage.is-armed:not(.is-s8) [data-s="8"],
.hvx-stage.is-armed:not(.is-s9) [data-s="9"] {
  opacity: var(--from-o, 0);
  transform: var(--from, translateY(0.55em));
}


/* Shared pieces ------------------------------------------------------------- */

/* Two states in one cell; the old one rolls up and out as the new one rises. */
.hvx-stack { display: inline-grid; justify-items: start; }
.hvx-stack > * { grid-area: 1 / 1; }

.hvx-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.16em 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.hvx-pill--ok { background: rgba(50, 215, 75, 0.16); color: var(--dv-done); font-weight: 600; }

.hvx-stage .dv-tag {
  font-size: max(0.875em, 0.6875rem);
  padding: 0.18em 0.6em 0.18em 0.5em;
}
.hvx-stage .dv-tag--person { color: var(--hvx-person-ink); background: rgba(255, 159, 10, 0.16); }
.hvx-stage .dv-tag--person::before { background: var(--dv-person); }

/* Done tick: a green disc that pops in with a little overshoot. */
.hvx-tick,
.hvx-x {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--dv-done);
  --from: scale(0.3);
  --td: 520ms;
  --te: var(--dv-spring);
  --od: 220ms;
}
.hvx-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.52em;
  height: 0.28em;
  margin: -0.2em 0 0 -0.27em;
  border-left: 0.13em solid #0b0b0c;
  border-bottom: 0.13em solid #0b0b0c;
  transform: rotate(-45deg);
}
.hvx-x { background: var(--dv-flag); }
.hvx-x::before,
.hvx-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.62em;
  height: 0.13em;
  margin: -0.065em 0 0 -0.31em;
  border-radius: 1em;
  background: #0b0b0c;
  transform: rotate(45deg);
}
.hvx-x::after { transform: rotate(-45deg); }

/* Rule marker: a small violet diamond. */
.hvx-rule {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  margin: 0 0.3em 0 0.3em;
  border-radius: 0.14em;
  background: var(--dv-rule);
  box-shadow: 0 0 0.7em rgba(165, 134, 255, 0.7);
  transform: rotate(45deg);
}

/* A person: an orange disc with a head and shoulders. */
.hvx-av {
  --c: var(--dv-person);
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 37%, var(--c) 0 0.27em, transparent 0.29em),
    radial-gradient(0.56em 0.44em at 50% 98%, var(--c) 0 96%, transparent 100%),
    color-mix(in srgb, var(--c) 20%, #1c1c1e);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.hvx-av::after {
  content: "";
  position: absolute;
  inset: -0.2em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.12em var(--c);
  opacity: 0;
  pointer-events: none;
}
.hvx-av--cust { --c: #8e8e93; }

/* The person's moment: their avatar rings while it is their turn. */
.hvx-stage[data-scene="close"].is-s6:not(.is-s7) .hvx-av::after,
.hvx-stage[data-scene="bill"].is-s5:not(.is-s6) .hvx-av::after,
.hvx-stage[data-scene="coi"].is-s7:not(.is-s8) .hvx-av::after,
.hvx-stage[data-scene="order"].is-s6:not(.is-s7) .hvx-av::after,
.hvx-stage[data-scene="chat"].is-s6:not(.is-s7) .hvx-hand .hvx-av::after {
  animation: hvx-ring 1100ms var(--ease-out) 200ms infinite;
}
@keyframes hvx-ring {
  0% { opacity: 0.9; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* Approve button: pressed, then it turns into a green "Approved". */
.hvx-btn {
  position: relative;
  display: inline-grid;
  flex: none;
  border-radius: 999px;
}
.hvx-btn > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32em 0.8em;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  --d: 160ms;
  --to: scale(0.9);
  --from: scale(0.9);
  --td: 420ms;
}
.hvx-btn__go { background: var(--dv-person); color: #1d1d1f; }
.hvx-btn__ok { background: rgba(50, 215, 75, 0.16); color: var(--dv-done); }
.hvx-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4em;
  height: 2.4em;
  margin: -1.2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.hvx-stage[data-scene="bill"].is-s6:not(.is-s7) .hvx-btn,
.hvx-stage[data-scene="order"].is-s7:not(.is-s8) .hvx-btn,
.hvx-stage[data-scene="chat"].is-s7:not(.is-s8) .hvx-btn { animation: hvx-press 360ms var(--ease-out); }
.hvx-stage[data-scene="bill"].is-s6:not(.is-s7) .hvx-btn::after,
.hvx-stage[data-scene="order"].is-s7:not(.is-s8) .hvx-btn::after,
.hvx-stage[data-scene="chat"].is-s7:not(.is-s8) .hvx-btn::after { animation: hvx-tap 700ms var(--ease-out); }
@keyframes hvx-press {
  0%, 100% { transform: none; }
  35% { transform: scale(0.9); }
}
@keyframes hvx-tap {
  0% { opacity: 0.6; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* A person-step row: avatar, who, and their button. */
.hvx-ask {
  display: flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.5em;
  padding: 0.32em 0.36em 0.32em 0.36em;
  border-radius: 0.8em;
  background: rgba(255, 159, 10, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.3);
  --from: translateY(0.6em) scale(0.97);
}
.hvx-ask__who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--hvx-person-ink);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Check lines: an icon and one short sentence. */
.hvx-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 1.95em;
  line-height: 1.25;
  --from: translateX(-0.5em);
}
.hvx-line--rule { color: var(--hvx-rule-ink); }
.hvx-line--done { color: var(--dv-done); font-weight: 600; }


/* 1. Month-end close --------------------------------------------------------- */

/* --acct-w fits the widest chip ("Inventory 96%"); --cg is the column gap,
   --rp the row's inner padding, --bp the body's side padding. */
.hvx-close { --acct-w: 8.3em; --rh: 2.15em; --cg: 0.7em; --rp: 0.6em; --bp: 0.85em; }
.hvx-close__body { display: grid; gap: 0.7em; padding: 0.75em var(--bp) 0.85em; }
.hvx-close__cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--acct-w);
  gap: var(--cg);
  padding: 0 var(--rp);
  color: var(--ink-3);
  font-weight: 600;
}
.hvx-close__rows { position: relative; margin-top: -0.35em; }
.hvx-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--acct-w);
  align-items: center;
  gap: var(--cg);
  height: var(--rh);
  padding: 0 var(--rp);
}
.hvx-row + .hvx-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.hvx-row__who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hvx-row__amt { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.hvx-acct {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.16em 0.5em;
  border-radius: 0.45em;
  background: rgba(41, 151, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.22);
  font-weight: 500;
  white-space: nowrap;
  transform-origin: 50% 0;
  --from: perspective(18em) rotateX(-95deg);
  --td: 700ms;
  --te: var(--dv-spring);
  --od: 260ms;
  --d: 180ms;
}
.hvx-acct b { color: var(--hvx-agent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hvx-acct--rule {
  background: rgba(165, 134, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(165, 134, 255, 0.35);
  color: var(--hvx-rule-ink);
  font-weight: 600;
}
.hvx-acct--rule::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.1em;
  background: var(--dv-rule);
  transform: rotate(45deg);
}
.hvx-strike {
  position: absolute;
  z-index: 2;
  left: var(--rp);
  right: calc(var(--acct-w) + var(--cg) + var(--rp));
  top: 50%;
  height: 1px;
  background: var(--hvx-rule-ink);
  transform-origin: 0 50%;
  --from: scaleX(0);
  --from-o: 1;
  --td: 520ms;
  --d: 380ms;
}
.hvx-row--dup .hvx-row__who,
.hvx-row--dup .hvx-row__amt { opacity: 0.45; transition: opacity 450ms ease 380ms; }
.hvx-stage.is-armed:not(.is-s4) .hvx-row--dup .hvx-row__who,
.hvx-stage.is-armed:not(.is-s4) .hvx-row--dup .hvx-row__amt { opacity: 1; }

/* Phone cards give the window about 26em instead of 30em. Tighter gutters
   and chips keep every payee name whole down to 360px; on the narrowest
   cards the table text steps down a touch rather than truncate. */
@container (max-width: 24rem) {
  .hvx-close { --acct-w: 8em; --cg: 0.5em; --rp: 0.45em; --bp: 0.6em; }
  .hvx-acct { gap: 0.35em; padding-inline: 0.4em; }
}
@container (max-width: 20rem) {
  .hvx-close__rows, .hvx-close__cap { font-size: 0.96em; }
}

/* The agent's reading highlight: one object gliding row to row. */
.hvx-close__hl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--rh);
  border-radius: 0.55em;
  background: rgba(41, 151, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.4);
  opacity: 0;
  transform: translateY(calc(var(--r, 0) * var(--rh)));
  transition: transform 520ms var(--ease-out), opacity 320ms ease;
}
.hvx-close__hl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(165, 134, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(165, 134, 255, 0.55);
  opacity: 0;
  transition: opacity 320ms ease;
}
.hvx-stage.is-armed.is-s1:not(.is-s5) .hvx-close__hl { opacity: 1; }
.hvx-stage.is-s2 .hvx-close__hl { --r: 1; }
.hvx-stage.is-s3 .hvx-close__hl { --r: 2; }
.hvx-stage.is-s4 .hvx-close__hl { --r: 3; }
.hvx-stage.is-s4 .hvx-close__hl::after { opacity: 1; }

.hvx-recon {
  display: grid;
  gap: 0.55em;
  padding: 0.65em 0.75em 0.75em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.hvx-recon__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75em; font-weight: 600; }
.hvx-recon__diff { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.hvx-recon__diff b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hvx-recon__diff .hvx-stack { justify-items: end; min-width: 4.4em; }
.hvx-recon__off { color: var(--warn); }
.hvx-recon__ok { color: var(--dv-done); }
.hvx-recon__bar {
  position: relative;
  display: block;
  height: 0.42em;
  overflow: hidden;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.1);
}
/* The fill slides in from the left, so its rounded end keeps its shape. */
.hvx-recon__bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2997ff, #32d74b);
  transition: transform 900ms var(--ease-out);
}
.hvx-stage.is-armed .hvx-recon__bar i { transform: translateX(-96%); }
.hvx-stage.is-armed.is-s1 .hvx-recon__bar i { transform: translateX(-72%); }
.hvx-stage.is-armed.is-s2 .hvx-recon__bar i { transform: translateX(-50%); }
.hvx-stage.is-armed.is-s3 .hvx-recon__bar i { transform: translateX(-27%); }
.hvx-stage.is-armed.is-s5 .hvx-recon__bar i { transform: none; transition-duration: 1100ms; }

.hvx-sign { display: flex; align-items: center; gap: 0.6em; padding: 0 0.15em; }
.hvx-sign__who { display: grid; line-height: 1.25; }
.hvx-sign__who b { font-weight: 600; }
.hvx-sign__wait { color: var(--ink-3); }
.hvx-sign__ok { color: var(--hvx-person-ink); font-weight: 600; }
.hvx-sig {
  width: 5.4em;
  height: 1.8em;
  margin-left: 0.5em;
  fill: none;
  stroke: #f5f5f7;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--ease-in-out) 150ms;
}
.hvx-stage.is-armed:not(.is-s6) .hvx-sig { clip-path: inset(0 100% 0 0); }

/* The stamp lands from a modest height (1.3x, not 2x), so even its first
   frames stay inside the window instead of being cut by its edges. */
.hvx-stamp {
  position: absolute;
  z-index: 3;
  right: 0.95em;
  bottom: 0.85em;
  padding: 0.2em 0.6em 0.22em;
  border: 0.13em solid currentColor;
  border-radius: 0.4em;
  background: rgba(50, 215, 75, 0.1);
  box-shadow: 0 0 0 0.22em rgba(50, 215, 75, 0.08), 0 0.5em 1.4em -0.3em rgba(50, 215, 75, 0.45);
  color: var(--dv-done);
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  transform: rotate(-8deg);
  --from: scale(1.3) rotate(-12deg);
  --td: 560ms;
  --te: cubic-bezier(0.3, 1.5, 0.6, 1);
  --od: 160ms;
}
.hvx-stage[data-scene="close"].is-s7 .hvx-close { animation: hvx-thud 520ms var(--ease-out) 170ms; }
@keyframes hvx-thud {
  0%, 100% { transform: none; }
  30% { transform: translateY(0.2em) scale(0.994); }
}


/* 2. Invoices and bills ----------------------------------------------------- */

.hvx-bill { position: relative; width: min(100%, 31em); height: 22em; }

/* The paper invoice: a bright object at the back, a little askew. */
.hvx-paper {
  position: absolute;
  left: 0;
  top: 1.4em;
  width: 45%;
  height: 17.4em;
  overflow: hidden;
  padding: 1em 0.95em;
  border-radius: 0.55em;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f3 100%);
  color: #1d1d1f;
  box-shadow: 0 1.4em 2.6em -0.8em rgba(0, 0, 0, 0.75);
  transform: rotate(-3.5deg);
  transition: opacity 700ms var(--ease-out), scale 900ms var(--ease-out);
}
.hvx-paper__kind { color: #86868b; font-weight: 700; letter-spacing: 0.06em; }
.hvx-paper__from { margin-top: 0.55em; font-size: 1.1em; font-weight: 700; line-height: 1.2; }
.hvx-paper__from .hvx-f { width: min-content; }   /* a two-line letterhead, boxed tight */
.hvx-paper__row { display: grid; grid-template-columns: 3.2em auto; justify-content: start; gap: 0.3em; margin-top: 0.45em; color: #6e6e73; }
.hvx-paper__row .hvx-f { color: #1d1d1f; font-weight: 600; }
.hvx-paper__lines {
  display: block;
  height: 3.8em;
  margin-top: 1em;
  background:
    linear-gradient(#e3e3e7 0 0) 0 0 / 90% 0.42em no-repeat,
    linear-gradient(#e3e3e7 0 0) 0 1em / 66% 0.42em no-repeat,
    linear-gradient(#e3e3e7 0 0) 0 2em / 80% 0.42em no-repeat,
    linear-gradient(#e3e3e7 0 0) 0 3em / 54% 0.42em no-repeat;
}
.hvx-paper__total {
  position: absolute;
  left: 0.95em;
  right: 0.95em;
  bottom: 0.95em;
  display: grid;
  justify-items: start;
  gap: 0.1em;
  padding-top: 0.55em;
  border-top: 1px solid #d2d2d7;
  color: #6e6e73;
  font-weight: 600;
}
.hvx-paper__total .hvx-f { color: #1d1d1f; font-size: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* A field the agent has read: a blue box lights up as the scan passes. */
.hvx-f { position: relative; z-index: 0; display: inline-block; }
.hvx-f::before {
  content: "";
  position: absolute;
  inset: -0.18em -0.3em;
  z-index: -1;
  border-radius: 0.35em;
  background: rgba(0, 113, 227, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(0, 113, 227, 0.6);
  transition: opacity 260ms ease var(--d, 0ms);
}
.hvx-stage.is-armed:not(.is-s1) .hvx-f::before { opacity: 0; }

.hvx-scan {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 0;
  height: 2.6em;
  background: linear-gradient(to bottom, transparent 0%, rgba(41, 151, 255, 0.16) 80%, rgba(41, 151, 255, 0.95) 96%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.hvx-stage.is-s1:not(.is-s2) .hvx-scan { animation: hvx-scan 1350ms var(--ease-in-out) both; }
@keyframes hvx-scan {
  0% { opacity: 0; transform: translateY(-2.6em); }
  10%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16.4em); }
}

.hvx .hvx-form {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  background: #1e1e20;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.34em;
  padding: 0.8em 0.85em 0.85em;
}
.hvx-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.2em;
  padding-bottom: 0.55em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hvx-form__head b { font-weight: 600; }
.hvx-kv { display: grid; grid-template-columns: 4em minmax(0, 1fr); align-items: center; gap: 0.45em; }
.hvx-kv > span { color: var(--ink-2); }
/* The empty field waits for its value. */
.hvx-kv::after {
  content: "";
  grid-area: 1 / 2;
  align-self: stretch;
  border-radius: 0.4em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.hvx-kv > b {
  grid-area: 1 / 2;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 0.28em 0.5em;
  border-radius: 0.4em;
  background: rgba(41, 151, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.28);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  --from: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.94);
  --td: 820ms;
  --te: var(--ease-in-out);
  --od: 240ms;
}
.hvx-bill .hvx-line--done { margin-top: auto; }
/* Narrow cards: the form takes a little more of the scene so values fit. */
@container (max-width: 24rem) {
  .hvx .hvx-form { width: 64%; }
  .hvx-kv { grid-template-columns: 3.6em minmax(0, 1fr); }
}
.hvx-stage[data-scene="bill"].is-s7 .hvx-paper { opacity: 0.82; scale: 0.97; }


/* 3. Insurance paperwork ----------------------------------------------------- */

.hvx-coi { display: flex; flex-direction: column; overflow: hidden; }
.hvx-coi__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  height: 2.4em;
  padding: 0 0.85em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(44, 44, 46, 0.7);
}
.hvx-coi__head svg,
.hvx-req svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--hvx-rule-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvx-coi__head b { font-weight: 600; }
.hvx-coi__head .hvx-pill { margin-left: auto; }
.hvx-coi__body { display: flex; flex: 1; flex-direction: column; gap: 0.65em; padding: 0.75em 0.85em 0.85em; }

.hvx-req {
  display: flex;
  gap: 0.6em;
  padding: 0.6em 0.7em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --from: translateY(-0.7em) scale(0.98);
}
.hvx-req svg { stroke: var(--ink-2); margin-top: 0.05em; }
.hvx-req p { color: var(--ink); line-height: 1.3; text-wrap: pretty; }

.hvx-coi__list { display: grid; }
.hvx-ck {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 1.85em;
  padding: 0.15em 0.1em;
  --from: translateX(-0.5em);
}
.hvx-ck + .hvx-ck { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.hvx-mark {
  position: relative;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
}
.hvx-mark > i { position: absolute; inset: 0; }
.hvx-ck--bad { align-items: flex-start; }
.hvx-ck--bad .hvx-mark { margin-top: 0.03em; }
.hvx-ck__txt { display: grid; gap: 0.12em; min-width: 0; }
.hvx-ck__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25em 0.55em; }
.hvx-ck__top .dv-tag { --from: translateX(-0.4em) scale(0.92); --d: 120ms; }
.hvx-why { color: var(--hvx-flag-ink); font-weight: 500; --from: translateY(-0.35em); --d: 120ms; }
.hvx-stage[data-scene="coi"].is-s6:not(.is-s7) .hvx-ck--bad { animation: hvx-shake 460ms ease 120ms; }
@keyframes hvx-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(0.28em); }
  45% { transform: translateX(-0.24em); }
  70% { transform: translateX(0.14em); }
}

.hvx-dec {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: auto;
  padding: 0.6em 0.7em;
  border-radius: 0.8em;
  background: rgba(255, 159, 10, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.3);
  --from: translateY(0.8em) scale(0.97);
}
.hvx-dec p { display: grid; gap: 0.12em; min-width: 0; line-height: 1.3; }
.hvx-dec__who { color: var(--hvx-person-ink); font-weight: 600; }
.hvx-dec__wait { color: var(--ink-3); }
.hvx-dec__note { color: var(--ink); text-wrap: pretty; }


/* 4. Orders ------------------------------------------------------------------ */

.hvx-order { display: flex; flex-direction: column; gap: 0.6em; overflow: hidden; padding: 0.8em 0.85em 0.85em; }

.hvx-mail {
  padding: 0.6em 0.7em 0.65em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --from: translateY(-0.9em) scale(0.98);
  --te: var(--dv-spring);
  --td: 700ms;
}
.hvx-mail__from { display: flex; align-items: center; gap: 0.45em; }
.hvx-mail__from b { font-weight: 600; }
.hvx-unread { flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--dv-agent); }
.hvx-mail__subj { margin-top: 0.12em; font-weight: 600; }
.hvx-mail__body { margin-top: 0.15em; color: var(--ink-2); }
.hvx-mail__body mark { position: relative; z-index: 0; background: none; color: var(--ink); white-space: nowrap; }
.hvx-mail__body mark::before {
  content: "";
  position: absolute;
  inset: -0.06em -0.12em;
  z-index: -1;
  border-radius: 0.28em;
  background: rgba(41, 151, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.5);
  transition: opacity 280ms ease var(--d, 0ms);
}
.hvx-stage.is-armed:not(.is-s2) .hvx-mail__body mark::before { opacity: 0; }

.hvx-so { display: grid; gap: 0.12em; }
.hvx-so__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hvx-so__head b { font-weight: 600; }
.hvx-so__head span { color: var(--ink-2); }
.hvx-so__ln {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2em 3.4em;
  align-items: center;
  gap: 0.6em;
  min-height: 1.9em;
  --from: translateY(-0.8em);
}
.hvx-so__ln > span:nth-child(2) { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.hvx-so__price { justify-self: end; font-variant-numeric: tabular-nums; }
.hvx-so__price.hvx-stack { justify-items: end; }
.hvx-so__was { color: var(--hvx-flag-ink); }
.hvx-so__now { color: var(--hvx-rule-ink); font-weight: 600; --d: 150ms; }

.hvx-toast {
  position: absolute;
  z-index: 4;
  top: 1.15em;
  right: 1.25em;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.8em 0.38em 0.6em;
  border-radius: 999px;
  background: #1f3a26;
  box-shadow: inset 0 0 0 1px rgba(50, 215, 75, 0.45), 0 0.8em 1.8em -0.5em rgba(0, 0, 0, 0.8);
  color: var(--dv-done);
  font-weight: 600;
  white-space: nowrap;
  --from: translateY(-0.9em) scale(0.9);
  --te: var(--dv-spring);
  --td: 650ms;
}
.hvx-toast svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvx-stage[data-scene="order"].is-s8 .hvx-toast svg { animation: hvx-send 800ms var(--ease-out) 120ms both; }
@keyframes hvx-send {
  0% { opacity: 0; transform: translate(-0.6em, 0.6em) rotate(-12deg); }
  60% { opacity: 1; transform: translate(0.12em, -0.12em); }
  100% { opacity: 1; transform: none; }
}


/* 5. Customer support -------------------------------------------------------- */

.hvx-chat { display: flex; flex-direction: column; overflow: hidden; }
.hvx-chat__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.55em;
  height: 2.6em;
  padding: 0 0.85em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(44, 44, 46, 0.7);
}
.hvx-chat__head b { font-weight: 600; }
.hvx-chat__head .hvx-av { width: 1.6em; height: 1.6em; }
.hvx-chat__head .hvx-stack { margin-left: auto; justify-items: end; }
.hvx-chat__view {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
}
.hvx-chat__list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.8em 0.85em 0.85em;
  transition: transform 650ms var(--ease-out);
}
.hvx-msg {
  max-width: 82%;
  padding: 0.48em 0.75em;
  border-radius: 1.05em;
  line-height: 1.3;
  text-wrap: pretty;
  --from: translateY(0.45em) scale(0.9);
  --td: 480ms;
  --te: cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hvx-msg--in {
  align-self: flex-start;
  background: #3a3a3c;
  border-bottom-left-radius: 0.35em;
  transform-origin: 0 100%;
}
.hvx-msg--out {
  align-self: flex-end;
  background: #0a84ff;
  color: #ffffff;
  border-bottom-right-radius: 0.35em;
  transform-origin: 100% 100%;
}
.hvx-msg-slot { position: relative; display: flex; flex-direction: column; }
.hvx-typing {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.28em;
  padding: 0.62em 0.8em;
  border-radius: 1.05em;
  border-bottom-right-radius: 0.35em;
  background: #0a84ff;
  transform-origin: 100% 100%;
  --from: scale(0.6);
  --to: scale(0.85);
  --td: 360ms;
}
.hvx-typing i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.55;
}
.hvx-stage[data-scene="chat"].is-s2:not(.is-s3) .hvx-typing i { animation: hvx-dots 1000ms ease-in-out infinite; }
.hvx-typing i:nth-child(2) { animation-delay: 140ms; }
.hvx-typing i:nth-child(3) { animation-delay: 280ms; }
@keyframes hvx-dots {
  0%, 60%, 100% { transform: none; opacity: 0.55; }
  30% { transform: translateY(-0.2em); opacity: 1; }
}
.hvx-sys {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.28em 0.75em 0.28em 0.45em;
  border-radius: 999px;
  background: rgba(165, 134, 255, 0.14);
  color: var(--hvx-rule-ink);
  font-weight: 500;
  --from: scale(0.9);
}
.hvx-hand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45em 0.6em;
  padding: 0.6em 0.65em 0.65em 0.75em;
  border-radius: 0.9em;
  background: rgba(255, 159, 10, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.32);
  --from: translateY(0.9em) scale(0.97);
  --td: 640ms;
}
.hvx-hand__top { display: flex; align-items: center; gap: 0.45em; justify-self: start; }
.hvx-hand__top .hvx-av { width: 1.6em; height: 1.6em; }
.hvx-hand__sum { grid-column: 1 / -1; grid-row: 2; }
.hvx-hand .hvx-btn { grid-column: 2; grid-row: 1; }


/* Controls -------------------------------------------------------------------- */

.hvx-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.hvx-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 0.5rem;
}
.js .hvx-nav { display: flex; }
@media (min-width: 48rem) {
  .hvx-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .hvx-more { order: -1; }   /* link on the left, controls on the right; alone on the left without JS */
  .hvx-nav { align-self: auto; justify-content: flex-end; gap: 0.75rem; }
}

.hvx-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 200ms ease, opacity 250ms ease, transform 160ms var(--ease-out);
}
.hvx-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvx-arrow:active { transform: scale(0.92); }
.hvx-arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.hvx-arrow[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .hvx-arrow:not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, 0.18); }
}

.hvx-dots { position: relative; display: flex; align-items: center; }
.hvx-dot {
  position: relative;
  width: 1.625rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  touch-action: manipulation;
}
@media (pointer: coarse) {
  .hvx-dot { width: 2.75rem; }
}
.hvx-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hvx-dot:hover::before { background: rgba(255, 255, 255, 0.55); }
}
.hvx-dot:focus-visible { outline: none; }
.hvx-dot:focus-visible::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.5rem 0.125rem;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--accent);
}
/* The thumb: one capsule gliding over the dots of the cards in view. */
.hvx-dots__thumb {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  width: 1.375rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 999px;
  background: #f5f5f7;
  box-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.hvx:not(.is-ready) .hvx-dots__thumb { display: none; }

.hvx-more { margin-left: -0.25rem; }


/* Reduced motion: finished scenes, no travel. Opacity may still fade. */
@media (prefers-reduced-motion: reduce) {
  .hvx.is-ready .hvx-card__in,
  .hvx.is-ready .hvx-par > * { translate: none !important; scale: none !important; transition: opacity 400ms ease !important; }
  .hvx-card__in, .hvx-card:hover .hvx-card__in { transform: none !important; transition: none !important; }
  .hvx-gallery { scroll-behavior: auto; }
  .hvx-arrow:active { transform: none; }
  .hvx-stage *, .hvx-stage *::before, .hvx-stage *::after { animation: none !important; }
}

/* Rewind: a scene jumps back to its start with no transitions at all. Kept
   last, and specific, so nothing above can outrank it. */
.hvx-stage.is-instant.is-instant.is-instant *,
.hvx-stage.is-instant.is-instant.is-instant *::before,
.hvx-stage.is-instant.is-instant.is-instant *::after { transition: none; animation: none; }


/* ==== how ==== */
/* --------------------------------------------------------------------------
   How it works (hvp-)
   Four chapters. The default is the stacked layout: each chapter's text with
   its finished window, which is what no-JS and reduced-motion visitors get.
   section.js adds .hvp--live: one tall scroller with a sticky stage, the
   chapter texts overlaid on the left (or under the window on phones), and
   the four windows overlaid into one. Each scene animates by state classes
   that the script derives from scroll progress; CSS owns the motion.
   -------------------------------------------------------------------------- */

.hvp {
  --hvp-card: #ffffff;
  --hvp-edge: rgba(0, 0, 0, 0.07);
  --hvp-well: rgba(0, 0, 0, 0.032);
  --hvp-tile: rgba(0, 0, 0, 0.05);
  --hvp-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  --hvp-frame: #fcfcfd;
  --hvp-spring: cubic-bezier(0.22, 1.12, 0.36, 1);
  --hvp-fit: 1;
  /* Text in the actor colours is small here, so it gets a deeper ink that
     reads at 4.5:1 or better on its own tinted pill (fills keep the token). */
  --hvp-agent-ink: #0062c4;
  --hvp-person-ink: #b54700;
  --hvp-done-ink: #157a32;
}
@media (prefers-color-scheme: dark) {
  .hvp {
    --hvp-card: #232325;
    --hvp-edge: rgba(255, 255, 255, 0.08);
    --hvp-well: rgba(255, 255, 255, 0.035);
    --hvp-tile: rgba(255, 255, 255, 0.075);
    --hvp-lift: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
    --hvp-frame: #19191a;
    /* The dark actor colours (as in .band); this section is not a band. */
    --dv-agent: #2997ff;
    --dv-rule: #a586ff;
    --dv-person: #ff9f0a;
    --dv-done: #32d74b;
    --dv-flag: #ff6961;
    --hvp-agent-ink: #4da3ff;
    --hvp-person-ink: #ff9f0a;
    --hvp-done-ink: #32d74b;
  }
}
.hvp .dv-tag--agent { color: var(--hvp-agent-ink); }
.hvp .dv-tag--person { color: var(--hvp-person-ink); }
.hvp .dv-tag--done { color: var(--hvp-done-ink); }


/* Stacked layout (default) ------------------------------------------------ */

.hvp-grid { display: grid; gap: clamp(4rem, 3rem + 4vw, 7rem); }
.hvp-index { display: none; }

.hvp-ch { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 64rem) {
  .hvp-ch {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 4vw, 5.5rem);
  }
}

.hvp-ch--1 { --c: var(--ink); }
.hvp-ch--2 { --c: var(--dv-agent); }
.hvp-ch--3 { --c: var(--dv-person); }
.hvp-ch--4 { --c: var(--dv-done); }

.hvp-text { max-width: 30rem; }
.hvp-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.hvp-kicker::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}
.hvp-ch-title {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.004em;
  font-weight: 600;
  text-wrap: balance;
}
.hvp-ch-body {
  margin-top: 0.875rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.42;
  letter-spacing: -0.004em;
  text-wrap: pretty;
}


/* The window --------------------------------------------------------------- */

.hvp-vis { min-width: 0; -webkit-user-select: none; user-select: none; }
.hvp-win .dv-window__bar { position: relative; }
.hvp-sample {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.6875rem;
  transform: translateY(-50%);
}
.hvp-body { container: hvp / inline-size; }

.hvp-scene { position: relative; display: grid; grid-template-rows: 3rem minmax(0, 1fr); gap: 0.625rem; height: 100%; }
.hvp-main { min-width: 0; }

/* Glyphs: one element each, drawn with a mask so they take the text colour. */
.hvp-ico {
  position: relative;
  flex: none;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--hvp-tile);
  color: var(--ink-2);
}
.hvp-ico::before, .hvp-rev__av::before, .hvp-pips i::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.hvp-ico[data-i="mail"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14A1.5 1.5 0 0 1 20.5 7v10a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 17V7A1.5 1.5 0 0 1 5 5.5z'/%3E%3Cpath d='m4 7.5 8 5.5 8-5.5'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="folder"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5A1.5 1.5 0 0 1 5 6h4.2l2 2.2H19a1.5 1.5 0 0 1 1.5 1.5v7.8A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="bank"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 12 5l8 4.5'/%3E%3Cpath d='M6 11v6M10 11v6M14 11v6M18 11v6M4 19.5h16'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="chat"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 16.5h-6.5L8 20v-3.5H5A1.5 1.5 0 0 1 3.5 15V6.5A1.5 1.5 0 0 1 5 5z'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="receipt"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-1.85-1.25-1.85 1.25-1.8-1.25-1.85 1.25-1.8-1.25-1.85 1.25z'/%3E%3Cpath d='M9.5 8h5M9.5 11.5h5M9.5 15h3'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="invoice"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5l4 4V19a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V7.5h4M8.75 12.5h6.5M8.75 16h4'/%3E%3C/svg%3E"); }
.hvp-ico[data-i="order"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20 7.5v9L12 20.5 4 16.5v-9z'/%3E%3Cpath d='m4 7.5 8 4 8-4M12 11.5v9'/%3E%3C/svg%3E"); }
.hvp-rev__av { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.75'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.hvp-pips i, .hvp-state, .hvp-rev__items li { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }

/* The left panel (a strip along the top on narrow windows). The same box
   holds the sources, the counter and the reviewer, so between chapters only
   its content changes. */
.hvp-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: 0 0.75rem;
  border-radius: 0.875rem;
  background: var(--hvp-card);
  box-shadow: 0 0 0 1px var(--hvp-edge), var(--hvp-lift);
}
.hvp-panel__k {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* A two-state status line: busy (first span) and finished (second). */
.hvp-state {
  --s1: var(--ink-2);
  --s2: var(--ink-2);
  position: relative;
  display: grid;
  justify-items: end;
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.hvp-state span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 250ms ease, transform 350ms var(--ease-out);
}
.hvp-state span:first-child { color: var(--s1); opacity: 0; }
.hvp-state span:last-child { color: var(--s2); }
.hvp-state span::before { content: ""; flex: none; }
.hvp-state span:first-child::before {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
}
.hvp-state span:last-child::before {
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* 1 · Sources and lanes */
.hvp-src__list { display: flex; flex: 1; justify-content: space-between; gap: 0.25rem; min-width: 0; list-style: none; }
.hvp-src__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
}
.hvp-src__item .hvp-ico { width: 1.25rem; height: 1.25rem; border-radius: 0.375rem; background: none; }
.hvp-src__item .hvp-ico::before { width: 82%; height: 82%; }
.hvp-long { display: none; }
.hvp-src .hvp-state { display: none; }

.hvp-lanes { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0.375rem; }
.hvp-lane {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.625rem;
  border-radius: 0.75rem;
  background: var(--hvp-well);
  box-shadow: inset 0 0 0 1px var(--hvp-edge);
}
.hvp-lane__name { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); }
.hvp-lane__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3125rem; }
.hvp-card {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  padding: 0.3125rem 0.5rem 0.3125rem 0.3125rem;
  border-radius: 0.5625rem;
  background: var(--hvp-card);
  box-shadow: 0 0 0 1px var(--hvp-edge), var(--hvp-lift);
}
.hvp-card .hvp-ico { width: 1.625rem; height: 1.625rem; border-radius: 0.4375rem; }
.hvp-card p {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.006em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvp-card small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2 · Counter */
.hvp-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 0.75rem; row-gap: 0.125rem; }
.hvp-meter .hvp-panel__k { grid-area: 1 / 1; }
.hvp-meter__n {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hvp-meter__live {
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hvp-agent-ink);
}
.hvp-meter__live::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
.hvp-meter__bars { display: none; }

/* 2 and 3 · The work list */
.hvp-list {
  position: relative;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  padding: 0.25rem;
  border-radius: 0.875rem;
  background: var(--hvp-card);
  box-shadow: 0 0 0 1px var(--hvp-edge), var(--hvp-lift);
  list-style: none;
}
.hvp-row {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  padding: 0.25rem 0.375rem;
}
.hvp-row + .hvp-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 0.375rem;
  height: 1px;
  background: var(--line);
}
.hvp-row .hvp-ico { width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem; }
.hvp-row__t { min-width: 0; line-height: 1.25; transition: opacity 300ms ease; }
.hvp-row__t b {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvp-row__m { display: grid; }
.hvp-row__m small {
  grid-area: 1 / 1;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 250ms ease, transform 300ms var(--ease-out);
}
.hvp-row__m small:not(:last-child) { opacity: 0; }
.hvp-row--person .hvp-row__m small:last-child { color: var(--hvp-person-ink); }

/* A soft wash marks rows that are with a person. */
.hvp-row::after {
  content: "";
  position: absolute;
  inset: 0.125rem 0;
  z-index: -1;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--dv-person) 10%, transparent);
  opacity: 0;
  transition: opacity 350ms ease;
}

/* The status slot is as wide as the widest tag in any row or scene, so a
   tag can change without the row text moving. */
.hvp-slot { display: grid; justify-items: end; align-items: center; width: 7.5rem; }
.hvp-slot > * { grid-area: 1 / 1; }
.hvp-slot .dv-tag {
  padding: 0.15rem 0.45rem 0.15rem 0.375rem;
  gap: 0.3rem;
  font-size: 0.6875rem;
  transition: opacity 200ms ease, transform 350ms var(--hvp-spring);
}
.hvp-slot .dv-tag::before { width: 0.35rem; height: 0.35rem; }
.hvp-slot .dv-tag:not(:last-child) { opacity: 0; transform: scale(0.85); }
.hvp-spin {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  opacity: 0;
  transition: opacity 200ms ease;
}

/* The highlight that travels from row to row while agents work. */
.hvp-hl {
  position: absolute;
  top: 0;
  left: 0.25rem;
  right: 0.25rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--dv-agent) 9%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 450ms var(--ease-out), opacity 200ms ease;
}

/* 3 · Reviewer */
.hvp-rev { justify-content: space-between; }
.hvp-rev .hvp-state { --s1: var(--hvp-person-ink); --s2: var(--hvp-done-ink); }
.hvp-rev__who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hvp-rev__av {
  position: relative;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dv-person) 15%, transparent);
  color: var(--dv-person);
}
.hvp-rev__who p { min-width: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.006em; }
.hvp-rev__who small { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.hvp-rev__items { display: none; }

/* 4 · Statement, with last months' statements stacked behind it. */
.hvp-scene--bill {
  grid-template-rows: none;
  place-items: center;
  align-content: center;
  padding-block: 1.375rem 0.25rem;
  isolation: isolate;
}
.hvp-scene--bill::before, .hvp-scene--bill::after {
  content: "";
  grid-area: 1 / 1;
  align-self: stretch;
  width: min(100%, 22rem);
  border-radius: 1rem;
  background: var(--hvp-card);
  box-shadow: 0 0 0 1px var(--hvp-edge), var(--hvp-lift);
  transform-origin: 50% 0;
}
.hvp-scene--bill::before { z-index: -1; opacity: 0.75; transform: translateY(-0.5625rem) scale(0.94); }
.hvp-scene--bill::after { z-index: -2; opacity: 0.45; transform: translateY(-1.0625rem) scale(0.88); }
.hvp-bill {
  position: relative;
  grid-area: 1 / 1;
  width: min(100%, 22rem);
  padding: 1.125rem 1.25rem 1.25rem;
  border-radius: 1rem;
  background: var(--hvp-card);
  box-shadow: 0 0 0 1px var(--hvp-edge), 0 14px 36px -14px rgba(0, 0, 0, 0.22);
}
.hvp-bill__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.hvp-bill__month { font-size: 1.375rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.012em; }
.hvp-bill__month small {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.hvp-bill__tag { flex: none; transition: opacity 300ms ease, transform 500ms var(--hvp-spring); }
.hvp-bill__plan { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--ink-2); }
.hvp-pips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.3rem; margin-top: 1.125rem; }
.hvp-pips i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.375rem;
  background: var(--dv-done);
  color: #fff;
  transition: background-color 250ms ease, transform 450ms var(--hvp-spring);
}
@media (prefers-color-scheme: dark) { .hvp-pips i { color: #000; } }
.hvp-pips i::before { width: 64%; height: 64%; transition: opacity 200ms ease, transform 350ms var(--hvp-spring); }
.hvp-bill__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.hvp-bill__row b { font-weight: 600; color: var(--ink); }
.hvp-bill__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
}
.hvp-bill__total b { font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; }


/* Narrow windows: lane names sit above their cards, so the cards get the
   full width. Very small phones also get a slightly tighter window. */
@container hvp (max-width: 24rem) {
  .hvp-lane { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0.25rem; padding: 0.3125rem; }
  .hvp-lane__name { padding-left: 0.3125rem; line-height: 1.2; }
  .hvp-card p { line-height: 1.2; }
}
@container hvp (max-width: 19.5rem) {
  .hvp-row { gap: 0.375rem; }
  .hvp-row .hvp-ico { width: 1.375rem; height: 1.375rem; }
  .hvp-row__t b { font-size: 0.71875rem; }
  .hvp-slot { width: 6.875rem; }
  .hvp-slot .dv-tag { font-size: 0.65rem; }
  .hvp-rev__who small { display: none; }
}
@media (max-width: 24rem) {
  .hvp-body { padding: 0.875rem; }
}


/* Wide windows: the panel becomes a sidebar (the statement stays centred) --- */

@container hvp (min-width: 38rem) {
  .hvp-scene:not(.hvp-scene--bill) { grid-template-columns: 12rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0.875rem; }
  .hvp-panel { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem; }
  .hvp-panel__k { font-size: 0.75rem; }

  .hvp-state { justify-items: start; margin-top: auto; font-size: 0.8125rem; }
  .hvp-state span {
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, transparent);
  }
  .hvp-src .hvp-state { display: grid; }

  .hvp-src__list { flex: none; flex-direction: column; justify-content: flex-start; gap: 0.25rem; margin-top: 0.75rem; }
  .hvp-src__item { gap: 0.625rem; padding: 0.375rem; margin-inline: -0.375rem; border-radius: 0.625rem; font-size: 0.8125rem; }
  .hvp-src__item .hvp-ico { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--hvp-tile); }
  .hvp-src__item .hvp-ico::before { width: 60%; height: 60%; }
  .hvp-src__item::after {
    content: "";
    margin-left: auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
  }
  .hvp-long { display: inline; }
  .hvp-short { display: none; }

  .hvp-lanes { gap: 0.5rem; }
  .hvp-lane { grid-template-columns: 4.25rem minmax(0, 1fr); padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-radius: 0.875rem; }
  .hvp-lane__name { font-size: 0.8125rem; }
  .hvp-lane__items { gap: 0.5rem; }
  .hvp-card { gap: 0.625rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem; border-radius: 0.75rem; }
  .hvp-card .hvp-ico { width: 2rem; height: 2rem; border-radius: 0.5625rem; }
  .hvp-card p { font-size: 0.8125rem; }
  .hvp-card small { font-size: 0.75rem; }

  .hvp-meter { display: flex; }
  .hvp-meter__n { align-self: auto; margin-top: 0.5rem; font-size: 2.5rem; }
  .hvp-meter__bars {
    order: 2;
    display: flex;
    flex: 0 1 7.5rem;
    align-items: flex-end;
    gap: 0.3rem;
    min-height: 2.5rem;
    margin-top: auto;
  }
  .hvp-meter__bars i {
    flex: 1;
    height: calc(var(--h) * 100%);
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--dv-agent) 20%, transparent);
    transform-origin: 50% 100%;
  }
  .hvp-meter__bars i:last-child { background: var(--dv-agent); }
  .hvp-meter__live {
    order: 3;
    align-self: flex-start;
    margin-top: 1rem;
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dv-agent) 11%, transparent);
    font-size: 0.8125rem;
  }

  .hvp-list { padding: 0.375rem; }
  .hvp-row { gap: 0.75rem; padding: 0.375rem 0.625rem; }
  .hvp-row + .hvp-row::before { left: 3.375rem; right: 0.625rem; }
  .hvp-row .hvp-ico { width: 2rem; height: 2rem; border-radius: 0.5625rem; }
  .hvp-row__t b { font-size: 0.875rem; }
  .hvp-row__m small { font-size: 0.75rem; }
  .hvp-slot { width: 8.25rem; }
  .hvp-slot .dv-tag { font-size: 0.75rem; padding: 0.2rem 0.55rem 0.2rem 0.45rem; }
  .hvp-hl { left: 0.375rem; right: 0.375rem; }

  .hvp-rev { justify-content: flex-start; }
  .hvp-rev__who { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hvp-rev__av { width: 2.75rem; height: 2.75rem; }
  .hvp-rev__who p { font-size: 0.9375rem; }
  .hvp-rev__who small { font-size: 0.75rem; white-space: normal; }
  .hvp-rev__items { display: grid; gap: 0.375rem; margin-top: 1.125rem; list-style: none; }
  .hvp-rev__items li {
    position: relative;
    padding: 0.5rem 1.875rem 0.5rem 0.625rem;
    border-radius: 0.625rem;
    background: var(--hvp-well);
    box-shadow: inset 0 0 0 1px var(--hvp-edge);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 300ms ease, box-shadow 300ms ease;
  }
  .hvp-rev__items small { display: block; font-weight: 500; color: var(--ink-2); }
  .hvp-rev__items li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.625rem;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -0.4375rem;
    background: var(--dv-done);
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
    transition: opacity 250ms ease, transform 400ms var(--hvp-spring);
  }

  .hvp-scene--bill::before, .hvp-scene--bill::after, .hvp-bill { width: min(100%, 24rem); border-radius: 1.25rem; }
  .hvp-scene--bill::before { transform: translateY(-0.6875rem) scale(0.94); }
  .hvp-scene--bill::after { transform: translateY(-1.3125rem) scale(0.88); }
  .hvp-bill { padding: 1.625rem 1.75rem 1.75rem; }
  .hvp-bill__month { font-size: 1.75rem; }
  .hvp-bill__plan { font-size: 0.9375rem; }
  .hvp-pips { gap: 0.375rem; margin-top: 1.5rem; }
  .hvp-bill__row { margin-top: 0.875rem; font-size: 0.875rem; }
  .hvp-bill__total { margin-top: 1.25rem; padding-top: 1.125rem; font-size: 0.9375rem; }
  .hvp-bill__total b { font-size: 2.25rem; }
}

/* Stacked layout: give each window the same comfortable height. */
@media (min-width: 64rem) {
  .hvp:not(.hvp--live) .hvp-scene { min-height: 22.5rem; }
}


/* Live: the pinned stage -------------------------------------------------- */

/* The window keeps its designed height; on a short screen the script scales
   the whole window down rather than squeezing its layout. */
.hvp--live { --hvp-win-h: 26rem; }
@media (min-width: 40rem) {
  .hvp--live { --hvp-win-h: 28rem; }
}

/* The stage is only as tall as what it holds, so it follows the head at the
   usual head gap and hands over to the next section at the usual padding.
   It sticks once it is centred in the space under the header (the script
   measures its height into --hvp-stage-h), and stays for the length of the
   spacer after it. --hvp-pad is the least room kept above and below it. */
.hvp--live { --hvp-pad: 1rem; }
.hvp--live .hvp-scroll::after { content: ""; display: block; height: 180vh; height: 180svh; }
.hvp--live .hvp-stage {
  position: sticky;
  top: max(calc(var(--header-h) + var(--hvp-pad)), calc((100vh + var(--header-h) - var(--hvp-stage-h, 0px)) / 2));
  top: max(calc(var(--header-h) + var(--hvp-pad)), calc((100svh + var(--header-h) - var(--hvp-stage-h, 0px)) / 2));
}
.hvp--live .hvp-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "vis" "idx" "txt";
  gap: 0;
}
.hvp--live .hvp-ch { display: contents; }

.hvp--live .hvp-vis { grid-area: vis; height: calc(var(--hvp-win-h) * var(--hvp-fit)); }
.hvp--live .hvp-win {
  display: flex;
  flex-direction: column;
  height: var(--hvp-win-h);
  transform: scale(var(--hvp-fit));
  transform-origin: 50% 0;
}
.hvp--live .hvp-body { flex: 1; min-height: 0; }

/* One frame: chapter 1's window keeps its chrome (opaque, so it never blurs a
   moving page behind it); the other three become clear layers on top of it. */
.hvp--live .hvp-ch--1 .hvp-win {
  background: var(--hvp-frame);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hvp--live .hvp-ch:not(.hvp-ch--1) .hvp-win {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hvp--live .hvp-ch:not(.hvp-ch--1) .dv-window__bar { visibility: hidden; }
.hvp--live .hvp-ch:not(.hvp-ch--1) .hvp-vis { pointer-events: none; }

.hvp--live .hvp-index { grid-area: idx; display: flex; gap: 0.375rem; margin-top: 1.5rem; }
.hvp-index i {
  position: relative;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.hvp-index b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hvp--live .hvp-text { grid-area: txt; max-width: 36rem; margin-top: 1rem; }
.hvp--live .hvp-kicker { margin-bottom: 0.5rem; font-size: 0.875rem; }
.hvp--live .hvp-ch-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); }
.hvp--live .hvp-ch-body { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; }

@media (min-width: 64rem) {
  .hvp--live { --hvp-win-h: clamp(24rem, calc(100vh - var(--header-h) - 9rem), 28rem); }
  @supports (height: 100svh) {
    .hvp--live { --hvp-win-h: clamp(24rem, calc(100svh - var(--header-h) - 9rem), 28rem); }
  }
  .hvp--live { --hvp-pad: 1.5rem; }
  .hvp--live .hvp-scroll::after { height: 240vh; height: 240svh; }
  .hvp--live .hvp-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: ". vis" "idx vis" "txt vis" ". vis";
    column-gap: clamp(3rem, 1rem + 4vw, 5.5rem);
  }
  .hvp--live .hvp-vis { align-self: center; }
  .hvp--live .hvp-index { margin: 0 0 2.25rem; }
  .hvp--live .hvp-index i { width: 3rem; }
  .hvp--live .hvp-text { margin: 0; }
  .hvp--live .hvp-kicker { margin-bottom: 0.875rem; font-size: 0.9375rem; }
  .hvp--live .hvp-ch-title { font-size: clamp(2.25rem, 1.2rem + 1.7vw, 2.875rem); }
  .hvp--live .hvp-ch-body { margin-top: 1rem; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); }
}


/* Live: chapter text. One chapter at a time; the next rises in as the last
   one lifts away (or sinks, scrolling back up). ---------------------------- */

.hvp--live .hvp-text > * {
  opacity: 0;
  transform: translateY(0.875rem);
  filter: blur(4px);
  transition: opacity 250ms ease, transform 350ms var(--ease-out), filter 250ms ease;
}
.hvp--live .hvp-text[data-st="post"] > * { transform: translateY(-0.875rem); }
.hvp--live .hvp-text[data-st="on"] > * {
  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(--j, 0) * 70ms + 160ms);
}
.hvp--live .hvp-text > :nth-child(2) { --j: 1; }
.hvp--live .hvp-text > :nth-child(3) { --j: 2; }


/* Live: scenes ------------------------------------------------------------ */

/* Shared boxes (the panel, the list) hand over without a dip: the incoming
   layer fades in on top, and the one below goes only once it is covered. */

/* Status lines show their busy state while the work is under way. */
.hvp--live .is-busy > .hvp-state span:first-child { opacity: 1; transform: none; }
.hvp--live .is-busy > .hvp-state span:last-child { opacity: 0; transform: translateY(0.25rem); }
.hvp--live .is-busy > .hvp-state span:first-child::before {
  animation-name: hvp-spin;
  animation-duration: 900ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* The panel is one box with changing contents: the outgoing contents fade
   first, then the incoming box takes over and its contents fade in, so two
   sets of words never show through each other. */

/* 1 · Inbox (the frame's own scene; never "pre") */
.hvp--live .hvp-scene--inbox[data-st="post"] .hvp-panel { opacity: 0; transition: opacity 0s linear 420ms; }
.hvp--live .hvp-scene--inbox .hvp-panel > * { transition: opacity 380ms var(--ease-out) 170ms; }
.hvp--live .hvp-scene--inbox[data-st="post"] .hvp-panel > * { opacity: 0; transition: opacity 150ms ease; }
.hvp--live .hvp-scene--inbox .hvp-lane {
  transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out);
  transition-delay: calc(var(--k) * 50ms + 120ms);
}
.hvp--live .hvp-scene--inbox[data-st="post"] .hvp-lane {
  opacity: 0;
  transform: translateY(-0.625rem) scale(0.985);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.5, 0, 0.75, 0);
  transition-delay: calc(var(--k) * 35ms);
}
.hvp-card { transition: transform 800ms var(--hvp-spring), opacity 260ms ease; }
.hvp--live .hvp-card.is-out {
  opacity: 0;
  transform: translate(var(--fx, 0), var(--fy, 0)) scale(0.4);
  transition: transform 450ms cubic-bezier(0.5, 0, 0.75, 0), opacity 300ms ease 100ms;
}
.hvp-src__item .hvp-ico { transition: transform 300ms var(--hvp-spring), background-color 300ms ease, color 300ms ease; }
.hvp--live .hvp-src__item.is-ping .hvp-ico {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transform: scale(1.12);
  transition-duration: 150ms;
}

/* 2 · Agents */
.hvp--live .hvp-scene--agents .hvp-panel { transition: opacity 0s linear 150ms; }
.hvp--live .hvp-scene--agents[data-st="pre"] .hvp-panel { opacity: 0; }
.hvp--live .hvp-scene--agents[data-st="post"] .hvp-panel { transition: none; }
.hvp--live .hvp-scene--agents .hvp-panel.is-gone { opacity: 0; transition: opacity 240ms ease 120ms; }
.hvp--live .hvp-scene--agents .hvp-panel > * { transition: opacity 380ms var(--ease-out) 170ms; }
.hvp--live .hvp-scene--agents[data-st="pre"] .hvp-panel > *,
.hvp--live .hvp-scene--agents .hvp-panel.is-gone > * { opacity: 0; transition: opacity 150ms ease; }
.hvp--live .hvp-scene--agents .hvp-list { transition: opacity 420ms var(--ease-out) 80ms; }
.hvp--live .hvp-scene--agents[data-st="pre"] .hvp-list { opacity: 0; transition: opacity 260ms ease; }
.hvp--live .hvp-scene--agents[data-st="post"] .hvp-list { opacity: 0; transition: opacity 0s linear 400ms; }
.hvp--live .hvp-scene--agents[data-st="on"][data-from="post"] .hvp-list { transition: none; }
.hvp--live .hvp-scene--agents .hvp-row {
  transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--k) * 45ms + 140ms);
}
.hvp--live .hvp-scene--agents[data-st="pre"] .hvp-row {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity 200ms ease, transform 300ms ease;
  transition-delay: 0ms;
}
.hvp--live .hvp-scene--agents[data-st="on"][data-from="post"] .hvp-row,
.hvp--live .hvp-scene--agents[data-st="post"] .hvp-row { transition: none; }

.hvp-meter__bars i { transition: transform 600ms var(--hvp-spring); }
.hvp--live .hvp-meter.is-low .hvp-meter__bars i { transform: scaleY(0.2); }

.hvp--live .hvp-row.is-wait .hvp-row__t { opacity: 0.6; }
.hvp--live .hvp-row.is-wait .hvp-row__m small:first-child,
.hvp--live .hvp-row.is-run .hvp-row__m small:first-child { opacity: 1; }
.hvp--live .hvp-row.is-wait .hvp-row__m small:last-child,
.hvp--live .hvp-row.is-run .hvp-row__m small:last-child { opacity: 0; transform: translateY(0.25rem); }
.hvp--live .hvp-row.is-wait .hvp-slot .dv-tag,
.hvp--live .hvp-row.is-run .hvp-slot .dv-tag { opacity: 0; transform: scale(0.7); }
.hvp--live .hvp-row.is-wait .hvp-spin { opacity: 1; }
.hvp--live .hvp-row.is-run .hvp-spin {
  opacity: 1;
  border-color: color-mix(in srgb, var(--dv-agent) 22%, transparent);
  border-top-color: var(--dv-agent);
  animation-name: hvp-spin;
  animation-duration: 800ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hvp-spin { to { transform: rotate(360deg); } }
.hvp--live .hvp-hl.is-on { opacity: 1; }

/* 3 · Review */
.hvp--live .hvp-scene--review .hvp-list { transition: opacity 360ms var(--ease-out); }
.hvp--live .hvp-scene--review[data-st="pre"] .hvp-list { opacity: 0; }
.hvp--live .hvp-scene--review[data-st="post"] .hvp-list {
  opacity: 0;
  transition: opacity 300ms ease 140ms;
}
.hvp--live .hvp-scene--review .hvp-row { transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
.hvp--live .hvp-scene--review[data-st="on"][data-from="post"] .hvp-row { transition-delay: calc(var(--k) * 45ms + 120ms); }
.hvp--live .hvp-scene--review[data-st="post"] .hvp-row {
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 240ms ease, transform 340ms cubic-bezier(0.5, 0, 0.75, 0);
  transition-delay: calc(var(--k) * 35ms);
}
.hvp--live .hvp-scene--review .hvp-panel { transition: opacity 450ms var(--ease-out) 180ms, transform 700ms var(--hvp-spring) 180ms; }
.hvp--live .hvp-scene--review[data-st="pre"] .hvp-panel,
.hvp--live .hvp-scene--review[data-st="post"] .hvp-panel,
.hvp--live .hvp-rev.is-out {
  opacity: 0;
  transform: translateX(-1.25rem);
  transition: opacity 250ms ease, transform 350ms ease;
}

.hvp--live .hvp-row.is-agent .hvp-slot .dv-tag--done,
.hvp--live .hvp-row.is-person .hvp-slot .dv-tag--done { opacity: 0; transform: scale(0.85); }
.hvp--live .hvp-row.is-agent .hvp-slot .dv-tag--agent { opacity: 1; transform: none; }
.hvp--live .hvp-row.is-person .hvp-slot .dv-tag--person { opacity: 1; transform: none; }
.hvp--live .hvp-row.is-agent .hvp-row__m small:first-child,
.hvp--live .hvp-row.is-person .hvp-row__m small:first-child { opacity: 1; }
.hvp--live .hvp-row--person.is-agent .hvp-row__m small:last-child,
.hvp--live .hvp-row--person.is-person .hvp-row__m small:last-child { opacity: 0; transform: translateY(0.25rem); }
.hvp--live .hvp-row.is-person::after { opacity: 1; }

.hvp--live .hvp-rev.is-busy .hvp-rev__items li { background: color-mix(in srgb, var(--dv-person) 9%, transparent); box-shadow: none; }
.hvp--live .hvp-rev.is-busy .hvp-rev__items li::after { opacity: 0; transform: scale(0.5); }

/* 4 · Statement: the card rises in, last months' fan out behind it. */
.hvp--live .hvp-scene--bill .hvp-bill { transition: opacity 500ms var(--ease-out) 200ms, transform 900ms var(--hvp-spring) 200ms; }
.hvp--live .hvp-scene--bill[data-st="pre"] .hvp-bill {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.94);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.5, 0, 0.75, 0);
}
.hvp--live .hvp-scene--bill::before,
.hvp--live .hvp-scene--bill::after { transition: opacity 500ms var(--ease-out) 420ms, transform 800ms var(--hvp-spring) 420ms; }
.hvp--live .hvp-scene--bill::after { transition-delay: 520ms; }
.hvp--live .hvp-scene--bill[data-st="pre"]::before,
.hvp--live .hvp-scene--bill[data-st="pre"]::after {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.9);
  transition: opacity 200ms ease, transform 300ms ease;
}
.hvp--live .hvp-pips i.is-off { background: var(--hvp-tile); transform: scale(0.88); }
.hvp--live .hvp-pips i.is-off::before { opacity: 0; transform: scale(0.4); }
.hvp--live .hvp-bill__tag.is-out { opacity: 0; transform: scale(0.8); }


/* Live: loops and idle ----------------------------------------------------- */

/* Longhands, so the idle rule below can pause them whatever its weight. */
.hvp--live .hvp-meter__live::before {
  animation-name: hvp-pulse;
  animation-duration: 1.6s;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
}
@keyframes hvp-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  100% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); }
}
/* Loops pause while the section is off screen. */
.hvp.hvp--live.hvp--idle .hvp-stage *,
.hvp.hvp--live.hvp--idle .hvp-stage *::before,
.hvp.hvp--live.hvp--idle .hvp-stage *::after { animation-play-state: paused; }

/* The script never goes live with reduced motion; this only guards a
   preference switched on mid-visit. */
@media (prefers-reduced-motion: reduce) {
  .hvp-scroll *, .hvp-scroll *::before, .hvp-scroll *::after { animation: none !important; transition: none !important; }
}


/* ==== compare ==== */
/* --------------------------------------------------------------------------
   Compare (hvc-): a dark band. The versus card puts Beonsys next to the
   usual ways to get back-office work done; the Beonsys column is the one
   lit object. Below it, three lines light up in sequence as you scroll.

   Everything renders finished by default (no JS, reduced motion). Motion
   states live under .hvc.is-armed, which the script adds once it runs.
   -------------------------------------------------------------------------- */

.hvc {
  isolation: isolate;     /* keeps the glows (z-index -1) above the band, with or without main.js */
  /* The dark band always takes the bright, dark-scheme brand gradient. */
  --sig-a: #2997ff;
  --sig-b: #a586ff;
  --dv-grad: linear-gradient(100deg, var(--sig-a) 0%, var(--sig-b) 100%);
  --hvc-r: 1.25rem;                       /* the Beonsys column's corners */
  --hvc-quiet: #a1a1a6;
}

/* A low violet light under the closing lines, so the band never reads flat. */
.hvc-aura {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 70%;
  background:
    radial-gradient(42% 46% at 18% 72%, rgba(165, 134, 255, 0.11), transparent 70%),
    radial-gradient(36% 40% at 88% 30%, rgba(41, 151, 255, 0.07), transparent 70%);
  pointer-events: none;
}

/* Wide enough on desktop for each sentence of the headline to take one line. */
.hvc-head { max-width: 70rem; }
.hvc-nowrap { white-space: nowrap; }


/* Versus card -------------------------------------------------------------- */

.hvc-stage {
  max-width: 66rem;
  margin-inline: auto;
  transform-origin: 50% 0;
}

/* Phones: edge to edge on the band, the way Apple lays out a compare module.
   From tablets up it sits in a card. */
.hvc-vs { position: relative; }
@media (min-width: 48rem) {
  .hvc-vs {
    --pad: clamp(1.5rem, 0.75rem + 2vw, 2.75rem);
    padding: clamp(1.75rem, 1rem + 1.6vw, 2.5rem) var(--pad) var(--pad);
    border-radius: calc(var(--radius-lg) + 0.25rem);
    background: linear-gradient(180deg, #141416 0%, #0d0d0e 45%, #0b0b0c 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 40px 80px -40px rgba(0, 0, 0, 0.9);
  }
}

/* Picker: "Compare with" and the segmented control. Phones get the short
   labels so all three options sit on one line at 360px. */
.hvc-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
.hvc-pick__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--hvc-quiet);
}
.hvc-seg {
  display: flex;
  width: 100%;
  overflow: visible;                       /* nothing scrolls, so focus rings never clip */
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hvc-seg .dv-seg__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--hvc-quiet);
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: color 250ms ease, transform 160ms var(--ease-out);
}
.hvc-seg .dv-seg__btn[aria-selected="true"] { color: #fff; }
.hvc-seg .dv-seg__btn:active { transform: scale(0.96); }
.hvc-seg .dv-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hvc-seg .dv-seg__pill {
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}
.hvc-seg__long { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hvc-seg .dv-seg__btn:hover { color: #fff; }
}
@media (min-width: 48rem) {
  .hvc-pick { flex-direction: row; justify-content: center; gap: 1rem; }
  .hvc-seg { display: inline-flex; width: auto; }
  .hvc-seg .dv-seg__btn { flex: none; padding: 0 1.125rem; }
  .hvc-seg__long { display: inline; }
  .hvc-seg__short { display: none; }
}
/* Without JS the picker cannot switch, so it steps aside (see the answers
   below: every comparison is shown, stacked). */
html:not(.js) .hvc-pick { display: none; }

/* The comparison: an ARIA table. One grid template per row keeps the
   columns aligned, and the Beonsys column is drawn once behind its cells. */
.hvc-panel {
  margin-top: 1.25rem;
  border-radius: var(--hvc-r);
}
@media (min-width: 48rem) { .hvc-panel { margin-top: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); } }
.hvc-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.375rem; }

.hvc-table {
  --lab: 0px;      /* label column (desktop only) */
  --us: 0.54;      /* the Beonsys column's share of the answer width */
  position: relative;
  isolation: isolate;
}
.hvc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc((100% - var(--lab)) * var(--us));
}
.hvc-cell { position: relative; min-width: 0; }

.hvc-cell--label {
  grid-column: 1 / -1;
  /* Wraps rather than run into the Beonsys column on the narrowest phones. */
  max-width: calc((1 - var(--us)) * 100% - 0.5rem);
  padding: 1.125rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.004em;
  color: var(--hvc-quiet);
}
.hvc-cell--them,
.hvc-cell--us {
  padding-bottom: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.38;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
.hvc-cell--them { padding-right: 1rem; color: var(--hvc-quiet); }
.hvc-cell--us { padding-inline: 0.875rem; color: var(--ink); font-weight: 500; }

/* Row rules. Phones: the label spans both columns, so it draws the quiet
   rule on the left and the column's own inset rule on the right. */
/* The rules hang off the row (positioned) rather than the narrower label. */
.hvc-row:not(.hvc-row--head)::before,
.hvc-row:not(.hvc-row--head)::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
}
.hvc-row:not(.hvc-row--head)::before { left: 0; width: calc((1 - var(--us)) * 100% - 1rem); background: rgba(255, 255, 255, 0.12); }
.hvc-row:not(.hvc-row--head)::after { left: calc((1 - var(--us)) * 100% + 0.875rem); right: 0.875rem; background: rgba(255, 255, 255, 0.1); }

/* Column heads */
.hvc-row--head .hvc-cell { padding-top: 1rem; padding-bottom: 0.25rem; }
.hvc-cell--corner {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.hvc-row--head .hvc-cell--them { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.004em; line-height: 1.25; }
.hvc-row--head .hvc-v,
.hvc-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hvc-brand { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.hvc-ico {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvc-ico__knob { fill: currentColor; stroke: none; }
.hvc-mark {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: none;
  stroke: url(#hvc-mark-grad);
  stroke-width: 6.5;
  stroke-linecap: round;
}

@media (min-width: 48rem) {
  .hvc-table { --lab: clamp(12.25rem, 5rem + 9vw, 14rem); --us: 0.5; }
  .hvc-row { grid-template-columns: var(--lab) minmax(0, 1fr) calc((100% - var(--lab)) * var(--us)); }
  .hvc-cell--label {
    grid-column: auto;
    max-width: none;
    padding: 1.375rem 1.25rem 1.375rem 0;
    font-size: 1rem;
    /* Same line box as the answers, so the first baselines line up. */
    line-height: 1.615rem;
    letter-spacing: -0.006em;
  }
  .hvc-cell--them,
  .hvc-cell--us { padding-top: 1.375rem; padding-bottom: 1.375rem; font-size: 1.1875rem; line-height: 1.36; letter-spacing: -0.012em; }
  .hvc-cell--them { padding-right: 2rem; }
  .hvc-cell--us { padding-inline: 1.75rem; }
  /* Rules: one quiet line across label and answer, an inset one in the column. */
  .hvc-row:not(.hvc-row--head)::before { width: calc(100% - (100% - var(--lab)) * var(--us) - 1.25rem); }
  .hvc-row:not(.hvc-row--head)::after { left: calc(100% - (100% - var(--lab)) * var(--us) + 1.75rem); right: 1.75rem; }
  .hvc-row--head .hvc-cell { padding-top: 1.75rem; padding-bottom: 0.875rem; }
  .hvc-cell--corner { position: relative; width: auto; height: auto; overflow: visible; clip-path: none; }
  .hvc-row--head .hvc-cell--them { font-size: 1.0625rem; }
  .hvc-row--head .hvc-v,
  .hvc-brand { flex-direction: row; align-items: center; gap: 0.625rem; }
  .hvc-brand { font-size: 1.1875rem; }
  .hvc-row:last-child .hvc-cell { padding-bottom: 1.75rem; }
  .hvc { --hvc-r: 1.5rem; }
}
/* Tablets: three columns, but a tighter label column and a size down on the
   answers, so the Beonsys column keeps to two or three lines. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .hvc-table { --lab: 10rem; --us: 0.54; }
  .hvc-cell--label { padding-right: 1rem; font-size: 0.9375rem; line-height: 1.445rem; }
  .hvc-cell--them,
  .hvc-cell--us { font-size: 1.0625rem; line-height: 1.36; }
  .hvc-cell--them { padding-right: 1.25rem; }
  .hvc-cell--us { padding-inline: 1.25rem; }
  .hvc-row:not(.hvc-row--head)::after { left: calc(100% - (100% - var(--lab)) * var(--us) + 1.25rem); right: 1.25rem; }
  .hvc-row--head .hvc-cell--them { font-size: 1rem; }
  .hvc-brand { font-size: 1.0625rem; }
}

/* The Beonsys column: a gradient edge, a dark tinted fill and a soft light
   around it. A sweep of light runs down the edge on every switch. */
.hvc-col {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  width: calc((100% - var(--lab)) * var(--us));
  transform-origin: 50% 0;
}
.hvc-col > span { position: absolute; border-radius: var(--hvc-r); }
.hvc-col__glow,
.hvc-col__pulse {
  inset: -10% -24%;
  border-radius: 50%;
  pointer-events: none;
}
.hvc-col__glow {
  background: radial-gradient(closest-side, rgba(41, 151, 255, 0.3), rgba(165, 134, 255, 0.15) 58%, transparent);
}
.hvc-col__pulse {
  opacity: 0;
  background: radial-gradient(closest-side, rgba(41, 151, 255, 0.3), rgba(165, 134, 255, 0.16) 60%, transparent);
}
.hvc-col__edge {
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(41, 151, 255, 0.95) 0%, rgba(120, 140, 255, 0.7) 30%, rgba(165, 134, 255, 0.5) 65%, rgba(165, 134, 255, 0.22) 100%);
}
.hvc-col__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
  opacity: 0;
  transform: translateY(-100%);
}
.hvc-col__fill {
  inset: 1px;
  border-radius: calc(var(--hvc-r) - 1px);
  background:
    radial-gradient(130% 40% at 50% 0%, rgba(41, 151, 255, 0.2), transparent 75%),
    radial-gradient(120% 40% at 50% 100%, rgba(165, 134, 255, 0.12), transparent 75%),
    linear-gradient(180deg, #0b1322 0%, #0c0e1c 50%, #0e0b19 100%);
}

/* Two soft points of light that run down the column's sides on a switch. */
.hvc-col__trail { top: calc(var(--hvc-r) * 0.6); bottom: calc(var(--hvc-r) * 0.6); left: 0; right: 0; }
.hvc-col__trail i {
  position: absolute;
  top: 0;
  width: 0.875rem;
  height: 24%;
  margin-left: -0.4375rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(150, 180, 255, 0.5) 32%, transparent);
  opacity: 0;
}
.hvc-col__trail i:first-child { left: 0.5px; }
.hvc-col__trail i:last-child { left: calc(100% - 0.5px); }

/* Answers that swap: all three stacked in one cell; only one is shown. */
.hvc-swap { display: grid; }
.hvc-v { grid-area: 1 / 1; min-width: 0; }
.hvc-v:not(.is-on) { opacity: 0; visibility: hidden; }

/* Without JS: all three answers, one under another, each under a small
   label, so every comparison can be read. */
html:not(.js) .hvc-panel { margin-top: 0; }
html:not(.js) .hvc-swap { gap: 0.75rem; }
html:not(.js) .hvc-v { grid-area: auto; }
html:not(.js) .hvc-v:not(.is-on) { opacity: 1; visibility: visible; }
html:not(.js) .hvc-row--head .hvc-swap { gap: 0.625rem; }
html:not(.js) .hvc-row--head .hvc-v { flex-direction: row; align-items: center; gap: 0.5rem; }
html:not(.js) .hvc-row:not(.hvc-row--head) .hvc-v::before {
  content: "In-house";
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.004em;
  color: #86868b;
}
html:not(.js) .hvc-row:not(.hvc-row--head) .hvc-v:nth-child(2)::before { content: "Outsourced"; }
html:not(.js) .hvc-row:not(.hvc-row--head) .hvc-v:nth-child(3)::before { content: "Software"; }

.hvc-note {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  padding-inline: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: -0.003em;
  color: #86868b;
  text-align: center;
  text-wrap: pretty;
}


/* Gets better every month --------------------------------------------------- */

.hvc-better {
  max-width: 66rem;
  margin: clamp(5rem, 3rem + 6vw, 9rem) auto 0;
}
.hvc-better__title {
  margin-bottom: clamp(2rem, 1.25rem + 2vw, 3.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.006em;
  color: var(--hvc-quiet);
}

.hvc-steps {
  position: relative;      /* the script measures tile centres from here */
  --tile: clamp(3.5rem, 2.9rem + 2.2vw, 5.25rem);
  --tgap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --sgap: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  display: grid;
  gap: var(--sgap);
  list-style: none;
}
.hvc-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr);
  align-items: start;
  gap: var(--tgap);
}
.hvc-step--rule { --gc: var(--dv-rule); --gn: var(--dv-agent); }
.hvc-step--ask { --gc: var(--dv-agent); --gn: var(--dv-rule); }
.hvc-step--stay { --gc: var(--dv-rule); }

.hvc-step__text {
  /* First line centred on the tile; any further lines run below it. */
  padding-top: max(0px, (var(--tile) - 1.1em) / 2);
  font-size: clamp(1.625rem, 0.95rem + 2.6vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* The glyph tile, with its own light behind it. */
.hvc-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 28%;
  background: linear-gradient(180deg, #1f1f23, #131315);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.hvc-glyph::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 42%, transparent), transparent);
}
.hvc-glyph svg {
  width: 74%;
  height: 74%;
  overflow: visible;
  transform-origin: 50% 50%;
}

/* The rail between tiles; it fills as you scroll from one line to the next. */
.hvc-link {
  position: absolute;
  left: calc(var(--tile) / 2 - 1px);
  top: calc(var(--tile) + 0.625rem);
  width: 2px;
  height: calc(100% - var(--tile) + var(--sgap) - 1.25rem);
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.hvc-link__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gc), var(--gn));
  transform-origin: 50% 0;
}

/* Glyph 1: a correction is struck through and fixed, then becomes a rule. */
.hvc-g1-card { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.hvc-g1-old { fill: rgba(255, 255, 255, 0.38); }
.hvc-g1-strike { fill: none; stroke: var(--dv-flag); stroke-width: 2; stroke-linecap: round; }
.hvc-g1-fix { fill: var(--dv-person); }
.hvc-g1-arrow { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hvc-g1-rulecard { fill: color-mix(in srgb, var(--dv-rule) 20%, transparent); stroke: var(--dv-rule); stroke-width: 1.5; }
.hvc-g1-check { fill: none; stroke: var(--dv-rule); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hvc-g1-bar { fill: var(--dv-rule); opacity: 0.8; }

/* Glyph 2: a question is answered; when it comes again, it dissolves. */
.hvc-g2-bubble { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; stroke-linejoin: round; }
.hvc-g2-mark { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hvc-g2-dot { fill: rgba(255, 255, 255, 0.9); }
.hvc-g2-abubble { fill: var(--dv-agent); }
.hvc-g2-acheck { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hvc-g2-ghost { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.4; stroke-dasharray: 2.5 3; stroke-linejoin: round; }
.hvc-g2-again { opacity: 0; }
.hvc-g2-bits circle { fill: rgba(255, 255, 255, 0.85); opacity: 0; }

/* Glyph 3: the person leaves; the rule book stays lit. */
.hvc-g3-halo { fill: url(#hvc-g3-glow); }
.hvc-g3-book { fill: color-mix(in srgb, var(--dv-rule) 18%, #121214); stroke: var(--dv-rule); stroke-width: 1.5; }
.hvc-g3-spine { fill: none; stroke: var(--dv-rule); stroke-width: 1.5; }
.hvc-g3-line { fill: none; stroke: var(--dv-rule); stroke-width: 2; stroke-linecap: round; }
.hvc-g3-ghost { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; stroke-dasharray: 2.5 3; stroke-linecap: round; }
.hvc-g3-person { fill: none; stroke: var(--dv-person); stroke-width: 2; stroke-linecap: round; opacity: 0; transform: translateX(12px); }


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

@media (prefers-reduced-motion: no-preference) {
  /* Switching: the old answer lifts away, the new one rises out of a blur,
     row by row (--r is the row's place, top to bottom). */
  .hvc.is-armed .hvc-v {
    transform: translateY(0.55em);
    filter: blur(5px);
    transition:
      opacity 220ms ease calc(var(--r) * 35ms),
      transform 340ms cubic-bezier(0.55, 0, 1, 0.45) calc(var(--r) * 35ms),
      filter 260ms ease calc(var(--r) * 35ms),
      visibility 0s linear calc(340ms + var(--r) * 35ms);
  }
  .hvc.is-armed .hvc-v[data-state="up"] { transform: translateY(-0.55em); }
  .hvc.is-armed .hvc-v.is-on {
    transform: none;
    filter: none;
    transition:
      opacity 480ms var(--ease-out) calc(160ms + var(--r) * 55ms),
      transform 820ms var(--ease-out) calc(160ms + var(--r) * 55ms),
      filter 560ms var(--ease-out) calc(160ms + var(--r) * 55ms),
      visibility 0s linear calc(160ms + var(--r) * 55ms);
  }
  .hvc.is-armed .hvc-v.is-snap { transition: none; }

  /* Entrance: cells rise row by row, each Beonsys answer a beat after its
     row; the column grows in under them. */
  .hvc.is-armed .hvc-cell { --c: 0; }
  .hvc.is-armed .hvc-cell--us { --c: 1; }
  .hvc.is-armed .hvc-cell {
    transition:
      opacity 700ms var(--ease-out) calc(120ms + var(--r) * 80ms + var(--c) * 110ms),
      transform 900ms var(--ease-out) calc(120ms + var(--r) * 80ms + var(--c) * 110ms);
  }
  html:not(.reveal-all) .hvc.is-armed .hvc-vs:not(.is-in) .hvc-cell { opacity: 0; transform: translateY(0.875rem); }
  .hvc.is-armed .hvc-row::before,
  .hvc.is-armed .hvc-row::after {
    transform-origin: 0 50%;
    transition: transform 900ms var(--ease-out) calc(60ms + var(--r) * 80ms), opacity 500ms ease calc(60ms + var(--r) * 80ms);
  }
  .hvc.is-armed .hvc-row::after { transition-delay: calc(170ms + var(--r) * 80ms); }
  html:not(.reveal-all) .hvc.is-armed .hvc-vs:not(.is-in) .hvc-row::before,
  html:not(.reveal-all) .hvc.is-armed .hvc-vs:not(.is-in) .hvc-row::after { opacity: 0; transform: scaleX(0); }
  .hvc.is-armed .hvc-col { transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out); }
  html:not(.reveal-all) .hvc.is-armed .hvc-vs:not(.is-in) .hvc-col { opacity: 0; transform: scaleY(0.92); }

  /* Glyphs: the "before" picture until the line lights, then the story. */
  .hvc.is-armed .hvc-glyph::before { transition: opacity 1000ms var(--ease-out) 700ms; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-glyph::before { opacity: 0; transition-delay: 0ms; }

  .hvc.is-armed .hvc-g1-entry { transition: transform 620ms var(--ease-in-out) 760ms; }
  .hvc.is-armed .hvc-g1-strike { transform-box: fill-box; transform-origin: 0 50%; transition: transform 420ms var(--ease-out) 150ms; }
  .hvc.is-armed .hvc-g1-fix { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 560ms var(--dv-spring) 520ms; }
  .hvc.is-armed .hvc-g1-arrow { transition: opacity 320ms ease 1080ms, transform 480ms var(--ease-out) 1080ms; }
  .hvc.is-armed .hvc-g1-rule { transform-box: fill-box; transform-origin: 50% 0; transition: opacity 420ms var(--ease-out) 1180ms, transform 760ms var(--dv-spring) 1180ms; }
  .hvc.is-armed .hvc-g1-check { transform-box: fill-box; transform-origin: 50% 60%; transition: transform 520ms var(--dv-spring) 1500ms, opacity 200ms ease 1500ms; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-entry { transform: translateY(15px); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-strike { transform: scaleX(0); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-fix { transform: scale(0); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-arrow { opacity: 0; transform: translateY(-3px); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-rule { opacity: 0; transform: translateY(-9px) scale(0.9); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g1-check { opacity: 0; transform: scale(0.4); }
  .hvc.is-armed .hvc-step:not(.is-played) :is(.hvc-g1-entry, .hvc-g1-strike, .hvc-g1-fix, .hvc-g1-arrow, .hvc-g1-rule, .hvc-g1-check) { transition-duration: 0ms; transition-delay: 0ms; }

  .hvc.is-armed .hvc-g2-q { transition: transform 620ms var(--ease-in-out) 120ms; }
  .hvc.is-armed .hvc-g2-a { transform-box: fill-box; transform-origin: 85% 100%; transition: opacity 260ms ease 520ms, transform 620ms var(--dv-spring) 520ms; }
  .hvc.is-armed .hvc-g2-ghost { transition: opacity 700ms ease 2050ms; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g2-q { transform: translate(12px, 16px); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g2-a { opacity: 0; transform: scale(0.55); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g2-ghost { opacity: 0; }
  .hvc.is-armed .hvc-step:not(.is-played) :is(.hvc-g2-q, .hvc-g2-a, .hvc-g2-ghost) { transition-duration: 0ms; transition-delay: 0ms; }
  .hvc.is-armed .hvc-step.is-played .hvc-g2-again {
    transform-box: fill-box;
    transform-origin: 15% 100%;
    animation: hvc-again 1500ms var(--ease-out) 1100ms both;
  }
  .hvc.is-armed .hvc-step.is-played .hvc-g2-bits circle {
    animation: hvc-bit 900ms var(--ease-out) 1880ms both;
  }
  .hvc.is-armed .hvc-step.is-played .hvc-g2-bits circle:nth-child(2n) { animation-delay: 1940ms; }

  .hvc.is-armed .hvc-g3-person { transition: opacity 700ms ease-in 260ms, transform 900ms cubic-bezier(0.5, 0, 0.75, 0) 260ms; }
  .hvc.is-armed .hvc-g3-ghost { transition: opacity 600ms ease 820ms; }
  .hvc.is-armed .hvc-g3-halo { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 900ms var(--ease-out) 900ms, transform 1100ms var(--ease-out) 900ms; }
  .hvc.is-armed .hvc-g3-line { transition: opacity 400ms ease 1050ms; }
  .hvc.is-armed .hvc-g3-line--2 { transition-delay: 1180ms; }
  .hvc.is-armed .hvc-g3-line--3 { transition-delay: 1310ms; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g3-person { opacity: 1; transform: none; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g3-ghost { opacity: 0; }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g3-halo { opacity: 0.25; transform: scale(0.8); }
  .hvc.is-armed .hvc-step:not(.is-played) .hvc-g3-line { opacity: 0.35; }
  .hvc.is-armed .hvc-step:not(.is-played) :is(.hvc-g3-person, .hvc-g3-ghost, .hvc-g3-halo, .hvc-g3-line) { transition-duration: 0ms; transition-delay: 0ms; }
}

@keyframes hvc-again {
  0%   { opacity: 0; transform: scale(0.6); }
  18%  { opacity: 1; transform: scale(1.04); }
  28%  { opacity: 1; transform: none; }
  58%  { opacity: 1; transform: none; }
  78%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}
@keyframes hvc-bit {
  0%   { opacity: 0; transform: none; }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Reduced motion: answers crossfade in place; everything else is still. */
@media (prefers-reduced-motion: reduce) {
  .hvc.is-armed .hvc-v { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .hvc.is-armed .hvc-v.is-on { transition: opacity 200ms ease, visibility 0s; }
  .hvc-seg .dv-seg__btn:active { transform: none; }
}


/* ==== trust ==== */
/* --------------------------------------------------------------------------
   Trust (hvt-): safe by design. A calm, light section after the dark
   compare band. The checking ladder is the scene: level 1 sits at the
   bottom and a job climbs it as the page scrolls. Two cards follow.

   Static by default (no JS, reduced motion): every level lit and the path
   drawn with arrows. section.js adds .is-live to the ladder and takes over.
   -------------------------------------------------------------------------- */

.hvt {
  --hvt-gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);   /* bento gap, as in #features */
  --hvt-pad: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  --hvt-rail: 2.25rem;                                    /* the column the token climbs */
  --hvt-node: 0.75rem;
  --hvt-ny: 0.5625rem;                                    /* node centre: the kicker's midline */
  --hvt-step: clamp(1.875rem, 1.3rem + 1.4vw, 2.75rem);   /* space between levels: room for the card */
  --hvt-col: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);     /* rail to text */
  --hvt-in: 0.875rem;                                     /* text inset inside the level card */
  --hvt-cell: 0.75rem;
  --hvt-off: var(--line-strong);
  --hvt-a: var(--dv-agent);
  --hvt-p: var(--dv-person);
  --hvt-ok: var(--dv-done);
  --hvt-mid: color-mix(in srgb, var(--sig-a) 50%, var(--sig-b));
}
@media (prefers-color-scheme: dark) {
  .hvt { --hvt-a: #2997ff; }          /* the band's agent blue: brighter on the dark tile */
}
@media (min-width: 48rem) {
  .hvt { --hvt-rail: 2.5rem; --hvt-node: 0.875rem; --hvt-cell: 0.8125rem; --hvt-in: 1.125rem; }
}


/* Head: the lead breaks evenly instead of leaving two words behind. */
.hvt-head .lead { text-wrap: balance; }


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

.hvt-stage {
  position: relative;
  display: grid;
  padding: var(--hvt-pad);
  border-radius: var(--radius-lg);
  background: var(--tile);
}

/* The diagram's title, with the Sample tag for its illustrative squares. */
.hvt-ladder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
.hvt-label {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-2);
}


/* Ladder ------------------------------------------------------------------ */

.hvt-track { position: relative; padding-top: 0.875rem; }

.hvt-levels {
  list-style: none;
  display: flex;
  flex-direction: column-reverse;       /* level 1 at the bottom: a job climbs */
  gap: var(--hvt-step);
}

.hvt-level {
  position: relative;
  padding: 0 var(--hvt-in) 0 calc(var(--hvt-rail) + var(--hvt-col));
}
.hvt-level > p,
.hvt-level > .hvt-cells { position: relative; }   /* above the highlight card */

/* The level the job is on rises as a card, the way the hero's job card
   highlights its running step. Live only. */
.hvt-level::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--hvt-in));
  bottom: calc(-1 * var(--hvt-in));
  left: calc(var(--hvt-rail) + var(--hvt-col) - var(--hvt-in));
  right: 0;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.hvt-level__k {
  font-size: 0.8125rem;
  line-height: calc(var(--hvt-ny) * 2);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: color 450ms ease;
}
.hvt-level__t {
  margin-top: 0.375rem;
  max-width: 26em;
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
  transition: color 450ms ease;
}
.hvt-level__n {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  letter-spacing: -0.004em;
  color: var(--ink-2);
}

/* Nodes on the rail: a ring, filled with the brand gradient once reached. */
.hvt-node {
  position: absolute;
  z-index: 1;
  left: calc(var(--hvt-rail) / 2 - var(--hvt-node) / 2);
  top: calc(var(--hvt-ny) - var(--hvt-node) / 2);
  width: var(--hvt-node);
  height: var(--hvt-node);
  border-radius: 50%;
  background: var(--tile);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.hvt-node::before,
.hvt-node::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hvt-node::before {
  inset: 0;
  background: linear-gradient(150deg, var(--sig-a), var(--sig-b));
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 250ms ease, transform 500ms var(--dv-spring);
}
.hvt-level.is-on .hvt-node::before { opacity: 1; transform: none; }
/* Arrival ripple, played once each time the token reaches a level. */
.hvt-node::after {
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border: 1.5px solid var(--sig-a);
  opacity: 0;
}

/* Segments: each level draws the rail down to the level below it. */
.hvt-seg {
  position: absolute;
  left: calc(var(--hvt-rail) / 2 - 1px);
  top: var(--hvt-ny);
  bottom: calc(-1 * (var(--hvt-step) + var(--hvt-ny) - var(--hvt-node) / 2));
  width: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}
.hvt-seg__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, var(--sig-a), var(--hvt-mid));
  transform-origin: 50% 100%;
}
.hvt-level[data-level="3"] .hvt-seg__fill { background: linear-gradient(to top, var(--hvt-mid), var(--sig-b)); }
/* The static diagram marks the way up with an arrowhead on each segment. */
.hvt-seg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 0.5rem;
  margin: -0.3125rem 0 0 -0.375rem;
  background: var(--hvt-mid);
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
}

/* Who checks each item: one square per item, and the sign-off at the end. */
.hvt-cells {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.875rem;
}
.hvt-cells i {
  position: relative;
  flex: none;
  width: var(--hvt-cell);
  height: var(--hvt-cell);
  border-radius: 0.25rem;
  background: var(--hvt-off);
}
.hvt-cells i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hvt-a);
}
.hvt-cells i.p::after { background: var(--hvt-p); }

.hvt-ok {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.3125rem;
  border-radius: 50%;
  background: var(--hvt-ok);
}
.hvt-ok svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-color-scheme: dark) { .hvt-ok svg { stroke: #000; } }

.hvt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
  padding-left: calc(var(--hvt-rail) + var(--hvt-col));
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--ink-2);
}
.hvt-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.hvt-legend i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.1875rem;
  background: var(--hvt-a);
}
.hvt-legend i.p { background: var(--hvt-p); }
.hvt-legend .hvt-ok { width: 0.875rem; height: 0.875rem; margin: 0; }
.hvt-legend .hvt-ok svg { width: 0.625rem; height: 0.625rem; }
@media (min-width: 48rem) { .hvt-legend { column-gap: 1.25rem; } }

/* The token: one job, climbing. Hidden until the script drives it. */
.hvt-bead {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: none;
  place-items: center;
  width: var(--hvt-rail);
  height: var(--hvt-rail);
  margin-top: calc(var(--hvt-rail) / -2);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(150deg, var(--sig-a), var(--sig-b));
  box-shadow:
    0 0 0 0.3125rem var(--tile),
    0 0 1.75rem 0.375rem color-mix(in srgb, var(--sig-a) 28%, transparent),
    0 0.5rem 1rem -0.375rem rgba(0, 0, 0, 0.35);
}
.hvt-bead svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvt-bead.is-moving { will-change: translate, scale; }
.hvt-ladder.is-live .hvt-bead { transition: opacity 300ms ease, transform 650ms var(--dv-spring); }
.hvt-ladder.is-live:not(.is-entered) .hvt-bead { opacity: 0; transform: scale(0.3); }

/* Live: the script owns the bead, the fills and which levels are lit. */
.hvt-ladder.is-live .hvt-bead { display: grid; }
.hvt-ladder.is-live .hvt-seg::after { display: none; }
.hvt-ladder.is-live .hvt-seg__fill { transform: scaleY(0); }
.hvt-ladder.is-live .hvt-level:not(.is-on) .hvt-level__k,
.hvt-ladder.is-live .hvt-level:not(.is-on) .hvt-level__t { color: var(--ink-3); }
.hvt-ladder.is-live .hvt-level.is-on .hvt-node::after { animation: hvt-ripple 900ms var(--ease-out) both; }
.hvt-ladder.is-live .hvt-level::before { transition: opacity 350ms ease, transform 500ms var(--ease-out); }
.hvt-ladder.is-live .hvt-level.is-here::before { opacity: 1; transform: none; transition-duration: 500ms, 650ms; }
.hvt-ladder.is-live .hvt-level.is-here .hvt-level__k { color: var(--sig-a); }
.hvt-ladder.is-live .hvt-cells i::after {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 200ms ease, transform 450ms var(--dv-spring);
}
.hvt-ladder.is-live .hvt-level.is-on .hvt-cells i::after {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--c, 0) * 30ms);
}
.hvt-ladder.is-live .hvt-cells .hvt-ok {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms ease, transform 500ms var(--dv-spring);
}
.hvt-ladder.is-live .hvt-level.is-on .hvt-cells .hvt-ok { opacity: 1; transform: none; transition-delay: 480ms; }

@keyframes hvt-ripple {
  from { opacity: 0.6; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.5); }
}


/* Rules: beside the ladder on desktop, under it on phones. ---------------- */

.hvt-rules {
  list-style: none;
  display: grid;
  align-content: center;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}
.hvt-rule {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-top: 1.75rem;
}
.hvt-rule + .hvt-rule { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.hvt-rule__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: var(--c);
  color: #fff;
}
.hvt-rule__icon--up {
  --c: var(--c-systems);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-systems) 85%, #ffffff), var(--c-systems) 45%, var(--c-teal));
}
.hvt-rule__icon--back {
  --c: var(--c-flow);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-flow) 82%, #ffd60a), var(--c-flow) 50%, var(--c-pink));
}
.hvt-rule__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.hvt-rule__text {
  max-width: 22em;
  padding-top: calc((2.75rem - 1.2em) / 2);   /* first line on the icon's midline */
  font-size: clamp(1.1875rem, 1.1rem + 0.25vw, 1.3125rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

@media (min-width: 64rem) {
  .hvt-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hvt-rules {
    margin: 0 0 0 clamp(2.5rem, 0.5rem + 3vw, 4.5rem);
    padding-left: clamp(2.5rem, 0.5rem + 3vw, 4.5rem);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .hvt-rule { display: block; padding-top: 0; }
  .hvt-rule + .hvt-rule { margin-top: 2.5rem; padding-top: 2.5rem; }
  .hvt-rule__icon { margin-bottom: 1.125rem; }
  .hvt-rule__text { padding-top: 0; }
}


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

.hvt-grid {
  display: grid;
  gap: var(--hvt-gap);
  margin-top: var(--hvt-gap);
}
@media (min-width: 48rem) { .hvt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hvt-card {
  display: flex;
  flex-direction: column;
  padding: var(--hvt-pad);
  border-radius: var(--radius-lg);
  background: var(--tile);
}

.hvt-badge {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  color: #fff;
}
.hvt-badge svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.hvt-badge--lock {
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-flow) 82%, #ffd60a), var(--c-flow) 50%, var(--c-pink));
  box-shadow: 0 0.625rem 1.5rem -0.75rem color-mix(in srgb, var(--c-flow) 70%, transparent);
}
.hvt-badge--shield {
  background: linear-gradient(150deg, var(--sig-a), var(--sig-b));
  box-shadow: 0 0.625rem 1.5rem -0.75rem color-mix(in srgb, var(--sig-a) 70%, transparent);
}

.hvt-card__title {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}
.hvt-card__text {
  margin-top: 0.75rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Things that always wait for a person: a short locked list. */
.hvt-locked {
  list-style: none;
  margin: 1.25rem 0 2rem;
  padding: 0 1.125rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.hvt-locked li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding-block: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.hvt-locked li + li { border-top: 1px solid var(--line); }
.hvt-locked svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--c-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* The line that must not be missed. */
.hvt-never {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}
.hvt-never strong {
  font-weight: inherit;
  background: linear-gradient(100deg, #d24c00, #d9256a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .hvt-never strong { background-image: linear-gradient(100deg, #ff9f0a, #ff5c8a); }
}
.hvt-never svg {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  margin-top: 0.0625rem;
  fill: none;
  stroke: var(--c-flow);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Your data stays yours: five short facts, one icon each. */
.hvt-facts {
  list-style: none;
  display: grid;
  margin-top: 1.25rem;
}
.hvt-facts li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: balance;               /* two even lines on phones, not a stray "you grant" */
}
.hvt-facts li + li { border-top: 1px solid var(--line); }
.hvt-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.hvt-ico svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvt-ico .hvt-dots { stroke-width: 2.6; }


/* Arrivals: small, meaningful moves once each part is in view. ----------- */

@media (prefers-reduced-motion: no-preference) {
  /* Rule icons: the arrow rises, the return arrow winds back. */
  .hvt-up { transition: transform 700ms var(--ease-out) 500ms, opacity 400ms ease 500ms; }
  .js .hvt-rule:not(.is-in) .hvt-up { opacity: 0; transform: translateY(3px); }
  .hvt-back { transform-box: view-box; transform-origin: 12px 12.25px; transition: transform 1000ms var(--ease-out) 450ms; }
  .js .hvt-rule:not(.is-in) .hvt-back { transform: rotate(-150deg); }

  /* Locks: open as the card arrives, then click shut one after another. */
  .hvt-person .hvt-shackle {
    transform-box: fill-box;
    transform-origin: 100% 100%;
    transition: transform 650ms var(--dv-spring) 550ms;
  }
  .js .hvt-person:not(.is-in) .hvt-shackle { transform: translateY(-14%) rotate(-24deg); }
  .hvt-locked li:nth-child(1) .hvt-shackle { transition-delay: 850ms; }
  .hvt-locked li:nth-child(2) .hvt-shackle { transition-delay: 950ms; }
  .hvt-locked li:nth-child(3) .hvt-shackle { transition-delay: 1050ms; }
}


/* ==== pricing ==== */
/* ==========================================================================
   Pricing (hvq-)
   Three plan cards whose prices roll in like a counter, the checklist every
   plan includes, other work, ways to start and the founding offer. All of it
   sits in one centred column. Team carries the gradient ring and the glow.
   Static HTML is the finished state; the script only arms the motion.
   ========================================================================== */

.hvq {
  --hvq-w: 66rem;                                  /* the column on desktop */
  --hvq-w-sm: 30rem;                               /* the column below 64rem */
  --hvq-pad: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --hvq-r: var(--radius-lg);
  --hvq-ring: linear-gradient(135deg, var(--sig-a), var(--sig-b));
  --hvq-fill: color-mix(in srgb, var(--ink) 6%, var(--card));
  --hvq-fill-hover: color-mix(in srgb, var(--ink) 10%, var(--card));
  --hvq-lift-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 30px 60px -20px rgba(0, 0, 0, 0.22);
  --hvq-glow-a: 34%;                               /* Team's glow: blue, then violet */
  --hvq-glow-b: 30%;
}
@media (prefers-color-scheme: dark) {
  .hvq {
    --hvq-fill: color-mix(in srgb, var(--ink) 9%, var(--card));
    --hvq-fill-hover: color-mix(in srgb, var(--ink) 14%, var(--card));
    --hvq-lift-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    --hvq-glow-a: 55%;
    --hvq-glow-b: 50%;
  }
}

/* The second clause starts its own line. On phones the natural wrap would
   split it ("Pay for finished / work. Never / for hours."); on wider screens
   balanced wrapping lands it there anyway, so this only matters on phones. */
.hvq-head .muted { display: block; }
.hvq-nb { white-space: nowrap; }


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

.hvq-plans {
  display: grid;
  gap: 1rem;
  max-width: var(--hvq-w-sm);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) {
  .hvq-plans {
    max-width: var(--hvq-w);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.4rem + 0.8vw, 1.5rem);
    padding-block: 1rem;                           /* room for Team, which stands taller */
  }
}

/* Each cell holds one card. Team's cell sits under its neighbours, so its
   glow passes behind them instead of over them. */
.hvq-cell { position: relative; z-index: 1; display: flex; min-width: 0; }
.hvq-cell--hi { z-index: 0; }

.hvq-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--hvq-pad);
  border-radius: var(--hvq-r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  container-type: inline-size;
  transform: translateY(var(--hvq-lift, 0px)) scale(var(--hvq-press, 1));
  transition: transform 550ms var(--ease-out);
}
/* The deeper shadow for hover is its own layer, so only its opacity moves. */
.hvq-plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--hvq-lift-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms var(--ease-out);
}

.hvq-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.875rem;
}
.hvq-plan__name {
  font-size: clamp(1.3125rem, 1.2rem + 0.35vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.004em;
  text-wrap: balance;
}

/* The price. One line box tall in every card, so baselines line up across
   the row; "Custom quote" sits on the same baseline at a smaller size. */
.hvq-price {
  margin-top: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  font-size: min(clamp(3.25rem, 2.6rem + 1.6vw, 4rem), calc((100cqi - 4rem) / 3.45));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hvq-price__amt { display: inline-block; }
.hvq-price__per {
  margin-left: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink-2);
}
.hvq-price__quote {
  font-size: min(2.375rem, 13cqi);
  letter-spacing: -0.012em;
}

/* Details: one spine per ledger, then what the plan covers. The last
   card's row of spines runs on and fades. */
.hvq-plan__cap {
  display: grid;
  justify-items: start;
  margin: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) 0 clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  padding-top: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);
  border-top: 1px solid var(--line);
}
.hvq-plan__ledgers {
  font-weight: 600;
  letter-spacing: -0.012em;
}
.hvq-plan__unit {
  margin-top: 0.125rem;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.hvq-meter {
  display: flex;
  gap: 0.3125rem;
  height: 1.625rem;
  margin-bottom: 1rem;
}
.hvq-meter i {
  flex: none;
  width: 0.4375rem;
  border-radius: 0.1875rem;
  background: color-mix(in oklab, var(--sig-b) calc(var(--n, 0) * 11%), var(--sig-a));
  transform-origin: 50% 100%;
}
.hvq-meter i:nth-child(2) { --n: 1; }
.hvq-meter i:nth-child(3) { --n: 2; }
.hvq-meter i:nth-child(4) { --n: 3; }
.hvq-meter i:nth-child(5) { --n: 4; }
.hvq-meter i:nth-child(6) { --n: 5; }
.hvq-meter i:nth-child(7) { --n: 6; }
.hvq-meter i:nth-child(8) { --n: 7; }
.hvq-meter i:nth-child(9) { --n: 8; }
.hvq-meter i:nth-child(10) { --n: 9; }
.hvq-meter i:nth-child(11) { --n: 10; }
.hvq-meter i:nth-child(12) { --n: 11; }
.hvq-meter i:nth-child(13) { --n: 12; }
.hvq-meter i:nth-child(14) { --n: 13; }
.hvq-meter--more {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 96%);
}

/* The button covers the whole card, so the card is one big target. The
   card takes the press instead of the button, which keeps the target whole. */
.hvq-plan__cta {
  width: 100%;
  margin-top: auto;
}
.hvq-plan__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--hvq-r);
}
.hvq-plan__cta:active { transform: none; }
.hvq-plan .btn--quiet { background: var(--hvq-fill); }
.hvq-plan:active { --hvq-press: 0.985; transition-duration: 180ms; }

@media (hover: hover) and (pointer: fine) {
  .hvq-plan:hover { --hvq-lift: -0.375rem; }
  .hvq-plan:hover::after { opacity: 1; }
  .hvq-plan .btn--quiet:hover { background: var(--hvq-fill-hover); }
}

/* Team: gradient ring, a soft glow behind, the badge, and on desktop it
   stands a little taller than its neighbours. */
.hvq-cell--hi .hvq-plan { box-shadow: var(--shadow); }
.hvq-cell--hi .hvq-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--hvq-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* The glow hugs the card: blue from the top left, violet from the bottom
   right, the same way the ring runs. It shows in the gaps and gutters. */
.hvq-cell--hi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--hvq-r);
  box-shadow:
    -1.25rem -1rem 4rem -1.25rem color-mix(in srgb, var(--sig-a) var(--hvq-glow-a), transparent),
    1.25rem 1.5rem 4.5rem -1.25rem color-mix(in srgb, var(--sig-b) var(--hvq-glow-b), transparent);
  pointer-events: none;
}
@media (min-width: 64rem) {
  .hvq-cell--hi::before { inset: -1rem 0; }
  .hvq-cell--hi .hvq-plan {
    margin-block: -1rem;
    padding-block: calc(var(--hvq-pad) + 1rem);
  }
}

.hvq-badge {
  flex: none;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #0071e3, #8a4bff);
  box-shadow: 0 6px 16px -6px rgba(138, 75, 255, 0.55);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}


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

.hvq-incl {
  position: relative;
  z-index: 1;
  max-width: var(--hvq-w-sm);
  margin: 1rem auto 0;
  padding: var(--hvq-pad);
  border-radius: var(--hvq-r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.hvq-incl__title {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.hvq-incl__list {
  display: grid;
  gap: 0.875rem 2rem;
  margin: 1.375rem 0 0;
  padding: 0;
  list-style: none;
}
.hvq-incl__list li {
  position: relative;
  min-height: 1.5rem;
  padding-left: 2.25rem;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The tick sits on the first line; the label wraps as plain text. */
.hvq-check {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.hvq-check svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hvq-fine {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-2);
  text-wrap: balance;
}


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

/* Sub-heads inside the section: centred, like the section head. */
.hvq-sub {
  text-align: center;
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.003em;
  text-wrap: balance;
}

.hvq-other {
  max-width: var(--hvq-w-sm);
  margin: clamp(4.5rem, 3rem + 4.5vw, 7.5rem) auto 0;
}
.hvq-other__note {
  max-width: 30rem;
  margin: 0.75rem auto 0;
  text-align: center;
  color: var(--ink-2);
  text-wrap: balance;
}
.hvq-other__list {
  display: grid;
  gap: 0.625rem;
  margin: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.hvq-other__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.hvq-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--c);
  color: #ffffff;
}
.hvq-ico svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 30rem) {
  .hvq-other__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


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

.hvq-start {
  max-width: var(--hvq-w-sm);
  margin: clamp(4.5rem, 3rem + 4.5vw, 7.5rem) auto 0;
}
.hvq-ways {
  display: grid;
  gap: 0.875rem;
  margin: clamp(1.75rem, 1.2rem + 1.8vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.hvq-ways__item { display: flex; min-width: 0; }
.hvq-way {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem;
  align-content: start;
  column-gap: 0.875rem;
  width: 100%;
  padding: 1.125rem 1.125rem 1.25rem;
  border-radius: 1.375rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transform: translateY(var(--hvq-lift, 0px)) scale(var(--hvq-press, 1));
  transition: transform 550ms var(--ease-out);
}
.hvq-way::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--hvq-lift-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms var(--ease-out);
}
.hvq-way__ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
}
.hvq-way__ico svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvq-way__name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* The heading's link covers the card, so the whole card is the target. */
.hvq-way__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 1.375rem;
}
.hvq-way__link:focus-visible { outline: none; }
.hvq-way__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.hvq-way__text {
  grid-column: 2 / 4;
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hvq-way__text strong { font-weight: 600; color: var(--ink); }
.hvq-way__go {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--hvq-fill);
  color: var(--ink-2);
  transition: transform 300ms var(--ease-out);
}
.hvq-way__go svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hvq-way:active { --hvq-press: 0.98; transition-duration: 180ms; }
@media (hover: hover) and (pointer: fine) {
  .hvq-way:hover { --hvq-lift: -0.25rem; }
  .hvq-way:hover::after { opacity: 1; }
  .hvq-way:hover .hvq-way__go { transform: translateX(2px); }
}

.hvq-contract {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  letter-spacing: -0.004em;
  color: var(--ink-2);
}
.hvq-contract span { margin-right: 0.375rem; font-weight: 600; color: var(--ink); }


/* Founding offer: a quiet note -------------------------------------------------- */

.hvq-found {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 44rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  padding: 1.25rem 1.5rem 1.375rem 1.25rem;
  border-radius: 1.375rem;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hvq-found strong { font-weight: 600; color: var(--ink); }
.hvq-found__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
}
.hvq-found__ico svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Desktop column ------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .hvq-incl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .hvq-incl, .hvq-other, .hvq-start { max-width: var(--hvq-w); }
  .hvq-incl { margin-top: 1.25rem; }
  .hvq-incl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hvq-other__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 0.3rem + 0.6vw, 1rem);
  }
  .hvq-ways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.4rem + 0.8vw, 1.5rem);
  }
  .hvq-way {
    display: block;
    padding: var(--hvq-pad);
  }
  .hvq-way__ico { width: 2.75rem; height: 2.75rem; margin-bottom: 1.5rem; }
  .hvq-way__go { position: absolute; top: var(--hvq-pad); right: var(--hvq-pad); }
}


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

/* The number fades in as its count starts, so the final price never flashes first. */
.hvq-armed .hvq-price__amt,
.hvq-armed .hvq-price__per { opacity: 0; }
.hvq-armed .is-go .hvq-price__amt,
.hvq-armed .is-go .hvq-price__per {
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
  transition-delay: calc(var(--hvq-at, 0ms) + 220ms);
}

/* Armed (the script ran, motion allowed): spines wait unlit until their
   card rolls, then stand up one by one alongside the price. */
.hvq-armed .hvq-meter i { opacity: 0.25; transform: scaleY(0.4); }
.hvq-armed .is-go .hvq-meter i {
  opacity: 1;
  transform: none;
  transition: opacity 450ms var(--ease-out), transform 700ms var(--dv-spring);
  transition-delay: calc(var(--hvq-at, 0ms) + 300ms + var(--n, 0) * var(--hvq-step, 110ms));
}

/* Team lights up as its price lands: ring to full, glow blooms, badge pops. */
.hvq-armed .hvq-cell--hi .hvq-plan::before { opacity: 0.3; }
.hvq-armed .hvq-cell--hi::before { opacity: 0; transform: scale(0.85); }
.hvq-armed .hvq-cell--hi .hvq-badge { opacity: 0; transform: translateY(0.375rem) scale(0.7); }
.hvq-armed .hvq-cell--hi.is-go .hvq-plan::before {
  opacity: 1;
  transition: opacity 1000ms var(--ease-out) calc(var(--hvq-at, 0ms) + 800ms);
}
.hvq-armed .hvq-cell--hi.is-go::before {
  opacity: 1;
  transform: none;
  transition: opacity 1600ms var(--ease-out), transform 1800ms var(--ease-out);
  transition-delay: calc(var(--hvq-at, 0ms) + 700ms);
}
.hvq-armed .hvq-cell--hi.is-go .hvq-badge {
  opacity: 1;
  transform: none;
  transition: opacity 350ms ease, transform 700ms var(--dv-spring);
  transition-delay: calc(var(--hvq-at, 0ms) + 1400ms);
}

/* Desktop: the three cards fan in and settle flat, Team rising through the
   middle. Phones keep the plain rise from core. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .js .hvq-cell[data-dv]:not(.is-in) { transform: perspective(1600px) translate3d(0, 3.5rem, 0) scale(0.96); }
  .js .hvq-cell:first-child[data-dv]:not(.is-in) { transform: perspective(1600px) translate3d(1.5rem, 3rem, 0) rotateY(12deg); }
  .js .hvq-cell:last-child[data-dv]:not(.is-in) { transform: perspective(1600px) translate3d(-1.5rem, 3rem, 0) rotateY(-12deg); }
}

/* Included: each disc pops in, then its tick lands with a small twist,
   one after another. */
.js .hvq-incl .hvq-check { opacity: 0; transform: scale(0.5); }
.js .hvq-incl .hvq-check svg { opacity: 0; transform: scale(0.4) rotate(-30deg); }
.js .hvq-incl.is-in .hvq-check {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease, transform 600ms var(--dv-spring);
  transition-delay: calc(var(--i, 0) * 90ms + 350ms);
}
.js .hvq-incl.is-in .hvq-check svg {
  opacity: 1;
  transform: none;
  transition: opacity 250ms ease, transform 650ms var(--dv-spring);
  transition-delay: calc(var(--i, 0) * 90ms + 480ms);
}

/* Other work: the four kinds arrive one after another. */
.js .hvq-other__list li { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
.js .hvq-other.is-in .hvq-other__list li {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}

/* If the scripts never report in, everything shows. */
.reveal-all .hvq .hvq-check,
.reveal-all .hvq .hvq-check svg,
.reveal-all .hvq .hvq-other__list li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hvq-plan, .hvq-way { transform: none !important; transition: none !important; }
  .hvq-way__go { transition: none; }
  .hvq-way:hover .hvq-way__go { transform: none; }
  .js .hvq-incl .hvq-check,
  .js .hvq-incl .hvq-check svg,
  .js .hvq-other__list li { transform: none !important; transition: opacity 400ms ease !important; }
}


/* ==== faq ==== */
/* --------------------------------------------------------------------------
   FAQ (hvf-): eight questions in a quiet list with hairline dividers.
   Phones: the heading sits over the list. Desktop: the heading holds still
   on the left while the list scrolls past it on the right.
   -------------------------------------------------------------------------- */

/* The closing card follows on the same background and brings its own glow
   above it, so the list ends with a shorter beat than a full section gap. */
.hvf { padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }

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

.hvf-title { max-width: 9em; }

/* One divider over each row and one under the last. They draw in from the
   left as their rows arrive. */
.hvf-list { position: relative; }
.hvf-item { position: relative; }
.hvf-item::before,
.hvf-item:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
  pointer-events: none;
}
.hvf-item:last-child::after { top: auto; bottom: 0; }

/* Question row: the whole row is the target. */
.hvf-q {
  --hvf-pad: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3rem;
  padding-block: var(--hvf-pad);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hvf-q::-webkit-details-marker { display: none; }
.hvf-q::marker { content: ""; }
/* Focus hugs the question and its chevron rather than the whole padded
   row, so it never crosses an open answer tucked up beneath it. */
.hvf-q:focus-visible { outline: none; }
.hvf-q:focus-visible::after {
  content: "";
  position: absolute;
  inset: calc(var(--hvf-pad) - 0.5rem) -0.625rem calc(var(--hvf-pad) - 0.375rem);
  border-radius: 0.875rem;
  outline: 2px solid var(--accent);
  pointer-events: none;
}

.hvf-q__text {
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4375rem);
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* The chevron sits in a small disc that fills with ink while its answer is
   open, so the state reads at a glance down the list. */
.hvf-q__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  transition: background-color 300ms ease, color 300ms ease, transform 160ms var(--ease-out);
}
.hvf-q__icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hvf-item[open]:not(.is-closing) .hvf-q__icon { background: var(--ink); color: var(--bg); }
.hvf-item[open]:not(.is-closing) .hvf-q__icon svg { transform: rotate(-180deg); }
.hvf-q:active .hvf-q__icon { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) {
  .hvf-q:hover .hvf-q__icon { background: color-mix(in srgb, var(--ink) 11%, transparent); }
  .hvf-item[open]:not(.is-closing) .hvf-q:hover .hvf-q__icon { background: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
}

/* Answer. The wrapper is what the script animates; it clips while it grows.
   Open, it tucks up into the row's bottom padding so the answer sits with
   its question; the script animates that margin with the height. */
.hvf-a { overflow: hidden; }
.hvf-item[open] .hvf-a { margin-top: -0.75rem; }
.hvf-a__text {
  max-width: 38rem;
  padding: 0 0 clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 48rem) {
  .hvf-a__text { padding-right: 3.5rem; }
}

/* Entrance: rows rise in as they arrive, and rows that arrive together
   cascade. Armed by the script, so nothing hides if it never runs. */
.hvf.is-armed .hvf-item {
  transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: var(--hvf-d, 0ms);
}
.hvf.is-armed .hvf-item::before,
.hvf.is-armed .hvf-item:last-child::after {
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--hvf-d, 0ms) + 80ms);
}
.hvf.is-armed .hvf-item:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }
.hvf.is-armed .hvf-item:not(.is-in)::before,
.hvf.is-armed .hvf-item:not(.is-in):last-child::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .hvf.is-armed .hvf-item { transform: none !important; transition: opacity 400ms ease; transition-delay: 0ms; }
  .hvf.is-armed .hvf-item::before,
  .hvf.is-armed .hvf-item:last-child::after { transform: none !important; transition: none; }
  .hvf-q__icon, .hvf-q__icon svg { transition: none; }
  .hvf-q:active .hvf-q__icon { transform: none; }
}


/* ==== closing ==== */
/* --------------------------------------------------------------------------
   Closing (hvz-): one big card with light rising behind it.
   A single aurora is drawn twice, in step: once behind the card, where a
   feathered mask lets it spill past the edges as a halo, and once inside
   the card's glass, so the light reads as one source seen through it. Most
   of it sits low, like a horizon, so the words stay on a calm field, and a
   few motes of light rise out of it. Every loop runs on transform or
   opacity, and only while the section is on screen.
   -------------------------------------------------------------------------- */

.hvz {
  --hvz-by: 3.5rem;                       /* halo beyond the card, top and bottom */
  --hvz-bx: 1.25rem;                      /* and at the sides */
  --hvz-base: #ffffff;
  --hvz-halo: 0.5;
  --hvz-inner: 0.56;
  --hvz-c4: #32ade6;                      /* the cool counter-light */
  --hvz-sheen: rgba(255, 255, 255, 0.9);
  --hvz-sweep: rgba(255, 255, 255, 0.7);
  --hvz-mote: #ffffff;
  --hvz-mote-glow: rgba(255, 255, 255, 0.95);
  --hvz-rim-a: rgba(0, 0, 0, 0.04);
  --hvz-rim-b: rgba(0, 0, 0, 0.07);
  --hvz-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 30px 70px -36px rgba(30, 20, 90, 0.28);
  overflow: hidden;
  overflow: clip;
  padding-block: calc(var(--hvz-by) + 0.5rem) clamp(4.5rem, 2.5rem + 5vw, 8rem);
}
@media (min-width: 48rem) {
  .hvz { --hvz-by: 4.5rem; --hvz-bx: 3rem; }
}
@media (prefers-color-scheme: dark) {
  .hvz {
    --hvz-base: #060608;
    --hvz-halo: 0.7;
    --hvz-inner: 0.9;
    --hvz-c4: #40c4dc;
    --hvz-sheen: rgba(255, 255, 255, 0.07);
    --hvz-sweep: rgba(255, 255, 255, 0.11);
    --hvz-mote-glow: rgba(160, 200, 255, 0.85);
    --hvz-rim-a: rgba(255, 255, 255, 0.24);
    --hvz-rim-b: rgba(255, 255, 255, 0.07);
    --hvz-shadow: 0 30px 80px -36px rgba(0, 0, 0, 0.9);
  }
}

.hvz-stage {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 60%;
}

/* Aurora ------------------------------------------------------------------ */

.hvz-aurora {
  position: absolute;
  inset: calc(-1 * var(--hvz-by)) calc(-1 * var(--hvz-bx));
  pointer-events: none;
}
.hvz-aurora--halo {
  z-index: -1;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 var(--hvz-by), #000 calc(100% - var(--hvz-by)), transparent),
    linear-gradient(to right, transparent, #000 var(--hvz-bx), #000 calc(100% - var(--hvz-bx)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 var(--hvz-by), #000 calc(100% - var(--hvz-by)), transparent),
    linear-gradient(to right, transparent, #000 var(--hvz-bx), #000 calc(100% - var(--hvz-bx)), transparent);
  mask-composite: intersect;
}
.hvz-aurora--halo .hvz-blob { opacity: var(--hvz-halo); }
.hvz-aurora--inner .hvz-blob { opacity: var(--hvz-inner); }

/* Soft ellipses: three lights along the bottom, one cool light at the top
   left. The falloff is close to a Gaussian, so no blob shows an edge.
   Sizes are shares of the aurora box. */
.hvz-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 86%, transparent) 22%,
    color-mix(in srgb, var(--c) 52%, transparent) 46%,
    color-mix(in srgb, var(--c) 22%, transparent) 70%,
    color-mix(in srgb, var(--c) 7%, transparent) 86%,
    transparent 100%);
}
.hvz-blob--1 { --c: var(--sig-a);  left: -10%; bottom: -24%; width: 60%; height: 60%; }
.hvz-blob--2 { --c: var(--sig-b);  left: 28%;  bottom: -30%; width: 54%; height: 64%; }
.hvz-blob--3 { --c: color-mix(in srgb, var(--c-pink) 72%, var(--sig-b)); right: -10%; bottom: -24%; width: 40%; height: 56%; }
.hvz-blob--4 { --c: var(--hvz-c4); left: -10%; top: -30%; width: 42%; height: 60%; }
@media (max-width: 47.99rem) {
  .hvz-blob--1 { left: -50%; bottom: -14%; width: 112%; height: 46%; }
  .hvz-blob--2 { left: 6%;   bottom: -22%; width: 104%; height: 50%; }
  .hvz-blob--3 { right: -60%; bottom: -12%; width: 92%; height: 38%; }
  .hvz-blob--4 { left: -44%; top: -12%; width: 96%; height: 34%; }
}

.js .hvz-blob {
  animation: hvz-drift-1 19s ease-in-out infinite;
  animation-play-state: paused;
}
.js .hvz-blob--2 { animation-name: hvz-drift-2; animation-duration: 23s; animation-delay: -7s; }
.js .hvz-blob--3 { animation-name: hvz-drift-3; animation-duration: 29s; animation-delay: -12s; }
.js .hvz-blob--4 { animation-name: hvz-drift-4; animation-duration: 26s; animation-delay: -4s; }
.js .hvz.is-live .hvz-blob { animation-play-state: running; }

@keyframes hvz-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(22%, -6%) scale(1.12); }
  70% { transform: translate(8%, 6%) scale(0.92); }
}
@keyframes hvz-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-24%, 4%) scale(0.9); }
  72% { transform: translate(-8%, -8%) scale(1.14); }
}
@keyframes hvz-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-20%, -8%) scale(1.1); }
  65% { transform: translate(-30%, 4%) scale(0.94); }
}
@keyframes hvz-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(26%, 12%) scale(1.15); }
  75% { transform: translate(10%, -4%) scale(0.9); }
}

/* Card -------------------------------------------------------------------- */

.hvz-card {
  --hvz-pad: clamp(3.5rem, 2rem + 5vw, 7rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--hvz-pad) clamp(1.25rem, 0.25rem + 4vw, 5rem);
  border-radius: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--hvz-base);
  box-shadow: var(--hvz-shadow);
  text-align: center;
}
/* A gradient hairline, a touch brighter where the light comes from. */
.hvz-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--hvz-rim-a), var(--hvz-rim-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Glass: the inner aurora, a sheen across the top, and a band of light that
   crosses now and then. */
.hvz-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.hvz-glass::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(110% 48% at 50% 0%, var(--hvz-sheen), transparent 72%);
}
/* Motes: specks of light that rise out of the horizon and fade out under
   the last line. They keep to the card's bottom padding, so at no width do
   they pass behind a word. Each one is a full-height column, so
   translateY(-100%) carries its dot from the bottom of the band to the top. */
.hvz-motes {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--hvz-pad) - 0.75rem);
}
@media (max-width: 47.99rem) { .hvz-motes i:nth-child(even) { display: none; } }
.hvz-motes i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: var(--s);
  opacity: 0;
}
.hvz-motes i::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--hvz-mote);
  box-shadow: 0 0 0.375rem 0.0625rem var(--hvz-mote-glow);
}
.js .hvz-motes i {
  animation: hvz-rise var(--t) linear var(--d) infinite;
  animation-play-state: paused;
}
.js .hvz.is-live .hvz-motes i { animation-play-state: running; }
@keyframes hvz-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  20%, 55% { opacity: var(--o, 0.75); }
  90% { opacity: 0; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -100%); }
}

.hvz-sweep {
  position: absolute;
  z-index: 2;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--hvz-sweep) 50%, transparent);
  opacity: 0;
  transform: translateX(-150%) skewX(-16deg);
}
.js .hvz.is-live .hvz-sweep { animation: hvz-sweep 11s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite; }
@keyframes hvz-sweep {
  0% { opacity: 0; transform: translateX(-150%) skewX(-16deg); }
  4%, 24% { opacity: 1; }
  28%, 100% { opacity: 0; transform: translateX(420%) skewX(-16deg); }
}

/* Words ------------------------------------------------------------------- */

.hvz-body { position: relative; z-index: 1; }
.hvz-eyebrow { margin-bottom: 1.125rem; }
.hvz-title {
  max-width: 11.5em;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1rem + 4.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.014em;
}
.hvz-keep, .hvz-title .dv-grad { white-space: nowrap; }
.hvz-title .dv-grad { padding-right: 0.04em; }
.hvz-lead { max-width: 36rem; margin: 1.5rem auto 0; text-wrap: balance; }

.hvz-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}
@media (min-width: 40rem) {
  .hvz-ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem 1.75rem; }
}
.hvz-founder svg { width: 0.9em; height: 0.9em; }
@media (hover: hover) and (pointer: fine) {
  .hvz-founder:hover svg { transform: translate(2px, -2px); }
}

/* Full ink: this line sits nearest the light, and has to read on any part
   of it as the aurora drifts. */
.hvz-note {
  margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.004em;
  color: var(--ink);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .js .hvz-blob, .js .hvz.is-live .hvz-blob { animation: none; }
  .js .hvz.is-live .hvz-sweep, .js .hvz-motes i { animation: none; }
  .hvz-founder:hover svg { transform: none; }
}