/* super Enterprise: the hidden landing page (/enterprise).
 *
 * 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. The page reads the site's dark token set in both
 *     schemes (styles.css): its bands are black either way.
 *   dark (html[data-theme="dark"]): still two-tone. The light sections go
 *     dark in the superbot app's own steps, sheet #191a1e and paper #1d1e23
 *     (the phone view's --pvm-raised and --pvm-line), one and two steps
 *     above the ink bands, and ink text on them turns off-white. The product
 *     pictures keep --white and --mist.
 *   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. */

.ent {
  /* constant: the product pictures (a company's icon, the preview's light scheme, the
     captures' rails) are drawn in these whatever the page's scheme */
  --white: #ffffff;
  --mist: #e4e4e7;
  /* the page's surfaces and their text, which the dark block below flips */
  --paper: var(--white);
  --graphite: #3f3f46;
  --fog: var(--mist);
  --band: var(--ink);       /* the black bands: ink in both schemes */
  --sheet: var(--text);     /* the light sections: the off-white */
  --on-paper: var(--ink);   /* text, marks and rules on paper and on the light sections */
  --rule: var(--ink);       /* the hairline cells' rules: the nav's, the hero grid's */
  /* 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 */

  --e-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(--band);
  color: var(--text);
}
/* Dark: the page stays two-tone. The light sections become a raised dark surface, the
   superbot app's own raised step (#191a1e, the phone view's --pvm-raised: 1.16:1 off the
   ink bands, which stay ink), and the paper on them (the nav, the cards, the windows) one
   step above it, the app's --pvm-line (#1d1e23), so paper sits over sheet over band in
   both schemes. Ink text on them turns off-white; the hairlines on paper are an off-white
   mix (fog, 1.6:1 on paper), since the app's own line colour is now the paper. Every
   derived mix above (--graphite-2, --switch-off) re-resolves from these on the same
   element. */
html[data-theme="dark"] .ent {
  --sheet: #191a1e;
  --paper: #1d1e23;
  --fog: color-mix(in srgb, var(--text) 16%, var(--paper));
  --graphite: color-mix(in srgb, var(--text) 74%, var(--paper));
  --on-paper: var(--text);
  --rule: var(--text-3);
}

/* 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. A pressed cell
   fills with the paper's ink (off-white in dark) under the light section's colour. */
.ent .site-header { background: var(--paper); color: var(--on-paper); }
.ent .nav, .ent .nav .cell { border-color: var(--rule); }
.ent .nav a.cell:hover, .ent .nav button.cell:hover { background: var(--on-paper); color: var(--sheet); }
.ent .nav a.cell:active, .ent .nav button.cell:active { background: var(--on-paper); color: var(--sheet); }
.ent .site-header :focus-visible { outline-color: var(--on-paper); }

/* the shared ring is 2px blue with a 6px corner; pills keep their own corner */
.ent .btn:focus-visible,
.ent .domain:focus-within,
.ent .domain-go:focus-visible { border-radius: var(--r-pill); }
.ent .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 */
.ent .sw:focus-visible,
.ent .pv-swatch:focus-visible { outline: 2px solid transparent; }
.ent .sw:focus-visible::before,
.ent .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 ---------- */
.ent .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 */
.ent .btn-primary { background: var(--brand, var(--field)); border-color: var(--brand, var(--field)); color: var(--brand-ink, var(--ink)); }
.ent .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--text); }
.ent .btn-primary:active { background: var(--ink); border-color: var(--ink); color: var(--text); }
/* on black: an outlined off-white pill that fills on hover */
.ent .btn-ghost { color: var(--text); border-color: var(--text); }
.ent .btn-ghost:hover { background: var(--text); color: var(--ink); }
.ent .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. */
/* the cells' two measures, shared with the rows under the hero, so their rules land on the hero's */
.e-hero, .e-with {
  --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 */
}
.e-hero {
  /* the headline, the lockup, the by-line and the top and bottom pads are the site's section
     head metrics (styles.css --head-*), the same set research's and security's ink band read,
     so the three sections' first screens share one size and one spacing */
  --h1: var(--head-display);
  /* 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(--sheet);
  color: var(--on-paper);
}
/* the margin rules are the grid's own border, the margin outside it and the padding
   inside it, so they span every row */
.e-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  grid-template-rows: var(--head-pad-top) 1fr auto auto var(--head-pad-bottom);
  margin-inline: calc(var(--edge) - var(--cell) - 1px) calc(var(--edge-r) - var(--cell) - 1px);
  padding-inline: var(--cell);
  border-inline: 1px solid var(--rule);
}
.e-hero-grid > * { min-width: 0; }
.e-hero-copy {
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  padding-right: var(--split);
}
.e-hero-side {
  grid-column: 2;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding-left: var(--split);
  border-left: 1px solid var(--rule);
}
.e-hero-side > .pv-figure { grid-row: 2; }
/* the canvas grows with the window: when the copy beside it runs taller than the app's 8:5
   (the headline at the shared section-head size, three lines), the app window is drawn
   taller, its rails and content running to the frame's foot, never a blank strip under it.
   It never draws shorter than 8:5; one column (900 and under) never stretches it. */
.e-hero-side > .pv-figure > .pv { align-self: stretch; aspect-ratio: auto; min-height: calc(800 * var(--u)); }
.e-hero-side > .pv-toolbar { grid-row: 3; }
.e-hero-side > .e-hero-foot { grid-row: 4; }

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

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

.lockup {
  display: flex;
  align-items: center;
  gap: var(--head-lockup-gap);
  margin: 0;
  min-height: var(--s7);
  white-space: nowrap;
  /* one row at the default size; at 200% text the name slot wraps under the name rather than
     run past the screen */
  flex-wrap: wrap;
}
.lockup-mark { width: var(--head-mark); height: var(--head-mark); flex: none; fill: var(--on-paper); }
.lockup-name {
  font-size: var(--head-name);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
/* flex: none, as the section head's rule: a row short of room never squeezes the rule away */
.lockup-rule { flex: none; width: 1px; height: var(--head-name); background: var(--on-paper); opacity: 0.4; }
.lockup-kind {
  font-size: var(--head-kind);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--graphite);
}
/* the by-line is the lockup's own second line, at the dek's size */
.lockup-by {
  margin: var(--s2) 0 0;
  font-size: var(--head-dek);
  letter-spacing: -0.01em;
  color: var(--graphite);
}

/* the lockup (with its by-line) to the headline is the head's gap, as research's lockup to its
   display line is; under the headline, the field */
.e-hero h1 {
  margin: var(--head-gap) 0 var(--s7);
  font-weight: 500;
  font-size: var(--h1);
  line-height: var(--head-display-lh);
  letter-spacing: var(--head-display-ls);
}
/* one clause per line; a clause wraps only where it cannot fit (200% text), as the home hero's */
.e-hero h1 .l { display: block; }

/* 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 (enterprise.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(--on-paper);
}
.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(--on-paper);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--sheet);
  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, currentColor 35%, transparent);
  border-top-color: currentColor;
  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.
   The text it holds is the one exception, for a text size larger than the drawing (200%
   text): a line-height is its rule's ratio to its own size, the same length at the
   drawn size, and a box that holds a line grows with it (a min-height, or a height whose
   line part is in em), so the words stay inside their boxes while the canvas, its rails
   and panes keep their places. A one-line label that then outgrows its row ends in an
   ellipsis, as the app's own rows do. */
.pv-figure { container-type: inline-size; }
.pv {
  --u: calc(100cqw / 1280);
  --pv-brand: var(--brand, var(--field));
  --pv-brand-ink: var(--brand-ink, var(--white));
  /* 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 desktop app's own warn tone, 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(--mist);
  --pv-surface: #f1f2f6;
  --pv-card: var(--white);
  --pv-card-line: var(--mist);
  /* the app's warn tone in its light theme */
  --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(--on-paper); }
.pv-mode[aria-pressed="true"] { background: var(--on-paper); color: var(--sheet); }
@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(--white); }
/* 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)); }
/* a row at least 21 tall, taller only for text larger than the drawing (200% text) */
.pv-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-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;
  min-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;
  /* 28 app px at its 13: drawn in its own letter's em, so the circle holds the letter at
     any text size and stays round */
  width: calc(28 / 13 * 1em);
  height: calc(28 / 13 * 1em);
  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;
  min-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;
  min-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;
  /* 28 x 20 app px at its 11, in its own em: the cap holds its keys at any text size */
  width: calc(28 / 11 * 1em);
  height: calc(20 / 11 * 1em);
  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%;
  /* 116 app px: its fixed parts on the canvas plus the ask line (24 at its 16) in text */
  height: calc(92 * var(--u) + 24 / 14 * 1em);
  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 / 16 * 1em); 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;
  /* 32 app px: its line (1.4 at its 14) in text, the rest on the canvas */
  height: calc(12.4 * var(--u) + 1.4em);
  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 / 12 * 1em); 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(--on-paper); 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(--on-paper) 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(--on-paper); }
@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(--on-paper); text-decoration-color: var(--on-paper); }
@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 (its thread 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 (a 768 thread column over a 600 measure), the bubble is the
   app's message bubble, the step rows its sonar trace's 13/19, the table card's radius
   8 and the email draft'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 / 16 * 1em); 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: the app's message 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 / 15 * 1em);
  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(--white); 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; }
/* the sonar trace'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 / 13 * 1em);
  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 */
}
/* the step 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 / 13 * 1em); 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); }
/* the outcome chip: 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 / 12 * 1em); 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 / 13 * 1em); 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; }
/* the table card: 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 / 12 * 1em); 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 / 13 * 1em); 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; }
/* the email draft: 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 / 12 * 1em); 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 / 15 * 1em); 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 / 13 * 1em); 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; min-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 / 13 * 1em); 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 the desktop app's Live view card worn by its floating window: 400 wide
   (the card's compact width), the card's 16 radius and the app's floating shadow, 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 app's mini
   view wears it (a 2 px accent ring inside the well, no glow). Its place is the floating
   window'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;
  /* 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));
  min-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 / 15 * 1em); color: var(--lv-fg); }
.pv-live-label { font-size: calc(13 * var(--k)); line-height: calc(19 / 13 * 1em); 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;
  min-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). Its foot
   is the page's, the pill's room (below) */
.pv-live-skel {
  position: absolute;
  inset: calc(12 * var(--k)) calc(14 * var(--k)) calc((28 + 16 * var(--lv-text, 1)) * 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(8 * var(--k) + 16 / 12 * 1em);
  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 / 12 * 1em);
  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. Its foot is the status pill's
   room: 12 under the pill, the pill's 8 and its 16 line, 8 over it (44). The line grows
   with text larger than the drawing: demo.js refit measures it and sets --lv-text, the
   ratio of the drawn text to its design size, unset (1) at the drawn size */
.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((28 + 16 * var(--lv-text, 1)) * var(--k));
}
.pv-page-title { flex: none; margin: 0; overflow: hidden; font-size: calc(13 * var(--k)); font-weight: 500; line-height: calc(18 / 13 * 1em); 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 / 11 * 1em);
  color: var(--lv-fg);
  /* demo.js sets it on a side that fits at the drawn size; at a larger text size it wraps
     inside the map rather than run past the map's edge */
  white-space: normal;
}
/* 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 / 12 * 1em); 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; }
/* over the area, the room the figure over the tallest bar or the line's end lacks when
   the text is larger than the drawing (demo.js fitPlot --lv-room; none at the drawn
   size), so the figure stays under the page's heading */
.pv-plot-area {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: calc(var(--lv-room, 0) * var(--k));
  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)); }
/* the x labels' row: 4 over its 14 line, the line grown as the page's foot is (--lv-text) */
.pv-plot-x { position: relative; flex: none; height: calc((4 + 14 * var(--lv-text, 1)) * var(--k)); }
.pv-plot-x > span,
.pv-plot-y,
.pv-plot-goal { position: absolute; font-size: calc(10 * var(--k)); line-height: calc(14 / 10 * 1em); 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 / 12 * 1em);
  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 artifact frame 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));
  min-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 / 13 * 1em);
  color: var(--lv-muted);
  white-space: nowrap;
}
/* the title and its range end in an ellipsis where larger text leaves the head no room */
.pv-chart-title,
.pv-chart-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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(--on-paper); 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): enterprise.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(--on-paper);
  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 the phone app draws it ----------
   enterprise.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: the phone app's own captures
   are 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
   (its design tokens and the sizes of its chat rows, drawer, bottom bar, screen header,
   composer, turn head and step lines), so it scales as one picture and never reflows.
   Colours are the Meridian Freight tenant's own phone theme (its light and dark sets,
   mapped as the app maps a tenant theme: drawer = the rail colour, canvas = the card
   colour, raised = the raised colour). 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 app's new chat has
   none since 2026-10-06); 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 / 15 * 1em);
}
/* 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: 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 (enterprise.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 / 34 * 1em);
  letter-spacing: calc(-0.5 * var(--m) * var(--wm, 1));
  color: var(--pvm-fg);
  text-overflow: clip;
}
/* fitted, a name fits its room (enterprise.js fitWordmark); at a larger text size than the
   fit measured, it ends in an ellipsis rather than a sliced letter */
.pv[data-view="mobile"] .pv-ws-name:not([data-clip]) { text-overflow: ellipsis; }
/* 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(--white); 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(--white);
  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 / 17 * 1em);
  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;
  min-height: 0;
  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 / 12 * 1em);
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-earlier { margin-top: 0; }
/* the app's chat row: 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 / 17 * 1em);
  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 / 12 * 1em);
  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 / 12 * 1em);
  color: var(--pvm-muted);
  text-overflow: ellipsis;
}
/* the drawer's bottom bar, 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 / 17 * 1em);
  color: var(--pvm-muted);
}
.pv[data-view="mobile"] .pv-mbar-find > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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, as the app's overlapping panels draw it */
.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 / 22 * 1em);
  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: 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 / 17 * 1em);
}
.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 / 12 * 1em);
  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 / 22 * 1em);
}
/* the placeholder is one line at the drawn size; at a larger text size it wraps in the
   field (which grows from its 88) rather than run past the field's edge */
.pv[data-view="mobile"] .pv-mline { overflow: hidden; color: var(--pvm-muted); white-space: normal; }
.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));
  /* 40 pt, grown by its two lines (the model's name over its effort) at a larger text size */
  min-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 / 13 * 1em); }
.pv[data-view="mobile"] .pv-model-name > small { font-size: calc(12 * var(--m)); line-height: calc(14 / 12 * 1em); 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: the message bubble; the turn head (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); the step lines 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 / 15 * 1em);
  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 / 15 * 1em);
  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 / 15 * 1em); 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 / 15 * 1em);
  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 / 15 * 1em); 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;
  /* 26 at its 20 as drawn, in its own em so its lines stay apart at a larger text size */
  line-height: calc(26 / 20 * 1em);
}
.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 / 12 * 1em);
  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: 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(--tf, 15) * 1em); }
.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 / 12 * 1em); }
/* text larger than the drawing can leave a word wider than its column even at 12 and
   wrapped: then alone demo.js fitTables sets --tz, the fraction the table's type steps
   down past 12 to sit in its card (1, no step, at the drawn size) */
.pv[data-view="mobile"] .pv-table table { zoom: var(--tz, 1); }
.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 / 12 * 1em); 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 / 15 * 1em);
}
.pv[data-view="mobile"] .pv-draft-body { gap: calc(6 * var(--m)); font-size: calc(15 * var(--m)); line-height: calc(20 / 15 * 1em); }
.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 { min-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 / 15 * 1em); }
.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: a live visual is never a floating
   picture-in-picture. It is an inline card in the transcript, as the phone app's live
   browser card is: 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 / 17 * 1em); }
.pv[data-view="mobile"] .pv-live-label { font-size: calc(15 * var(--m)); line-height: calc(20 / 15 * 1em); }
.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 */
/* its foot the pill's room as the desktop's: 8 under, 8 and the 16 line, 4 over (36) */
.pv[data-view="mobile"] .pv-page { gap: calc(6 * var(--m)); padding: calc(10 * var(--m)) calc(12 * var(--m)) calc((20 + 16 * var(--lv-text, 1)) * var(--m)); }
.pv[data-view="mobile"] .pv-live-skel { inset: calc(10 * var(--m)) calc(12 * var(--m)) calc((20 + 16 * var(--lv-text, 1)) * 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 / 10 * 1em); }
.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 / 11 * 1em); }
.pv[data-view="mobile"] .pv-chart { width: auto; }
.pv[data-view="mobile"] .pv-chart-head { height: auto; min-height: 0; padding: calc(8 * var(--m)) calc(12 * var(--m)); font-size: calc(12 * var(--m)); line-height: calc(16 / 12 * 1em); }
.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 ---------- */
.ent 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;
}
.ent h2 .l { display: block; }
.e-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;
}

/* ---------- light: under the hero, on its cells ----------
   Three rows carried from the deck a visitor may have been sent: every provider (the
   model products the app carries, each with its maker's tile), your chats (where they come
   in from) and your tools (what it works with). They keep the hero's sheet and its hairline
   cells: the margin rules run on down, a rule across opens each row, and the second row
   splits at the hero's own column line. The strip of providers is the block's one bold
   thing: a row of cells from rule to rule, each a tile and a name. Third-party marks keep
   their owners' tiles (providers) or take the text's own colour (tools); the page's blue
   is not used here. Every picture is still: nothing moves. */
.e-with {
  /* from the grid's outer edge to its content: the cell pad on the rules, the page edge
     without them (900 and under) */
  --in-l: var(--cell);
  --in-r: var(--cell);
  background: var(--sheet);
  color: var(--graphite);
}
.e-with-grid {
  container: with / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  margin-inline: calc(var(--edge) - var(--cell) - 1px) calc(var(--edge-r) - var(--cell) - 1px);
  padding-inline: var(--in-l) var(--in-r);
  border-inline: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.e-with-grid > * { min-width: 0; }
.e-with h2 { color: var(--on-paper); }
.e-with .section-label { margin: 0 0 var(--s6); color: var(--graphite); }
.e-with .e-sub { text-wrap: balance; }

/* every provider: the statement across the grid, then the strip from rule to rule */
.e-with-copy { grid-column: 1 / -1; padding-top: var(--s8); }
.e-prov {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: var(--s7) calc(-1 * var(--in-r)) 0 calc(-1 * var(--in-l));
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font-size: var(--t-lead);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}
.e-prov li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  min-width: 0;
  padding: var(--s5);
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
.e-prov li:first-child { padding-left: var(--in-l); border-left: 0; }
.e-tile {
  display: block;
  flex: none;
  width: var(--s8);
  height: var(--s8);
  border-radius: var(--r-frame);
}
/* seven across while each cell holds its tile and its longest name (eight letters) whole;
   then four over three, then two, two and three, then one provider a row. Ems, not
   pixels: in a container query an em is the grid's own text size, so text larger than
   the drawing (200%) takes the narrower layout at the same width */
@container with (max-width: 56em) {
  .e-prov { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .e-prov li { grid-column: span 3; }
  .e-prov li:nth-child(n + 5) { grid-column: span 4; border-top: 1px solid var(--rule); }
  .e-prov li:nth-child(5) { padding-left: var(--in-l); border-left: 0; }
}
@container with (max-width: 34em) {
  .e-prov { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .e-prov li { padding: var(--s4); }
  .e-prov li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .e-prov li:nth-child(n + 5) { grid-column: span 2; }
  .e-prov li:nth-child(3), .e-prov li:nth-child(5) { padding-left: var(--in-l); border-left: 0; }
  .e-tile { width: var(--s7); height: var(--s7); }
}
@container with (max-width: 22em) {
  .e-prov { grid-template-columns: minmax(0, 1fr); }
  .e-prov li:nth-child(n) {
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--in-r) var(--s3) var(--in-l);
    border-left: 0;
    white-space: normal;
  }
  .e-prov li:nth-child(n + 2) { border-top: 1px solid var(--rule); }
  .e-tile { width: var(--s6); height: var(--s6); }
}

/* your chats and your tools: the hero's two columns and its centre rule; each column is
   its own container, so its picture lays out by the width it is given */
.e-chats, .e-tools { container-type: inline-size; padding-block: var(--s8); }
.e-chats { container-name: chats; padding-right: var(--split); }
.e-tools { container-name: tools; padding-left: var(--split); border-left: 1px solid var(--rule); }
/* a beat under the statement above it: the band headline's tracking, a step smaller */
.e-pair h2 { font-size: clamp(28px, 3.4 * var(--vw), 48px); }

/* the import flow: the app's three import sources, wires into your app. Each source sits
   in a third of the column's height, so the wires leave from the middle of each */
.e-imp {
  display: grid;
  grid-template-columns: max-content minmax(var(--s6), 1fr) max-content;
  align-items: center;
  margin-top: var(--s7);
}
.e-imp-src { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.e-imp-src li { display: flex; align-items: center; padding-block: var(--s2); }
.e-imp-chip {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-frame);
  color: var(--on-paper);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.e-imp-chip .e-tile { width: var(--s6); height: var(--s6); }
.e-imp-wire { position: relative; align-self: stretch; min-width: 0; color: var(--graphite); }
.e-imp-wires {
  position: absolute;
  inset: var(--s2) var(--s2) var(--s2) 0;
  width: calc(100% - var(--s2));
  height: calc(100% - var(--s4));
  fill: none;
  stroke: currentColor;
  overflow: visible;
}
.e-imp-wires path { vector-effect: non-scaling-stroke; }
.e-imp-head {
  position: absolute;
  top: 50%;
  right: var(--s1);
  width: var(--s2);
  height: var(--s3);
  margin-top: calc(var(--s3) / -2);
  fill: none;
  stroke: currentColor;
  overflow: visible;
}
.e-imp-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: 1px solid var(--on-paper);
  border-radius: var(--r-frame);
  color: var(--on-paper);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.e-imp-mark { width: var(--s7); height: var(--s7); fill: currentColor; }
.e-imp-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.e-imp-sync svg { width: var(--s4); height: var(--s4); }
/* a column too narrow for the three across: the sources, a wire down, then your app */
@container chats (max-width: 20em) {
  .e-imp { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .e-imp-wire { justify-self: center; width: var(--s3); height: var(--s7); }
  .e-imp-wires { display: none; }
  .e-imp-wire::before {
    content: "";
    position: absolute;
    top: var(--s1);
    bottom: var(--s1);
    left: 50%;
    border-left: 1px solid currentColor;
  }
  .e-imp-head { top: auto; right: auto; bottom: 0; left: calc(50% - var(--s1)); margin: 0; transform: rotate(90deg); }
  .e-imp-chip { white-space: normal; }
}

/* the tools: the general row large, then every other integration as a chip */
.e-tools-lead {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin: var(--s7) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-body);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);
}
.e-tools-lead li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; white-space: nowrap; }
.e-tool-mark { display: block; flex: none; width: var(--s4); height: var(--s4); fill: currentColor; }
.e-tools-lead .e-tool-mark { width: var(--s7); height: var(--s7); }
.e-tools-label {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--fog);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--graphite);
}
.e-tools-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}
.e-tools-more li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  padding: var(--s1) var(--s3) var(--s1) var(--s2);
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);
}
@container tools (max-width: 40em) {
  .e-tools-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container tools (max-width: 18em) {
  .e-tools-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-tools-lead li, .e-tools-more li { white-space: normal; }
}

/* whose marks these are: the deck's own line, once, under the rows that draw them */
.e-with-fine {
  grid-column: 1 / -1;
  margin: 0 calc(-1 * var(--in-r)) 0 calc(-1 * var(--in-l));
  padding: var(--s4) var(--in-r) var(--s4) var(--in-l);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--graphite);
  /* one line where it fits; where it wraps, lines of a length, never two words left alone */
  text-wrap: balance;
}

/* one column, no margin rules (900 and under), as the hero: a rule across opens each part */
@media (max-width: 900px) {
  .e-with { --in-l: var(--edge); --in-r: var(--edge-r); }
  .e-with-grid { grid-template-columns: minmax(0, 1fr); margin-inline: 0; border-inline: 0; }
  .e-chats { padding-right: 0; }
  .e-tools {
    margin-inline: calc(-1 * var(--in-l)) calc(-1 * var(--in-r));
    padding: var(--s8) var(--in-r) var(--s8) var(--in-l);
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 640px) {
  .e-with-copy, .e-chats, .e-tools { padding-top: var(--s7); }
  .e-chats, .e-tools { padding-bottom: var(--s7); }
  .e-with .section-label { margin-bottom: var(--s5); }
  .e-prov, .e-imp, .e-tools-lead { margin-top: var(--s6); }
}

/* ---------- black: 01 your view ---------- */
.e-view {
  background: var(--band);
  color: var(--text);
  padding: var(--s9) var(--edge-r) var(--s9) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.e-view .section-label { margin-bottom: var(--s6); }
.e-view .e-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, the rail is hidden and the capture
   shows as it was taken but for one line (.sr-mask, below). The rail 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; }

/* The one line the captures change unbranded: under its Relay pill the app's sidebar
   reads "Powered by superbot", and on this page the product is "super". This patch
   redraws that line in the capture's own place, type and colour, on the sidebar's own
   navy, so the baked word never shows and nothing else moves. Fitted on the 2560px
   captures: the baked ink spans x 34-254, y 158-181, Inter 11px at 2x (22 capture px,
   optical size 14) in #94a3b8 on #0d2141, set from x 32 on a baseline at y 175; the
   patch covers x 24-300, y 149-195, clear of the Relay pill (to y 144) and the version
   line (from y 199). It is an SVG whose viewBox is that stretch of the capture's own
   pixel grid, so the text sits on the baked baseline at every size (a line box would
   round the font's metrics to whole CSS px, a pixel off at a phone's 3px type), here
   and in the enlarged dialog. Its colours are the capture's pixels, never the
   tenant's: branded, the rail paints over the patch, and while the rail fades in the
   patch stays the navy round it. A fill, not a background, so print keeps it. */
.sr-mask {
  position: absolute;
  top: calc(149 / 2560 * 100cqw);
  left: calc(24 / 2560 * 100cqw);
  width: calc(276 / 2560 * 100cqw);
  height: calc(46 / 2560 * 100cqw);
  overflow: hidden;
  pointer-events: none;
}
.sr-mask rect { fill: #0d2141; }
.sr-mask text {
  fill: #94a3b8;
  font-family: var(--sans);
  /* in the viewBox's units, capture pixels: the app's 11px at 2x */
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  /* the optical size of the app's 11px (the axis' floor), which auto would take from
     the 22 units instead */
  font-variation-settings: "opsz" 14;
}

.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(--white);
  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; }
/* the list yields first: at a text size the rail was not drawn for (200% text) it gives up
   its last rows at its own foot, so the account and status keep the rail's bottom inside
   the capture, as the app's scrolling sidebar does */
.sr-nav { display: flex; flex-direction: column; gap: 0.5cqw; min-height: 0; margin-top: 2.4cqw; overflow: hidden; }
.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; }
/* the label in its own box, so a label wider than the rail (200% text) ends in an ellipsis */
.sr-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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 ---------- */
.e-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: var(--s9);
  align-items: center;
  background: var(--sheet);
  color: var(--graphite);
  padding: var(--s9) var(--edge-r) var(--s9) var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge-r);
}
.e-work > * { min-width: 0; }
/* The copy column is the headline's container: its longer clause, "your workflows." (6.4em),
   is held to 95% of the column, so it never runs past it under the product picture beside it
   (measured at the default size, uncapped on one line: 42px under the card at 901, 7px at 960,
   3px at 1101 where the picture widens, into the gap up to 1280). Under 901 the column is the
   page and the cap never binds. */
.e-work-copy { container-type: inline-size; }
.e-work h2 { color: var(--on-paper); font-size: min(clamp(34px, 6.4 * var(--vw), 92px), 15cqi); }
.e-work .section-label { color: var(--graphite); margin: 0 0 var(--s6); }
.e-work .e-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; }
/* two marks are drawn in one black (github, openai): on dark paper they turn to its off-white */
html[data-theme="dark"] .row img.mono { filter: invert(1); }
.row .name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

/* 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(--on-paper);
  text-decoration: underline;
  text-decoration-color: var(--fog);
  text-underline-offset: 0.15em;
}
.work-api a:hover { text-decoration-color: var(--on-paper); }

/* a switch: outlined off, the site blue on. Decorative: it only flips its own
   aria-checked (enterprise.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(--white); transform: translateX(calc(var(--sw-w) - var(--sw-h))); }

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

/* ---------- mid widths ---------- */
@media (max-width: 1100px) {
  .e-work { gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}
@media (max-width: 900px) {
  /* one column, no rules: the copy, then the window it repaints */
  .e-hero-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s7);
    margin-inline: 0;
    padding: var(--head-pad-top) var(--edge-r) var(--head-pad-bottom) var(--edge);
    padding-left: var(--edge);
    padding-right: var(--edge-r);
    border: 0;
  }
  .e-hero-copy, .e-hero-side { display: block; padding: 0; border: 0; }
  .e-hero h1 { margin: var(--head-gap) 0 var(--s6); }
  .e-work { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .e-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  /* the hero's phone sizes and pads are the head's phone metrics (styles.css) */

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

  /* the overlap, stacked: the dark page rides over the light one's lower edge. Each
     screen stays positioned in the flow, so its rail and its patch anchor on its own
     capture (a static back screen handed them to .screens: the branded rail then ran
     the whole stack's height, down past the capture beside the front screen) */
  .screens { width: 100%; aspect-ratio: auto; margin-top: var(--s7); }
  .screen { position: relative; }
  .screen-back { width: 100%; }
  .screen-front { 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); }
  .e-contact { padding-top: var(--s7); padding-bottom: var(--s7); }
  .ent .site-footer { padding-bottom: var(--s8); }
}

/* ---------- footer: whose marks these are ----------
   The page shows other companies' marks and names, so the footer ends on one plain line
   saying whose they are: its own row under the footer's, in the footer's own fine print
   (--t-small in its 62% off-white, --text-2, 7.3:1 on the ink in both schemes). Each
   sentence takes its own line where the row is wide enough, and a narrow one wraps the
   list without leaving a word alone on the last line. */
.ent .site-footer .marks {
  flex-basis: 100%;
  margin: 0;
  line-height: 1.5;
  text-wrap: pretty;
}

/* 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 the enterprise hero mockups' stylesheet,
   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(--band); color: var(--text); }
.mx-light { background: var(--sheet); color: var(--graphite); }
.mx-light h2 { color: var(--on-paper); }
.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 .e-sub { color: var(--text-2); }
.mx-sec .e-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); container-type: inline-size; container-name: relay; }

/* 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(--on-paper);
  --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;
  /* --s5 at the label step, in its own letters' em */
  width: 2em;
  height: 2em;
  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;
  /* --s6 at the label step, in its own initials' em */
  width: calc(8em / 3);
  height: calc(8em / 3);
  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;
  /* --s6 at the window's 14px step, in its em, so its initials grow inside it */
  width: calc(16em / 7);
  height: calc(16em / 7);
  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 enterprise.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(--white); 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: 900px) {
  .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; }
}

/* ---------- text larger than the drawing ----------
   A stage under 15 of its own ems (240px at the page's 16px; the narrowest phone, 320,
   gives it 280, so the drawn sizes never match) holds text larger than the windows were
   drawn for: 200% text at 390 is 10.9em. There a line that would run past its box wraps
   or ends in an ellipsis inside it, rather than lie over its neighbour or be sliced by the
   window's edge. Em, not px: in a container query an em is the container's own text
   size. Scoped to that case: at the drawn size the windows keep their own handling of a
   long visitor-supplied name or host (the bar that clips on a phone, the domain chip
   that overhangs its padding). */
@container relay (max-width: 15em) {
  /* the title bar: the crumbs under the tenant, a long tenant on two lines */
  .rw-bar { flex-wrap: wrap; row-gap: var(--s1); }
  .rw-tenant > [data-b="name"] { min-width: 0; white-space: normal; }
  /* a person's role or invite state wraps under their name */
  .who-sub { white-space: normal; }
  /* a field's placeholder ends in an ellipsis at the field's edge (a block, so the
     ellipsis applies; the line box fills the pill as the flex centring did) */
  .wfield { display: block; overflow: hidden; line-height: max(calc(var(--s6) - 2px), 1.45em); text-overflow: ellipsis; }
  /* a host breaks inside its line: in the popover's caption, and in a provider row,
     where the flex item shrinks to its line so break-word can act */
  .v1-pop .rw-cap .mono { overflow-wrap: break-word; }
  .v4-detail .mono { min-width: 0; }
  /* the relay card's label, switch and state wrap rather than run under the saved figure */
  .v3-switch { flex-wrap: wrap; min-width: 0; }
  /* a popover's one column never grows past the popover to hold a long host */
  .v1-pop .rw-page, .v4-join .rw-page { grid-template-columns: minmax(0, 1fr); }
  /* a person's row stacks: the person, then their state, then the allowance, so a role
     like "engineering" keeps the row's width instead of running under the chip */
  .v1-grid:not(.rw-colhead) { grid-template-columns: minmax(0, 1fr); }
  .v1-grid:not(.rw-colhead) > :nth-child(2) { justify-self: start; }
}

/* ---------- 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: calc(32em / 7); 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 relay; }
@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: 901px) {
  .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. The split hands this stage 404px at 901, 471px at
   1024 and 698px from 1440, 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. The tracks
   are the list's and every row takes them (subgrid): a column is as wide as the
   widest entry in it, so a Near limit chip, wider than a plain Within limit, never
   pulls its own row's bar and figure left of the rest. The person's column is never
   narrower than its longest name, so a wide chip in one row cannot end another row's
   name in an ellipsis. Every layout below sets the tracks on the list, never on a row. */
.v2-rows {
  display: grid;
  grid-template-columns: minmax(max-content, 1.5fr) minmax(0, 1.55fr) max-content max-content max-content;
  column-gap: var(--s4);
}
.v2-row {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: inherit;
}
.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-rows { 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 1152 page gives it 541, 1440 and wider 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-rows { 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-rows { 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); }
}
/* A window under 18 of its own ems (its 14px step: 252px; the narrowest phone gives it
   280) holds text larger than the drawing, as 200% text does at 390 (12.5em): one figure
   per row as under 360, and each person's figure and state on lines of their own, so a
   figure never runs under its tile's neighbour or its chip. Em, not px: in a container
   query an em is the container's own text size, so the drawn sizes never match. */
@container spend (max-width: 18em) {
  .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); }
  .v2-rows { grid-template-columns: minmax(0, 1fr); }
  .v2-who { grid-column: 1; grid-row: 1; }
  .v2-set { grid-column: 1; grid-row: 2; justify-self: start; }
  .v2-bar { grid-column: 1; grid-row: 3; }
  .v2-figure { grid-column: 1; grid-row: 4; white-space: normal; }
  .v2-state { grid-column: 1; grid-row: 5; justify-self: start; }
  .v2-nolimit .v2-figure { grid-column: 1; grid-row: 3; }
  .v2-nolimit .v2-state { grid-row: 4; }
}

/* ---------- v4 setup: org providers under who can join ---------- */
@media (min-width: 901px) {
  .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 404px at 901,
   471px at 1024 and 698px from 1440, 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 relay; }
.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 1024 page gives it 471, 1152 gives it 541, 1440 and
   wider 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 1436 it is 696 and the text column 237). */
@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 on a
   471px stage (a 1024 page) 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 1024 page gives it 471): 46% leaves the overlay a 183px
   track, 15px short of the 198px domain chip, so the panel takes 52%. From 1093 (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: 900px) {
  .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;
  }
}
/* a stage under 15 of its own ems (240px at the page's 16px; the narrowest phone gives it
   280) holds text larger than the drawing (200% text at 390: 10.9em): the domain chip, which
   never shrinks at the drawn size, wraps inside the panel instead of running past it */
@container setup (max-width: 15em) {
  .v4-entries .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  /* a provider's state chip ("Key set by an admin") wraps inside its row's column */
  .v4-trail { min-width: 0; }
  .v4-trail .chip { white-space: normal; }
}

/* ==========================================================================
   05 your bill (black). The before/after layout on top: 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 (.ent 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(--white); 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, "team plan") */
.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: 900px) {
  .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 (.ent 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 (enterprise.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 "your view" screen, idle or branded: the dialog takes the capture's own shape (never
   letterboxed, so the cloned patch and rail land on the baked sidebar), and the frame is
   their 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 ----------
   /enterprise?<link>&card=1 is what GET /api/og/enterprise photographs for a permalink's
   og:image (enterprise.js CARD sets html[data-card]): the hero alone at 1200x630, laid
   out as the static card (/assets/og/enterprise.png), 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(--sheet);
}
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(.e-hero),
html[data-card] .e-hero-act,
html[data-card] .pv-toolbar,
html[data-card] .e-hero-foot,
html[data-card] .pv-load { display: none !important; }
html[data-card] .e-hero { width: 1200px; height: 630px; }
html[data-card] .e-hero-grid {
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-card] .e-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; }
/* the card keeps its own fixed headline, line-height and tracking included: the page's come
   from the section head tokens, which the share card does not follow */
html[data-card] .e-hero h1 { order: 1; margin: 52px 0 0; font-size: 84px; line-height: 1; letter-spacing: -0.04em; }
/* 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] .e-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); }