/* =========================================================================
   Gladia DS — Product visuals (lot F)
   Source of truth: Pencil "Product visuals · Design system v1" (board t8I8O).
   Docs: patterns/product-visuals/INDEX.md, rules.md, patterns/*.md,
         patterns/components/product-visuals/*.md
   Loaded by css/ds/index.css (after the site CSS). Can also be linked alone.

   ONE MARKUP, ANY SCALE
   Every size below is a Pencil slide value (1920 × 1080) multiplied by
   --pv-u. Set the scale on the .pv-stage (or any ancestor):
     (default)         --pv-u: 1px      slide, deck, 1920 × 1080 export
     .pv-scale-web     --pv-u: 1px/1.33 web page (the board's ÷1.33 rule)
     .pv-fit > stage   stage fills its .pv-fit parent, proportions kept
     style="--pv-u:…"  any other frame (social glass frame, thumbnail)
   Page code never writes a px value: classes only, plus the unitless
   multipliers --pv-w (object width) and --pv-span (tree height).
   ========================================================================= */

@property --pv-u {
  syntax: '<length>';
  inherits: true;
  initial-value: 1px;
}

:root {
  /* ---- Surfaces (board › 01 Color › Surfaces) ---- */
  --pv-slide-bg: var(--color-neutral-1000, #000000);   /* behind everything */
  --pv-stage-bg: #050506;                               /* stage + dot grid 7 % */
  --pv-card-bg: #111113;                                /* every UI object */
  --pv-inset-bg: #0A0A0B;                               /* controls, tracks */
  --pv-result-bg: var(--color-neutral-0, #FFFFFF);      /* one per visual */
  --pv-chip-bg: rgba(0, 0, 0, 0.70);                    /* PV / Chip #000000B3 */
  --pv-badge-bg: rgba(255, 255, 255, 0.04);             /* PV / Badge #FFFFFF0A */
  --pv-selected-bg: rgba(0, 0, 0, 0.88);                /* PV / Selected item #000000E0 */
  --pv-toggle-off-bg: #2A2A2E;                          /* PV / Toggle off */

  /* ---- Text and lines (board › 01 Color › Text & lines) ---- */
  --pv-text-primary: var(--color-neutral-0, #FFFFFF);   /* titles, values */
  --pv-text-secondary: var(--color-neutral-400, #A3A3A3); /* body, rows */
  --pv-text-tertiary: var(--color-neutral-500, #727272);  /* meta, captions */
  --pv-text-inverse: var(--color-neutral-1000, #000000);  /* on the white result */
  --pv-icon-muted: rgba(255, 255, 255, 0.60);           /* source pill glyph #FFFFFF99 */
  --pv-hairline: rgba(255, 255, 255, 0.08);             /* borders 8 % */
  --pv-divider: rgba(255, 255, 255, 0.06);              /* inside cards 6 % */
  --pv-frame-line: rgba(255, 255, 255, 0.12);           /* icon frame #FFFFFF1F */
  --pv-connector-line: rgba(255, 255, 255, 0.35);       /* connector 1 px white 35 % */
  --pv-dot-grid: rgba(255, 255, 255, 0.07);             /* stage dot grid 7 % */
  --pv-flow-glow: rgba(255, 255, 255, 0.67);            /* flow dot glow #FFFFFFAA */

  /* ---- Meaning (board › 01 Color › Meaning) ---- */
  --pv-gladia: var(--color-purple-400, #947AFC);        /* zone, detected, routed */
  --pv-gladia-entity: var(--color-purple-200, #BEB4FF); /* entity chip text */
  --pv-gladia-zone-tint: rgba(148, 122, 252, 0.04);     /* zone 4 % */
  --pv-gladia-zone-line: rgba(148, 122, 252, 0.25);     /* zone border 25 % */
  --pv-gladia-tint: rgba(148, 122, 252, 0.08);          /* chips, badges 8 % (#947AFC14) */
  --pv-gladia-chip-line: rgba(148, 122, 252, 0.25);     /* entity chip #947AFC40 */
  --pv-gladia-badge-line: rgba(148, 122, 252, 0.20);    /* brand badge #947AFC33 */
  --pv-gladia-gradient: linear-gradient(245deg,
      #D4C4FF 0%, #A87CFF 18%, #947AFC 36%, #7C3AED 55%,
      #6D28D9 72%, #3B0764 88%, #947AFC 100%);          /* selected border */
  --pv-status: var(--color-green-500, #22C55E);         /* live, checks, connected */
  --pv-status-tint: rgba(34, 197, 94, 0.09);            /* status live #22C55E17 */
  --pv-status-line: rgba(34, 197, 94, 0.15);            /* status live #22C55E26 */
  --pv-data-blue: #3B82F6;                              /* category dot / icon only */
  --pv-data-orange: var(--color-orange-500, #FF630F);   /* category dot / icon only */
  --pv-data-amber: #F59E0B;                             /* category dot / icon only */

  /* ---- Slide frame (shared geometry with the partner deck, board VzpxA) ---- */
  --pv-slide-rule: var(--color-neutral-700, #252525);

  /* ---- Families ---- */
  --pv-font-sans: var(--font-sans, 'Suisse Intl', sans-serif);
  --pv-font-mono: var(--font-mono, 'Geist Mono', monospace);
}

/* =========================================================================
   Scale
   ========================================================================= */
.pv-scale-web   { --pv-u: calc(1px / 1.33); }
.pv-fit         { container-type: inline-size; width: 100%; }
.pv-fit > .pv-stage { --pv-u: calc(100cqw / 1680); }

/* =========================================================================
   Type roles — .pv-type-<role> (board › 02 Type, sizes at slide scale)
   ========================================================================= */
.pv-type-card-title { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(17 * var(--pv-u)); line-height: 1.3; color: var(--pv-text-primary); }
.pv-type-pill       { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(18 * var(--pv-u)); line-height: 1.2; }
.pv-type-row        { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(15 * var(--pv-u)); line-height: 1.35; color: var(--pv-text-secondary); }
.pv-type-row-l      { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(16 * var(--pv-u)); line-height: 1.35; color: var(--pv-text-secondary); }
.pv-type-control    { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(15 * var(--pv-u)); line-height: 1.2; }
.pv-type-chip       { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(14 * var(--pv-u)); line-height: 1.2; color: var(--pv-text-secondary); }
.pv-type-transcript { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(17 * var(--pv-u)); line-height: 1.45; color: var(--pv-text-primary); }
.pv-type-stat       { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(44 * var(--pv-u)); line-height: 1.1; letter-spacing: -0.02em; color: var(--pv-text-primary); }
.pv-type-stat-note  { font-family: var(--pv-font-sans); font-weight: 400; font-size: calc(14 * var(--pv-u)); line-height: 1.4; color: var(--pv-text-secondary); }
.pv-type-caption    { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(15 * var(--pv-u)); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv-text-tertiary); }
.pv-type-eyebrow    { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(15 * var(--pv-u)); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv-gladia); }
.pv-type-meta       { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(13 * var(--pv-u)); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.pv-type-badge      { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(12 * var(--pv-u)); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.pv-type-label      { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(12 * var(--pv-u)); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv-text-tertiary); }
.pv-type-entity     { font-family: var(--pv-font-mono); font-weight: 400; font-size: calc(13 * var(--pv-u)); line-height: 1.2; color: var(--pv-gladia-entity); }

/* =========================================================================
   Icons — inline SVG from /icons/ (filled), currentColor only (PV-13, PV-14)
   ========================================================================= */
.pv-icon {
  display: block;
  flex: 0 0 auto;
  width: calc(18 * var(--pv-u));
  height: calc(18 * var(--pv-u));
  color: inherit;
}
.pv-icon [fill]:not([fill="none"]) { fill: currentColor; }
.pv-icon--20 { width: calc(20 * var(--pv-u)); height: calc(20 * var(--pv-u)); }
.pv-icon--16 { width: calc(16 * var(--pv-u)); height: calc(16 * var(--pv-u)); }
.pv-icon--14 { width: calc(14 * var(--pv-u)); height: calc(14 * var(--pv-u)); }
.pv-icon--13 { width: calc(13 * var(--pv-u)); height: calc(13 * var(--pv-u)); }
.pv-icon--gladia { color: var(--pv-gladia); }
.pv-icon--status { color: var(--pv-status); }
.pv-icon--muted  { color: var(--pv-icon-muted); }
.pv-icon--grey   { color: var(--pv-text-secondary); }
.pv-icon--data-blue   { color: var(--pv-data-blue); }
.pv-icon--data-orange { color: var(--pv-data-orange); }
.pv-icon--data-amber  { color: var(--pv-data-amber); }

/* Category dot — the only place data hues appear besides icons (PV-11) */
.pv-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: calc(7 * var(--pv-u));
  height: calc(7 * var(--pv-u));
  border-radius: 50%;
  background: var(--pv-text-tertiary);
}
.pv-dot--blue   { background: var(--pv-data-blue); }
.pv-dot--orange { background: var(--pv-data-orange); }
.pv-dot--amber  { background: var(--pv-data-amber); }

/* =========================================================================
   A · Stage — 1680 × 454, radius 32, hairline 8 %, dot grid, edge fade 64
   ========================================================================= */
.pv-stage {
  /* inner rhythm shared by columns, connectors and the zone */
  --pv-head: calc(56 * var(--pv-u));   /* zone eyebrow band */
  --pv-foot: calc(20 * var(--pv-u));   /* zone bottom padding */
  --pv-band: calc(34 * var(--pv-u));   /* caption line 18 + caption gap 16 */

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: calc(1680 * var(--pv-u));
  height: calc(454 * var(--pv-u));
  padding: calc(28 * var(--pv-u)) calc(48 * var(--pv-u)) calc(24 * var(--pv-u));
  background: var(--pv-stage-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(32 * var(--pv-u));
  overflow: hidden;
  font-family: var(--pv-font-sans);
  font-weight: 400;
  color: var(--pv-text-primary);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pv-stage *, .pv-stage *::before, .pv-stage *::after { box-sizing: border-box; }
/* No Gladia zone wrapper (configuration panel, live scenario): no eyebrow band to align with */
.pv-stage:not(:has(> .pv-gladia-zone)) { --pv-head: calc(20 * var(--pv-u)); }
.pv-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at center,
      var(--pv-dot-grid) calc(1.5 * var(--pv-u)),
      transparent calc(1.5 * var(--pv-u) + 0.5px));
  background-size: calc(20 * var(--pv-u)) calc(16 * var(--pv-u));
  background-position: center;
  -webkit-mask-image:
      linear-gradient(to right, transparent, black calc(64 * var(--pv-u)), black calc(100% - 64 * var(--pv-u)), transparent),
      linear-gradient(to bottom, transparent, black calc(64 * var(--pv-u)), black calc(100% - 64 * var(--pv-u)), transparent);
  -webkit-mask-composite: source-in;
          mask-image:
      linear-gradient(to right, transparent, black calc(64 * var(--pv-u)), black calc(100% - 64 * var(--pv-u)), transparent),
      linear-gradient(to bottom, transparent, black calc(64 * var(--pv-u)), black calc(100% - 64 * var(--pv-u)), transparent);
          mask-composite: intersect;
}
/* Panel layout (configuration-panel): columns side by side, 40 gaps, no connectors */
.pv-stage--panel { column-gap: calc(40 * var(--pv-u)); }
/* Bare: inside a frame that already is a dark screen (social glass frame) */
.pv-stage--bare { background: transparent; border: 0; border-radius: 0; }
.pv-stage--bare::before { display: none; }

/* =========================================================================
   B · Columns — object centred vertically, caption on one baseline
   ========================================================================= */
.pv-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  padding-top: var(--pv-head);
  padding-bottom: var(--pv-foot);
}
.pv-col__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--pv-u));        /* stack of cards 10–14 */
  width: 100%;
}
.pv-col > .pv-caption { margin-top: calc(16 * var(--pv-u)); }

/* Z · Gladia zone — wraps only the steps Gladia performs */
.pv-gladia-zone {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  padding: var(--pv-head) calc(24 * var(--pv-u)) var(--pv-foot);
  background: var(--pv-gladia-zone-tint);
  border: 1px solid var(--pv-gladia-zone-line);
  border-radius: calc(24 * var(--pv-u));
}
.pv-gladia-zone > .pv-gladia-eyebrow {
  position: absolute;
  top: calc(20 * var(--pv-u));
  left: calc(24 * var(--pv-u));
}
.pv-gladia-zone > .pv-col { padding-top: 0; padding-bottom: 0; }
.pv-gladia-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--pv-u));
  font-family: var(--pv-font-mono);
  font-weight: 400;
  font-size: calc(15 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pv-gladia);
  white-space: nowrap;
}
.pv-gladia-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: calc(16 * var(--pv-u));
  height: calc(5 * var(--pv-u));
  border-radius: 9999px;
  background: var(--pv-gladia);
}
/* Inline zone: the detected band at the foot of a live-object card */
.pv-gladia-zone--inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--pv-u));
  padding: calc(14 * var(--pv-u)) calc(20 * var(--pv-u)) calc(16 * var(--pv-u));
  background: var(--pv-gladia-tint);
  border: 0;
  border-top: 1px solid var(--pv-gladia-chip-line);
  border-radius: 0;
}
.pv-gladia-zone--inline > .pv-gladia-eyebrow {
  position: static;
  font-size: calc(12 * var(--pv-u));
  gap: calc(10 * var(--pv-u));
}
.pv-gladia-zone--inline > .pv-gladia-eyebrow::before { width: calc(12 * var(--pv-u)); height: calc(4 * var(--pv-u)); }
.pv-gladia-zone--inline > .pv-card__chips { padding: 0; }

/* =========================================================================
   C · Connectors — 40 px line + glowing flow dot, no arrowheads
   ========================================================================= */
.pv-connector {
  --pv-c-head: var(--pv-head);
  --pv-c-foot: calc(var(--pv-foot) + var(--pv-band));
  --pv-c-y: calc(50% + (var(--pv-c-head) - var(--pv-c-foot)) / 2);
  position: relative;
  z-index: 1;
  flex: 0 0 calc(40 * var(--pv-u));
  width: calc(40 * var(--pv-u));
  align-self: stretch;
}
.pv-gladia-zone > .pv-connector { --pv-c-head: 0px; --pv-c-foot: var(--pv-band); }
.pv-connector::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pv-c-y);
  height: 1px;
  background: var(--pv-connector-line);
}
.pv-connector::after {
  content: "";
  position: absolute;
  left: calc(50% - 3 * var(--pv-u));
  top: calc(var(--pv-c-y) - 3 * var(--pv-u) + 0.5px);
  width: calc(6 * var(--pv-u));
  height: calc(6 * var(--pv-u));
  border-radius: 50%;
  background: var(--pv-text-primary);
  box-shadow: 0 0 calc(10 * var(--pv-u)) var(--pv-flow-glow);
}
.pv-connector--still::after { display: none; }

/* Merge tree — sources merge with a 12 px-radius tree.
   --pv-span = distance between the outer branch centres, in slide px
   (3 source pills 48 + gap 12 → 120; 2 pills → 60). */
.pv-connector--merge,
.pv-connector--split { --pv-span: 120; }
.pv-connector--merge::before,
.pv-connector--split::before {
  left: 0;
  right: auto;
  top: calc(var(--pv-c-y) - var(--pv-span) * var(--pv-u) / 2);
  width: 50%;
  height: calc(var(--pv-span) * var(--pv-u) + 1px);
  background: transparent;
  border: 1px solid var(--pv-connector-line);
  border-left: 0;
  border-radius: 0 calc(12 * var(--pv-u)) calc(12 * var(--pv-u)) 0;
}
.pv-connector--merge::after,
.pv-connector--split::after {
  left: calc(75% - 3 * var(--pv-u));
}
.pv-connector--merge > .pv-connector__trunk,
.pv-connector--split > .pv-connector__trunk {
  position: absolute;
  left: 50%;
  right: 0;
  top: var(--pv-c-y);
  height: 1px;
  background: var(--pv-connector-line);
}
.pv-connector__trunk--through { left: 0 !important; }   /* 3 branches: middle branch runs through */
.pv-connector--split { transform: scaleX(-1); }

/* =========================================================================
   D · Caption — number + verb, mono, on one baseline
   ========================================================================= */
.pv-caption {
  display: block;
  font-family: var(--pv-font-mono);
  font-weight: 400;
  font-size: calc(15 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: pre;           /* keeps the two spaces of "01  Capture" */
  color: var(--pv-text-tertiary);
}

/* =========================================================================
   UI objects
   ========================================================================= */

/* Card — every UI object sits on the card surface, radius 12, hairline, one shadow */
.pv-card {
  --pv-w: 360;
  display: flex;
  flex-direction: column;
  width: calc(var(--pv-w) * var(--pv-u));
  background: var(--pv-card-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(12 * var(--pv-u));
  box-shadow: 0 0 calc(43 * var(--pv-u)) rgba(0, 0, 0, 0.80);
  overflow: hidden;
}
.pv-card__body {
  display: flex;
  flex-direction: column;
  padding: calc(6 * var(--pv-u)) calc(20 * var(--pv-u)) calc(8 * var(--pv-u));
}
.pv-card__body--loose { gap: calc(14 * var(--pv-u)); padding-top: calc(16 * var(--pv-u)); padding-bottom: calc(18 * var(--pv-u)); }
.pv-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--pv-u));
  padding: calc(14 * var(--pv-u)) calc(20 * var(--pv-u)) calc(16 * var(--pv-u));
}

/* Card header — icon 18 + title 17 + optional meta */
.pv-card-header {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pv-u));
  padding: calc(16 * var(--pv-u)) calc(20 * var(--pv-u));
  border-bottom: 1px solid var(--pv-divider);
}
.pv-card-header:last-child { border-bottom: 0; }
.pv-card-header__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(17 * var(--pv-u));
  line-height: 1.3;
  color: var(--pv-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-card-header__meta {
  flex: 0 0 auto;
  font-family: var(--pv-font-mono);
  font-size: calc(13 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pv-text-tertiary);
  white-space: nowrap;
}
.pv-card-header__meta--gladia { color: var(--pv-gladia); }

/* Row — checklist line (max 4 per card); control on the right */
.pv-row-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--pv-u));
  padding: calc(12 * var(--pv-u)) 0;
  font-size: calc(15 * var(--pv-u));
  line-height: 1.35;
  color: var(--pv-text-secondary);
}
.pv-row-check > .pv-icon { width: calc(13 * var(--pv-u)); height: calc(13 * var(--pv-u)); color: var(--pv-status); }
.pv-row-check--l { font-size: calc(16 * var(--pv-u)); padding: calc(13 * var(--pv-u)) 0; }

/* Chip — neutral attribute: language, channel, mode */
.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pv-u));
  padding: calc(5 * var(--pv-u)) calc(10 * var(--pv-u));
  background: var(--pv-chip-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(8 * var(--pv-u));
  font-size: calc(14 * var(--pv-u));
  line-height: 1.2;
  color: var(--pv-text-secondary);
  white-space: nowrap;
}

/* Chip · entity — what Gladia detected. Mono, purple */
.pv-chip-entity {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--pv-u));
  padding: calc(5 * var(--pv-u)) calc(10 * var(--pv-u));
  background: var(--pv-gladia-tint);
  border: 1px solid var(--pv-gladia-chip-line);
  border-radius: calc(8 * var(--pv-u));
  font-family: var(--pv-font-mono);
  font-size: calc(13 * var(--pv-u));
  line-height: 1.2;
  color: var(--pv-gladia-entity);
  white-space: nowrap;
}
.pv-chip-entity__key { text-transform: uppercase; }

/* Badge — neutral state; Badge · brand — Gladia's choice or output */
.pv-badge,
.pv-badge-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: calc(4 * var(--pv-u)) calc(10 * var(--pv-u));
  border-radius: 999px;
  font-family: var(--pv-font-mono);
  font-size: calc(12 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pv-badge {
  background: var(--pv-badge-bg);
  border: 1px solid var(--pv-hairline);
  color: var(--pv-text-tertiary);
}
.pv-badge-brand {
  background: var(--pv-gladia-tint);
  border: 1px solid var(--pv-gladia-badge-line);
  color: var(--pv-gladia);
}

/* Status pill — the end state, once per visual, green */
.pv-status-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--pv-u));
  padding: calc(10 * var(--pv-u)) calc(20 * var(--pv-u));
  background: var(--pv-status);
  border-radius: 9999px;
  font-size: calc(15 * var(--pv-u));
  line-height: 1.2;
  color: var(--pv-text-primary);
  white-space: nowrap;
}
.pv-status-pill > .pv-icon { width: calc(14 * var(--pv-u)); height: calc(14 * var(--pv-u)); color: var(--pv-text-primary); }

/* Status · live — header meta for real-time objects */
.pv-status-live {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: calc(6 * var(--pv-u));
  padding: calc(4 * var(--pv-u)) calc(10 * var(--pv-u));
  background: var(--pv-status-tint);
  border: 1px solid var(--pv-status-line);
  border-radius: calc(20 * var(--pv-u));
  font-family: var(--pv-font-mono);
  font-size: calc(12 * var(--pv-u));
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pv-status);
  white-space: nowrap;
}
.pv-status-live::before {
  content: "";
  width: calc(7 * var(--pv-u));
  height: calc(7 * var(--pv-u));
  border-radius: 50%;
  background: var(--pv-status);
}

/* Toggle — on = purple, off = grey */
.pv-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: calc(40 * var(--pv-u));
  height: calc(22 * var(--pv-u));
  padding: calc(3 * var(--pv-u));
  background: var(--pv-toggle-off-bg);
  border-radius: 999px;
}
.pv-toggle::before {
  content: "";
  width: calc(16 * var(--pv-u));
  height: calc(16 * var(--pv-u));
  border-radius: 50%;
  background: var(--pv-text-tertiary);
}
.pv-toggle--on { justify-content: flex-end; background: var(--pv-gladia); }
.pv-toggle--on::before { background: var(--pv-text-primary); }

/* Segmented control — a choice among 2–3 options; selected = white */
.pv-segmented {
  --pv-w: 340;
  display: flex;
  width: calc(var(--pv-w) * var(--pv-u));
  max-width: 100%;
  padding: calc(4 * var(--pv-u));
  background: var(--pv-inset-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(10 * var(--pv-u));
}
.pv-segmented__option {
  flex: 1 1 0;
  padding: calc(9 * var(--pv-u)) 0;
  border-radius: calc(8 * var(--pv-u));
  font-size: calc(15 * var(--pv-u));
  line-height: 1.2;
  text-align: center;
  color: var(--pv-text-secondary);
  white-space: nowrap;
}
.pv-segmented__option--selected { background: var(--pv-result-bg); color: var(--pv-text-inverse); }

/* Icon frame — introduces a list item or module */
.pv-icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(36 * var(--pv-u));
  height: calc(36 * var(--pv-u));
  border: 1px solid var(--pv-frame-line);
  border-radius: calc(10 * var(--pv-u));
  color: var(--pv-text-primary);
}

/* Source pill — inputs: microphone, phone call, video… */
.pv-source-pill {
  --pv-w: 186;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--pv-u));
  min-width: calc(var(--pv-w) * var(--pv-u));
  height: calc(48 * var(--pv-u));
  padding: 0 calc(18 * var(--pv-u));
  background: var(--pv-card-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(12 * var(--pv-u));
  box-shadow: 0 0 calc(43 * var(--pv-u)) rgba(0, 0, 0, 0.80);
  font-size: calc(18 * var(--pv-u));
  line-height: 1.2;
  color: var(--pv-text-primary);
  white-space: nowrap;
}
.pv-source-pill > .pv-icon { width: calc(20 * var(--pv-u)); height: calc(20 * var(--pv-u)); color: var(--pv-icon-muted); }

/* Result pill — the one white object: what the step produces */
.pv-result-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--pv-u));
  height: calc(52 * var(--pv-u));
  padding: 0 calc(18 * var(--pv-u));
  background: var(--pv-result-bg);
  border-radius: calc(12 * var(--pv-u));
  box-shadow: 0 0 calc(43 * var(--pv-u)) rgba(0, 0, 0, 0.80);
  font-size: calc(18 * var(--pv-u));
  line-height: 1.2;
  color: var(--pv-text-inverse);
  white-space: nowrap;
}
.pv-result-pill > .pv-icon { width: calc(20 * var(--pv-u)); height: calc(20 * var(--pv-u)); color: var(--pv-text-inverse); }

/* Selected item — the option Gladia picked; gradient border.
   Idle siblings share the geometry on the card surface. */
.pv-selected-item {
  --pv-w: 380;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pv-u));
  width: calc(var(--pv-w) * var(--pv-u));
  height: calc(56 * var(--pv-u));
  padding: 0 calc(20 * var(--pv-u));
  border: 1px solid transparent;
  border-radius: calc(12 * var(--pv-u));
  background:
      linear-gradient(var(--pv-selected-bg), var(--pv-selected-bg)) padding-box,
      linear-gradient(var(--pv-stage-bg), var(--pv-stage-bg)) padding-box,
      var(--pv-gladia-gradient) border-box;
  box-shadow: 0 0 calc(43 * var(--pv-u)) rgba(0, 0, 0, 0.80);
  color: var(--pv-text-primary);
}
.pv-selected-item__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(17 * var(--pv-u));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-selected-item--idle {
  background: var(--pv-card-bg);
  border-color: var(--pv-hairline);
}
.pv-selected-item--idle > .pv-selected-item__label { color: var(--pv-text-secondary); }
.pv-selected-item--idle > .pv-icon { color: var(--pv-text-tertiary); }

/* Transcript line — one sample line, two max */
.pv-transcript-line {
  --pv-w: 400;
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--pv-u));
  width: calc(var(--pv-w) * var(--pv-u));
  max-width: 100%;
  padding: calc(8 * var(--pv-u)) 0;
}
.pv-transcript-line__speaker {
  flex: 0 0 calc(64 * var(--pv-u));
  font-family: var(--pv-font-mono);
  font-size: calc(12 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pv-text-tertiary);
}
.pv-transcript-line__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(17 * var(--pv-u));
  line-height: 1.45;
  color: var(--pv-text-primary);
}

/* Stat card — a single proof number, sourced */
.pv-stat-card {
  --pv-w: 300;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pv-u));
  width: calc(var(--pv-w) * var(--pv-u));
  padding: calc(20 * var(--pv-u)) calc(22 * var(--pv-u));
  background: var(--pv-card-bg);
  border: 1px solid var(--pv-hairline);
  border-radius: calc(12 * var(--pv-u));
  box-shadow: 0 0 calc(43 * var(--pv-u)) rgba(0, 0, 0, 0.80);
}
.pv-stat-card__label {
  font-family: var(--pv-font-mono);
  font-size: calc(12 * var(--pv-u));
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pv-text-tertiary);
}
.pv-stat-card__value {
  font-size: calc(44 * var(--pv-u));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pv-text-primary);
}
.pv-stat-card__note {
  font-size: calc(14 * var(--pv-u));
  line-height: 1.4;
  color: var(--pv-text-secondary);
}

/* Stack — cards or pills stacked inside one column, 10–14 apart */
.pv-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 * var(--pv-u));
}
.pv-stack--center { align-items: center; }

/* =========================================================================
   Standalone slide — 1920 × 1080, 120 margins, stage at y 430 → 884
   Geometry shared with the partner deck (board VzpxA): header y 96,
   title y 192, footer rule y 930.
   ========================================================================= */
.pv-slide {
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--pv-slide-bg);
  color: var(--pv-text-primary);
  font-family: var(--pv-font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  --pv-u: 1px;
}
.pv-slide__header {
  position: absolute;
  top: 96px;
  left: 120px;
  right: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pv-slide__symbol { width: 40px; height: 40px; color: var(--pv-text-primary); }
.pv-slide__symbol svg { display: block; width: 100%; height: 100%; }
.pv-slide__tag {
  font-family: var(--pv-font-mono);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pv-text-secondary);
}
.pv-slide__copy {
  position: absolute;
  top: 192px;
  left: 120px;
  width: 1500px;
}
.pv-slide__title {
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.023em;
  color: var(--pv-text-primary);
  text-wrap: balance;
}
.pv-slide__lead {
  margin: 24px 0 0;
  max-width: 1440px;
  font-size: 28px;
  line-height: 1.4;
  color: var(--pv-text-secondary);
}
.pv-slide > .pv-stage {
  position: absolute;
  top: 430px;
  left: 120px;
}
.pv-slide__footer {
  position: absolute;
  top: 930px;
  left: 120px;
  right: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--pv-slide-rule);
  font-size: 20px;
  line-height: 1.4;
  color: var(--pv-text-secondary);
}
.pv-slide__page {
  font-family: var(--pv-font-mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================================
   Web — responsive stacking for page embeds (.pv-stage--responsive)
   Under 768 px the story reads top to bottom: columns stack, connectors
   turn vertical, the zone wraps its steps as a block. Captions stay.
   ========================================================================= */
@media (max-width: 767px) {
  .pv-stage.pv-stage--responsive {
    --pv-u: calc(1px / 1.33);
    --pv-head: calc(48 * var(--pv-u));
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: calc(28 * var(--pv-u)) calc(20 * var(--pv-u));
  }
  .pv-stage--responsive.pv-stage--panel { row-gap: calc(32 * var(--pv-u)); }
  .pv-stage--responsive .pv-col { padding-top: 0; padding-bottom: 0; max-width: 100%; }
  .pv-stage--responsive .pv-gladia-zone {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--pv-head) calc(16 * var(--pv-u)) var(--pv-foot);
  }
  .pv-stage--responsive .pv-connector {
    --pv-c-y: 50%;
    flex: 0 0 calc(40 * var(--pv-u));
    width: 1px;
    height: calc(40 * var(--pv-u));
    align-self: center;
  }
  .pv-stage--responsive .pv-connector::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; border: 0; border-radius: 0; background: var(--pv-connector-line); }
  .pv-stage--responsive .pv-connector::after { left: calc(0.5px - 3 * var(--pv-u)); top: calc(50% - 3 * var(--pv-u)); }
  .pv-stage--responsive .pv-connector > .pv-connector__trunk { display: none; }
  .pv-stage--responsive .pv-connector--split { transform: none; }
  .pv-stage--responsive .pv-card,
  .pv-stage--responsive .pv-selected-item,
  .pv-stage--responsive .pv-stat-card { max-width: 100%; }
}