/* Superbot Business: the hidden landing page (public/business.html).
 *
 * Sits on top of /assets/styles.css and takes its tokens. Look plan, and
 * nothing else:
 *   palette: ink #05070f (the black bands, headline ink on light), paper
 *     #ffffff (the card, the field), off-white #f6f7f9 (light sections, and
 *     text on black; small text on black is its 62% tint), graphite #3f3f46
 *     (body on light), fog #e4e4e7 (hairlines on light). Ink and off-white
 *     are the site's own --ink and --text; black #000000 (--ground) is the
 *     dark relay windows.
 *   accent: the site blue #3b6ef6 (--field), only on primary pills (the
 *     page's and the relay windows'), the on-switches, the focus ring, and
 *     at most one data figure per section (your spend's Saved). Never
 *     decorative.
 *   type: Inter 500 with ss01 + cv11 (the site's body setting) and negative
 *     tracking from 22px up; JetBrains Mono, tracked, for the section labels
 *     and the domain field, untracked for every figure in a relay window.
 *   radii: 6px (screens, the card, windows, panels) and the pill (buttons,
 *     the field, the switches, chips, meters). 50% on avatars and dots only.
 *   the one bold thing, per section: one relay window that overlaps a second
 *     surface (your view: two Relay Team screens overlapping). Windows beside
 *     copy (02, 04) keep the page's gutter, their whole frame in view.
 * Hairline-bordered surfaces, no resting shadow, no gradient, one entrance
 * (none): the only motion is a switch thumb sliding 160ms. */

.biz {
  --paper: #ffffff;
  --graphite: #3f3f46;
  --fog: #e4e4e7;
  /* the one tenant rail colour: the hero preview's rail and the capture rails all read
     it, so they cannot drift apart. Idle it is the app's own navy (the baked captures'
     rail pixel); a brand swaps in its own colour, darkened for the text (brand application) */
  --brand-rail: #0d2141;

  /* derived tints, all from the colours above */
  --graphite-2: color-mix(in srgb, var(--graphite) 78%, var(--paper));   /* placeholder, 6:1 on paper */
  --switch-off: color-mix(in srgb, var(--graphite) 62%, var(--paper));   /* an outlined off switch, 3:1 on paper */

  --b-label: 160px;
  /* the drawn size of two controls whose real box is the touch target (--target):
     a switch's outlined track, and a brand swatch's disc */
  --sw-w: 52px;
  --sw-h: 30px;
  --sw-thumb: 20px;
  --dot: 26px;
  background: var(--ink);
  color: var(--text);
}

/* a visually hidden label: the field has no visible one, the placeholder is not a label */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- the nav, on paper for this page ----------
   Same cells, same markup as every page; only the field behind them moves
   from blue to paper so the light hero starts at the top edge. */
.biz .site-header { background: var(--paper); color: var(--ink); }
.biz .nav a.cell:hover { background: var(--ink); color: var(--text); }
.biz .nav a.cell:active { background: var(--ink); color: var(--text); }

/* the shared ring is 2px blue with a 6px corner; pills keep their own corner */
.biz .btn:focus-visible,
.biz .domain:focus-within,
.biz .domain-go:focus-visible { border-radius: var(--r-pill); }
.biz .domain-input:focus-visible { outline: 2px solid transparent; }
/* a switch and a swatch are a touch box with their drawn shape inside it: the ring
   hugs the shape (the ::before), not the box */
.biz .sw:focus-visible,
.biz .pv-swatch:focus-visible { outline: 2px solid transparent; }
.biz .sw:focus-visible::before,
.biz .pv-swatch:focus-visible::before { outline: 2px solid var(--field); outline-offset: 3px; }
body[data-branded="true"] .sw:focus-visible::before,
body[data-branded="true"] .pv-swatch:focus-visible::before { outline-color: var(--brand-text); }

/* ---------- buttons ---------- */
.biz .btn {
  min-height: 56px;
  padding: 0 var(--s6);
  font-size: var(--t-lead);
  letter-spacing: -0.02em;
}
/* the one primary: the visitor's brand once a domain resolves, under the ink or
   off-white that reads on it; the site blue under ink until then */
.biz .btn-primary { background: var(--brand, var(--field)); border-color: var(--brand, var(--field)); color: var(--brand-ink, var(--ink)); }
.biz .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--text); }
.biz .btn-primary:active { background: var(--ink); border-color: var(--ink); color: var(--text); }
/* on black: an outlined off-white pill that fills on hover */
.biz .btn-ghost { color: var(--text); border-color: var(--text); }
.biz .btn-ghost:hover { background: var(--text); color: var(--ink); }
.biz .btn-ghost:active { background: var(--text); color: var(--ink); }

/* ---------- light hero ----------
   The nav's hairline cells carry on down: a rule at each margin and one between
   the columns, nav to black band. Content keeps the nav's edge (the copy starts
   under the ezo labs mark, the window ends under contact). Rows are the top pad,
   the window, its settings bar, the caption with the demo pill, and the bottom pad;
   the copy spans the window and the bar, so the lockup meets the window's top edge,
   the domain field meets the bar's bottom edge, and the window grows to match. */
.b-hero {
  --cell: clamp(var(--s5), calc(var(--edge) / 2), var(--s8));   /* margin rule to content */
  --split: clamp(var(--s6), 4 * var(--vw), var(--s8));                     /* centre rule to content */
  --h1: clamp(40px, 4.4 * var(--vw), 72px);
  /* the field is the headline's measure: "your agents." is ~4.95em wide */
  --act-w: min(100%, max(18rem, calc(var(--h1) * 4.95)));
  background: var(--text);
  color: var(--ink);
}
/* the margin rules are the grid's own border, the margin outside it and the padding
   inside it, so they span every row */
.b-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  grid-template-rows: var(--s9) 1fr auto auto var(--s9);
  margin-inline: calc(var(--edge) - var(--cell) - 1px) calc(var(--edge-r) - var(--cell) - 1px);
  padding-inline: var(--cell);
  border-inline: 1px solid var(--ink);
}
.b-hero-grid > * { min-width: 0; }
.b-hero-copy {
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  padding-right: var(--split);
}
.b-hero-side {
  grid-column: 2;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding-left: var(--split);
  border-left: 1px solid var(--ink);
}
.b-hero-side > .pv-figure { grid-row: 2; }
.b-hero-side > .pv-toolbar { grid-row: 3; }
.b-hero-side > .b-hero-foot { grid-row: 4; }

/* the field: the headline's width, its bottom on the bar's line */
.b-hero-act {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: auto;
}
.b-hero-act .domain { width: var(--act-w); }

/* under the window: what it shows, then the way to get it, at the field's height */
.b-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s4);
}
.b-hero-foot .pv-caption { flex: 1 1 16rem; }
.b-hero .btn { min-height: 48px; }

.lockup {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0;
  min-height: 48px;
  white-space: nowrap;
}
.lockup-mark { width: 44px; height: 44px; flex: none; fill: var(--ink); }
.lockup-name {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.lockup-rule { width: 1px; height: 36px; background: var(--ink); opacity: 0.4; }
.lockup-kind {
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--graphite);
}
.lockup-by {
  margin: var(--s2) 0 0;
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  color: var(--graphite);
}

.b-hero h1 {
  margin: var(--s6) 0 var(--s7);
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: -0.04em;
}
.b-hero h1 .l { display: block; white-space: nowrap; }

/* the domain field: the hero element. A pill with a mono value and a black round
   button; typing a domain repaints the window beside it (business.js), and with no
   JS the form still opens a mailto. */
.pv-label {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--graphite);
}
.domain {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 3px 3px 3px var(--s5);
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
}
.domain:focus-within { outline: 2px solid var(--field); outline-offset: 3px; }
.domain-input {
  flex: 1;
  min-width: 0;
  min-height: var(--target);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.domain-input::placeholder { color: var(--graphite-2); opacity: 1; }
.domain-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--quick) ease-out;
}
.domain-go:hover { background: var(--graphite); }
.domain-go:active { background: var(--graphite); }
.domain-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
}
.domain[data-loading="true"] .domain-arrow { display: none; }
.domain[data-loading="true"] .domain-spinner { display: block; animation: pv-spin 700ms linear infinite; /* deliberate */ }
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* the client preview: a framed window, its settings bar docked under it; the window
   fills its row, so it stretches when the copy beside it runs taller */
.shot {
  display: grid;
  margin: 0;
  border: 1px solid var(--fog);
  border-radius: var(--r-frame) var(--r-frame) 0 0;
  overflow: hidden;
  background: var(--paper);
}

/* ---------- the coded preview window ----------
   A faithful superbot desktop home screen, not a capture, drawn as ONE fixed canvas:
   the app's own 1280x800 window (the static hub-home.webp it replaces), every length
   in the app's native pixels times --u, one app pixel at the current width. The
   figure is the size container, so the whole window scales as one picture, exactly
   as the image did, and nothing inside it reflows at any viewport. Icons are the
   app's lucide set. Idle, the rails are the app's navy and its two blues (the logo
   tile, and the darker action blue on the composer edge, pencil and send); a brand
   repaints the rails (--brand-rail) and both blues. */
.pv-figure { container-type: inline-size; }
.pv {
  --u: calc(100cqw / 1280);
  --pv-brand: var(--brand, var(--field));
  --pv-brand-ink: var(--brand-ink, var(--paper));
  /* the app's action blue (composer edge, pencil, send), sampled from the capture */
  --pv-act: var(--brand, #1551c8);
  /* the app's own dark scheme; light is the default the page opens on */
  --pv-bg: #0a0a0b;
  --pv-fg: #f4f5f7;
  --pv-muted: color-mix(in srgb, #f4f5f7 56%, transparent);
  --pv-soft: color-mix(in srgb, #f4f5f7 80%, transparent);
  --pv-line: color-mix(in srgb, #f4f5f7 10%, transparent);
  --pv-surface: color-mix(in srgb, #f4f5f7 6%, transparent);
  --pv-card: color-mix(in srgb, #f4f5f7 3%, transparent);
  --pv-card-line: color-mix(in srgb, #f4f5f7 14%, transparent);
  --pv-rail: var(--brand-rail);
  --pv-on-rail: #f4f5f7;
  --pv-rail-text: color-mix(in srgb, #f4f5f7 90%, transparent);
  --pv-rail-muted: color-mix(in srgb, #f4f5f7 58%, transparent);
  --pv-rail-line: color-mix(in srgb, #f4f5f7 13%, transparent);
  --pv-band-line: color-mix(in srgb, #f4f5f7 16%, transparent);
  --pv-rail-surface: color-mix(in srgb, #f4f5f7 8%, transparent);
  --pv-selected: color-mix(in srgb, #f4f5f7 6%, transparent);
  /* the app's warn tone (superbot-desktop tokens.css --color-status-warn), the live map's
     pins that need a call; a status colour, never the brand */
  --pv-warn: #f0b132;
  display: grid;
  /* the app's split: icon rail 72, tenant rail 300, content the rest of 1280 */
  grid-template-columns: calc(72 * var(--u)) calc(300 * var(--u)) minmax(0, 1fr);
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--pv-bg);
  color: var(--pv-fg);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0;
  /* the app draws plain Inter (two-storey a), not the page's ss01/cv11 */
  font-feature-settings: normal;
  text-align: left;
  white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.pv svg { display: block; flex: none; }
.pv[data-mode="light"] {
  /* the app's light canvas, sampled: warm off-white, slate ink, the search grey */
  --pv-bg: #f8f8f6;
  --pv-fg: #0f172a;
  --pv-muted: color-mix(in srgb, #0f172a 66%, transparent);
  --pv-soft: color-mix(in srgb, #0f172a 82%, transparent);
  --pv-line: var(--fog);
  --pv-surface: #f1f2f6;
  --pv-card: var(--paper);
  --pv-card-line: var(--fog);
  /* tokens.light.css --color-status-warn */
  --pv-warn: #806218;
  /* the app's light theme keeps its dark rail; idle it is the app's own navy, and a
     brand saturates it through --brand-rail */
  --pv-rail: var(--brand-rail);
  --pv-on-rail: #f4f5f7;
  --pv-rail-text: color-mix(in srgb, #f4f5f7 90%, transparent);
  --pv-rail-muted: color-mix(in srgb, #f4f5f7 58%, transparent);
  --pv-rail-line: color-mix(in srgb, #f4f5f7 13%, transparent);
  --pv-band-line: color-mix(in srgb, #f4f5f7 16%, transparent);
  --pv-rail-surface: color-mix(in srgb, #f4f5f7 8%, transparent);
  --pv-selected: color-mix(in srgb, #f4f5f7 6%, transparent);
}
/* a brand swap and a scheme switch fade rather than snap */
.pv, .pv * { transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease; }

/* the scheme switch: a segmented track of sun and moon inside the toolbar */
.pv-modes {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
}
.pv-mode {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--graphite);
  cursor: pointer;
  transition: background-color var(--quick) ease-out, color var(--quick) ease-out;
}
.pv-mode svg { width: 16px; height: 16px; }
.pv-mode:hover { color: var(--ink); }
.pv-mode[aria-pressed="true"] { background: var(--ink); color: var(--text); }
@media (pointer: coarse) {
  .pv-mode { width: var(--target); min-height: var(--target); }
  /* the go button takes the touch floor inside the same 48px field */
  .domain { padding: 1px 1px 1px var(--s5); }
  .domain-go { width: var(--target); height: var(--target); }
}

/* the icon rail: the logo tile, the chat and code lanes, then the foot */
.pv-icons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(8 * var(--u));
  min-width: 0;
  padding: calc(34 * var(--u)) 0 calc(16 * var(--u));
  border-right: calc(1 * var(--u)) solid var(--pv-rail-line);
  background: var(--pv-rail);
  color: var(--pv-on-rail);
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.pv-logo {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin-bottom: calc(18 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--pv-brand);
  color: var(--pv-brand-ink);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.pv-compass { width: calc(30.5 * var(--u)); height: calc(30.5 * var(--u)); color: var(--paper); }
/* idle the tile is the app's compass; a brand puts its monogram (or icon) there */
.pv-logo > b { display: none; }
body[data-branded="true"] .pv-logo > b { display: block; }
body[data-branded="true"] .pv-compass,
body[data-has-icon="true"] .pv-compass { display: none; }
.pv-nav {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  height: calc(40 * var(--u));
  color: var(--pv-rail-muted);
}
.pv-nav svg { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
/* the open lane: a faint square behind the icon and a white bar on the rail's edge */
.pv-nav.on { color: var(--pv-on-rail); }
.pv-nav.on::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(40 * var(--u));
  margin: 0 auto;
  border-radius: calc(6 * var(--u));
  background: var(--pv-rail-surface);
}
.pv-nav.on::before {
  content: "";
  position: absolute;
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  left: 0;
  width: calc(2 * var(--u));
  background: var(--pv-on-rail);
}
.pv-badge {
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--u));
  left: calc(50% + calc(5 * var(--u)));
  display: grid;
  place-items: center;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  border-radius: 50%;
  background: var(--pv-on-rail);
  color: #0d2141;
  font-size: calc(10 * var(--u));
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.pv-nav-gap { flex: 1; }
.pv-avatar {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  margin: calc(2 * var(--u)) 0;
  border-radius: 50%;
  background: var(--pv-rail-surface);
  color: var(--pv-on-rail);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  letter-spacing: 0;
}

/* the tenant rail: the collapse control, the tenant, New chat, Today/Earlier and the
   thread list, then the account row. Rows run edge to edge, so the selected band
   and the footer hairline reach both rail edges as they do in the app. */
.pv-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: calc(1 * var(--u)) solid var(--pv-rail-line);
  background: var(--pv-rail);
  color: var(--pv-on-rail);
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.pv-panel-icon { align-self: flex-end; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(17 * var(--u)) calc(17 * var(--u)) 0 0; color: var(--pv-rail-muted); }
.pv-ws { display: flex; align-items: center; gap: calc(5 * var(--u)); min-width: 0; height: calc(36.4 * var(--u)); margin-top: calc(2 * var(--u)); padding: 0 calc(20 * var(--u)); }
.pv-ws-name {
  min-width: 0;
  overflow: hidden;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
}
.pv-chev { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--pv-rail-muted); }
.pv-new {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(40 * var(--u));
  margin-top: calc(23 * var(--u));
  padding: 0 calc(20 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  color: var(--pv-rail-text);
}
.pv-new svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pv-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(21 * var(--u));
  margin-top: calc(7.5 * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 400;
  color: var(--pv-rail-muted);
}
.pv-threads + .pv-group { margin-top: calc(10.5 * var(--u)); }
.pv-group-tools { display: flex; align-items: center; gap: calc(10.5 * var(--u)); }
.pv-group-tools svg:first-child { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.pv-group-tools svg:last-child { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-threads { display: flex; flex-direction: column; }
.pv-earlier { margin-top: calc(3.95 * var(--u)); }
/* the app sets its row text a touch below the icon's centre line */
.pv-thread > span, .pv-thread > em { position: relative; top: calc(0.5 * var(--u)); }
.pv-thread.on > span, .pv-thread.on > em { top: calc(2.5 * var(--u)); }
.pv-suggest li > span, .pv-pill > span, .pv-model span { position: relative; top: calc(2 * var(--u)); }
.pv-thread {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  min-width: 0;
  height: calc(37.19 * var(--u));
  padding: 0 calc(20 * var(--u));
  font-size: calc(14 * var(--u));
  color: var(--pv-rail-text);
}
.pv-thread > svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--pv-rail-muted); }
.pv-thread > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-thread > em {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-left: auto;
  font-size: calc(14 * var(--u));
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--pv-on-rail) 78%, transparent);
}
.pv-thread > em i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--pv-on-rail); }
/* the selected chat: a lighter band across the whole rail, hairlined above and
   below, with a white bar on its left edge */
.pv-thread.on {
  height: calc(34 * var(--u));
  border-block: calc(1 * var(--u)) solid var(--pv-band-line);
  background: var(--pv-selected);
  font-weight: 500;
  color: var(--pv-on-rail);
}
.pv-thread.on::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(2 * var(--u));
  background: var(--pv-on-rail);
}
.pv-user {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
  height: calc(65 * var(--u));
  margin-top: auto;
  padding: 0 calc(16 * var(--u));
  border-top: calc(1 * var(--u)) solid var(--pv-rail-line);
  font-size: calc(13 * var(--u));
}
.pv-av {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: var(--pv-rail-surface);
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
/* the presence dot, the app's teal, ringed in the rail colour */
.pv-av::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--u));
  bottom: calc(-0.5 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--pv-rail);
  border-radius: 50%;
  background: #109699;
}
.pv-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--pv-on-rail) 76%, transparent); }
.pv-gear { position: relative; display: grid; flex: none; margin-left: auto; color: var(--pv-rail-muted); }
.pv-gear svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pv-gear::after {
  content: "";
  position: absolute;
  top: calc(-4 * var(--u));
  right: calc(-2 * var(--u));
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--pv-on-rail);
}

/* the content pane: top bar, greeting, place chips, composer and suggestion cards */
.pv-main { display: flex; flex-direction: column; min-width: 0; background: var(--pv-bg); }
.pv-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(400 * var(--u)) minmax(0, 1fr);
  align-items: center;
  height: calc(56 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-bottom: calc(1 * var(--u)) solid var(--pv-line);
  font-size: calc(14 * var(--u));
  color: var(--pv-muted);
}
.pv-top-new { display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0; font-size: calc(16 * var(--u)); font-weight: 600; color: var(--pv-fg); }
.pv-top-new svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--pv-act); }
.pv-searchbox {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  min-width: 0;
  height: calc(36 * var(--u));
  padding: 0 calc(7.5 * var(--u)) 0 calc(11.7 * var(--u));
  border: calc(1 * var(--u)) solid var(--pv-line);
  border-radius: calc(6 * var(--u));
  overflow: hidden;
  background: var(--pv-surface);
  color: var(--pv-muted);
}
.pv-searchbox { padding-top: calc(3 * var(--u)); }
.pv-searchbox svg, .pv-kbd { position: relative; top: calc(-1.5 * var(--u)); }
.pv-searchbox svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-kbd {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(20 * var(--u));
  margin-left: auto;
  border: calc(1 * var(--u)) solid var(--pv-line);
  border-radius: calc(6 * var(--u));
  background: var(--pv-card);
  font-size: calc(11 * var(--u));
  line-height: 1;
  color: var(--pv-soft);
}
.pv-glyphs { display: flex; justify-self: end; gap: calc(20 * var(--u)); color: var(--pv-soft); }
.pv-glyphs svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pv-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 0 calc(24 * var(--u));
}
.pv-greet {
  margin: calc(139.5 * var(--u)) 0 0;
  font-size: calc(40 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pv-fg);
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}
/* the place chips sit on the composer's left edge, as in the app */
.pv-chips { display: flex; align-self: stretch; align-items: center; gap: calc(16.2 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(50.3 * var(--u)); padding-left: calc(2 * var(--u)); }
.pv-chips > span { position: relative; top: calc(1 * var(--u)); }
.pv-chips > span > svg { position: relative; top: calc(-2 * var(--u)); }
.pv-chips > span { display: inline-flex; align-items: center; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--pv-soft); }
.pv-chips > span > svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin-right: calc(7 * var(--u)); }
.pv-chips .pv-cv { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(5.5 * var(--u)); color: var(--pv-muted); }
.pv-composer {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: calc(29 * var(--u));
  width: 100%;
  height: calc(116 * var(--u));
  margin-top: calc(11.3 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u)) calc(20 * var(--u));
  border: calc(1 * var(--u)) solid var(--pv-act);
  border-radius: calc(6 * var(--u));
  background: var(--pv-card);
  transition: border-color 160ms ease-out;
}
.pv-ask { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--pv-muted); }
.pv-foot { display: flex; align-items: center; height: calc(32 * var(--u)); min-width: 0; }
.pv-plus { display: grid; flex: none; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-right: calc(18.7 * var(--u)); color: var(--pv-soft); }
.pv-plus svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
/* Off and Agent share one grey pill, split by a rule */
.pv-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: calc(32 * var(--u));
  padding: 0 calc(9.5 * var(--u)) 0 calc(15 * var(--u));
  border: calc(1 * var(--u)) solid var(--pv-line);
  border-radius: var(--r-pill);
  background: var(--pv-surface);
  font-size: calc(14 * var(--u));
  font-weight: 500;
  color: var(--pv-fg);
}
.pv-pill > span { display: inline-flex; align-items: center; }
.pv-pill > span > svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(5 * var(--u)); color: var(--pv-soft); }
.pv-pill .pv-cv { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 0 0 calc(6 * var(--u)); color: var(--pv-muted); }
.pv-pill-rule { width: calc(1 * var(--u)); height: calc(18 * var(--u)); margin: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); background: var(--pv-line); }
.pv-model { display: inline-flex; align-items: center; gap: calc(7.2 * var(--u)); min-width: 0; margin-right: calc(16.2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--pv-soft); }
.pv-model svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.pv-model span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-spacer { flex: 1; }
.pv-round {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  margin-right: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--pv-line);
  border-radius: 50%;
  background: var(--pv-card);
  color: var(--pv-muted);
}
.pv-round + .pv-round { margin-right: calc(10 * var(--u)); }
.pv-round svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-send {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  background: var(--pv-act);
  color: var(--pv-brand-ink);
  transition: background-color 160ms ease-out;
}
.pv-send svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-fine { margin: calc(14.8 * var(--u)) 0 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--pv-muted); text-align: center; }
.pv-suggest {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: 100%;
  margin: calc(28.8 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.pv-suggest li {
  display: flex;
  align-items: center;
  height: calc(46 * var(--u));
  padding: 0 calc(14.9 * var(--u)) 0 calc(17.5 * var(--u));
  border: calc(1 * var(--u)) solid var(--pv-card-line);
  border-radius: calc(6 * var(--u));
  background: var(--pv-card);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--pv-fg);
}
.pv-suggest li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-suggest li > svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-right: calc(14 * var(--u)); color: var(--pv-soft); }
.pv-suggest .pv-cr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 0 0 auto; color: var(--pv-muted); }

/* the settings bar, docked under the window at its full width: scheme and palette
   on the left, the custom colour and the way back on the right */
.pv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--fog);
  border-top: 0;
  border-radius: 0 0 var(--r-frame) var(--r-frame);
  background: var(--paper);
}
.pv-toolbar .pv-custom { margin-left: auto; }
/* no brand swatches yet: nothing for the divider to separate */
.pv-divider:has(+ .pv-swatches:empty) { display: none; }
.pv-toolbar [hidden] { display: none; }
.pv-divider { flex: none; width: 1px; height: 24px; background: var(--fog); }
.pv-swatches { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
/* the custom colour: a labelled pill at the scheme switch's height, an eyedropper
   until the visitor picks a colour, then a dot of that colour. Worded, so it never
   reads as a sixth brand swatch. */
.pv-custom {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--s3) 0 10px;
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--graphite);
  cursor: pointer;
  transition: color var(--quick) ease-out, border-color var(--quick) ease-out;
}
.pv-custom:hover { color: var(--ink); border-color: var(--graphite-2); }
.pv-custom:has(input:focus-visible) { outline: 2px solid var(--field); outline-offset: 3px; }
.pv-pipette { flex: none; width: 16px; height: 16px; }
.pv-custom-dot {
  display: none;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%;
  background: var(--pick);
}
.pv-custom[data-picked] .pv-pipette { display: none; }
.pv-custom[data-picked] .pv-custom-dot { display: block; }
/* the native swatch is invisible and covers the whole pill */
.pv-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
@media (pointer: coarse) {
  /* the scheme switch's own height: a touch button, its three-pixel pad and its hairline */
  .pv-custom { min-height: calc(var(--target) + var(--s2)); }
}
/* the caption is a status line, not a setting: under the bar, beside the demo pill */
.pv-caption {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--graphite);
  text-wrap: balance;
}
.pv-swatch {
  position: relative;
  width: var(--dot);
  height: var(--dot);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* the disc: the whole button on a mouse, centred inside the touch box on a finger */
.pv-swatch::before {
  content: "";
  position: absolute;
  inset: calc((100% - var(--dot)) / 2);
  background: var(--swatch);
  border: 1px solid var(--fog);
  border-radius: 50%;
  transition: box-shadow 160ms ease-out, border-color var(--quick) ease-out;
}
.pv-swatch:hover::before { border-color: var(--graphite-2); }
.pv-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
@media (pointer: coarse) {
  .pv-swatches { gap: 0; }
  .pv-swatch { width: var(--target); height: var(--target); }
}
.pv-reset {
  padding: 4px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-color: var(--fog);
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.pv-reset:hover { color: var(--ink); text-decoration-color: var(--ink); }
@media (pointer: coarse) {
  .pv-reset { min-width: var(--target); min-height: var(--target); }
}

/* ---------- the demo: the app's thread, replayed (demo.js) ----------
   Home and thread are one .pv-body, as in the app (Thread.tsx keeps one composer node
   in both states): data-view="thread" folds the greeting, chips and cards away, opens
   the feed above the composer and docks the composer at the foot. Every size is the
   app's own, in its pixels times --u: the feed's measure is the composer's width less
   the app's 168 overhang (--size-thread-column 768 over --size-measure 600), the bubble
   is MessageRow's, the step rows SonarTrace's 13/19, the cards TableCard's (8) and
   EmailDraftEmbed's (16), the same two radii as the bubble. Colour comes only from the
   window's tokens, so a scheme switch or a brand repaints a replay mid-word. */
.pv-feed {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(12 * var(--u));
  width: calc(692 * var(--u));
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(32 * var(--u)) 0 calc(20 * var(--u));
  white-space: normal;
  /* the app's feed fades out under its top edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black calc(24 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent, black calc(24 * var(--u)));
}
.pv-feed[hidden] { display: none; }
.pv-body[data-view="thread"] { padding-bottom: calc(14 * var(--u)); }
.pv-body[data-view="thread"] .pv-greet,
.pv-body[data-view="thread"] .pv-chips,
.pv-body[data-view="thread"] .pv-suggest { display: none; }
.pv-body[data-view="thread"] .pv-composer { margin-top: 0; }

/* the composer while a query types into it: the placeholder steps aside for the text
   and its caret, and the foot stays pinned so two lines still fit the 116 box */
.pv-typed { display: -webkit-box; margin: 0; overflow: hidden; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--pv-fg); white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pv-typed[hidden] { display: none; }
.pv-composer[data-typing] { gap: 0; justify-content: space-between; }
.pv-composer[data-typing] .pv-ask { display: none; }
.pv-typed-caret {
  display: inline-block;
  width: calc(1.5 * var(--u));
  height: calc(20 * var(--u));
  margin-left: calc(1 * var(--u));
  vertical-align: calc(-4 * var(--u));
  background: var(--pv-fg);
  animation: pv-blink 1000ms steps(1, end) infinite; /* deliberate */
}
.pv-send { transition: background-color 160ms ease-out, transform 120ms ease-out; }
.pv-send[data-press] { transform: scale(0.92); }
.pv-suggest li[data-press] { background: var(--pv-surface); }
.pv-suggest li[data-demo-i] { cursor: pointer; }
@media (hover: hover) {
  .pv-suggest li[data-demo-i]:hover { background: var(--pv-surface); }
}

/* the user's turn: MessageRow's bubble, right-aligned, no avatar */
.pv-turn-user { display: flex; justify-content: flex-end; padding: calc(2 * var(--u)) 0; }
.pv-bubble {
  max-width: min(85%, 75ch);
  margin: 0;
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--pv-surface);
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--pv-fg);
  text-wrap: pretty;
}

/* the assistant's turn: bare prose under the live row, no card and no avatar */
.pv-turn-bot { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.pv-sonar, .pv-outcome { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0; }
.pv-sonar[hidden], .pv-outcome[hidden], .pv-prose[hidden], .pv-steps[hidden] { display: none; }
.pv-sonar-mark, .pv-outcome-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--pv-brand);
  color: var(--pv-brand-ink);
}
.pv-sonar-mark svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
/* the thinker wears the logo tile's face (demo.js face()): the compass idle, the
   brand's initials on its colour, or its icon on paper inside a hairline, as the tile */
.pv-think > b, .pv-think > img { display: none; }
.pv-think > b { font-size: calc(10 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: 0; }
.pv-outcome-mark.pv-think > b { font-size: calc(7 * var(--u)); }
.pv-think[data-face="initials"] > svg,
.pv-think[data-face="icon"] > svg { display: none; }
.pv-think[data-face="initials"] > b { display: block; }
.pv-think[data-face="icon"] { overflow: hidden; background: var(--paper); border: calc(1 * var(--u)) solid var(--pv-card-line); }
.pv-think[data-face="icon"] > img { display: block; width: 70%; height: 70%; object-fit: contain; }
/* SonarTrace's label: masked to its glyphs, a brighter strip passing under them */
.pv-sonar-label {
  font-size: calc(13 * var(--u));
  line-height: calc(19 * var(--u));
  color: transparent;
  background: linear-gradient(90deg, var(--pv-muted) 0 35%, var(--pv-fg) 50%, var(--pv-muted) 65% 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pv-sheen 1800ms steps(24, end) infinite; /* deliberate */
}
/* StepLine rows, hung under the mark: a breathing dot while running, a check once
   landed; the verb in ink, what it touched and what it found quieter */
.pv-steps { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin: 0; padding: 0 0 0 calc(32 * var(--u)); list-style: none; }
.pv-step { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--pv-muted); }
.pv-step-mark { display: grid; flex: none; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-step-dot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--pv-act);
  animation: pv-breathe 1200ms cubic-bezier(0.2, 0, 0, 1) infinite alternate; /* deliberate */
}
/* .pv svg is display: block, so the check's own hide needs the .pv weight */
.pv .pv-step-check { display: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--pv-muted); }
.pv-step[data-state="done"] .pv-step-dot { display: none; }
.pv .pv-step[data-state="done"] .pv-step-check { display: block; }
.pv-step-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-step-verb { font-weight: 400; color: var(--pv-fg); }
/* OutcomeChip: the steps folded into the app's settled summary */
.pv-outcome { gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--pv-muted); }
.pv-outcome-mark { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pv-outcome-mark svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.pv-outcome-cv { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.pv-reply { margin: 0; font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--pv-fg); text-wrap: pretty; }
.pv-caret {
  display: inline-block;
  width: calc(2 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: calc(-3 * var(--u));
  border-radius: var(--r-pill);
  background: var(--pv-fg);
  animation: pv-pulse 1000ms cubic-bezier(0.2, 0, 0, 1) infinite; /* deliberate */
}
.pv-reply[data-done] .pv-caret { display: none; }

/* what it made: rows arrive one by one inside a card that rose first */
.pv-art { max-width: 100%; }
.pv-row { opacity: 0; transition: opacity 160ms ease-out; }
.pv-row.pv-on { opacity: 1; }
/* TableCard: hairline, raised header row, a count and a copy action */
.pv-table { overflow: hidden; border: calc(1 * var(--u)) solid var(--pv-card-line); border-radius: calc(8 * var(--u)); background: var(--pv-card); }
.pv-table-head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--pv-line); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--pv-muted); }
.pv-table-title { font-weight: 600; color: var(--pv-fg); }
.pv-table-head svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-left: auto; }
.pv-table table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--pv-fg); }
.pv-table th, .pv-table td { overflow: hidden; padding: calc(8 * var(--u)) calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--pv-line); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.pv-table th { font-weight: 600; background: var(--pv-surface); }
.pv-table tbody tr:last-child td { border-bottom: 0; }
/* EmailDraftEmbed: a card with the subject on a raised field and one primary action */
.pv-draft { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border: calc(1 * var(--u)) solid var(--pv-card-line); border-radius: calc(16 * var(--u)); background: var(--pv-card); }
.pv-draft p { margin: 0; }
.pv-draft-eyebrow { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--pv-muted); }
.pv-draft-subject { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--pv-surface); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: var(--pv-fg); }
.pv-draft-body { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--pv-fg); text-wrap: pretty; }
.pv-draft-foot { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: var(--pv-muted); }
.pv-draft-foot svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: auto; }
.pv-draft-send { display: inline-flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--pv-act); font-size: calc(13 * var(--u)); font-weight: 500; color: var(--pv-brand-ink); }
/* a list answer is markdown in the prose, not a card */
.pv-list { font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--pv-fg); }
.pv-list-title { margin: 0 0 calc(4 * var(--u)); font-weight: 600; }
.pv-list ul { margin: 0; padding-left: calc(18 * var(--u)); }
.pv-list li + li { margin-top: calc(4 * var(--u)); }

/* ---------- the visuals: the Live view and the reply's chart (demo.js) ----------
   The Live view is superbot-desktop's Live view card (packages/ui live/live-frame.tsx)
   worn by its floating window (hub/computer-use/LiveFloat.tsx, live-float.css,
   live-float-place.ts): --container-live-frame-compact 400 wide, the card's 16 radius
   and --shadow-popout, a 40 head (the title at 15/500, the muted "Live view" at 13, the
   hairline glyph buttons and the one light Stop, all 24 tall at radius 8), a 16:10 well,
   the status pill 12 above the well's foot, and while the agent drives the takeover edge
   worn thin as the mini wears it (live-mini.css: a 2 px accent ring inside the well,
   no glow). Its place is LiveFloat's default: the chat column's bottom right, 16 above
   the composer row (14 thread padding + 30.8 fine print + 116 composer + 16 = 176.8),
   its right edge on the composer's. The page inside is what the browser shows: a heading
   and a map, a document or a plot, every length on --k (one app px here, one phone pt
   on the phone) and every colour on --lv-* (the window's tokens here, the phone theme's
   there). The accent (--pv-act, the brand) marks the data: the line, the bars, the pins,
   the drive ring, the found line; --pv-warn marks the pins that need a call. Two radii,
   as the app: 16 for the cards, 8 for the controls, the well's map and document, bars and
   bands; pills and dots round. */
.pv-body { position: relative; }
.pv-live,
.pv-chart {
  --k: var(--u);
  --lv-fg: var(--pv-fg);
  --lv-muted: var(--pv-muted);
  --lv-line: var(--pv-line);
  --lv-card: var(--pv-card);
  --lv-edge: var(--pv-card-line);
  --lv-ground: var(--pv-surface);
  --lv-ink: var(--pv-bg);
}
.pv-live {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: calc(1 * var(--k)) solid var(--lv-edge);
  border-radius: calc(16 * var(--k));
  background: var(--lv-card);
  white-space: nowrap;
}
.pv-pip {
  position: absolute;
  right: calc(24 * var(--u));
  bottom: calc(176.8 * var(--u));
  z-index: 2;
  width: calc(400 * var(--u));
  transform-origin: right bottom;
  /* --shadow-popout, the app's floating elevation */
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.28), 0 0 calc(2 * var(--u)) rgb(0 0 0 / 0.2);
}
.pv[data-view="mobile"] .pv-pip,
.pv:not([data-view="mobile"]) .pv-livecard { display: none; }
.pv-live-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(8 * var(--k));
  height: calc(40 * var(--k));
  padding: 0 calc(8 * var(--k)) 0 calc(16 * var(--k));
  border-bottom: calc(1 * var(--k)) solid var(--lv-line);
}
.pv-live-glyph { width: calc(14 * var(--k)); height: calc(14 * var(--k)); color: var(--lv-muted); }
.pv-live-title { font-size: calc(15 * var(--k)); font-weight: 500; line-height: calc(20 * var(--k)); color: var(--lv-fg); }
.pv-live-label { font-size: calc(13 * var(--k)); line-height: calc(19 * var(--k)); color: var(--lv-muted); }
.pv-live-acts { display: flex; align-items: center; gap: calc(8 * var(--k)); margin-left: auto; }
.pv-live-btn {
  display: grid;
  place-items: center;
  width: calc(24 * var(--k));
  height: calc(24 * var(--k));
  border: calc(1 * var(--k)) solid var(--lv-edge);
  border-radius: calc(8 * var(--k));
  color: var(--lv-fg);
}
.pv-live-btn svg { width: calc(14 * var(--k)); height: calc(14 * var(--k)); }
.pv-live-stop {
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--k));
  padding: 0 calc(8 * var(--k));
  border-radius: calc(8 * var(--k));
  background: var(--lv-fg);
  font-size: calc(12 * var(--k));
  font-weight: 500;
  line-height: 1;
  color: var(--lv-ink);
}
.pv-live-well { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lv-ground); }
/* the takeover edge, worn thin: on while the agent drives, off with its last step */
.pv-live-well::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 calc(2 * var(--k)) var(--pv-act);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.pv-live[data-drive="on"] .pv-live-well::after { opacity: 1; }
/* before the first frame the well is the page's skeleton (a heading bar, the body
   block), never an empty box; it holds for one beat (demo.js T.pipSkeleton) */
.pv-live-skel {
  position: absolute;
  inset: calc(12 * var(--k)) calc(14 * var(--k)) calc(44 * var(--k));
  display: none;
  flex-direction: column;
  gap: calc(8 * var(--k));
}
.pv-live[data-loading] .pv-live-skel { display: flex; }
.pv-live[data-loading] .pv-page { visibility: hidden; }
.pv-live-skel > i { display: block; border-radius: calc(8 * var(--k)); background: var(--lv-line); }
.pv-live-skel > i:first-child { flex: none; width: 40%; height: calc(18 * var(--k)); }
.pv-live-skel > i:last-child { flex: 1; }
/* the status pill: what the assistant is using, on the well's foot */
.pv-live-pill {
  position: absolute;
  bottom: calc(12 * var(--k));
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--k));
  max-width: calc(100% - 32 * var(--k));
  height: calc(24 * var(--k));
  margin: 0;
  padding: 0 calc(10 * var(--k));
  border: calc(1 * var(--k)) solid var(--lv-edge);
  border-radius: 9999px;
  background: var(--lv-card);
  font-size: calc(12 * var(--k));
  line-height: calc(16 * var(--k));
  color: var(--lv-fg);
  transform: translateX(-50%);
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.pv-live-pill > i { flex: none; width: calc(6 * var(--k)); height: calc(6 * var(--k)); border-radius: 50%; background: var(--pv-act); }
.pv-live-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-live[data-loading] .pv-live-pill,
.pv-live[data-settled] .pv-live-pill { opacity: 0; }
/* the page: its heading, then the body the kind draws */
.pv-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--k));
  padding: calc(12 * var(--k)) calc(14 * var(--k)) calc(44 * var(--k));
}
.pv-page-title { flex: none; margin: 0; overflow: hidden; font-size: calc(13 * var(--k)); font-weight: 500; line-height: calc(18 * var(--k)); color: var(--lv-fg); text-overflow: ellipsis; }
.pv-page-body { position: relative; flex: 1; min-height: 0; }
/* the map: no tiles, the app's own tokenised ground with a graticule, the pins in the
   accent ringed in the card colour, a pin that needs a call in the warn tone */
.pv-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(8 * var(--k));
  background-color: var(--lv-card);
  background-image:
    linear-gradient(var(--lv-line) calc(1 * var(--k)), transparent 0),
    linear-gradient(90deg, var(--lv-line) calc(1 * var(--k)), transparent 0);
  background-size: calc(24 * var(--k)) calc(24 * var(--k));
  box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--lv-line);
}
.pv-pin {
  position: absolute;
  width: calc(10 * var(--k));
  height: calc(10 * var(--k));
  margin: calc(-5 * var(--k)) 0 0 calc(-5 * var(--k));
  border-radius: 50%;
  background: var(--pv-act);
  box-shadow: 0 0 0 calc(2 * var(--k)) var(--lv-card);
}
.pv-pin[data-alert] { background: var(--pv-warn); }
.pv-pin-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--pv-warn); opacity: 0; }
.pv-pin-label {
  position: absolute;
  padding: 0 calc(6 * var(--k));
  border-radius: 9999px;
  background: var(--lv-card);
  box-shadow: 0 0 0 calc(1 * var(--k)) var(--lv-line);
  font-size: calc(11 * var(--k));
  line-height: calc(18 * var(--k));
  color: var(--lv-fg);
}
/* the document: its lines on the page, the one it turned on banded in the accent */
.pv-doc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--k));
  padding: calc(10 * var(--k)) calc(14 * var(--k));
  border-radius: calc(8 * var(--k));
  background: var(--lv-card);
  box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--lv-line);
}
.pv-doc-line { position: relative; margin: 0; font-size: calc(12 * var(--k)); line-height: calc(20 * var(--k)); color: var(--lv-muted); }
.pv-doc-line > span { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; }
.pv-doc-line[data-found] > span { font-weight: 500; color: var(--lv-fg); }
.pv-doc-band {
  position: absolute;
  inset: 0 calc(-6 * var(--k));
  border-radius: calc(8 * var(--k));
  background: color-mix(in srgb, var(--pv-act) 18%, transparent);
  transform-origin: left center;
}
/* the plot: a stretched 100 x 100 SVG for the line (its stroke held at 2), bars as boxes
   on the baseline, every label an HTML box on its point */
.pv-plot { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pv-plot-area { position: relative; flex: 1; min-height: 0; border-bottom: calc(1 * var(--k)) solid var(--lv-line); }
.pv-plot[data-axis] .pv-plot-area,
.pv-plot[data-axis] .pv-plot-x { margin-left: calc(32 * var(--k)); }
.pv-plot-x { position: relative; flex: none; height: calc(18 * var(--k)); }
.pv-plot-x > span,
.pv-plot-y,
.pv-plot-goal { position: absolute; font-size: calc(10 * var(--k)); line-height: calc(14 * var(--k)); color: var(--lv-muted); white-space: nowrap; }
.pv-plot-x > span { top: calc(4 * var(--k)); transform: translateX(-50%); }
.pv-plot-y { right: calc(100% + 6 * var(--k)); transform: translateY(-50%); }
.pv-plot-goal { left: calc(4 * var(--k)); margin-top: calc(-16 * var(--k)); }
.pv-plot-grid,
.pv-plot-target { position: absolute; right: 0; left: 0; border-top: calc(1 * var(--k)) solid var(--lv-line); }
.pv-plot-target { border-top-style: dashed; border-top-color: var(--lv-muted); }
.pv-plot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-plot-line { fill: none; stroke: var(--pv-act); stroke-width: calc(2 * var(--k)); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-plot-fill { fill: color-mix(in srgb, var(--pv-act) 12%, transparent); stroke: none; }
.pv-plot-bar { position: absolute; border-radius: calc(8 * var(--k)) calc(8 * var(--k)) 0 0; background: var(--pv-act); transform-origin: center bottom; }
.pv-plot-dot {
  position: absolute;
  width: calc(8 * var(--k));
  height: calc(8 * var(--k));
  margin: calc(-4 * var(--k)) 0 0 calc(-4 * var(--k));
  border-radius: 50%;
  background: var(--pv-act);
  box-shadow: 0 0 0 calc(2 * var(--k)) var(--lv-card);
}
.pv-plot-val {
  position: absolute;
  font-size: calc(12 * var(--k));
  font-weight: 500;
  line-height: calc(16 * var(--k));
  color: var(--lv-fg);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 4 * var(--k)));
}
.pv-plot-val[data-side="right"] { transform: translate(calc(8 * var(--k)), calc(-100% - 2 * var(--k))); }
.pv-plot-val[data-side="left"] { transform: translate(calc(-100% - 8 * var(--k)), calc(-100% - 2 * var(--k))); }
/* the reply's chart card: the app's ArtifactFrame worn small (a 40 head with the title,
   its range and a download glyph over the plot) */
.pv-chart { width: min(calc(560 * var(--u)), 100%); overflow: hidden; border: calc(1 * var(--k)) solid var(--lv-edge); border-radius: calc(16 * var(--k)); background: var(--lv-card); }
.pv-chart-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--k));
  height: calc(40 * var(--k));
  padding: 0 calc(12 * var(--k)) 0 calc(16 * var(--k));
  border-bottom: calc(1 * var(--k)) solid var(--lv-line);
  font-size: calc(13 * var(--k));
  line-height: calc(18 * var(--k));
  color: var(--lv-muted);
  white-space: nowrap;
}
.pv-chart-title { font-weight: 500; color: var(--lv-fg); }
.pv-chart-meta { font-size: calc(11 * var(--k)); }
.pv-chart-head svg { width: calc(14 * var(--k)); height: calc(14 * var(--k)); margin-left: auto; }
.pv-chart-body { position: relative; height: calc(200 * var(--k)); margin: calc(16 * var(--k)) calc(16 * var(--k)) calc(12 * var(--k)); }
@media (prefers-reduced-motion: reduce) {
  .pv-live-well::after, .pv-live-pill { transition: none; }
}

/* arrivals rise 6 app px and fade in, the app's enter */
.pv-rise { animation: pv-rise 220ms cubic-bezier(0.2, 0, 0, 1) both; }
/* the hover, offscreen or pause hold freezes every loop where it stands */
.pv[data-demo-state="paused"] .pv-main * { animation-play-state: paused; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes pv-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pv-breathe { from { opacity: 1; } to { opacity: 0.4; } }
@keyframes pv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes pv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* the replay's own control: pause and play, worded, at the scheme switch's height
   (WCAG 2.2.2: motion that starts by itself gets a way to stop it) */
.pv-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--s3) 0 10px;
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--graphite);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--quick) ease-out, border-color var(--quick) ease-out;
}
.pv-play:hover { color: var(--ink); border-color: var(--graphite-2); }
.pv-play svg { flex: none; width: 16px; height: 16px; }
.pv-play .pv-play-go { display: none; }
.pv-play[aria-pressed="true"] .pv-play-pause,
.pv-play[data-kind="next"] .pv-play-pause { display: none; }
.pv-play[aria-pressed="true"] .pv-play-go,
.pv-play[data-kind="next"] .pv-play-go { display: block; }
@media (pointer: coarse) {
  .pv-play { min-height: calc(var(--target) + var(--s2)); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-play, .pv-row, .pv-rise, .pv-step-dot, .pv-caret, .pv-typed-caret, .pv-sonar-label { transition: none; animation: none; }
  .pv-row { opacity: 1; }
  .pv-sonar-label { color: var(--pv-muted); background: none; }
}

/* the window holds one reveal: its canvas blurs while a lookup is in flight and comes
   sharp once the final answer lands, so the extracted and the model answer arrive as
   one change. The frame stays crisp, and the lookup's work shows over the blur. */
.pv-figure > .pv,
.pv-figure > .pv-load { grid-area: 1 / 1; }
.pv-figure > .pv {
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease, filter 340ms ease, opacity 340ms ease; /* deliberate */
}
body[data-pending="true"] .pv-figure > .pv { filter: blur(6px); opacity: 0.45; }

/* The lookup at work (the labor illusion, shown honestly): business.js setLoadPhase()
   moves data-load through the phases it really sees, sent (request out), found (the
   first answer landed, its words name what was found), tailor (the model is still
   shaping the chats and cards) and done (the reveal). The bar advances at each phase
   and creeps between them toward a stop short of the end, so it can only finish in
   the reveal; a sheen sweeps the blur meanwhile. All of it shows only while pending,
   and leaves in the same 340ms as the blur. Hidden from readers: the caption speaks. */
.pv-load {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 340ms ease, visibility 0s linear 340ms; /* deliberate */
}
body[data-pending="true"] .pv-load { opacity: 1; visibility: visible; transition: opacity 160ms ease-out; }
.pv-load-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brand, var(--field));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.pv-load[data-load="sent"] .pv-load-bar {
  transform: scaleX(0.4);
  transition: transform 8000ms cubic-bezier(0.05, 0.7, 0.1, 1); /* deliberate */
}
.pv-load[data-load="found"] .pv-load-bar,
.pv-load[data-load="tailor"] .pv-load-bar {
  transform: scaleX(0.9);
  transition: transform 14000ms cubic-bezier(0.05, 0.7, 0.1, 1); /* deliberate */
}
.pv-load[data-load="done"] .pv-load-bar { transform: scaleX(1); transition: transform 200ms ease-out; }
/* the sheen is part of the progress mark, so it wears the bar's colour: a white band
   vanished on the washed canvas, a brand tint reads on it in both schemes and turns
   the company's colour once its colours are found */
.pv-load-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--brand, var(--field)) 14%, transparent) 50%, transparent 68%);
  transform: translateX(-100%);
}
body[data-pending="true"] .pv-load-sheen { animation: pv-load-sweep 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite; /* deliberate */ }
.pv-load-status {
  position: relative;
  max-width: calc(100% - var(--s6));
  margin: 0;
  padding: var(--s1) var(--s3);
  overflow: hidden;
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pv-load-status:empty { display: none; }
.pv-load-in { animation: pv-load-in 160ms ease-out; }
@keyframes pv-load-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pv-load-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .pv-load-status { font-size: var(--t-label); padding: var(--s1) var(--s2); }
}
/* reduced motion: no sweep and no fades; the bar steps a third per phase, the line is still */
@media (prefers-reduced-motion: reduce) {
  .pv-load-sheen { display: none; }
  .pv-load,
  body[data-pending="true"] .pv-load,
  .pv-load-status,
  .pv-load[data-load] .pv-load-bar { transition: none; animation: none; }
  .pv-load[data-load="sent"] .pv-load-bar { transform: scaleX(0.34); }
  .pv-load[data-load="found"] .pv-load-bar,
  .pv-load[data-load="tailor"] .pv-load-bar { transform: scaleX(0.67); }
}

/* ---------- the phone view: the same window as superbot-mobile draws it ----------
   business.js setView puts data-view="mobile" on .pv (the toolbar's device switch, or
   &view=mobile). The stage stays the desktop canvas's 8:5 box on --u, so the toolbar
   never moves; on it stand two 402x874 pt screens (iPhone 16 Pro: every capture under
   superbot-mobile docs/screenshots is 1206x2622 at 3x), the app's chat drawer open on
   the left (.pv-rail) and the chat on the right (.pv-main), where the replay plays.
   Their unit is --m, one phone point: 752 of the stage's 800 app px over the phone's
   874 pt, which leaves 24 app px of stage above and below each screen. Every phone
   length is calc(N * var(--m)) in the app's own points (superbot-mobile
   src/design-system/tokens.ts and ChatRow, LanePane, LaneBottomBar, ScreenHeader,
   Composer, TurnHead, StepLine), so it scales as one picture and never reflows.
   Colours are the Meridian Freight tenant's own phone theme
   (scripts/tenant/fixtures/meridian-freight/bundle.json css.light and css.dark, mapped
   by themeAdapter.ts: drawer = --color-rail, canvas = --color-card, raised =
   --color-raised). The accent is the brand (--pv-act, the compose circle and the send
   pill); the drawer is NOT the desktop's navy rail, since the phone paints its theme's
   rail colour there. Two radii, as the app: 16 (bubble, dock, cards, the pushed chat)
   and the screen's 55, with circles and pills round. */
.pv:not([data-view="mobile"]) .pv-m,
.pv:not([data-view="mobile"]) .pv-snip,
.pv:not([data-view="mobile"]) .pv-age { display: none; }
.pv[data-view="mobile"] {
  --m: calc(var(--u) * 752 / 874);
  --pvm-drawer: #111215;
  --pvm-canvas: #090a0c;
  --pvm-raised: #191a1e;
  --pvm-line: #1d1e23;
  --pvm-fg: #d4eaff;
  --pvm-muted: #9db2d9;
  --pvm-edge: color-mix(in srgb, var(--pvm-fg) 22%, transparent);
  --pvm-chip: color-mix(in srgb, var(--pvm-fg) 9%, var(--pvm-raised));
  grid-template-columns: calc(402 * var(--m)) calc(402 * var(--m));
  grid-template-rows: calc(874 * var(--m));
  place-content: center;
  column-gap: calc(56 * var(--u));
}
.pv[data-view="mobile"][data-mode="light"] {
  --pvm-drawer: #f0f2f5;
  --pvm-canvas: #fdffff;
  --pvm-raised: #eeede8;
  --pvm-line: #e1dfd9;
  --pvm-fg: #071324;
  --pvm-muted: #505d6c;
  --pvm-chip: var(--pvm-canvas);
}
/* what the phone does not draw: the icon rail, the desktop top bar, the greeting, the
   place chips, the fine print and the suggestion cards (the phone's new chat has none
   since 2026-10-06, superbot-mobile NewChatBeginning.tsx); the three tasks still play
   as the replay's typed queries */
.pv[data-view="mobile"] .pv-icons,
.pv[data-view="mobile"] .pv-panel-icon,
.pv[data-view="mobile"] .pv-chev,
.pv[data-view="mobile"] .pv-new,
.pv[data-view="mobile"] .pv-group-tools,
.pv[data-view="mobile"] .pv-user,
.pv[data-view="mobile"] .pv-top,
.pv[data-view="mobile"] .pv-greet,
.pv[data-view="mobile"] .pv-chips,
.pv[data-view="mobile"] .pv-fine,
.pv[data-view="mobile"] .pv-suggest,
.pv[data-view="mobile"] .pv-ask,
.pv[data-view="mobile"] .pv-pill-rule,
.pv[data-view="mobile"] .pv-spacer,
.pv[data-view="mobile"] .pv-wave,
.pv[data-view="mobile"] .pv-model > svg:not(.pv-cv),
.pv[data-view="mobile"] .pv-model > [data-b="model"],
.pv[data-view="mobile"] .pv-thread > em i,
.pv[data-view="mobile"] .pv-caret { display: none; }

/* the two screens: no bezel and no island (the app's captures show neither), a
   hairline edge on the stage */
.pv[data-view="mobile"] .pv-rail,
.pv[data-view="mobile"] .pv-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(874 * var(--m));
  padding-top: calc(62 * var(--m));
  overflow: hidden;
  border: calc(1 * var(--u)) solid var(--pv-card-line);
  border-radius: calc(55 * var(--m));
  color: var(--pvm-fg);
  font-size: calc(15 * var(--m));
  line-height: calc(20 * var(--m));
}
/* the status bar inside the 62 pt safe-area top, over everything on its screen */
.pv[data-view="mobile"] .pv-sb {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(62 * var(--m));
  padding: 0 calc(34 * var(--m)) 0 calc(52 * var(--m));
  font-size: calc(17 * var(--m));
  font-weight: 600;
  line-height: 1;
  color: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-sb svg { width: calc(68 * var(--m)); height: calc(12 * var(--m)); }

/* the drawer (LanePane): min(0.82 x 402, 360) = 329.6 pt of the screen, the pushed
   chat's sliver in the last 72.4 */
.pv[data-view="mobile"] .pv-rail {
  padding-right: calc(72.4 * var(--m));
  background: var(--pvm-drawer);
}
/* the brand row: the tenant's word-mark, fitted (business.js fitWordmark), then the
   switcher capsule; the one bold thing on the phone */
.pv[data-view="mobile"] .pv-ws {
  flex: none;
  gap: calc(12 * var(--m));
  height: calc(60 * var(--m));
  margin: 0;
  padding: 0 calc(16 * var(--m)) calc(16 * var(--m));
}
.pv[data-view="mobile"] .pv-ws-name {
  flex: 1;
  font-size: calc(34 * var(--m) * var(--wm, 1));
  font-weight: 700;
  line-height: calc(40 * var(--m) * var(--wm, 1));
  letter-spacing: calc(-0.5 * var(--m) * var(--wm, 1));
  color: var(--pvm-fg);
  text-overflow: clip;
}
/* a name still wider than its room at half size fades out at its tail */
.pv[data-view="mobile"] .pv-ws-name[data-clip] {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24 * var(--m)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 24 * var(--m)), transparent);
}
.pv[data-view="mobile"] .pv-cap {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(6 * var(--m));
  height: calc(44 * var(--m));
  padding: 0 calc(12 * var(--m)) 0 calc(8 * var(--m));
  border: calc(1 * var(--m)) solid var(--pvm-edge);
  border-radius: 9999px;
}
.pv[data-view="mobile"] .pv-cap > svg { width: calc(12 * var(--m)); height: calc(12 * var(--m)); color: var(--pvm-muted); }
/* the tenant's face in a disc: the compass idle, its initials on the brand, or its icon */
.pv-face > b { display: none; }
body[data-branded="true"] .pv-face > b { display: block; }
body[data-branded="true"] .pv-face > svg,
body[data-has-icon="true"] .pv-face > svg { display: none; }
body[data-has-icon="true"] .pv-face { background: var(--paper); color: var(--ink); }
.pv[data-view="mobile"] .pv-face {
  display: grid;
  flex: none;
  place-items: center;
  top: 0;
  width: calc(28 * var(--m));
  height: calc(28 * var(--m));
  overflow: hidden;
  border-radius: 50%;
  background: var(--pv-brand);
  color: var(--pv-brand-ink);
  font-size: calc(11 * var(--m));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.pv[data-view="mobile"] .pv-face > svg { width: 64%; height: 64%; }
/* the company's icon sits on paper inside a hairline, as the logo tile's does */
body[data-has-icon="true"] .pv[data-view="mobile"] .pv-face {
  border: calc(1 * var(--m)) solid var(--pv-card-line);
  background: var(--paper);
  color: var(--ink);
}
/* the Chats | Code underline tabs at full width, one hairline under them */
.pv[data-view="mobile"] .pv-tabs {
  display: flex;
  flex: none;
  margin: calc(4 * var(--m)) calc(16 * var(--m)) calc(8 * var(--m));
  border-bottom: calc(1 * var(--m)) solid var(--pvm-line);
}
.pv[data-view="mobile"] .pv-tabs > span {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--m));
  height: calc(44 * var(--m));
  font-size: calc(17 * var(--m));
  font-weight: 500;
  line-height: calc(22 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-tabs > .on { color: var(--pvm-fg); }
.pv[data-view="mobile"] .pv-tabs > .on::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--m));
  left: 0;
  height: calc(2 * var(--m));
  background: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-tabs svg { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }
.pv[data-view="mobile"] .pv-group,
.pv[data-view="mobile"] .pv-threads + .pv-group {
  flex: none;
  height: auto;
  margin: 0;
  padding: calc(16 * var(--m)) calc(16 * var(--m)) calc(8 * var(--m));
  font-size: calc(12 * var(--m));
  line-height: calc(16 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-earlier { margin-top: 0; }
/* ChatRow: a 24 pt mark, the title over its preview, the age in mono on the right */
.pv[data-view="mobile"] .pv-thread,
.pv[data-view="mobile"] .pv-thread.on {
  display: grid;
  flex: none;
  grid-template-areas: "mark name age" "mark snip age";
  grid-template-columns: calc(24 * var(--m)) minmax(0, 1fr) auto;
  column-gap: calc(8 * var(--m));
  row-gap: calc(2 * var(--m));
  align-items: center;
  height: auto;
  min-height: calc(44 * var(--m));
  padding: calc(8 * var(--m)) calc(16 * var(--m));
  border: 0;
  font-size: calc(17 * var(--m));
  font-weight: 500;
  line-height: calc(22 * var(--m));
  color: var(--pvm-fg);
}
/* the open chat: the elevated block across the drawer */
.pv[data-view="mobile"] .pv-thread.on { background: var(--pvm-raised); }
.pv[data-view="mobile"] .pv-thread.on::before { display: none; }
.pv[data-view="mobile"] .pv-thread > svg { grid-area: mark; justify-self: center; width: calc(20 * var(--m)); height: calc(20 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-thread > span { grid-area: name; top: 0; }
.pv[data-view="mobile"] .pv-thread > em,
.pv[data-view="mobile"] .pv-age {
  grid-area: age;
  position: static;
  margin-left: calc(8 * var(--m));
  font-family: var(--mono);
  font-size: calc(12 * var(--m));
  font-style: normal;
  font-weight: 400;
  line-height: calc(16 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-snip {
  grid-area: snip;
  min-width: 0;
  overflow: hidden;
  font-size: calc(12 * var(--m));
  font-weight: 400;
  line-height: calc(16 * var(--m));
  color: var(--pvm-muted);
  text-overflow: ellipsis;
}
/* LaneBottomBar, pinned over the home indicator: Settings, the list search, compose */
.pv[data-view="mobile"] .pv-mbar {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--m));
  width: calc(329.6 * var(--m));
  padding: calc(8 * var(--m)) calc(16 * var(--m)) calc(42 * var(--m));
  border-top: calc(1 * var(--m)) solid var(--pvm-line);
  background: var(--pvm-drawer);
}
.pv[data-view="mobile"] .pv-mbar-gear,
.pv[data-view="mobile"] .pv-mbar-new {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(44 * var(--m));
  height: calc(44 * var(--m));
  border-radius: 50%;
  background: var(--pvm-chip);
}
.pv[data-view="mobile"] .pv-mbar-gear svg { width: calc(24 * var(--m)); height: calc(24 * var(--m)); }
.pv[data-view="mobile"] .pv-mbar-new { background: var(--pv-act); color: var(--pv-brand-ink); }
.pv[data-view="mobile"] .pv-mbar-new svg { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-mbar-find {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(8 * var(--m));
  min-width: 0;
  height: calc(48 * var(--m));
  padding: 0 calc(12 * var(--m)) 0 calc(16 * var(--m));
  border-radius: 9999px;
  background: var(--pvm-chip);
  font-size: calc(17 * var(--m));
  line-height: calc(22 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-mbar-find > span { flex: 1; min-width: 0; overflow: hidden; }
.pv[data-view="mobile"] .pv-mbar-find svg { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
/* the chat the drawer opened over: pushed right to its last 72.4 pt, corners at 16,
   washed in its own canvas colour (OverlappingPanels) */
.pv[data-view="mobile"] .pv-sliver {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(329.6 * var(--m));
  width: calc(402 * var(--m));
  overflow: hidden;
  border-left: calc(1 * var(--m)) solid var(--pvm-line);
  border-radius: calc(16 * var(--m)) 0 0 calc(16 * var(--m));
  background: var(--pvm-canvas);
}
.pv[data-view="mobile"] .pv-sliver::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pvm-canvas);
  opacity: 0.4;
}
.pv[data-view="mobile"] .pv-sliver-head {
  position: absolute;
  top: calc(62 * var(--m));
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--m));
  height: calc(52 * var(--m));
  padding-left: calc(26 * var(--m));
  border-bottom: calc(1 * var(--m)) solid var(--pvm-line);
  font-size: calc(17 * var(--m));
  font-weight: 600;
}
.pv[data-view="mobile"] .pv-sliver-head svg { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-sliver-dock {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(194 * var(--m));
  padding: calc(24 * var(--m)) calc(20 * var(--m)) 0;
  border-top: calc(1 * var(--m)) solid var(--pvm-line);
  border-radius: calc(16 * var(--m)) 0 0 0;
  background: var(--pvm-raised);
  font-size: calc(22 * var(--m));
  line-height: calc(28 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-sliver-dock i {
  position: absolute;
  bottom: calc(50 * var(--m));
  left: calc(12 * var(--m));
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  border-radius: 50%;
  background: var(--pvm-chip);
}

/* the chat (ThreadScreen): its header, the transcript and the docked composer */
.pv[data-view="mobile"] .pv-main { background: var(--pvm-canvas); }
.pv[data-view="mobile"] .pv-mhead {
  display: flex;
  flex: none;
  align-items: center;
  height: calc(52 * var(--m));
  padding: 0 calc(16 * var(--m));
  border-bottom: calc(1 * var(--m)) solid var(--pvm-line);
}
.pv[data-view="mobile"] .pv-mhead-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
}
.pv[data-view="mobile"] .pv-mhead-btn svg { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-mhead-title {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(4 * var(--m));
  min-width: 0;
  font-size: calc(17 * var(--m));
  font-weight: 600;
  line-height: calc(22 * var(--m));
}
.pv[data-view="mobile"] .pv-mhead-title svg { width: calc(14 * var(--m)); height: calc(14 * var(--m)); color: var(--pvm-muted); }
/* the context ring */
.pv[data-view="mobile"] .pv-mhead-ring {
  width: calc(22 * var(--m));
  height: calc(22 * var(--m));
  border: calc(2.5 * var(--m)) solid var(--pvm-edge);
  border-radius: 50%;
}
.pv[data-view="mobile"] .pv-body,
.pv[data-view="mobile"] .pv-body[data-view="thread"] { align-items: stretch; padding: 0; }
/* the transcript, anchored to the composer as the app's list is: the newest turn sits
   on the dock and older lines leave under the header's fade */
.pv[data-view="mobile"] .pv-feed {
  justify-content: flex-end;
  gap: calc(16 * var(--m));
  width: 100%;
  padding: calc(16 * var(--m)) calc(24 * var(--m));
  -webkit-mask-image: linear-gradient(to bottom, transparent, black calc(24 * var(--m)));
  mask-image: linear-gradient(to bottom, transparent, black calc(24 * var(--m)));
}
.pv[data-view="mobile"] .pv-feed > * { flex: none; }
/* the day divider over the first message */
.pv[data-view="mobile"] .pv-feed::before {
  content: "Today";
  display: block;
  flex: none;
  margin: 0 calc(-16 * var(--m));
  padding: calc(4 * var(--m)) 0;
  background:
    linear-gradient(var(--pvm-line), var(--pvm-line)) left center / calc(50% - 28 * var(--m)) calc(1 * var(--m)) no-repeat,
    linear-gradient(var(--pvm-line), var(--pvm-line)) right center / calc(50% - 28 * var(--m)) calc(1 * var(--m)) no-repeat;
  font-size: calc(12 * var(--m));
  line-height: calc(16 * var(--m));
  color: var(--pvm-muted);
  text-align: center;
}
/* the composer dock: full bleed, a hairline and 16 pt corners on top only, open at
   rest on the new chat (field 88, the controls row 56) and folded to its one-line field
   on the thread; 8 pt plus the 34 pt home indicator under it */
.pv[data-view="mobile"] .pv-body .pv-composer {
  gap: 0;
  width: 100%;
  height: auto;
  margin: auto 0 0;
  padding: calc(8 * var(--m)) 0 calc(42 * var(--m));
  border: 0;
  border-top: calc(1 * var(--m)) solid var(--pvm-line);
  border-radius: calc(16 * var(--m)) calc(16 * var(--m)) 0 0;
  background: var(--pvm-raised);
}
.pv[data-view="mobile"] .pv-mline,
.pv[data-view="mobile"] .pv-typed {
  min-height: calc(88 * var(--m));
  margin: 0;
  padding: calc(16 * var(--m)) calc(20 * var(--m)) 0;
  font-size: calc(22 * var(--m));
  line-height: calc(28 * var(--m));
}
.pv[data-view="mobile"] .pv-mline { overflow: hidden; color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-typed { color: var(--pvm-fg); }
.pv[data-view="mobile"] .pv-typed-caret { width: calc(2 * var(--m)); height: calc(24 * var(--m)); vertical-align: calc(-5 * var(--m)); background: var(--pv-act); }
.pv[data-view="mobile"] .pv-body:not([data-view="thread"]) .pv-mline[data-line="ask"],
.pv[data-view="mobile"] .pv-body[data-view="thread"] .pv-mline[data-line="help"],
.pv[data-view="mobile"] .pv-composer[data-typing] .pv-mline,
.pv[data-view="mobile"] .pv-body[data-view="thread"] .pv-foot { display: none; }
.pv[data-view="mobile"] .pv-body[data-view="thread"] .pv-mline { min-height: calc(60 * var(--m)); }
/* the controls row: plus, the mode segment, the model chip with the tenant's face, the
   mic, and the accent send pill (the voice wave at rest, the arrow once text is in) */
.pv[data-view="mobile"] .pv-foot { gap: calc(6 * var(--m)); height: calc(56 * var(--m)); padding: 0 calc(12 * var(--m)); }
.pv[data-view="mobile"] .pv-plus,
.pv[data-view="mobile"] .pv-round,
.pv[data-view="mobile"] .pv-round + .pv-round {
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pvm-chip);
  color: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-plus svg,
.pv[data-view="mobile"] .pv-round svg { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-pill {
  gap: calc(6 * var(--m));
  height: calc(40 * var(--m));
  padding: 0 calc(8 * var(--m)) 0 0;
  border: 0;
  border-radius: 9999px;
  background: var(--pvm-chip);
  font-size: 0;
  color: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-pill > span { top: 0; gap: calc(4 * var(--m)); }
.pv[data-view="mobile"] .pv-pill > span:first-child {
  justify-content: center;
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  border-radius: 50%;
  background: var(--pvm-edge);
}
.pv[data-view="mobile"] .pv-pill > span > svg { width: calc(18 * var(--m)); height: calc(18 * var(--m)); margin: 0; color: var(--pvm-fg); }
.pv[data-view="mobile"] .pv-pill > span:first-child .pv-cv { display: none; }
.pv[data-view="mobile"] .pv-pill .pv-cv { width: calc(12 * var(--m)); height: calc(12 * var(--m)); margin: 0; color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-model {
  flex: 1;
  gap: calc(6 * var(--m));
  height: calc(40 * var(--m));
  margin: 0;
  padding: 0 calc(8 * var(--m)) 0 calc(6 * var(--m));
  border-radius: 9999px;
  background: var(--pvm-chip);
  color: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-model .pv-face { width: calc(24 * var(--m)); height: calc(24 * var(--m)); font-size: calc(10 * var(--m)); }
.pv[data-view="mobile"] .pv-model-name { display: flex; flex: 1; flex-direction: column; top: 0; min-width: 0; }
.pv[data-view="mobile"] .pv-model-name > b,
.pv[data-view="mobile"] .pv-model-name > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv[data-view="mobile"] .pv-model-name > b { font-size: calc(13 * var(--m)); font-weight: 500; line-height: calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-model-name > small { font-size: calc(12 * var(--m)); line-height: calc(14 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-model > .pv-cv { width: calc(12 * var(--m)); height: calc(12 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-send { width: calc(62 * var(--m)); height: calc(40 * var(--m)); border-radius: 9999px; }
.pv[data-view="mobile"] .pv-send svg { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }
.pv[data-view="mobile"] .pv-send > svg:first-child,
.pv[data-view="mobile"] .pv-composer[data-typing] .pv-send-wave { display: none; }
.pv[data-view="mobile"] .pv-composer[data-typing] .pv-send > svg:first-child { display: block; }

/* the replay's turns in the app's phone anatomy: MessageRow's bubble; TurnHead (the
   tenant's face at the row's edge, a thought tail, the working label in its bubble,
   everything after it hung at 62 pt); StepLine at 15/20; the settled head; the answer's
   lead line at 20/26 over the 15/20 body; the cards at 16 */
.pv[data-view="mobile"] .pv-turn-user { padding: 0; }
.pv[data-view="mobile"] .pv-bubble {
  max-width: 85%;
  padding: calc(12 * var(--m)) calc(16 * var(--m));
  border-radius: calc(16 * var(--m));
  background: var(--pvm-raised);
  font-size: calc(15 * var(--m));
  line-height: calc(20 * var(--m));
  color: var(--pvm-fg);
}
.pv[data-view="mobile"] .pv-turn-bot { gap: calc(12 * var(--m)); }
.pv[data-view="mobile"] .pv-sonar {
  position: relative;
  align-self: flex-start;
  margin-left: calc(50 * var(--m));
  padding: calc(8 * var(--m)) calc(12 * var(--m));
  border-radius: 9999px;
  background: var(--pvm-raised);
}
.pv[data-view="mobile"] .pv-sonar::before {
  content: "";
  position: absolute;
  top: calc(16 * var(--m));
  left: calc(-13 * var(--m));
  width: calc(8 * var(--m));
  height: calc(8 * var(--m));
  border-radius: 50%;
  background: var(--pvm-raised);
}
.pv[data-view="mobile"] .pv-sonar-mark {
  position: absolute;
  top: calc(6 * var(--m));
  left: calc(-50 * var(--m));
}
.pv[data-view="mobile"] .pv-sonar-mark,
.pv[data-view="mobile"] .pv-outcome-mark { width: calc(24 * var(--m)); height: calc(24 * var(--m)); }
.pv[data-view="mobile"] .pv-sonar-mark svg,
.pv[data-view="mobile"] .pv-outcome-mark svg { width: calc(15 * var(--m)); height: calc(15 * var(--m)); }
.pv[data-view="mobile"] .pv-think > b,
.pv[data-view="mobile"] .pv-outcome-mark.pv-think > b { font-size: calc(10 * var(--m)); }
.pv[data-view="mobile"] .pv-think[data-face="icon"] { border-width: calc(1 * var(--m)); }
.pv[data-view="mobile"] .pv-sonar-label {
  font-size: calc(15 * var(--m));
  line-height: calc(20 * var(--m));
  background-image: linear-gradient(90deg, var(--pvm-muted) 0 35%, var(--pvm-fg) 50%, var(--pvm-muted) 65% 100%);
}
.pv[data-view="mobile"] .pv-steps { gap: calc(4 * var(--m)); padding-left: calc(44 * var(--m)); }
.pv[data-view="mobile"] .pv-step { gap: calc(8 * var(--m)); font-size: calc(15 * var(--m)); line-height: calc(20 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-step-mark { width: calc(10 * var(--m)); height: calc(10 * var(--m)); }
.pv[data-view="mobile"] .pv-step-dot { width: calc(6 * var(--m)); height: calc(6 * var(--m)); }
.pv[data-view="mobile"] .pv-step-check { width: calc(10 * var(--m)); height: calc(10 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-step-verb { color: var(--pvm-fg); }
.pv[data-view="mobile"] .pv-outcome {
  position: relative;
  gap: calc(6 * var(--m));
  min-height: calc(24 * var(--m));
  padding-left: calc(62 * var(--m));
  font-size: calc(15 * var(--m));
  line-height: calc(20 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-outcome-mark { position: absolute; top: calc(-2 * var(--m)); left: 0; }
.pv[data-view="mobile"] .pv-outcome-cv { width: calc(14 * var(--m)); height: calc(14 * var(--m)); }
.pv[data-view="mobile"] .pv-prose,
.pv[data-view="mobile"] .pv-art { margin-left: calc(62 * var(--m)); }
.pv[data-view="mobile"] .pv-reply { font-size: calc(15 * var(--m)); line-height: calc(20 * var(--m)); color: var(--pvm-fg); }
/* the answer's lead: its first sentence as its own block at 20/26 (demo.js leadWords),
   the body under it at 15/20; on the desktop the two spans are one paragraph */
.pv[data-view="mobile"] .pv-reply-lead {
  display: block;
  margin-bottom: calc(4 * var(--m));
  font-size: calc(20 * var(--m));
  font-weight: 500;
  line-height: calc(26 * var(--m));
}
.pv[data-view="mobile"] .pv-reply-lead:empty { display: none; }
.pv[data-view="mobile"] .pv-table,
.pv[data-view="mobile"] .pv-draft {
  border: calc(1 * var(--m)) solid var(--pvm-line);
  border-radius: calc(16 * var(--m));
  background: var(--pvm-canvas);
}
.pv[data-view="mobile"] .pv-table-head {
  gap: calc(8 * var(--m));
  padding: calc(8 * var(--m)) calc(12 * var(--m));
  border-bottom: calc(1 * var(--m)) solid var(--pvm-line);
  font-size: calc(12 * var(--m));
  line-height: calc(16 * var(--m));
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-table-title,
.pv[data-view="mobile"] .pv-table table,
.pv[data-view="mobile"] .pv-draft-subject,
.pv[data-view="mobile"] .pv-draft-body,
.pv[data-view="mobile"] .pv-list { color: var(--pvm-fg); }
.pv[data-view="mobile"] .pv-table-head svg { width: calc(14 * var(--m)); height: calc(14 * var(--m)); }
/* the app's table sizes its columns to their content and wraps a long cell inside its
   column, never an ellipsis (Markdown.tsx tableColumnWidths): auto layout, cells padded
   6 pt each way at the body's 15/20, stepped down to fit by demo.js fitTables (--tf the
   size, --tpx the side padding: the app's ladder, 15 to 12). break-word, not anywhere:
   anywhere would drop each column's floor to one letter and let a tight table split an
   ID like MF-20418, where break-word keeps whole words and only breaks a word longer
   than its column */
.pv[data-view="mobile"] .pv-table table { table-layout: auto; font-size: calc(var(--tf, 15) * var(--m)); line-height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-table table[data-measure] th,
.pv[data-view="mobile"] .pv-table table[data-measure] td { white-space: nowrap; }
.pv[data-view="mobile"] .pv-table th,
.pv[data-view="mobile"] .pv-table td {
  overflow: visible;
  padding: calc(6 * var(--m)) calc(var(--tpx, 6) * var(--m));
  border-bottom: calc(1 * var(--m)) solid var(--pvm-line);
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
  vertical-align: top;
}
.pv[data-view="mobile"] .pv-table th { background: var(--pvm-raised); font-size: calc(12 * var(--m)); line-height: calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-draft { gap: calc(12 * var(--m)); padding: calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-draft-eyebrow,
.pv[data-view="mobile"] .pv-draft-foot { font-size: calc(12 * var(--m)); line-height: calc(16 * var(--m)); color: var(--pvm-muted); }
.pv[data-view="mobile"] .pv-draft-subject {
  padding: calc(8 * var(--m)) calc(12 * var(--m));
  border-radius: calc(16 * var(--m));
  background: var(--pvm-raised);
  font-size: calc(15 * var(--m));
  line-height: calc(20 * var(--m));
}
.pv[data-view="mobile"] .pv-draft-body { gap: calc(6 * var(--m)); font-size: calc(15 * var(--m)); line-height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-draft-foot { gap: calc(12 * var(--m)); }
.pv[data-view="mobile"] .pv-draft-foot svg { width: calc(16 * var(--m)); height: calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-draft-send { height: calc(32 * var(--m)); padding: 0 calc(14 * var(--m)); border-radius: 9999px; font-size: calc(15 * var(--m)); }
.pv[data-view="mobile"] .pv-list { font-size: calc(15 * var(--m)); line-height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-list-title { margin-bottom: calc(4 * var(--m)); }
.pv[data-view="mobile"] .pv-list ul { padding-left: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-list li + li { margin-top: calc(4 * var(--m)); }
/* The replay's visuals on the phone (#47): a live visual is never a floating
   picture-in-picture. It is an inline card in the transcript, as superbot-mobile's
   BrowserDriveLiveCard: hung at the answer's 62 pt like .pv-art, the full answer width,
   corners calc(16 * var(--m)), a calc(1 * var(--m)) var(--pvm-line) hairline on
   var(--pvm-canvas), a 44 pt head row (the title at 17/22, then expand and stop as
   40 pt var(--pvm-chip) circles), the frame under it: the same page the desktop's float
   shows, on the phone's --m and its theme (demo.js builds both at the same beats and
   CSS shows the one this view draws). The reply's chart card wears the phone's card. */
.pv[data-view="mobile"] .pv-live,
.pv[data-view="mobile"] .pv-chart {
  --k: var(--m);
  --lv-fg: var(--pvm-fg);
  --lv-muted: var(--pvm-muted);
  --lv-line: var(--pvm-line);
  --lv-card: var(--pvm-canvas);
  --lv-edge: var(--pvm-line);
  --lv-ground: var(--pvm-raised);
  --lv-ink: var(--pvm-canvas);
}
.pv[data-view="mobile"] .pv-livecard { margin-left: calc(62 * var(--m)); }
.pv[data-view="mobile"] .pv-live-head { height: calc(44 * var(--m)); padding: 0 calc(2 * var(--m)) 0 calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-live-title { font-size: calc(17 * var(--m)); font-weight: 600; line-height: calc(22 * var(--m)); }
.pv[data-view="mobile"] .pv-live-label { font-size: calc(15 * var(--m)); line-height: calc(20 * var(--m)); }
.pv[data-view="mobile"] .pv-live-btn {
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  border: 0;
  border-radius: 50%;
  background: var(--pvm-chip);
}
.pv[data-view="mobile"] .pv-live-btn svg { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }
/* the phone's well is 288 pt wide, so the page gives its body more of it */
.pv[data-view="mobile"] .pv-page { gap: calc(6 * var(--m)); padding: calc(10 * var(--m)) calc(12 * var(--m)) calc(36 * var(--m)); }
.pv[data-view="mobile"] .pv-live-skel { inset: calc(10 * var(--m)) calc(12 * var(--m)) calc(36 * var(--m)); gap: calc(6 * var(--m)); }
.pv[data-view="mobile"] .pv-live-pill { bottom: calc(8 * var(--m)); }
.pv[data-view="mobile"] .pv-pin-label { font-size: calc(10 * var(--m)); line-height: calc(17 * var(--m)); }
.pv[data-view="mobile"] .pv-doc { gap: 0; padding: calc(8 * var(--m)) calc(12 * var(--m)); }
.pv[data-view="mobile"] .pv-doc-line { font-size: calc(11 * var(--m)); line-height: calc(15 * var(--m)); }
.pv[data-view="mobile"] .pv-chart { width: auto; }
.pv[data-view="mobile"] .pv-chart-head { height: auto; padding: calc(8 * var(--m)) calc(12 * var(--m)); font-size: calc(12 * var(--m)); line-height: calc(16 * var(--m)); }
.pv[data-view="mobile"] .pv-chart-meta { font-size: calc(12 * var(--m)); }
.pv[data-view="mobile"] .pv-chart-body { height: calc(150 * var(--m)); margin: calc(12 * var(--m)) calc(12 * var(--m)) calc(8 * var(--m)); }
@media (prefers-reduced-motion: reduce) {
  .pv[data-view="mobile"] .pv-sonar-label { color: var(--pvm-muted); background: none; }
}

/* the window never reflows: at every width it is the same picture, scaled */
@media (max-width: 640px) {
  /* the bar wraps here, so a separator would be left dangling at a line end */
  .pv-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv, .pv *, .pv-figure, .pv-figure > .pv, .pv-rail, .pv-icons, .pv-logo, .pv-send, .pv-composer, .pv-swatch, .pv-swatch::before, .domain-spinner,
  .screen-rail { transition: none; animation: none; }
}

/* ---------- shared band type ---------- */
.biz h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(34px, 5.7 * var(--vw), 82px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.biz h2 .l { display: block; white-space: nowrap; }
.b-sub {
  margin: var(--s5) 0 0;
  max-width: 34em;
  font-size: clamp(17px, 1.7 * var(--vw), 24px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* ---------- black: 01 your view ---------- */
.b-view {
  background: var(--ink);
  color: var(--text);
  padding: var(--s9) var(--edge-r) var(--s9) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.b-view .section-label { margin-bottom: var(--s6); }
.b-view .b-sub { color: var(--text-2); font-size: clamp(18px, 2 * var(--vw), 28px); }

/* the bold thing: a light overview behind, a dark person page in front, lower
   right. Both are real renders of the shipped Relay Team tab at 2x. */
.screens {
  position: relative;
  width: 94%;
  margin-top: var(--s8);
  aspect-ratio: 100 / 52;
}
.screen {
  position: absolute;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-frame);
  background: var(--ink);
  container-type: inline-size;
}
.screen img { display: block; width: 100%; height: auto; }
.screen-back { top: 0; left: 0; width: 78.7%; }
.screen-front { top: 30.2%; left: 42.1%; width: 57.9%; border-color: var(--text-3); }

/* The two captures carry the app's own sidebar. With a brand applied it is
   repainted in DOM over the raster: a translucent tint keeps the baked
   navigation legible, and an opaque chip of the same composite hides the
   original mark and tenant name. Unbranded, both are hidden and the capture
   shows exactly as it always did. It only ever shows on a brand's own colour, so its
   quiet text is 90% off-white, 4.5:1 there (brand application). */
.screen-rail {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  /* the baked sidebar runs to x=397 of 2560, its 2px border to 399 and, on the dark
     capture, a bluish shadow to 404; covering to ~407 hides that whole edge, so no
     navy sliver or blue hairline peeks out (both captures are plain background there) */
  width: 15.9%;
  padding: 2.4cqw 1cqw 2cqw 1.1cqw;
  overflow: hidden;
  background: var(--brand-rail);
  border-right: 1px solid color-mix(in srgb, #f4f5f7 10%, transparent);
  color: #f4f5f7;
  font-size: 0.9cqw;
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, background-color 260ms ease;
}
body[data-branded="true"] .screen-rail { opacity: 1; }

.sr-top { display: flex; align-items: center; gap: 0.6cqw; min-width: 0; }
.screen-rail .mark-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9cqw;
  font-weight: 600;
  letter-spacing: 0;
}
.sr-name {
  min-width: 0;
  overflow: hidden;
  font-size: 1.15cqw;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sr-chev { flex: none; width: 0.9cqw; height: 0.9cqw; color: color-mix(in srgb, #f4f5f7 60%, transparent); }
.sr-relay {
  align-self: flex-start;
  margin-top: 0.9cqw;
  padding: 0.2cqw 0.7cqw;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #f4f5f7 14%, transparent);
  font-size: 0.78cqw;
  font-weight: 500;
}
.sr-fine { margin-top: 0.7cqw; font-size: 0.72cqw; color: color-mix(in srgb, #f4f5f7 90%, transparent); }
.sr-ver { margin-top: 0.2cqw; font-family: var(--mono); letter-spacing: 0; }
.sr-nav { display: flex; flex-direction: column; gap: 0.5cqw; margin-top: 2.4cqw; }
.sr-item {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.45cqw 0.7cqw;
  border-radius: 0.5cqw;
  color: color-mix(in srgb, #f4f5f7 90%, transparent);
  white-space: nowrap;
}
.sr-item svg { flex: none; width: 0.95cqw; height: 0.95cqw; }
.sr-item.on { background: color-mix(in srgb, #f4f5f7 14%, transparent); color: #ffffff; }
.sr-foot { display: flex; flex-direction: column; gap: 0.5cqw; margin-top: auto; }
.sr-account {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding-top: 1.4cqw;
  border-top: 1px solid color-mix(in srgb, #f4f5f7 16%, transparent);
}
.sr-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: color-mix(in srgb, #f4f5f7 18%, transparent);
  font-size: 0.7cqw;
  font-weight: 600;
}
.sr-mail {
  min-width: 0;
  overflow: hidden;
  font-size: 0.72cqw;
  color: color-mix(in srgb, #f4f5f7 90%, transparent);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sr-pro {
  flex: none;
  padding: 0.1cqw 0.45cqw;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #f4f5f7 18%, transparent);
  font-size: 0.62cqw;
  font-weight: 500;
}
.sr-status { display: flex; align-items: center; gap: 0.4cqw; font-size: 0.72cqw; color: color-mix(in srgb, #f4f5f7 90%, transparent); }
.sr-status i { width: 0.45cqw; height: 0.45cqw; border-radius: 50%; background: #3ecf8e; }

/* the second row: two captures side by side, each a hairline frame with its
   line under a hairline (the team control / team spend pair on superbot.gg/teams) */
.panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  margin-top: var(--s8);
}
.pane {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-frame);
  overflow: hidden;
  background: var(--ink);
}
.pane img { display: block; width: 100%; height: auto; }

/* every capture is a button that opens it at full size */
.zoom-hit { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom-hit:focus-visible { outline: 2px solid var(--field); outline-offset: -2px; border-radius: inherit; }
.pane .zoom-hit { border-radius: var(--r-frame) var(--r-frame) 0 0; }
.pane figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-small);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- light: 02 your work ---------- */
.b-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: var(--s9);
  align-items: center;
  background: var(--text);
  color: var(--graphite);
  padding: var(--s9) var(--edge-r) var(--s9) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.b-work > * { min-width: 0; }
.b-work h2 { color: var(--ink); font-size: clamp(34px, 6.4 * var(--vw), 92px); }
.b-work .section-label { color: var(--graphite); margin: 0 0 var(--s6); }
.b-work .b-sub { font-size: clamp(16px, 1.4 * var(--vw), 20px); }

.work-panel { min-width: 0; }
.toggles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s5);
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-frame);
  padding: var(--s5) var(--s5) var(--s4);
}
.tg-col { min-width: 0; }
.tg + .tg { margin-top: var(--s5); }
.tg-head {
  margin: 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--fog);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--graphite);
}
.rows { margin: 0; padding: 0; list-style: none; }
.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  border-bottom: 1px solid var(--fog);
}
.row:last-child { border-bottom: 0; }
.row img { width: 28px; height: 28px; flex: none; }
.row .name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* the quiet line under the card: a text link in running copy, no arrow */
.work-api {
  margin: var(--s3) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.work-api a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--fog);
  text-underline-offset: 0.15em;
}
.work-api a:hover { text-decoration-color: var(--ink); }

/* a switch: outlined off, the site blue on. Decorative: it only flips its own
   aria-checked (business.js), nothing is saved or sent. The button is the touch box
   (the token's height, transparent); the outlined track and the thumb are drawn
   inside it, so the target a finger finds is the real element and the look is the
   track's own. */
.sw {
  position: relative;
  flex: none;
  width: var(--sw-w);
  min-height: var(--target);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sw::before {
  content: "";
  position: absolute;
  inset: calc((100% - var(--sw-h)) / 2) 0;
  background: transparent;
  border: 2px solid var(--switch-off);
  border-radius: var(--r-pill);
  transition: background-color var(--quick) ease-out, border-color var(--quick) ease-out;
}
.sw::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--sw-thumb) / 2);
  /* as far from the track's end as from its top and bottom: (30 - 20) / 2 = 5px */
  left: calc((var(--sw-h) - var(--sw-thumb)) / 2);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: var(--r-pill);
  background: var(--switch-off);
  transition: transform var(--quick) ease-out, background-color var(--quick) ease-out;
}
.sw[aria-checked="true"]::before { background: var(--field); border-color: var(--field); }
/* on: the thumb travels the track less its height, so it keeps the same end gap (52 - 30 = 22px) */
.sw[aria-checked="true"]::after { background: var(--paper); transform: translateX(calc(var(--sw-w) - var(--sw-h))); }

/* ---------- black: contact ---------- */
.b-contact {
  display: grid;
  grid-template-columns: var(--b-label) auto;
  justify-content: start;
  align-items: center;
  gap: var(--s6) var(--s7);
  background: var(--ink);
  color: var(--text);
  padding: var(--s8) var(--edge-r) var(--s8) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.b-contact .section-label { margin: 0; color: var(--text-2); }
.b-contact .btn { justify-self: start; }

.biz .site-footer { border-top: 1px solid var(--hairline); }

/* ---------- mid widths ---------- */
@media (max-width: 1375px) {
  .b-work { gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}
@media (max-width: 1125px) {
  /* one column, no rules: the copy, then the window it repaints */
  .b-hero { --h1: clamp(42px, 12 * var(--vw), 80px); }
  .b-hero-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s7);
    margin-inline: 0;
    padding: var(--s8) var(--edge-r) var(--s8) var(--edge);
    padding-left: var(--edge);
    padding-right: var(--edge-r);
    border: 0;
  }
  .b-hero-copy, .b-hero-side { display: block; padding: 0; border: 0; }
  .b-hero h1 { margin: var(--s6) 0; }
  .b-work { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .b-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .biz .nav .brand { padding-right: var(--s5); }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .b-hero { --h1: clamp(38px, 12.3 * var(--vw), 56px); }
  .b-hero-grid { padding-top: var(--s7); padding-bottom: var(--s7); }
  .lockup { gap: var(--s3); }
  .lockup-mark { width: 36px; height: 36px; }
  .lockup-name { font-size: 28px; }
  .lockup-rule { height: 28px; }
  .lockup-kind { font-size: 24px; }
  .lockup-by { font-size: var(--t-body); }

  .b-view, .b-work { padding-top: var(--s8); padding-bottom: var(--s8); }
  .biz h2, .b-work h2 { font-size: clamp(28px, 9.4 * var(--vw), 40px); }
  .b-view .section-label { margin-bottom: var(--s5); }
  .b-work .section-label { margin-bottom: var(--s5); }

  /* the overlap, stacked: the dark page rides over the light one's lower edge */
  .screens { width: 100%; aspect-ratio: auto; margin-top: var(--s7); }
  .screen { position: static; }
  .screen-back { width: 100%; }
  .screen-front { position: relative; top: auto; left: auto; width: 88%; margin: -22% 0 0 auto; }
  .panes { grid-template-columns: minmax(0, 1fr); margin-top: var(--s7); }

  .toggles {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s4) var(--s4) var(--s3);
  }
  .tg-col + .tg-col { margin-top: var(--s5); }
  .b-contact { padding-top: var(--s7); padding-bottom: var(--s7); }
  .biz .site-footer { padding-bottom: var(--s8); }
}

/* the api link is a text link in running copy (SC 2.5.8 excepts it): it stays inline, and
   on a finger its padding grows the hit area past the word without moving the sentence */
@media (pointer: coarse) {
  .work-api a {
    padding: var(--s3) var(--s2);
    margin-inline: calc(-1 * var(--s2));
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sw::before, .sw::after, .domain-go { transition: none; }
}

/* ==========================================================================
   The three relay sections: 01 everyone (black), 02 your setup (light),
   04 your spend (light). Ported from brand/mockups/business-heroes/mockups.css
   (a47d9aa), the rules v1-everyone, v4-setup and v2-spend use and nothing
   else. Class names keep the mockup's (mx-*, rw-*, v1/v4/v2) so the two stay
   diffable; the one rename is .end -> .rw-end, which collided with the nav's
   <a class="cell end">.

   Spacing is --s1..--s10 and type is --t-* only. Unitless line-heights and em
   tracking repeat the values above; percentages, fr ratios and the inline
   meter widths are the mockup's own overlap geometry and window data. Inside
   a window the type runs at --t-label (12px) and --t-small (14px), the
   relay's own caption and body steps, and rows keep the relay's 12px / 16px
   padding. Radii: --r-frame and --r-pill, 50% on avatars and dots only.

   Every simulated window is a picture: role="img" with a sentence label, so
   nothing inside it takes focus, and no state is real. No motion here.
   ========================================================================== */

/* ---------- the section ---------- */
.mx-sec {
  position: relative;
  overflow: clip;
  padding: var(--s9) var(--edge-r) var(--s9) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.mx-dark { background: var(--ink); color: var(--text); }
.mx-light { background: var(--text); color: var(--graphite); }
.mx-light h2 { color: var(--ink); }
.mx-sec .section-label { margin: 0 0 var(--s6); }
.mx-dark .section-label { color: var(--text-2); }
.mx-light .section-label { color: var(--graphite); }
.mx-dark .b-sub { color: var(--text-2); }
.mx-sec .b-sub { text-wrap: balance; }
.mx-sub .s { display: block; }
/* every relay window sits whole inside its section: the section's own padding runs
   under it, so its lower border and corners show and the next band never meets it
   (01 once ran off the band's lower edge, which read as a layout bug) */

/* the copy block, then the stage */
.mx-copy { min-width: 0; }
.mx-stage { position: relative; min-width: 0; margin-top: var(--s7); }

/* a split section: copy on one side, the stage on the other */
.mx-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--s8);
  align-items: center;
}
.mx-split > * { min-width: 0; }
.mx-split .mx-stage { margin-top: 0; }
.mx-split-r { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }

/* ---------- a relay window ---------- */
.rw {
  --w-bg: var(--paper);
  --w-fg: var(--ink);
  --w-muted: var(--graphite);
  --w-line: var(--fog);
  --w-tint: color-mix(in srgb, var(--graphite) 6%, var(--paper));
  --w-track: color-mix(in srgb, var(--graphite) 14%, var(--paper));
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--w-bg);
  color: var(--w-fg);
  border: 1px solid var(--w-line);
  border-radius: var(--r-frame);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
/* the dark scheme: black, with a hairline at 14% off-white */
.rw-ink {
  --w-bg: var(--ground);
  --w-fg: var(--text);
  --w-muted: var(--text-2);
  --w-line: color-mix(in srgb, var(--text) 14%, transparent);
  --w-tint: var(--tint);
  --w-track: color-mix(in srgb, var(--text) 18%, transparent);
  border-color: var(--text-3);
}
/* a paper window on a black band keeps a quiet edge */
.mx-dark .rw:not(.rw-ink) { border-color: var(--fog); }

.rw-bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-width: 0;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--w-line);
  white-space: nowrap;
}
.rw-dots { display: flex; flex: none; gap: var(--s2); }
.rw-dots i {
  display: block;
  width: var(--s3);
  height: var(--s3);
  border-radius: 50%;
  background: var(--w-track);
}
.rw-tenant {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-weight: 500;
}
/* the tenant's own mark: Meridian Freight is a fictional white-label build. By
   default it is superbot blue with ink, like the hero preview's tile, so every
   window reads as the same app on light and dark sections alike (ink on #3b6ef6
   is 4.55:1). With a brand applied it takes the brand colour and the
   contrast-picked ink. */
.rw-mono {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  border-radius: var(--r-frame);
  background: var(--brand, var(--field));
  color: var(--brand-ink, var(--ink));
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0;
}
.rw-crumbs {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  color: var(--w-muted);
  font-size: var(--t-label);
}
.rw-crumbs svg { flex: none; width: var(--s3); height: var(--s3); }
.rw-crumbs b { font-weight: 500; color: var(--w-fg); }

.rw-page { padding: var(--s5); min-width: 0; }
.rw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
}
.rw-title {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--w-fg);
}
.rw-lede { margin: var(--s1) 0 0; color: var(--w-muted); text-wrap: pretty; }

/* a panel inside the page: the window's one nesting level */
.rw-panel {
  min-width: 0;
  border: 1px solid var(--w-line);
  border-radius: var(--r-frame);
  background: var(--w-bg);
}
.rw-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
}
.rw-panel-title { margin: 0; font-size: var(--t-small); font-weight: 500; color: var(--w-fg); }
.rw-cap { margin: 0; font-size: var(--t-small); color: var(--w-muted); text-wrap: balance; }

/* ---------- rows ---------- */
.rw-rows { margin: 0; padding: 0; list-style: none; }
.rw-row {
  display: grid;
  align-items: center;
  gap: var(--s2) var(--s4);
  min-width: 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--w-line);
}
.rw-row > * { min-width: 0; }
.rw-colhead {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
  font-size: var(--t-label);
  color: var(--w-muted);
  white-space: nowrap;
}

.who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.who > span { min-width: 0; }
.av {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--s6);
  height: var(--s6);
  border-radius: 50%;
  background: var(--w-tint);
  border: 1px solid var(--w-line);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--w-fg);
}
.who-name {
  display: block;
  overflow: hidden;
  font-weight: 500;
  color: var(--w-fg);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.who-sub { display: block; font-size: var(--t-small); color: var(--w-muted); white-space: nowrap; }

.mono {
  font-family: var(--mono);
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.dim { color: var(--w-muted); }
.rw-end { text-align: right; justify-self: end; }

/* a state chip: the word carries the state; fill and stroke only rank it */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s5);
  padding: 0 var(--s2);
  border: 1px solid var(--w-line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  color: var(--w-fg);
  white-space: nowrap;
}
.chip-near { border-color: var(--w-fg); }
.chip-over { background: var(--w-fg); border-color: var(--w-fg); color: var(--w-bg); }
.chip-paused { border-style: dashed; border-color: var(--w-muted); color: var(--w-muted); }

/* a status dot beside its word */
.dot { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.dot::before {
  content: "";
  flex: none;
  width: var(--s2);
  height: var(--s2);
  border-radius: 50%;
  background: currentColor;
}

/* a thin meter: muted under the line, the full ink at or past it */
.meter {
  display: block;
  height: var(--s1);
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--w-track);
}
.meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--w-muted); }
.meter-hot > i { background: var(--w-fg); }

/* a window's buttons and fields: pills */
.wbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--s6);
  padding: 0 var(--s3);
  border: 1px solid var(--w-line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  color: var(--w-fg);
  white-space: nowrap;
}
.wbtn-primary { background: var(--brand, var(--field)); border-color: var(--brand, var(--field)); color: var(--brand-ink, var(--ink)); }
.wbtn-quiet { border-color: transparent; color: var(--w-muted); }
.wbtn-icon { width: var(--s6); padding: 0; }
.wbtn-icon svg { width: var(--s4); height: var(--s4); }
.wfield {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--s6);
  padding: 0 var(--s3);
  border: 1px solid var(--w-line);
  border-radius: var(--r-pill);
  background: var(--w-bg);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0;
  color: var(--w-muted);
  white-space: nowrap;
}

/* a provider or app mark */
.mark-box {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--s6);
  height: var(--s6);
  border: 1px solid var(--w-line);
  border-radius: var(--r-frame);
  background: var(--w-bg);
}
.mark-box svg { width: var(--s4); height: var(--s4); fill: currentColor; }
.mark-box b { font-size: var(--t-label); font-weight: 600; letter-spacing: 0; color: var(--w-fg); }

/* the one accent figure a section may carry. --brand-text is the brand mixed toward
   ink until it clears 4.5:1 on paper, so a pale brand never disappears. */
.hi { color: var(--brand-text, var(--field)); font-weight: 600; }

/* ---------- brand application ----------
   Set by business.js on <body>: --brand, --brand-ink (whichever of ink/off-white
   reads on it) and --brand-text. Unset by default, so nothing here fires until a
   domain has been resolved. */
/* --field is the page's one accent: primary pills, the toggle switches, the text
   selection, the domain outline and the global focus ring all read it, so
   rebinding it moves every superbot blue to the visitor's at once. The ring takes
   the contrast-adjusted tint, so a pale brand still draws a visible ring. */
body[data-branded="true"] {
  --field: var(--brand);
  /* the branded rail without relative colour: the brand at 46% over near-black */
  --brand-rail: color-mix(in oklab, var(--field) 46%, #070a14);
}
/* With relative colour the rail is the brand's own hue and chroma, darkened only as far
   as its text needs: OKLCH lightness capped at 0.46, measured over every sRGB colour as
   Chrome clips it, so the rail's off-white text clears 5.2:1 and its 90% body text
   (--pv-rail-text) 4.5:1 on any brand. A brand already darker keeps its own colour.
   The accent as text on ink: lifted to OKLCH lightness 0.74, 4.5:1 on black for any
   hue, unset without relative colour so its readers fall back to the raw accent. */
@supports (color: oklch(from red l c h)) {
  body[data-branded="true"] {
    --brand-rail: oklch(from var(--field) min(l, 0.46) c h);
    --field-on-ink: oklch(from var(--field) max(l, 0.74) c h);
  }
}
body[data-branded="true"] :focus-visible { outline-color: var(--brand-text); }
/* the branded rail is lighter than the navy, so its quiet text steps up: every line on
   it is 90% off-white or more, 4.5:1 over any brand at the 0.46 cap, and the names go to
   full strength to keep the two steps (the phone drawer draws its own tokens) */
body[data-branded="true"] .pv:not([data-view="mobile"]) {
  --pv-rail-text: #f4f5f7;
  --pv-rail-muted: color-mix(in srgb, #f4f5f7 90%, transparent);
}
body[data-branded="true"] .pv:not([data-view="mobile"]) .pv-thread > em,
body[data-branded="true"] .pv:not([data-view="mobile"]) .pv-mail { color: var(--pv-rail-muted); }

body[data-branded="true"] .mark-box[data-tenant] {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: transparent;
}
/* the initials take the tile's measured ink, not the window's own foreground */
body[data-branded="true"] .mark-box[data-tenant] b { color: inherit; }

/* the site's own icon replaces the monogram in every tenant tile. A failed icon
   clears data-has-icon, so a broken image never leaves a blank white tile. */
.brand-icon { display: none; width: 78%; height: 78%; object-fit: contain; border-radius: inherit; }
.mark-tile { position: relative; overflow: hidden; }
body[data-has-icon="true"] .mark-box[data-tenant],
body[data-has-icon="true"] .rw-mono,
body[data-has-icon="true"] .pv-logo { background: var(--paper); color: var(--ink); }
body[data-has-icon="true"] .mark-tile .brand-icon { display: block; }
body[data-has-icon="true"] .mark-tile > b { display: none; }

/* ---------- phone ---------- */
@media (max-width: 1125px) {
  .mx-split, .mx-split-r { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .mx-split-r .mx-copy { order: -1; }
}
@media (max-width: 640px) {
  .mx-sec { padding-top: var(--s8); padding-bottom: var(--s8); }
  .mx-sec .section-label { margin-bottom: var(--s5); }
  .mx-stage { margin-top: var(--s6); }
  .rw-page { padding: var(--s4); }
  .rw-bar { padding: var(--s2) var(--s3); gap: var(--s3); overflow: hidden; }
  .rw-row { padding: var(--s3); }
  .rw-panel-head { padding: var(--s3); }
  .ph-hide { display: none !important; }
}
@media (max-width: 359px) {
  .rw-dots { display: none; }
}

/* ---------- v1 everyone: the people table under the Add person popover ---------- */
.v1-back { width: 84%; }
/* the popover opens from the head's Add person button, flipped above it (no
   room below inside the window) and past the window's right edge. Its foot is anchored
   a step above the button (the button's top is 93px under the stage's), so the popover
   grows upward with its text and never covers the button it opened from. */
.v1-pop {
  position: absolute;
  z-index: 1;
  bottom: calc(100% - var(--s8) - var(--s4));
  right: 0;
  width: 30%;
}
.v1-count { display: flex; gap: var(--s3); }
.v1-open { border-color: var(--w-fg); }
.v1-pool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
}
.v1-pool-meter { height: var(--s2); }
.v1-pool-fig { margin: 0; white-space: nowrap; }
.v1-pool-fig .dim { margin-left: var(--s3); white-space: nowrap; }
.v1-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
}
/* the allowance slider: the fill to the value, a solid thumb, the value beside it */
.alw { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.alw-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--s1);
  margin-right: var(--s2);
  border-radius: var(--r-pill);
  background: var(--w-track);
}
.alw-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--r-pill);
  background: var(--w-fg);
}
.alw-track b {
  position: absolute;
  top: 50%;
  width: var(--s4);
  height: var(--s4);
  margin: calc(-1 * var(--s2)) 0 0 calc(-1 * var(--s2));
  border-radius: 50%;
  background: var(--w-fg);
  border: 1px solid var(--w-bg);
}
.alw-val { flex: none; width: var(--s8); text-align: right; font-size: var(--t-small); }
.v1-pop .rw-page { display: grid; gap: var(--s2); padding: var(--s4); }
.v1-pop-label { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--w-muted); }
/* the host is a code span at the label step, as a code span sits beside prose: at the body's
   step it runs 202px into a 183px track and the pill below it with it */
.v1-pop .rw-cap .mono { font-size: var(--t-label); }
.v1-pop-send { justify-self: start; margin-top: var(--s2); }

/* the stage is its own container, as 02 and 04 are: the table lays its columns out by the
   width it is given. Six columns at the 14px step need ~880px of stage; under 900 the
   people table takes the phone's two-line row (the person and the state, then the
   allowance), so a name is never cut to "Jona..." and a chip never sits on a slider. */
.v1-stage { container-type: inline-size; container-name: people; }
@container people (max-width: 899px) {
  .v1-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .v1-alw { grid-column: 1 / -1; }
  .v1-grid .ph-hide { display: none; }
}

@media (max-width: 640px) {
  /* stacked: the whole window, then the popover riding over its last row */
  .v1-back { width: 100%; }
  .v1-pop {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 88%;
    margin: calc(-1 * var(--s9)) 0 0 auto;
  }
  .v1-pool { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .v1-pool-fig { white-space: normal; }
  .v1-pool-fig .dim { display: block; margin-left: 0; }
  .v1-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .v1-alw { grid-column: 1 / -1; }
}

/* ---------- shared: the relay's range control ---------- */
.seg {
  display: inline-flex;
  padding: var(--s1);
  border: 1px solid var(--w-line);
  border-radius: var(--r-pill);
}
.seg span {
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--w-muted);
}
.seg .on { background: var(--w-fg); color: var(--w-bg); }

/* ---------- v2 spend: the four figures and the per-person limits ---------- */
@media (min-width: 1126px) {
  .v2 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
/* the window keeps the page's gutter: its full frame shows on both sides at every
   width (a frame cut by the screen edge read as a layout bug) */
/* the window is its own container: the panel lays its rows out by the width it is
   given, never by the viewport's. Under the page zoom the split hands this stage
   471px at a real 1280 and 698px at 1920, so a media query here would decide on a
   fact the card cannot see. */
.v2-win { container-type: inline-size; container-name: spend; }
.v2-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--s4);
  border: 1px solid var(--w-line);
  border-radius: var(--r-frame);
}
.v2-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
  padding: var(--s3) var(--s4);
  border-left: 1px solid var(--w-line);
}
.v2-tile:first-child { border-left: 0; }
.v2-tl, .v2-ts { font-size: var(--t-label); color: var(--w-muted); }
.v2-ts { text-wrap: balance; }
.v2-fig { font-size: var(--t-h3); line-height: 1.2; color: var(--w-fg); }
/* the blue figure is 4.42:1 on paper, so it must be large text (20px bold):
   axe and the W3C ACT contrast rule count bold from 700, not 600 */
.v2-fig.hi { color: var(--brand-text, var(--field)); font-weight: 700; }
.v2-budget { margin-top: var(--s2); }
/* the figure, the state and the button size to their own text; the person and the
   bar share what is left, so a mono figure can never run under the chip */
.v2-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.55fr) max-content max-content max-content;
}
.v2-figure { white-space: nowrap; }
.v2-nolimit .v2-figure { grid-column: 2 / 4; }
.v2-set { justify-self: end; }

@media (max-width: 640px) {
  .v2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-tile:nth-child(3) { border-left: 0; }
  .v2-tile:nth-child(n + 3) { border-top: 1px solid var(--w-line); }
  /* the relay's own narrow row: the person and the button, the bar, then the figure and the state */
  .v2-row { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-who { grid-column: 1; grid-row: 1; }
  .v2-set { grid-column: 2; grid-row: 1; }
  .v2-bar { grid-column: 1 / -1; grid-row: 2; }
  .v2-figure { grid-column: 1; grid-row: 3; }
  .v2-state { grid-column: 2; grid-row: 3; justify-self: end; }
  .v2-nolimit .v2-figure { grid-column: 1; grid-row: 2; }
  .v2-nolimit .v2-state { grid-row: 2; }
}
/* a stage under 690px wide (a real 1440 viewport gives it 541, 1920 gives it 698)
   holds the relay's two-line row: the person, their state and the button, then the
   figure with the bar beside it. Five columns there gave the name 40px ("The...")
   and ran the mono figure 40px under both the chip and Set limit. */
@media (min-width: 641px) {
  @container spend (max-width: 689px) {
    .v2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-tile:nth-child(3) { border-left: 0; }
    .v2-tile:nth-child(n + 3) { border-top: 1px solid var(--w-line); }
    .v2-row { grid-template-columns: minmax(0, 1fr) max-content max-content; }
    .v2-who { grid-column: 1; grid-row: 1; }
    .v2-state { grid-column: 2; grid-row: 1; justify-self: end; }
    .v2-set { grid-column: 3; grid-row: 1; }
    .v2-figure { grid-column: 1; grid-row: 2; }
    .v2-bar { grid-column: 2 / 4; grid-row: 2; }
    .v2-nolimit .v2-figure { grid-column: 1 / -1; }
  }
}
/* under 360 a nine-character figure ($2,000.79, 108px of mono at 20px) runs past
   its half of the two-up grid: one figure per row, so the blue Saved figure keeps
   the 20px bold that makes it large text instead of shrinking under its floor */
@media (max-width: 359px) {
  /* the 14px Set limit pill and state chip take 14px more of a 220px row: a tighter column
     gap and pill pad keep "Noor Haddad" and "$828.40 of $900" whole at 320 */
  .v2-row { column-gap: var(--s3); }
  .v2-set { padding-inline: var(--s2); }
  .v2-tiles { grid-template-columns: minmax(0, 1fr); }
  .v2-tile { border-left: 0; }
  .v2-tile:nth-child(n + 2) { border-top: 1px solid var(--w-line); }
}

/* ---------- v4 setup: org providers under who can join ---------- */
@media (min-width: 1126px) {
  .v4 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
/* the window keeps the page's gutter, as 04's does; only the front panel overlaps it */
.v4-win .rw-lede { max-width: 34em; }
/* the stage is its own container, as 04's window is: the split hands it 471px at a real
   1280 and 698px at 1920 under the page zoom, and a media query here would decide on the
   viewport's width instead of the one the rows and the overlay actually get. */
.v4-stage { container-type: inline-size; container-name: setup; }
.v4-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.v4-text { min-width: 0; }
.v4-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  font-size: var(--t-small);
  color: var(--w-muted);
}
/* a host breaks only where a <wbr> sits, after its dots; break-word is the last resort
   for a swapped-in domain the markup could not mark up, never the default path */
.v4-detail .mono { overflow-wrap: break-word; }
.v4-trail { display: flex; align-items: center; gap: var(--s2); }
.v4-trail .chip { margin-right: var(--s2); }
/* a window under 680px wide (a real 1280 gives it 471, 1440 gives it 541, 1920 gives
   it 698): the chips and the button go under the name and host instead of taking the
   text's width, so the columns hold at a narrow stage. A host needs 223px and the
   longest name 117px; a one-line row leaves the text less than that until the window
   passes ~680 (at 1795 it is 696 and the text column 269). */
@media (min-width: 641px) {
  @container setup (max-width: 679px) {
    .v4-row { grid-template-columns: auto minmax(0, 1fr); }
    .v4-trail { grid-column: 2; flex-wrap: wrap; }
  }
}
/* the front panel catches the window's lower right corner and hangs below it */
.v4-stage { padding-bottom: calc(var(--s10) + var(--s9) + var(--s5)); }
.v4-join {
  position: absolute;
  z-index: 1;
  top: calc(100% - var(--s10) - var(--s9) - var(--s5) - var(--s5));
  right: calc(-1 * var(--s6));
  width: 46%;
}
.v4-join .rw-page { display: grid; gap: var(--s2); padding: var(--s4); }
.v4-sub { margin: var(--s3) 0 0; font-size: var(--t-small); font-weight: 500; color: var(--w-fg); }
/* the domain chip never shrinks: its close mark was the one item that could, and at a
   real 1280 it took the whole shortfall and drew at 0px. min-width: 0 keeps the chip's
   width out of the panel's grid track, so a long brand domain overhangs the padding
   instead of widening the fields under it. */
.v4-entries { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.v4-entries .chip { flex: none; font-size: var(--t-label); }
.v4-entries svg { width: var(--s3); height: var(--s3); color: var(--w-muted); }
/* a stage of 500px or less (a real 1280 gives it 471): 46% leaves the overlay a 183px
   track, 15px short of the 198px domain chip, so the panel takes 52%. From 1366 (509)
   up the track holds the chip and the panel stays at 46%. */
@media (min-width: 641px) {
  @container setup (max-width: 500px) {
    .v4-join { width: 52%; }
  }
}
.v4-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }

@media (max-width: 1125px) {
  .v4-join { right: 0; }
}
@media (max-width: 640px) {
  .v4-stage { display: flex; flex-direction: column; padding-bottom: 0; }
  .v4-trail .wbtn-icon { display: none; }
  .v4-row { grid-template-columns: auto minmax(0, 1fr); }
  .v4-trail { grid-column: 2; flex-wrap: wrap; }
  .v4-join {
    position: relative;
    top: auto;
    right: auto;
    width: 88%;
    margin: calc(-1 * var(--s8)) 0 0 auto;
  }
}

/* ==========================================================================
   05 your bill (black). The v3 list-price rules from
   brand/mockups/business-heroes/mockups.css, with the picked before/after
   variant on top (.tmp/mockups/v3-stop-paying-list-price-section-of-ezo-
   20261019-1815/final.png): the headline on the left, the struck list price
   against the plan price on the right, then the relay window whole and full
   width below it. No sub line, and the window keeps four log rows.

   The pair is real text, a <dl>: each label is read before its figure and
   drawn under it, and the list price is an <s>. 468.20 - 56.14 = 412.06, the
   window's saved figure. Only the window is a picture (role="img"). Blue sits
   on the switch and on $412.06, nothing else. Same tokens and radii as above.
   ========================================================================== */
.v3 {
  /* the two figures run at the band headline's size (.biz h2) */
  --v3-fig: clamp(34px, 5.7 * var(--vw), 82px);
}
.v3-copy {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: end;
  gap: var(--s6) var(--s8);
}
.v3-bill {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s8);
  margin: 0;
}
.v3-price {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s4);
  min-width: 0;
}
.v3-tag { color: var(--text-2); font-size: var(--t-body); }
.v3-fig {
  margin: 0;
  font-size: var(--v3-fig);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  white-space: nowrap;
}
.v3-was .v3-fig { color: var(--text-2); }
.v3-fig s { text-decoration-thickness: from-font; }

/* the relay card over the live log */
.v3-relay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  margin: 0 0 var(--s4);
  padding: var(--s4);
}
.v3-switch { display: flex; align-items: center; gap: var(--s3); }
/* the pictured switch, always on. A span inside the picture has no role to
   hold aria-checked, so its on state is a class, drawn with .sw's own values */
.v3-on { min-height: 0; height: var(--sw-h); cursor: default; }
.v3-on::before { background: var(--field); border-color: var(--field); }
.v3-on::after { background: var(--paper); transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.v3-path { display: flex; align-items: center; min-width: 0; }
.v3-node {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--w-line);
  border-radius: var(--r-frame);
  white-space: nowrap;
}
.v3-node b { font-weight: 500; }
.v3-node .dim { font-size: var(--t-label); }
/* the relay itself: a filled pill between the two ends, not a third box */
.v3-hub {
  flex: none;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  background: var(--w-fg);
  color: var(--w-bg);
  font-weight: 500;
}
.v3-wire { flex: 1; min-width: var(--s5); height: 1px; background: var(--w-line); }
.v3-saved { display: flex; flex-direction: column; align-items: flex-end; }
.v3-saved-fig { font-size: var(--t-h3); line-height: 1.2; }
/* on a black window the accent, not the paper-tuned --brand-text, which only ever
   darkens a brand. --field-on-ink lifts a branded accent so it clears 4.5:1 on black
   for any hue (linear.app's raw violet read 4.46:1); unbranded, or without relative
   colour, it is the raw accent. */
.v3-saved-fig.hi { color: var(--field-on-ink, var(--field)); }
.v3-saved .dim { font-size: var(--t-label); }
.v3-live { color: var(--w-fg); margin-left: var(--s2); }
.v3-grid {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
}
.v3-rows { font-size: var(--t-label); }
/* a figure pair like 14.3k / 720 stays on one line, whatever its column */
.v3-rows .rw-end { white-space: nowrap; }
/* the account column is plain text: a block, so a narrow column ends it in an ellipsis
   (a flex box clipped it mid-word, "ChatGPT (wor") */
.v3-rows .v3-app.ph-hide { display: block; }
.v3-rows .rw-row { padding-top: var(--s2); padding-bottom: var(--s2); }
.v3-app {
  display: flex;
  align-items: center;
  gap: var(--s2);
  overflow: hidden;
  font-family: var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v3-app .chip { min-height: var(--s4); padding: 0 var(--s1); font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0; }
/* the app's name, in its own box so a narrow column ends it in an ellipsis */
.v3-app > span:not(.chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3-model { display: flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--w-fg); }
.v3-model span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* a provider mark beside its model */
.mark { flex: none; width: var(--s4); height: var(--s4); fill: currentColor; }

@media (max-width: 1125px) {
  .v3-copy { grid-template-columns: minmax(0, 1fr); }
  .v3-relay { grid-template-columns: minmax(0, 1fr) auto; }
  .v3-path { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  /* the phone headline's size (.biz h2 under 640) */
  .v3 { --v3-fig: clamp(28px, 9.4 * var(--vw), 40px); }
  .v3-bill { gap: var(--s4) var(--s6); }
  .v3-price { gap: var(--s2); }
  .v3-tag { font-size: var(--t-small); }
  .v3-relay { gap: var(--s4); padding: var(--s3); }
  .v3-path { flex-direction: column; align-items: stretch; }
  .v3-wire { flex: none; align-self: center; width: 1px; height: var(--s3); min-width: 0; }
  .v3-hub { align-self: center; }
  /* time, account, tokens and wait give way: app, model and status hold the row */
  .v3-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: var(--s2) var(--s3); }
}

/* ---------- the enlarged capture (business.js opens it) ----------
   Never wider than the space between the notch insets (0 but on a phone on its side),
   so the close button and the capture stay clear of the island. */
.zoom {
  --zoom-safe: calc(100 * var(--vw) - var(--inset-l) - var(--inset-r));
  width: min(94 * var(--vw), 1280px, var(--zoom-safe));
  max-width: none;
  max-height: calc(92 * var(--vh));
  padding: 0;
  border: 1px solid var(--text-3);
  border-radius: var(--r-frame);
  background: var(--ink);
  color: var(--text);
}
.zoom::backdrop { background: rgb(5 7 15 / 0.86); }
/* the frame's own child only: the cloned rail's icon tile has an img of its own */
.zoom-frame > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92 * var(--vh));
  object-fit: contain;
  border-radius: inherit;
}
.zoom-frame { border-radius: inherit; }
/* a branded screen: the dialog takes the capture's own shape (never letterboxed, so the
   cloned rail's 15.9% lands on the baked sidebar), and the frame is the rail's size
   container and clip, as .screen is in the page */
.zoom[data-rail] { width: min(94 * var(--vw), 1280px, var(--zoom-safe), calc((92 * var(--vh) - 2px) * var(--zoom-ratio, 1.6))); }
.zoom[data-rail] .zoom-frame {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.zoom[data-rail] .zoom-frame > img { max-height: none; }
.zoom-x {
  position: absolute;
  z-index: 1;
  top: var(--s3);
  right: var(--s3);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: var(--target);
  min-height: var(--target);
  padding: 0;
  border: 1px solid var(--text-3);
  border-radius: 50%;
  background: var(--ink);
  color: var(--text);
  cursor: pointer;
}
.zoom-x svg { width: 16px; height: 16px; }
.zoom-x:hover { background: var(--text); color: var(--ink); }

/* ---------- the share card ----------
   /business?<link>&card=1 is what src/card.js photographs for a permalink's og:image
   (business.js CARD sets html[data-card]): the hero alone at 1200x630, laid out as the
   static card (brand/og-page.html ?p=business), with the live window, skinned by the
   link, where that card has its capture. A still: nothing transitions or animates, so
   the frame never lands mid-fade. The card is drawn in fixed pixels, so it is never
   zoomed (styles.css --page-zoom). */
html[data-card] { --page-zoom: 1; }
html[data-card],
html[data-card] body {
  width: 1200px;
  height: 630px;
  overflow: hidden;
  background: var(--text);
}
html[data-card] *,
html[data-card] *::before,
html[data-card] *::after {
  transition: none !important;
  animation: none !important;
}
/* the defs svgs stay: every mark on the page is a <use> of them */
html[data-card] body > :not(main):not(svg),
html[data-card] main > :not(.b-hero),
html[data-card] .b-hero-act,
html[data-card] .pv-toolbar,
html[data-card] .b-hero-foot,
html[data-card] .pv-load { display: none !important; }
html[data-card] .b-hero { width: 1200px; height: 630px; }
html[data-card] .b-hero-grid {
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-card] .b-hero-copy {
  position: absolute;
  top: 72px;
  bottom: 56px;
  left: 64px;
  padding: 0;
}
html[data-card] .lockup { gap: 14px; min-height: 0; }
html[data-card] .lockup-mark { width: 40px; height: 40px; }
html[data-card] .lockup-name { font-size: 34px; }
html[data-card] .lockup-rule { height: 32px; }
html[data-card] .lockup-kind { font-size: 30px; }
html[data-card] .b-hero h1 { order: 1; margin: 52px 0 0; font-size: 84px; }
/* the byline drops to the foot as the card's one mono label */
html[data-card] .lockup-by {
  order: 2;
  margin: auto 0 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the whole window in frame, centred on the card's height (572 wide at 8:5) */
html[data-card] .b-hero-side {
  position: absolute;
  top: 136px;
  left: 580px;
  display: block;
  width: 572px;
  padding: 0;
  border: 0;
}
html[data-card] .pv-figure { border-radius: var(--r-frame); }