/*
 * Primer 2026 design tokens for code components.
 *
 * Code components render inside a shadow root. CSS custom properties inherit
 * through it, so each token reads the matching Webflow variable from the
 * "Primer 2026" collection and falls back to the same literal value. That way
 * a component looks right both on the Webflow page and in the local playground.
 *
 * Fluid type and spacing are literal clamp() values: the Webflow API rejected
 * clamp() for size variables, so the p26-* classes in Webflow use these same
 * values directly. Keep both in sync.
 */
:host,
.p26-root {
  /* Color: aliases of existing brand variables */
  --p26-text-strong: var(--_primer-2026---color--text--strong, #20292c);
  --p26-text-default: var(--_primer-2026---color--text--default, #475a61);
  --p26-text-inverse: var(--_primer-2026---color--text--inverse, #ffffff);
  --p26-surface-base: var(--_primer-2026---color--surface--base, #ffffff);
  --p26-surface-subtle: var(--_primer-2026---color--surface--subtle, #f3f5f6);
  --p26-surface-hover: var(--_primer-2026---color--surface--hover, #f7f9fa);
  --p26-surface-inverse: var(--_primer-2026---color--surface--inverse, #262155);
  --p26-border: var(--_primer-2026---color--border--default, rgba(138, 159, 169, 0.32));
  --p26-accent: var(--_primer-2026---color--accent--primary, #6e37ff);
  --p26-accent-strong: var(--_primer-2026---color--accent--strong, #3c327b);
  --p26-accent-soft: var(--_primer-2026---color--accent--soft, #a8a6ff);
  --p26-accent-blue: var(--_primer-2026---color--accent--blue, #3366ff);
  --p26-highlight: var(--_primer-2026---color--highlight, #ffd966);
  --p26-focus: var(--_primer-2026---color--focus-ring, #0b89fd);

  /* Type */
  --p26-font-display: var(--_primer-2026---font--display, EightiesComeback), Georgia, serif;
  --p26-font-body: var(--_primer-2026---font--body, Rubik), Arial, sans-serif;
  --p26-type-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --p26-type-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --p26-type-body: var(--_primer-2026---type--body, 1rem);
  --p26-type-small: var(--_primer-2026---type--small, 0.875rem);

  /* Space and shape */
  --p26-space-2xs: var(--_primer-2026---space--2xs, 0.25rem);
  --p26-space-xs: var(--_primer-2026---space--xs, 0.5rem);
  --p26-space-sm: var(--_primer-2026---space--sm, 1rem);
  --p26-space-md: var(--_primer-2026---space--md, 1.5rem);
  --p26-space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p26-radius-sm: var(--_primer-2026---radius--sm, 8px);
  --p26-radius-md: var(--_primer-2026---radius--md, 12px);
  --p26-radius-lg: var(--_primer-2026---radius--lg, 20px);

  /* Motion */
  --p26-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p26-duration-fast: 160ms;
  --p26-duration-base: 320ms;
}

/*
 * Primer app UI for homepage demos. Values from the Figma app frames:
 * Rubik 14/20 body (1em here), UI/900 #20292C, UI/700 #475A61, UI/300 #8A9FA9,
 * borders rgba(138,159,169,.32), panel heads #FAFAFA, Blue/50 #F5F7FF,
 * Blue/300 #99B2FF, Blue/800 #3366FF, Blue/850 #2F55CD, Green/500 #1C8C67.
 * Everything is in em so the whole UI scales with the demo's base size.
 */
.p26-demo {
  --ui-900: #20292c;
  --ui-700: #475a61;
  --ui-300: #8a9fa9;
  --ui-line: rgba(138, 159, 169, 0.32);
  --ui-line-soft: rgba(138, 159, 169, 0.19);
  --ui-head: #fafafa;
  --ui-50: #f3f5f6;
  --blue-50: #f5f7ff;
  --blue-100: #ebefff;
  --blue-200: #d6e4ff;
  --blue-300: #99b2ff;
  --blue-800: #3366ff;
  --blue-850: #2f55cd;
  --green-100: #dcfaeb;
  --green-500: #1c8c67;
  --green-600: #219b78;
  --violet: #7a63e0;
  --orange: #ffaa45;
  --red-100: #fde8e8;
  --red-600: #c9372c;
  --ui-shadow: 0 1px 2px rgba(32, 41, 44, 0.06), 0 12px 32px -12px rgba(38, 33, 85, 0.22);

  container-type: inline-size;
  position: relative;
  width: 100%;
  font-family: var(--p26-font-body, Rubik), Arial, sans-serif;
  color: var(--ui-900);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* The stage crops its panels like a window into the product. */
.p26-demo__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  font-size: clamp(10px, 2.25cqw, 13px);
  line-height: 1.43;
}

.p26-demo__layer {
  position: absolute;
  will-change: transform, opacity;
}

.p26-demo p {
  margin: 0;
}

/* Panels (collapsible sections in the app) */
.ui-panel {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

.ui-panel__head {
  display: flex;
  align-items: center;
  gap: 0.571em;
  height: 2.571em;
  padding: 0 0.571em 0 1.143em;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-head);
  font-weight: 500;
}

.ui-panel__caret {
  color: var(--ui-700);
  font-size: 0.857em;
}

.ui-panel__body {
  padding: 1em 1.143em;
}

/* Chat */
.ui-chat {
  display: flex;
  flex-direction: column;
  gap: 0.857em;
  padding: 1em;
  border: 1px solid var(--ui-line);
  border-radius: 0.857em;
  background: var(--ui-head);
  box-shadow: var(--ui-shadow);
}

.ui-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.857em;
  border-radius: 0.571em;
  background: var(--ui-line-soft);
  text-align: right;
}

.ui-assistant {
  padding-right: 2.286em;
}

.ui-steps {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ui-300);
}

.ui-step {
  display: flex;
  align-items: center;
  gap: 0.286em;
}

.ui-artifact {
  display: flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.857em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
}

.ui-artifact.is-highlighted {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.ui-artifact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.429em;
  height: 3.429em;
  border-radius: 0.571em;
  background: var(--blue-100);
  color: var(--blue-850);
  font-size: 1em;
}

.ui-artifact__icon svg {
  font-size: 1.43em;
}

.ui-artifact__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-artifact__text strong {
  font-size: 1.143em;
  font-weight: 500;
}

.ui-artifact__text span {
  color: var(--ui-300);
}

.ui-button {
  flex: none;
  padding: 0.143em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  box-shadow: inset 0 -1px 2px rgba(32, 41, 44, 0.24);
  color: var(--ui-700);
}

/* Tags, badges, labels */
.ui-tag {
  display: inline-flex;
  padding: 0.286em;
  border: 1px solid var(--ui-line);
  border-radius: 0.286em;
  background: var(--ui-50);
  white-space: nowrap;
}

.ui-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.143em;
}

.ui-badge {
  display: inline-flex;
  padding: 0.143em 0.357em;
  border: 1px solid rgba(28, 140, 103, 0.3);
  border-radius: 0.286em;
  background: var(--green-100);
  color: var(--green-500);
  font-size: 0.857em;
  line-height: 1.33;
  white-space: nowrap;
}

.ui-label {
  display: flex;
  align-items: center;
  gap: 0.286em;
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.33;
  text-transform: uppercase;
}

.ui-label svg {
  color: var(--ui-300);
  font-size: 1.33em;
}

/* Channel logos keep the Figma SVG proportions inside a 1.43em box. */
.ui-logo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.43em;
  height: 1.43em;
}

.ui-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Destinations */
.ui-dests {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
}

.ui-dest {
  display: flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.429em 0.571em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.286em;
  color: var(--ui-700);
}

.ui-dest.is-checked {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.ui-dest__name {
  flex: 1;
}

.ui-dest__tag {
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: #efedff;
  color: #5a3da9;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.5;
}

.ui-dest__box {
  position: relative;
  display: grid;
  width: 1.143em;
  height: 1.143em;
  font-size: 1.143em;
}

.ui-dest__box svg {
  grid-area: 1 / 1;
}

.ui-dest__on {
  color: var(--blue-800);
  opacity: 0;
}

.ui-dest.is-checked .ui-dest__on {
  opacity: 1;
}

.ui-dest.is-checked .ui-dest__off {
  opacity: 0;
}

/* Filter criteria */
.ui-criteria {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-criteria li {
  line-height: 1.43;
}

.ui-criteria b {
  font-weight: 500;
}

.ui-criteria .op {
  color: var(--ui-300);
}

.ui-criteria i {
  font-style: italic;
}

.ui-criteria .join {
  color: var(--ui-300);
  font-weight: 500;
}

.ui-criteria .nested {
  padding-left: 2.6em;
}

/* Distribution bars */
.ui-bars {
  display: flex;
  flex-direction: column;
  gap: 0.143em;
  padding: 0.286em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
}

.ui-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4em 2.6em 0.5em;
  align-items: center;
  gap: 0.286em;
  height: 2.286em;
  padding: 0 0.143em 0 0.43em;
  color: var(--ui-700);
}

.ui-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 0.286em 0 0 0.286em;
  background: rgba(51, 102, 255, 0.1);
  transform-origin: left center;
}

.ui-bar > span:not(.ui-bar__fill) {
  position: relative;
}

.ui-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-bar__share,
.ui-bar__rate {
  text-align: right;
}

.ui-conf {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.143em;
}

.ui-conf i {
  width: 0.214em;
  height: 0.214em;
  background: var(--ui-line);
}

.ui-conf.is-high i { background: #25ae80; }
.ui-conf.is-medium i:nth-child(-n + 2) { background: #4da6ff; }
.ui-conf.is-low i:first-child { background: var(--orange); }

/* Metrics */
.ui-metric {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.571em;
  min-width: 0;
  padding: 0.857em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  white-space: nowrap;
}

.ui-metric strong {
  display: block;
  font-size: 1.286em;
  font-weight: 500;
  line-height: 1.33;
}

.ui-metric__detail {
  display: flex;
  flex-direction: column;
  gap: 0.43em;
  padding: 0.2em 0;
  color: var(--ui-300);
  font-size: 0.714em;
  line-height: 1.2;
}

.ui-metric__detail b {
  color: var(--ui-900);
  font-size: 1.2em;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .p26-demo__layer {
    will-change: auto;
  }
}

/* Screen-reader-only text (descriptions). Each code component renders in its
   own shadow root, so this must live in every component's stylesheet. */
.p26-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Section 4 journey visuals — Primer app UI at Figma sizes, in em
 * (1em = Rubik 14/20 in the app). The stage scales the whole composition
 * with its width so nothing gets re-typeset in a non-product style.
 *
 * Composition system (every step): a primary app window anchored
 * top-left at 5% / 6% that bleeds off the bottom edge, plus one floating
 * secondary panel on the right. Defaults = the FINISHED composition.
 */
/* Self-contained for Webflow: the component fills its slot (set the slot's
   size and position: relative), paints its own per-step backdrop, and draws
   the composition on a fixed-ratio artboard so it scales as one piece:
   8:7 landscape (authored at 790×700, 14px) or 4:5 portrait (360×450, 11px)
   when the slot is taller than it is wide. */
:host {
  display: block;
  height: 100%;
}

.p26-journey-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}

.p26-journey-visual.jv--build { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--inspect { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }
.p26-journey-visual.jv--validate { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--reach { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
.p26-journey-visual.jv--stages { background-image: linear-gradient(160deg, #f8f7ff 0%, #efedfb 100%); }
.p26-journey-visual.jv--overview { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--inputs { background-image: linear-gradient(160deg, #f4f7f9 0%, #e9ecfb 100%); }

/* Artboard: anchored to the bottom so windows that bleed off it meet the
   slot's bottom edge; extra width becomes backdrop on either side. */
.jv-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100cqw, 114.29cqh);
  aspect-ratio: 8 / 7;
  transform: translateX(-50%);
  font-size: min(1.772cqw, 2.025cqh);
  line-height: 1.43;
}

.jv-layer {
  position: absolute;
  will-change: transform, opacity;
}

/* Primary window and floating panel surfaces */
.jv-win,
.jv-float {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 0.857em;
  background: #fff;
}

.jv-win {
  top: 6%;
  bottom: -4%;
  left: 5%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(32, 41, 44, 0.06), 0 18px 40px -20px rgba(38, 33, 85, 0.28);
}

.jv-float {
  z-index: 2;
  box-shadow: 0 1px 2px rgba(32, 41, 44, 0.08), 0 28px 56px -18px rgba(38, 33, 85, 0.38);
}

/* ---------- App chrome ---------- */
.app-title {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.571em;
  height: 4em;
  padding: 0 1.143em;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
}

.app-iconbtn {
  display: grid;
  flex: none;
  place-items: center;
  width: 2em;
  height: 2em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.571em;
  color: var(--ui-700);
  font-size: 1em;
}

.app-iconbtn svg {
  font-size: 0.857em;
}

.app-title__text {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  font-size: 1.143em;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-save {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.286em;
  padding: 0.571em 1.143em;
  border-radius: 0.571em;
  background: var(--ui-900);
  color: #fff;
}

.app-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.571em;
  padding: 0.857em 1.143em;
  background: var(--ui-head);
}

.app-estimates {
  display: flex;
  flex: none;
  gap: 0.571em;
  padding: 0.571em 1.143em 0.286em;
  background: var(--ui-head);
}

.app-tile {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
  padding: 0.857em 2.857em 0.857em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
}

.app-tile--grow {
  flex: 1;
  min-width: 0;
  padding-right: 1.143em;
}

.app-tile__label {
  color: var(--ui-300);
  font-size: 0.857em;
  line-height: 1.33;
}

.app-tile__row {
  display: flex;
  gap: 1.143em;
}

.app-tile__row--wide {
  gap: 1.714em;
}

.app-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.143em;
  white-space: nowrap;
}

.app-stat b {
  font-size: 1.143em;
  font-weight: 500;
  line-height: 1.5;
}

.app-stat__icon {
  width: 1.43em;
  color: var(--ui-300);
}

.app-link {
  color: var(--blue-800);
}

/* People / Companies segmented control (table header) */
.app-toolbar {
  display: flex;
  flex: none;
  gap: 0.286em;
  padding: 0.714em 1.143em;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-head);
}

.app-seg,
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.286em 0.571em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.571em;
  color: var(--ui-900);
}

.app-seg svg,
.app-tab svg {
  color: var(--ui-700);
  font-size: 0.857em;
}

.app-seg.is-active,
.app-tab.is-active {
  border-color: var(--blue-200);
  background: var(--blue-100);
  color: var(--blue-800);
}

.app-seg.is-active svg,
.app-tab.is-active svg {
  color: var(--blue-800);
}

/* People table (table-row-people) */
.app-row {
  display: grid;
  flex: none;
  grid-template-columns: 1.45fr 1fr 1.25fr 1.25fr;
  align-items: start;
  gap: 0.571em;
  padding: 0.571em 1.143em;
  border-bottom: 1px solid var(--ui-line-soft);
  background: #fff;
}

.app-row--head {
  align-items: center;
  height: 3.43em;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: var(--ui-line);
  color: var(--ui-700);
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.app-cell {
  min-width: 0;
}

.app-stack {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
  min-width: 0;
}

.app-cell--person,
.app-cell--company {
  display: flex;
  align-items: flex-start;
  gap: 0.571em;
}

.app-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.571em;
  height: 2.571em;
  border: 1px solid #c1e5e5;
  border-radius: 50%;
  background: #f5ffff;
  color: #408080;
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.app-co {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.571em;
  height: 2.571em;
  border: 1px solid var(--blue-200);
  border-radius: 0.571em;
  background: var(--blue-50);
  color: #405580;
  font-size: 0.857em;
  font-weight: 500;
}

.app-name {
  display: inline-flex;
  align-items: center;
  gap: 0.286em;
  white-space: nowrap;
}

.app-verified {
  color: var(--green-500);
}

.app-meta {
  color: var(--ui-900);
  font-size: 0.714em;
  line-height: 1.2;
  white-space: nowrap;
}

.app-meta span {
  color: var(--ui-300);
}

.app-meta--soft {
  color: var(--ui-300);
}

.app-heat {
  display: inline-flex;
  gap: 0.143em;
  color: #da7720;
}

.app-signals {
  display: inline-flex;
  align-items: center;
  gap: 0.43em;
  white-space: nowrap;
}

.app-signals i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--blue-300);
}

.app-signals i.is-hot {
  background: var(--green-500);
}

.app-engage {
  display: flex;
  gap: 1em;
  padding-left: 1.03em;
  font-size: 0.714em;
}

.app-engage span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.app-engage svg {
  color: var(--blue-800);
  font-size: 1.4em;
}

.app-engage .is-off,
.app-engage .is-off svg {
  color: var(--ui-300);
}

/* Breakdown lists (Summary "Companies by location" pattern) */
.app-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.571em;
  padding: 1.143em;
}

.app-breakdown__head {
  display: grid;
  grid-template-columns: 1fr 4em 2.6em 0.5em;
  align-items: center;
  gap: 0.286em;
  padding: 0 0.143em 0 0;
  color: var(--ui-700);
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.app-breakdown__head svg {
  justify-self: end;
  color: var(--ui-300);
  font-size: 1em;
}

.app-summary-bar,
.app-match-bar {
  display: flex;
  align-items: center;
  gap: 1.143em;
  padding: 0.857em 1.143em;
  border-bottom: 1px solid var(--ui-line);
}

.app-match-bar {
  flex-wrap: wrap;
  gap: 0.43em 1.43em;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.286em 0.571em;
  border: 1px solid var(--blue-200);
  border-radius: 0.571em;
  background: var(--blue-50);
  color: var(--blue-800);
}

/* Validation tab */
.app-tabs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.286em;
  padding: 0.857em 1.143em;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
}

.app-val {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--ui-head);
}

.app-val__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.143em 1.143em 0.571em;
  font-size: 1.143em;
}

/* Window title: same weight as the other windows' title bars. */
.app-val__head > span:first-child {
  font-weight: 500;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.286em;
  padding: 0.5em 1em;
  border: 1px solid var(--ui-line);
  border-radius: 0.5em;
  background: #fff;
  box-shadow: inset 0 -1px 2px rgba(32, 41, 44, 0.24);
  color: var(--ui-700);
  font-size: 0.875em;
}

.app-val__cols,
.app-val__row {
  display: grid;
  grid-template-columns: 3.7em 1fr auto;
  align-items: start;
  column-gap: 0.571em;
}

.app-val__cols {
  height: 3.43em;
  align-items: center;
  padding-right: 1.143em;
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-700);
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.app-val__cols span:last-child {
  padding-right: 3em;
}

.app-val__row {
  padding: 0.857em 1.143em 0.857em 0;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
}

.app-val__chev {
  justify-self: center;
  margin-top: 0.15em;
  color: var(--ui-300);
  font-size: 1.143em;
  transition: transform 0.2s ease;
}

.app-val__row.is-open .app-val__chev {
  transform: rotate(90deg);
}

.app-val__text {
  display: flex;
  flex-direction: column;
  gap: 0.571em;
}

.app-fix {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
  padding: 0.714em 0.857em;
  border: 1px solid var(--blue-200);
  border-radius: 0.571em;
  background: var(--blue-50);
}

.app-fix__label {
  color: var(--blue-850);
  font-size: 0.786em;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.app-fix b {
  font-weight: 500;
}

.app-fix__done {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--green-500);
  font-size: 0.857em;
}

.app-tag {
  padding: 0.286em 0.571em;
  border: 1px solid;
  border-radius: 0.286em;
  font-size: 0.857em;
  line-height: 1.33;
  white-space: nowrap;
}

.app-tag.is-error { border-color: rgba(229, 138, 138, 0.3); background: #faeeee; color: #b22424; }
.app-tag.is-warn { border-color: rgba(218, 119, 32, 0.3); background: #fff4de; color: #66361f; }
.app-tag.is-resolved { border-color: rgba(28, 140, 103, 0.3); background: var(--green-100); color: var(--green-500); }

/* Filter Criteria: highlight a changed condition */
.ui-criteria li.jv-changed {
  margin: 0 -0.3em;
  padding: 0.15em 0.3em;
  border-radius: 0.286em;
  background: var(--green-100);
  box-shadow: inset 0 0 0 1px rgba(28, 140, 103, 0.3);
}

/* Enrichment banner (Destinations) */
.app-enrich {
  display: flex;
  gap: 0.571em;
  margin-top: 0.286em;
  padding: 0.571em;
  border-radius: 0.571em;
  background: #e9f4f5;
  color: var(--ui-700);
  font-size: 0.857em;
  line-height: 1.33;
}

.app-enrich svg {
  flex: none;
  color: #269199;
  font-size: 1.15em;
}

/* ---------- 1. Build ---------- */
/* Left: the prompt that describes the audience. Right: what it produced. */
.jv-build-chat {
  left: 5%;
  top: auto;
  width: 43%;
}

.jv-build-chat .ui-artifact {
  padding: 0.714em 0.857em;
}

.jv-build-chat .ui-artifact__icon {
  width: 2.857em;
  height: 2.857em;
}

.jv-build-chat .ui-artifact__text strong {
  overflow: hidden;
  font-size: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Like the product chat, the thread sits on the composer, not at the top. */
.app-chat__thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.857em;
  padding: 1.143em;
}

.app-chat__reply {
  margin: 0;
  line-height: 1.43;
}

.app-chat__reply b {
  font-weight: 500;
}

.app-composer {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.571em;
  margin: 0 0.857em 9%;
  padding: 0.571em 0.571em 0.571em 0.857em;
  border: 1px solid var(--ui-line);
  border-radius: 0.857em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 41, 44, 0.05);
}

.app-composer__text {
  flex: 1;
  color: var(--ui-300);
  line-height: 1.43;
}

.app-composer__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.286em;
  background: var(--ui-900);
  color: #fff;
}

.jv-build-win {
  left: auto;
  right: 4%;
  top: 12%;
  width: 47%;
}

/* ---------- 2. Inspect ---------- */
.jv-inspect-win {
  right: 10%;
}

.jv-inspect-breakdown {
  right: 4%;
  top: 57%;
  bottom: -4%;
  width: 36%;
}

.jv-inspect-breakdown .app-breakdown + .app-breakdown {
  padding-top: 0;
}

/* ---------- 3. Validate ---------- */
.jv-validate-win {
  top: 19%;
  right: 12%;
  bottom: auto;
}

.jv-validate-criteria {
  right: 4%;
  top: 65%;
  width: 40%;
}

/* ---------- 4. Reach ---------- */
/* Destinations card, ribbons and Match Size Estimate share one box so the
   ribbons can be measured from the real rows. */
.jv-reach-flow {
  inset: 0 4% 0 5%;
  display: grid;
  grid-template-columns: 43% 1fr 41%;
  align-items: center;
  font-size: 1.12em;
}

.jv-reach-dests {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
}

.jv-reach-ribbons {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.jv-ribbon {
  fill: none;
  stroke-linecap: butt;
  opacity: 0.5;
}

.jv-ribbon.is-linkedin { stroke: #9fc2ea; }
.jv-ribbon.is-meta { stroke: #b3d1f6; }
.jv-ribbon.is-google { stroke: #66b1b7; }
.jv-ribbon.is-youtube { stroke: #f2b8b5; }
.jv-ribbon.is-reddit { stroke: #f8c6a8; }
.jv-ribbon.is-dv360 { stroke: #a9d3b6; }
.jv-ribbon.is-microsoft { stroke: #c6d3dc; }

/* The key moment: the product's Match Size Estimate, scaled up as one block. */
.jv-reach-match {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 1.143em 1.43em 0.6em;
}

.jv-reach-match .app-tile__label {
  margin-bottom: 0.4em;
}

.jv-match-row {
  display: flex;
  align-items: center;
  gap: 0.43em;
  padding: 0.857em 0;
  border-top: 1px solid var(--ui-line-soft);
}

.jv-match-row .ui-logo {
  font-size: 1.43em;
}

.jv-match-row b {
  font-size: 1.43em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Match-rate lift: grey = the uploaded list, purple = after enrichment. */
.jv-lift__head {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-bottom: 0.5em;
}

.jv-lift__legend {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ui-300);
  font-size: 0.75em;
  white-space: nowrap;
}

.jv-lift__legend i {
  display: inline-block;
  width: 0.75em;
  height: 0.5em;
  border-radius: 999px;
}

.jv-lift__legend i.is-after { margin-left: 0.5em; }

.jv-lift-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7em;
  padding: 0.857em 0;
  border-top: 1px solid var(--ui-line-soft);
}

.jv-lift-row .ui-logo { font-size: 1.43em; }

.jv-lift-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}

.jv-lift-bar {
  display: block;
  height: 0.5em;
  border-radius: 999px;
}

/* Faint 0–100% track so the jump reads at a glance. */
.jv-lift-bars {
  background: linear-gradient(var(--ui-50), var(--ui-50)) top / 100% 0.5em no-repeat,
    linear-gradient(var(--ui-50), var(--ui-50)) bottom / 100% 0.5em no-repeat;
}

.jv-lift-bar.is-before,
.jv-lift__legend i.is-before { background: #d5dde1; }

.jv-lift__legend i.is-after { background: linear-gradient(90deg, #6e37ff, #3366ff); }

/* Published figures are ranges: solid to the low end, lighter to the high. */
.jv-lift-bar.is-after {
  background:
    linear-gradient(90deg, #6e37ff, #3366ff) 0 0 / var(--low, 100%) 100% no-repeat,
    rgba(51, 102, 255, 0.28);
}

.jv-lift-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.jv-lift-num b {
  font-size: 1.43em;
  font-weight: 600;
  color: var(--ui-900);
}

.jv-lift-num span {
  color: var(--ui-300);
  font-size: 0.75em;
  white-space: nowrap;
}

/* ---------- Closing: three audiences ---------- */
.jv-stage-win {
  bottom: auto;
  width: 29.5%;
}

/* Stage tint, from Figma "Build for every stage" */
.jv-crit-group,
.ui-criteria li.jv-mark {
  border: 1px solid;
  border-radius: 0.571em;
}

.jv-crit-group {
  padding: 0.857em;
}

.ui-criteria li.jv-mark {
  margin: 0 0 0.143em;
  padding: 0.571em 0.714em;
}

.jv-crit-group.is-prospect { border-color: var(--blue-200); background: var(--blue-50); }
.jv-crit-group.is-suppress { border-color: rgba(218, 119, 32, 0.28); background: #fffaf0; }
.ui-criteria li.jv-mark.is-visitors { border-color: rgba(28, 140, 103, 0.28); background: #edf8f2; }

/* Keep each criteria value together so it wraps as a unit, not mid-list. */
.jv-stage-win .ui-criteria i {
  display: inline-block;
}

.jv-stage-win.is-1 { left: 5%; top: 7%; }
.jv-stage-win.is-2 { left: 35.25%; top: 12%; }
.jv-stage-win.is-3 { left: 65.5%; top: 17%; }

.app-mini-title {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.43em;
  padding: 1em 1.143em;
  border-bottom: 1px solid var(--ui-line);
}

.app-mini-title .app-title__text {
  width: 100%;
  font-size: 1em;
  line-height: 1.3;
}

.app-stage-tag {
  padding: 0.143em 0.43em;
  border: 1px solid;
  border-radius: 0.286em;
  font-size: 0.857em;
  line-height: 1.33;
}

.app-stage-tag.is-prospect { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-850); }
.app-stage-tag.is-visitors { border-color: rgba(28, 140, 103, 0.3); background: var(--green-100); color: var(--green-500); }
.app-stage-tag.is-suppress { border-color: rgba(218, 119, 32, 0.3); background: #fff4de; color: #66361f; }

/* ---------- Portrait (phones) ---------- */
/* ---------- Audiences page: overview (hero) ---------- */
/* Reading order: request (top left) → audience → check (top right) →
   finding + recommendation (bottom right). */
.jv-ov-prompt {
  top: 5%;
  left: 5%;
  width: 44%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em 1.143em;
}

.jv-ov-ask {
  margin: 0;
  padding: 0.6em 0.8em;
  border-radius: 0.714em 0.714em 0.714em 0.2em;
  background: #f1eeff;
  color: var(--ui-900);
  font-size: 1.07em;
  line-height: 1.45;
}

.jv-ov-built {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-ov-built svg { color: #6e37ff; }
.jv-ov-built b { color: var(--ui-900); font-weight: 500; }

.jv-ov-win { top: 33%; left: 5%; bottom: auto; width: 49%; z-index: 1; }

.jv-ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-bottom: 0.6em;
}

.jv-ov-title {
  color: var(--ui-900);
  font-weight: 500;
}

.jv-ov-check {
  top: 12%;
  right: 3%;
  width: 38%;
  z-index: 2;
  padding: 1em 1.143em 0.6em;
}

.jv-ov-issue {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0;
  border-top: 1px solid var(--ui-line-soft);
  color: var(--ui-700);
  font-size: 0.93em;
}

.jv-ov-issue .app-tag { flex: none; }

/* "Low reach" flips to "Resolved" once the fix is applied. */
.jv-ov-swap { display: grid; flex: none; }
.jv-ov-swap > * { grid-area: 1 / 1; }
.jv-ov-swap .is-error { visibility: hidden; }

.jv-ov-found {
  right: 3%;
  bottom: 4%;
  width: 44%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 1em 1.143em;
}

.jv-ov-eyebrow {
  color: #3e63dd;
  font-size: 0.786em;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.jv-ov-finding {
  margin: 0;
  color: var(--ui-900);
  font-size: 1.07em;
  font-weight: 500;
  line-height: 1.35;
}

.jv-ov-dots {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 0.2em;
}

.jv-ov-dots i,
.jv-ov-legend i {
  display: block;
  aspect-ratio: 1;
  border-radius: 0.15em;
  background: #d5dbe0;
}

.jv-ov-dots i.is-out,
.jv-ov-legend i.is-out { background: #3e63dd; }

.jv-ov-legend {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ui-700);
  font-size: 0.786em;
}

.jv-ov-legend i { width: 0.7em; }
.jv-ov-legend i.is-out { margin-left: 0.5em; }

.jv-ov-rec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  margin-top: 0.2em;
  padding: 0.714em 0.857em;
  border: 1px solid var(--blue-200);
  border-radius: 0.571em;
  background: var(--blue-50);
  color: var(--ui-900);
}

.jv-ov-rec b { font-weight: 500; }
.jv-ov-rec .jv-issues-apply { margin-top: 0.2em; padding: 0.4em 0.8em; font-size: 0.857em; }

/* Entrance sequence (one pass). Before play everything waits hidden; with
   reduced motion or no script the finished composition shows. */
@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced:not(.is-playing) .jv-seq,
  .jv-sequenced:not(.is-playing) .ui-criteria li,
  .jv-sequenced:not(.is-playing) .jv-ov-dots i { opacity: 0; }

  .jv-sequenced.is-playing .jv-seq {
    animation: jv-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 0.55s + 0.15s);
  }

  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li {
    animation: jv-fade 0.35s ease both;
  }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(1) { animation-delay: 2.5s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(2) { animation-delay: 2.65s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(3) { animation-delay: 2.8s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(4) { animation-delay: 2.95s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(5) { animation-delay: 3.1s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(6) { animation-delay: 3.25s; }
  .jv-sequenced.is-playing .jv-ov-criteria .ui-criteria li:nth-child(7) { animation-delay: 3.4s; }

  .jv-sequenced.is-playing .jv-ov-swap .is-error { animation: jv-swap-out 0.3s ease 4.6s both; visibility: visible; }
  .jv-sequenced.is-playing .jv-ov-swap .is-resolved { animation: jv-fade 0.3s ease 4.6s both; }

  .jv-sequenced.is-playing .jv-ov-dots i {
    animation: jv-fade 0.2s ease both;
    animation-delay: calc(5.3s + var(--n) * 0.02s);
  }
}

@keyframes jv-rise {
  from { opacity: 0; transform: translateY(1.2em) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes jv-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jv-swap-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Untyped text keeps its space so the bubble never changes size. */
.jv-typed__rest { visibility: hidden; }

/* ---------- Audiences page: inputs (section B) ---------- */
.jv-in-flow {
  inset: 0 4% 0 5%;
  display: grid;
  grid-template-columns: 39% 1fr 47%;
  align-items: center;
}

.jv-in-sources {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}

.jv-in-src {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.9em 1.1em;
}

.jv-in-src .app-tile__label {
  display: block;
  color: var(--ui-900);
  font-weight: 500;
}

.jv-in-src.is-primer {
  border-color: #c9bdfc;
  background: #f7f5ff;
}

.jv-in-logos,
.jv-in-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

.jv-in-logos .ui-logo { font-size: 1.43em; }

.jv-in-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-in-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--ui-900);
  font-weight: 500;
}

.jv-in-note {
  color: var(--ui-300);
  font-size: 0.857em;
}

.jv-in-audience {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
}

.jv-in-targets {
  position: absolute;
  top: 36%;
  bottom: 30%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jv-in-target {
  display: block;
  width: 1px;
  height: 1.4em;
}

.jv-in-audience .jv-in-criteria { margin: 0.857em 1.143em 0; }

.jv-in-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em 1.143em 1em;
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-in-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.jv-in-legend svg { color: #6e37ff; }

.jv-ribbon.is-in-first-party { stroke: #b3c7ee; }
.jv-ribbon.is-in-events { stroke: #a9d3d6; }
.jv-ribbon.is-in-primer { stroke: #c9bdfc; }

@container (max-aspect-ratio: 1 / 1) {
  .jv-stage {
    width: min(100cqw, 80cqh);
    aspect-ratio: 4 / 5;
    font-size: min(3.06cqw, 2.45cqh);
  }

  .jv-win {
    left: 4%;
    right: 4%;
    width: auto;
  }

  .jv-reach-ribbons {
    display: none;
  }

  /* Audiences overview on phones: request, then the finding + next step. */
  .jv-ov-prompt { left: 4%; right: 4%; width: auto; }
  .jv-ov-prompt { top: 3%; }
  .jv-ov-win { display: none; }
  .jv-ov-check { top: 33%; left: 8%; right: 4%; width: auto; }
  .jv-ov-check .jv-ov-issue + .jv-ov-issue { display: none; }
  .jv-ov-found { left: 4%; right: 4%; width: auto; bottom: 3%; }

  /* Inputs: sources stacked over the audience they form. */
  .jv-in-flow {
    inset: 0 4%;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.2em;
  }

  .jv-in-sources { gap: 0.6em; }
  .jv-in-src { padding: 0.7em 0.9em; gap: 0.4em; }
  .jv-in-note,
  .jv-in-legend { display: none; }
  .jv-in-audience { grid-column: 1; grid-row: 2; padding-bottom: 0.857em; }

  /* Build: what was built on top, the request that built it in front. */
  .jv-build-win { top: 5%; }

  .jv-build-chat {
    z-index: 2;
    top: auto;
    bottom: -4%;
    box-shadow: 0 1px 2px rgba(32, 41, 44, 0.08), 0 28px 56px -18px rgba(38, 33, 85, 0.38);
  }

  .jv-build-chat .app-chat__thread { padding-bottom: 0.857em; }
  .jv-build-chat .ui-steps,
  .jv-build-chat .app-chat__reply { display: none; }
  .jv-build-chat .app-composer { margin-bottom: 8%; }

  /* Inspect: two columns, with the job-title breakdown over the lower rows. */
  .app-row { grid-template-columns: 1.4fr 1fr; }
  .app-row > :nth-child(n + 3) { display: none; }

  .jv-inspect-win { top: 5%; }

  .jv-inspect-win .app-estimates { flex-wrap: wrap; }
  .jv-inspect-win .app-estimates .app-tile--grow { flex-basis: 100%; }

  .jv-inspect-breakdown {
    left: 40%;
    right: 4%;
    width: auto;
    top: 63%;
  }

  .jv-inspect-breakdown .app-breakdown + .app-breakdown { display: none; }
  .jv-inspect-breakdown .app-breakdown__head { white-space: nowrap; }

  /* Validate: issue list, with the adjusted criteria below it. */
  .app-val__cols,
  .app-val__row { grid-template-columns: 2.6em 1fr; }
  .app-val__row .app-tag { grid-column: 2; justify-self: start; margin-top: 0.5em; }
  .app-val__cols span:last-child { display: none; }

  .jv-validate-win { top: 5%; }

  /* One issue on phones: the resolved one, so the applied fix has room. */
  .app-val__row:not(.is-open) { display: none; }

  .jv-validate-criteria {
    left: 16%;
    right: 4%;
    width: auto;
    top: auto;
    bottom: 5%;
  }

  .jv-reach-flow {
    inset: 0 4%;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1em;
  }

  /* Phones: the match-rate card alone (it names every channel); the step
     copy above already explains the automatic enrichment. */
  .jv-reach-dests { display: none; }
  .jv-reach-match { grid-column: 1; grid-row: 1; }

  /* Closing: the slot is 1:2 on phones (page CSS), so the three audiences
     stack at full size with every filter and its stage shading. */
  .jv--stages .jv-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.857em;
    width: min(100cqw, 50cqh);
    aspect-ratio: 1 / 2;
    padding: 0 4%;
    box-sizing: border-box;
    font-size: min(3.06cqw, 1.53cqh);
  }

  .jv-stage-win {
    position: relative;
    inset: auto;
    width: auto;
  }

  .jv-stage-win.is-1,
  .jv-stage-win.is-2,
  .jv-stage-win.is-3 { left: auto; top: auto; }

  .app-mini-title {
    flex-direction: row;
    align-items: center;
    gap: 0.571em;
  }

  .app-mini-title .app-title__text { width: auto; }

  /* Compact on phones: the stage tint already marks the criteria, so the
     panel header goes and the padding tightens. */
  .jv-stage-win .app-body { padding: 0.571em; }
  .jv-stage-win .ui-panel__head { display: none; }
}

/* ---------- Audiences page: logic (section C) ---------- */
.p26-journey-visual.jv--logic { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--issues { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--history { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }

.jv-logic-win { width: 56%; }

.jv-ed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
}

.jv-ed-cond {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.35em;
  color: var(--ui-900);
}

.jv-ed-cond b { font-weight: 500; }
.jv-ed-cond .op { color: var(--ui-300); }
.jv-ed-src { margin-right: 0.15em; font-size: 0.93em; }

.jv-ed-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  align-self: stretch;
  padding: 0.7em 0.85em;
  border: 1px solid #ddd3fd;
  border-radius: 0.571em;
  background: #f8f6ff;
}

.jv-ed-join {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.15em 0.5em;
  border: 1px solid var(--ui-line);
  border-radius: 0.357em;
  background: #fff;
  color: var(--ui-700);
  font-size: 0.857em;
  font-weight: 500;
}

.jv-ed-group .jv-ed-join { border-color: #ddd3fd; color: #7b5cf0; }
.jv-ed-join.is-or { border-color: #f5c99a; background: #fff; color: #d5701a; }
.jv-ed-join.is-open { border-color: var(--ui-700); color: var(--ui-900); box-shadow: 0 0 0 2px rgba(32, 41, 44, 0.06); }
.jv-ed-join.is-open svg { transform: rotate(180deg); }

/* Where the dragged group will land. */
.jv-ed-drop {
  align-self: stretch;
  height: 8.6em;
  border: 1.5px dashed #b9c8f4;
  border-radius: 0.571em;
  background: rgba(233, 239, 255, 0.6);
  box-shadow: 0 -0.5em 0 -0.36em #7f9cf5;
}

.jv-ed-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.2em;
}

.jv-ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.75em;
  border: 1px solid var(--ui-line);
  border-radius: 0.5em;
  background: #fff;
  box-shadow: inset 0 -1px 2px rgba(32, 41, 44, 0.16);
  color: var(--ui-700);
  font-size: 0.857em;
}

/* The OR group mid-drag: lifted, tilted, warm tint. */
.jv-ed-dragged {
  top: 55%;
  left: 13%;
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.9em 1em 0.9em 2.2em;
  border-color: #f5c99a;
  background: #fffaf4;
  box-shadow: 0 2px 4px rgba(32, 41, 44, 0.06), 0 26px 50px -22px rgba(102, 54, 31, 0.4);
  transform: rotate(-2deg);
}

.jv-ed-grip {
  position: absolute;
  top: 1em;
  left: 0.6em;
  color: var(--ui-300);
  font-size: 1.15em;
}

.jv-ed-picker {
  top: 19%;
  right: 3%;
  width: 40%;
  padding: 0.6em 0 0.3em;
}

.jv-ed-search {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0.7em 0.5em;
  padding: 0.45em 0.6em;
  border: 1.5px solid #8ea6f2;
  border-radius: 0.5em;
  color: var(--ui-900);
}

.jv-ed-search svg { color: var(--ui-300); }
.jv-ed-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: -0.3em; background: var(--ui-900); }

.jv-ed-tabs {
  display: flex;
  gap: 0.9em;
  padding: 0 0.9em;
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-ed-tabs span { padding: 0.4em 0 0.5em; }
.jv-ed-tabs .is-active { box-shadow: inset 0 -2px 0 #3e63dd; color: #3e63dd; }

.jv-ed-option {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  padding: 0.5em 0.9em;
  color: var(--ui-900);
}

.jv-ed-option span:last-child { color: var(--ui-300); }
.jv-ed-option.is-hover { background: #eef2fd; }
.jv-ed-option.is-hover span:last-child { color: #3e63dd; }

/* ---------- Audiences page: issues (section E) ---------- */
.jv-issues-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: #b22424;
  font-size: 0.857em;
  font-weight: 500;
}

.jv-issues-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.4em;
}

.jv-issues-apply {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background: var(--ui-900);
  color: #fff;
  font-size: 0.875em;
}

.jv-issues-actions .app-btn { padding: 0.5em 1em; }

.ui-criteria li.jv-proposed {
  margin: 0 -0.3em;
  padding: 0.15em 0.3em;
  border-radius: 0.286em;
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}

.jv-proposed s { color: var(--ui-300); }
.jv-proposed ins { color: #3e63dd; font-style: italic; text-decoration: none; }

.jv-proposed-note {
  display: block;
  margin-top: 0.6em;
  color: #3e63dd;
  font-size: 0.857em;
}

/* ---------- Audiences page: history (section G) ---------- */
.jv-history-win { width: 64%; }

.jv-hist {
  margin: 0;
  padding: 0.6em 1.143em 1em;
  list-style: none;
}

.jv-hist-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  gap: 0.5em;
  padding: 0.75em 0;
}

.jv-hist-item + .jv-hist-item { border-top: 1px solid var(--ui-line-soft); }

.jv-hist-dot {
  width: 0.7em;
  height: 0.7em;
  margin-top: 0.35em;
  border-radius: 50%;
  background: var(--ui-300);
}

.jv-hist-item.is-sync .jv-hist-dot { background: #3e63dd; }
.jv-hist-item.is-join .jv-hist-dot { background: #1c8c67; }
.jv-hist-item.is-leave .jv-hist-dot { background: #da7720; }
.jv-hist-item.is-edit .jv-hist-dot { background: #7b5cf0; }

.jv-hist-body { display: flex; flex-direction: column; gap: 0.15em; }
.jv-hist-title { color: var(--ui-900); font-weight: 500; }
.jv-hist-detail { color: var(--ui-700); font-size: 0.857em; }
.jv-hist-when { color: var(--ui-300); font-size: 0.857em; white-space: nowrap; }

.jv-history-match {
  top: 58%;
  right: 4%;
  width: 36%;
  padding: 1em 1.143em;
}

.jv-hist-rate {
  display: grid;
  grid-template-columns: 1.43em 1fr 2.6em;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0;
  border-top: 1px solid var(--ui-line-soft);
}

.jv-hist-rate b { color: var(--ui-900); font-weight: 500; text-align: right; }

.jv-hist-bar {
  height: 0.5em;
  border-radius: 999px;
  background: var(--ui-head);
  overflow: hidden;
}

.jv-hist-bar i { display: block; height: 100%; border-radius: inherit; background: #5fb7a3; }

.jv-hist-synced {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.5em;
  color: var(--green-500);
  font-size: 0.857em;
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-logic-win,
  .jv-history-win { width: auto; }
  .jv-logic-win { top: 5%; }
  .jv-hist-item:nth-child(n + 4) { display: none; }
  .jv-issues-win .app-val__row .app-tag { grid-row: 1; margin: 0 0 0.5em; }
  .jv-issues-win .app-val__text { grid-row: 2; grid-column: 2; }
  .jv-issues-win .app-val__chev { grid-row: 1 / 3; }
  .jv-issues-criteria { top: auto; bottom: 3%; }
  .jv-proposed-note { display: none; }
  .jv-ed-picker { display: none; }
  .jv-ed-dragged { left: 10%; right: 6%; width: auto; top: auto; bottom: 7%; }
  .jv-history-win { top: 5%; }
  .jv-hist-when { display: none; }
  .jv-history-match { top: auto; bottom: 5%; left: 10%; right: 4%; width: auto; }
}

/* ---------- Measurement page: funnel explorer (section B) ---------- */
.p26-journey-visual.jv--funnel { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }
.p26-journey-visual.jv--evidence { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }

.jv-fn-period {
  margin-left: auto;
  color: var(--ui-300);
  font-size: 0.857em;
}

.jv-fn-win { top: 7%; left: 4%; right: 4%; bottom: auto; width: auto; }

.jv-fn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  padding: 0.75em 1.143em;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-head);
}

.jv-fn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.65em;
  border: 1px solid var(--ui-line);
  border-radius: 0.5em;
  background: #fff;
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-fn-chip b { color: var(--ui-900); font-weight: 500; }
.jv-fn-chip.is-on { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-850); }

.jv-fn-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.jv-fn-stage {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 1em 1.143em 1.1em;
}

.jv-fn-stage + .jv-fn-stage { border-left: 1px solid var(--ui-line-soft); }

.jv-fn-value { color: var(--ui-700); font-size: 0.857em; }
.jv-fn-value b { display: block; color: var(--ui-900); font-size: 1.9em; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

.jv-fn-bar {
  display: block;
  height: 0.55em;
  border-radius: 999px;
  background: var(--ui-head);
  overflow: hidden;
}

.jv-fn-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #6f8de8; }
.jv-fn-icp { color: var(--blue-850); font-size: 0.786em; font-weight: 500; }

.jv-fn-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  padding: 0.75em 1.143em;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-700);
  font-size: 0.857em;
}

.jv-fn-context b { margin-right: 0.3em; color: var(--ui-900); font-weight: 500; }

.jv-fn-account {
  right: 4%;
  bottom: 7%;
  width: 44%;
  padding: 1em 1.143em 0.6em;
}

.jv-fn-account .jv-ov-title { display: inline-flex; align-items: center; gap: 0.5em; }

.jv-fn-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jv-fn-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 1.2em 1fr;
  gap: 0.5em;
  padding: 0.45em 0;
}

.jv-fn-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.4em;
  bottom: -0.5em;
  left: 0.32em;
  width: 1px;
  background: var(--ui-line);
}

.jv-fn-dot { width: 0.65em; height: 0.65em; margin-top: 0.4em; border-radius: 50%; background: #6f8de8; }
.jv-fn-steps li:last-child .jv-fn-dot { background: #1c8c67; }

/* ---------- Measurement page: evidence (section C) ---------- */
.jv-ev-win { top: 9%; left: 4%; bottom: auto; width: 48%; }

.jv-ev-touches {
  margin: 0;
  padding: 0.6em 1.143em;
  list-style: none;
}

.jv-ev-touches li {
  position: relative;
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0;
}

.jv-ev-touches li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.2em;
  bottom: -0.4em;
  left: 0.75em;
  width: 1px;
  background: var(--ui-line);
}

.jv-ev-conv {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-500);
}

.jv-ev-views {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-head);
}

.jv-ev-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.6em 1.143em;
}

.jv-ev-view + .jv-ev-view { border-top: 1px solid var(--ui-line-soft); }
.jv-ev-name { color: var(--ui-900); font-weight: 500; }
.jv-ev-credit { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ui-700); font-size: 0.93em; }

.jv-ev-lift {
  top: 22%;
  right: 4%;
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 1em 1.143em;
}

.jv-ev-lift .jv-ov-head { margin-bottom: 0; }

.jv-ev-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}

.jv-ev-groups > div {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.6em 0.75em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.571em;
}

.jv-ev-groups b { color: var(--ui-900); font-size: 1.6em; font-weight: 500; line-height: 1.15; }

/* Interval on a −1 … +2 pt scale: zero at 33.3%, range −0.1…+1.5, point +0.7. */
.jv-ev-interval {
  position: relative;
  height: 1.4em;
  margin-top: 0.3em;
  border-radius: 0.3em;
  background: var(--ui-head);
}

.jv-ev-zero { position: absolute; top: -0.2em; bottom: -0.2em; left: 33.33%; width: 1px; background: var(--ui-700); }
.jv-ev-range { position: absolute; top: 0.45em; height: 0.5em; left: 30%; width: 53.33%; border-radius: 999px; background: rgba(218, 119, 32, 0.35); }
.jv-ev-point { position: absolute; top: 0.3em; left: calc(56.67% - 0.4em); width: 0.8em; height: 0.8em; border-radius: 50%; background: #da7720; }

.jv-ev-scale {
  display: flex;
  justify-content: space-between;
  color: var(--ui-300);
  font-size: 0.786em;
}

.jv-ev-scale span:nth-child(2) { margin-left: -18%; }

.jv-ev-note { margin: 0; color: var(--ui-700); font-size: 0.857em; line-height: 1.45; }
.jv-ev-note b { color: var(--ui-900); font-weight: 500; }

@container (max-aspect-ratio: 1 / 1) {
  .jv-fn-win { top: 4%; left: 4%; right: 4%; }
  .jv-fn-stages { grid-template-columns: 1fr 1fr; }
  .jv-fn-stage:nth-child(3) { border-left: 0; }
  .jv-fn-stage:nth-child(n + 3) { border-top: 1px solid var(--ui-line-soft); }
  .jv-fn-account { display: none; }
  .jv-ev-win { top: 4%; width: auto; }
  .jv-ev-touches { display: none; }
  .jv-ev-lift { top: auto; bottom: 3%; left: 10%; right: 4%; width: auto; }
}

/* ---------- Intelligence page (sections A–C) ---------- */
.p26-journey-visual.jv--research,
.p26-journey-visual.jv--propose,
.p26-journey-visual.jv--draft { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--proactive { background-image: linear-gradient(160deg, #f8f7ff 0%, #efedfb 100%); }
.p26-journey-visual.jv--investigate { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }

.jv-pl-win {
  top: 50%;
  transform: translateY(-50%);
  left: 12%;
  right: 12%;
  bottom: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding-bottom: 1.143em;
}

.jv-pl-ask { display: flex; justify-content: flex-end; padding: 1em 1.143em 0; }
.jv-pl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0 1.143em; }

.jv-pl-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 0 1.143em; }

.jv-pl-ad,
.jv-pl-play,
.jv-pl-why,
.jv-pl-peer,
.jv-pl-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0 1.143em;
  padding: 0.75em 0.9em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.571em;
}

.jv-pl-ads .jv-pl-ad { margin: 0; }
.jv-pl-adhead { display: inline-flex; align-items: center; gap: 0.4em; }
.jv-pl-adline { color: var(--ui-900); font-weight: 500; line-height: 1.4; }

.jv-pl-summary { background: var(--ui-head); color: var(--ui-900); }
.jv-pl-play { border-color: var(--blue-200); background: var(--blue-50); }
.jv-pl-title { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ui-900); font-size: 1.07em; font-weight: 500; }

.jv-pl-why ul { margin: 0; padding-left: 1.1em; color: var(--ui-700); }
.jv-pl-why li { padding: 0.12em 0; }
.jv-pl-why b { color: var(--ui-900); font-weight: 500; }

.jv-pl-peer { border-color: #ddd3fd; background: #f8f6ff; color: var(--ui-900); }
.jv-pl-peer .app-fix__label { color: #6e37ff; }

.jv-pl-draft { top: 7%; left: 5%; bottom: auto; width: 54%; }
.jv-pl-people { top: 30%; right: 4%; width: 40%; padding: 1em 1.143em 0.8em; }

.jv-ov-person {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0;
  border-top: 1px solid var(--ui-line-soft);
}

.jv-ov-person .app-meta { white-space: nowrap; }

.jv-pl-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5em;
  color: var(--blue-850);
  font-size: 0.857em;
}

/* Proactive suggestions */
.jv-pa-win {
  top: 50%;
  transform: translateY(-50%);
  left: 12%;
  right: 12%;
  bottom: auto;
  width: auto;
  padding-bottom: 0.6em;
}

.jv-pa-spark { color: #6e37ff; margin-right: 0.4em; }

.jv-pa-card {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  margin: 0.6em 1.143em 0;
  padding: 0.8em 0.9em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.571em;
}

.jv-pa-card.is-open { border-color: rgba(229, 138, 138, 0.45); box-shadow: 0 10px 24px -18px rgba(178, 36, 36, 0.4); }
.jv-pa-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.jv-pa-title { color: var(--ui-900); font-weight: 500; line-height: 1.4; }

.jv-pa-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 0.2em 0; }
.jv-pa-facts div { display: flex; flex-direction: column; gap: 0.15em; }
.jv-pa-facts dt { color: var(--ui-300); font-size: 0.786em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-pa-facts dd { margin: 0; color: var(--ui-700); font-size: 0.93em; line-height: 1.4; }

/* Investigation */
.jv-iv-win {
  top: 9%;
  left: 5%;
  bottom: auto;
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 0 0 1.143em;
}

.jv-iv-win > .jv-ov-finding,
.jv-iv-win > .jv-hist-detail { padding: 0 1.143em; }

.jv-iv-bars { display: flex; flex-direction: column; gap: 0.5em; margin: 0 1.143em; padding: 0.75em 0.9em; border: 1px solid var(--ui-line-soft); border-radius: 0.571em; }
.jv-iv-row { display: grid; grid-template-columns: 10.5em 1fr auto; align-items: center; gap: 0.6em; color: var(--ui-700); font-size: 0.93em; }
.jv-iv-bar { display: block; height: 0.6em; border-radius: 999px; background: var(--ui-head); overflow: hidden; }
.jv-iv-bar i { display: block; height: 100%; border-radius: inherit; background: #5fb7a3; }
.jv-iv-row.is-out .jv-iv-bar i { background: #da7720; }
.jv-iv-num { color: var(--ui-900); font-weight: 500; white-space: nowrap; }

.jv-iv-rec {
  right: 4%;
  bottom: 13%;
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em 1.143em;
  border-color: var(--blue-200);
}

.jv-iv-rec b { color: var(--ui-900); font-weight: 500; }
.jv-iv-actions { display: flex; gap: 0.5em; margin-top: 0.2em; }
.jv-iv-actions .app-btn,
.jv-iv-actions .jv-issues-apply { padding: 0.45em 0.85em; }
.jv-iv-note { padding-top: 0.5em; border-top: 1px solid var(--ui-line-soft); color: var(--ui-700); font-size: 0.786em; line-height: 1.4; }

@container (max-aspect-ratio: 1 / 1) {
  .jv-pl-win,
  .jv-pa-win { top: 4%; left: 4%; right: 4%; transform: none; }
  .jv-pl-ads { grid-template-columns: 1fr; }
  .jv-pl-ads .jv-pl-ad:nth-child(2) { display: none; }
  .jv-pl-why li:nth-child(3) { display: none; }
  .jv-pl-draft { top: 4%; width: auto; }
  .jv-pl-people { top: auto; bottom: 4%; left: 10%; right: 4%; width: auto; }
  .jv-pa-facts { display: none; }
  .jv-iv-win { top: 4%; width: auto; }
  .jv-iv-win > .jv-hist-detail { display: none; }
  .jv-iv-row { grid-template-columns: 1fr auto; }
  .jv-iv-row .jv-iv-bar { grid-column: 1 / -1; grid-row: 2; }
  .jv-iv-rec { left: 10%; right: 4%; bottom: 3%; width: auto; }
}

/* ---------- Audiences page: engaged (section D) ---------- */
.p26-journey-visual.jv--engaged { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }

.jv-en-tiles {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.25fr;
  gap: 0.6em;
  padding: 0.857em 1.143em;
}

.jv-en-tile {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.6em 0.8em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
}

.jv-en-tile b { color: var(--ui-900); font-size: 1.35em; font-weight: 500; line-height: 1.2; }
.jv-en-tile span { color: var(--ui-700); font-size: 0.857em; }
.jv-en-tile em { color: var(--ui-300); font-size: 0.75em; font-style: normal; }
.jv-en-tile.is-conv { border-color: rgba(28, 140, 103, 0.35); background: #f2faf6; }

.jv-en-filter { margin-left: auto; }

.jv-en-tip {
  top: 50%;
  right: 3%;
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.9em 1em;
  border-color: #20292c;
  background: #20292c;
  color: #fff;
  font-size: 0.93em;
}

.jv-en-tip-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 500;
}

.jv-en-tip-head i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--green-500); }
.jv-en-tip-row { display: flex; align-items: center; gap: 0.45em; color: rgba(255, 255, 255, 0.9); }
.jv-en-tip-row b { margin-left: auto; font-weight: 500; }
.jv-en-tip-row.is-off { color: rgba(255, 255, 255, 0.45); }

.jv-en-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-top: 0.3em;
  padding: 0.45em 0.8em;
  border-radius: 0.5em;
  background: #fff;
  color: var(--ui-900);
  font-size: 0.857em;
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-en-tiles { grid-template-columns: 1fr 1fr; }
  .jv-en-tile:first-child { display: none; }
  .jv-en-filter { display: none; }
  .jv-en-tip { top: auto; bottom: 4%; left: 40%; right: 4%; width: auto; }
}

/* ---------- Measurement page: connected report (section B) ---------- */
.p26-journey-visual.jv--connected { background-image: linear-gradient(160deg, #f4f7f9 0%, #e9ecfb 100%); }
.p26-journey-visual.jv--paidimpact,
.p26-journey-visual.jv--abmimpact { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }

.jv-cn-flow {
  inset: 0 4% 0 4%;
  display: grid;
  grid-template-columns: 33% 1fr 58%;
  align-items: center;
}

.jv-cn-sources { position: relative; z-index: 2; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0.9em; }

.jv-cn-src {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.8em 1em;
}

.jv-cn-logos { display: flex; align-items: center; gap: 0.35em; }
.jv-cn-logos .ui-logo { font-size: 1.2em; }
.jv-cn-name { color: var(--ui-900); font-weight: 500; }

.jv-cn-ribbons { grid-column: 1 / -1; grid-row: 1; }
.jv-ribbon.is-cn-ads { stroke: #b3c7ee; }
.jv-ribbon.is-cn-crm { stroke: #a9d3d6; }
.jv-ribbon.is-cn-pixel { stroke: #c9bdfc; }

.jv-cn-report {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
}

.jv-cn-targets {
  position: absolute;
  top: 26%;
  bottom: 26%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jv-cn-controls { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0.75em 1em 0.5em; }

.jv-cn-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--ui-line);
  border-radius: 0.5em;
  color: var(--ui-700);
  font-size: 0.82em;
}

.jv-cn-ctl b { color: var(--ui-900); font-weight: 500; }
.jv-cn-pick { border-color: var(--blue-200); background: var(--blue-50); }
.jv-cn-pick b { color: var(--blue-850); }

.jv-cn-touch {
  display: inline-flex;
  margin: 0.2em 1em 0.6em;
  padding: 0.15em;
  border: 1px solid var(--ui-line);
  border-radius: 0.5em;
  background: var(--ui-head);
  font-size: 0.82em;
}

.jv-cn-touch span { padding: 0.25em 0.65em; border-radius: 0.36em; color: var(--ui-700); white-space: nowrap; }
.jv-cn-touch .is-on { background: #fff; color: var(--ui-900); font-weight: 500; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.12); }

.jv-cn-stages { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ui-line); }
.jv-cn-stage { display: flex; flex-direction: column; gap: 0.2em; padding: 0.75em 1em; }
.jv-cn-stage:nth-child(even) { border-left: 1px solid var(--ui-line-soft); }
.jv-cn-stage:nth-child(n + 3) { border-top: 1px solid var(--ui-line-soft); }
.jv-cn-num { color: var(--ui-900); font-size: 1.6em; font-weight: 500; line-height: 1.15; }

.jv-cn-foot { display: block; padding: 0.6em 1em 0.8em; border-top: 1px solid var(--ui-line); color: var(--blue-850); font-size: 0.82em; }

/* Before/after values share one cell; the segment value is the resting state. */
.jv-cn-swap { display: inline-grid; }
.jv-cn-swap > i { grid-area: 1 / 1; font-style: normal; }
.jv-cn-swap > i:first-child { visibility: hidden; }
.jv-cn-pick.is-a .jv-cn-swap { --t: 3.6s; }
.jv-cn-pick.is-b .jv-cn-swap { --t: 4.1s; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-cn-swap > i:first-child { visibility: visible; animation: jv-swap-out 0.3s ease var(--t, 4.7s) both; }
  .jv-sequenced.is-playing .jv-cn-swap > i:last-child { animation: jv-fade 0.35s ease var(--t, 4.7s) both; }
  .jv-sequenced.is-playing .jv-cn-pick { animation: jv-pick 0.6s ease var(--t-pick, 3.5s) both; }
  .jv-sequenced.is-playing .jv-cn-pick.is-b { --t-pick: 4s; }
  .jv-sequenced.is-playing .jv-cn-ribbons path { stroke-dasharray: 800; animation: jv-draw 1.1s ease 1s both; }
}

@keyframes jv-pick {
  0% { border-color: var(--ui-line); background: #fff; }
  60% { box-shadow: 0 0 0 3px rgba(62, 99, 221, 0.18); }
  100% { border-color: var(--blue-200); background: var(--blue-50); }
}

@keyframes jv-draw {
  from { stroke-dashoffset: 800; }
  to { stroke-dashoffset: 0; }
}

/* ---------- Measurement page: report previews (section C) ---------- */
.jv-rp-win {
  top: 50%;
  left: 8%;
  right: 8%;
  bottom: auto;
  width: auto;
  transform: translateY(-50%);
  padding-bottom: 0.8em;
}

.jv-rp-win .app-title { gap: 0.6em; }
.jv-rp-touch { margin: 0 0 0 auto; }

.jv-rp-take { margin: 0; padding: 0.85em 1.143em 0.4em; color: var(--ui-700); line-height: 1.45; }
.jv-rp-take b { color: var(--ui-900); font-weight: 500; }

.jv-rp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; padding: 0.6em 1.143em; }
.jv-rp-metrics > div { display: flex; flex-direction: column; gap: 0.1em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line-soft); border-radius: 0.571em; }
.jv-rp-metrics b { color: var(--ui-900); font-size: 1.4em; font-weight: 500; line-height: 1.2; }

.jv-rp-table { margin: 0.4em 1.143em 0; border: 1px solid var(--ui-line-soft); border-radius: 0.571em; overflow: hidden; }
.jv-rp-row { display: grid; grid-template-columns: 1.2fr 0.7fr 0.7fr 1.6fr; align-items: center; gap: 0.6em; padding: 0.5em 0.8em; color: var(--ui-900); font-size: 0.93em; }
.jv-rp-row + .jv-rp-row { border-top: 1px solid var(--ui-line-soft); }
.jv-rp-row.is-head { background: var(--ui-head); color: var(--ui-700); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-rp-ch { display: inline-flex; align-items: center; gap: 0.45em; }
.jv-rp-bar { display: flex; align-items: center; gap: 0.5em; font-weight: 500; }
.jv-rp-bar i { display: block; height: 0.55em; border-radius: 999px; background: #6f8de8; }

.jv-rp-note { display: block; padding: 0.6em 1.143em 0; color: var(--ui-300); font-size: 0.78em; line-height: 1.4; }

.jv-ab-flow { display: flex; align-items: center; gap: 0.5em; margin: 0.2em 1.143em 0.2em; color: var(--ui-700); font-size: 0.9em; }
.jv-ab-flow b { color: var(--ui-900); font-weight: 500; }
.jv-ab-flow i { flex: 1; height: 1px; background: var(--ui-line); }
.jv-ab-row { grid-template-columns: 1.4fr 1fr 1.3fr; }
.jv-ab-quiet { color: var(--ui-300); }

.jv-ab-next {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin: 0.6em 1.143em 0;
  padding: 0.6em 0.8em;
  border: 1px solid var(--blue-200);
  border-radius: 0.571em;
  background: var(--blue-50);
  color: var(--ui-900);
  font-size: 0.93em;
}

.jv-ab-next b { font-weight: 500; }

@container (max-aspect-ratio: 1 / 1) {
  /* Stacked: sources as a compact row over the report. */
  .jv-cn-flow { inset: 0 4%; grid-template-columns: 1fr; align-content: center; gap: 0.9em; }
  .jv-cn-sources { flex-direction: row; gap: 0.5em; }
  .jv-cn-src { flex: 1; padding: 0.6em 0.65em; overflow: visible; }
  /* Each source visibly feeds the report below it. */
  .jv-cn-src::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 0.95em;
    margin-left: -1px;
    background: #b9c3ee;
  }
  .jv-cn-src .jv-hist-detail { font-size: 0.72em; line-height: 1.3; }
  .jv-cn-report { grid-column: 1; grid-row: 2; }
  .jv-cn-controls .jv-cn-ctl:nth-child(n + 3) { display: none; }
  .jv-rp-win { top: 4%; left: 3%; right: 3%; transform: none; }
  .jv-rp-row { grid-template-columns: 1.1fr 0.7fr 1.5fr; }
  .jv-rp-row > span:nth-child(2) { display: none; }
  .jv-ab-row { grid-template-columns: 1.3fr 1.3fr; }
  .jv-ab-row > span:nth-child(2) { display: none; }
  .jv-rp-take { font-size: 0.93em; }
  .jv-rp-metrics { gap: 0.4em; }
  .jv-rp-metrics .jv-hist-detail { display: none; }
}

/* ---------- Intelligence page v2 ---------- */
.p26-journey-visual.jv--goal,
.p26-journey-visual.jv--results { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--heatmap { background-image: linear-gradient(160deg, #f8f7ff 0%, #efedfb 100%); }
.p26-journey-visual.jv--diagnose { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }
.p26-journey-visual.jv--context { background-image: linear-gradient(160deg, #f4f7f9 0%, #e9ecfb 100%); }

.jv-rs-sources { color: var(--ui-700); font-size: 0.82em; }
.jv-rs-sources u { color: var(--blue-850); text-decoration-color: rgba(62, 99, 221, 0.4); }
.jv-pl-play .jv-pa-title { font-size: 1em; }
.jv-rs-finding { padding: 0 1.143em; font-size: 1.02em; }

.jv-gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 0 1.143em; }
.jv-gl-grid > div { display: flex; flex-direction: column; gap: 0.25em; padding: 0.75em 0.9em; border: 1px solid var(--blue-200); border-radius: 0.571em; background: var(--blue-50); }
.jv-gl-grid b { color: var(--ui-900); font-weight: 500; line-height: 1.35; }

/* Heat map */
.jv-hm-win { top: 9%; left: 4%; bottom: auto; }
.jv-hm-win { width: 52%; }
.jv-hm-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.7em 0.9em; border-bottom: 1px solid var(--ui-line-soft); }
.jv-hm-group { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.25em 0.55em; border: 1px solid var(--ui-line); border-radius: 0.4em; color: var(--ui-300); font-size: 0.78em; }
.jv-hm-group b { color: var(--ui-900); font-weight: 500; }
.jv-hm-legend { display: flex; gap: 0.7em; padding: 0.25em 0.6em; border: 1px solid var(--ui-line); border-radius: 0.4em; color: var(--ui-700); font-size: 0.72em; }
.jv-hm-legend span { display: inline-flex; align-items: center; gap: 0.3em; }
.jv-hm-legend i { width: 0.6em; height: 0.6em; border-radius: 50%; }
.jv-hm-legend i.is-conv { background: #f5c518; }
.jv-hm-legend i.is-aud { background: #a99cf5; }
.jv-hm-legend i.is-ind { box-shadow: inset 0 0 0 1px var(--ui-300); }

.jv-hm-map { display: block; width: 100%; height: auto; background: #f6f7fb; }
.jv-hm-bg { fill: #f9f9fd; stroke: #e6e7f2; stroke-width: 1.5; stroke-linejoin: round; }
.jv-hm-bgl { fill: #9aa7b0; font-size: 8px; font-family: Rubik, Arial, sans-serif; }
.jv-hm-halo { fill: #e7e4fd; stroke: #f6f7fb; stroke-width: 5; stroke-linejoin: round; }
.jv-hm-core { fill: #8f80f0; fill-opacity: calc(0.25 + var(--heat) * 0.55); stroke: #e7e4fd; stroke-width: 12; stroke-linejoin: round; paint-order: stroke; transform-box: fill-box; transform-origin: center; transform: scale(0.86); }
.jv-hm-dot { fill: #f5c518; stroke: #fff; stroke-width: 1.5; }
.jv-hm-lbl { fill: #2b2c4a; font-size: 9.5px; font-weight: 500; font-family: Rubik, Arial, sans-serif; text-anchor: middle; }
.jv-hm-cellg .jv-hm-halo { transition: stroke 0.3s ease, stroke-width 0.3s ease; }
.jv-hm-cellg.is-sel .jv-hm-halo { stroke: #3e4fd6; stroke-width: 3; }
.jv-hm-mark circle { fill: #fff; stroke-width: 2; }
.jv-hm-mark text { font-size: 10px; font-weight: 600; font-family: Rubik, Arial, sans-serif; text-anchor: middle; }
.jv-hm-mark.is-error circle { stroke: #d14343; }
.jv-hm-mark.is-error text { fill: #b22424; }
.jv-hm-mark.is-warn circle { stroke: #da7720; }
.jv-hm-mark.is-warn text { fill: #a3540f; }
.jv-hm-mark.is-resolved circle { stroke: #1c8c67; }
.jv-hm-mark.is-resolved text { fill: #157055; }
.jv-hm-mark.is-sel circle { stroke-width: 3; }

.jv-hm-feed { top: 6%; right: 3%; left: auto; bottom: auto; width: 39%; padding-bottom: 0.6em; }
.jv-hm-feed .jv-pa-card { cursor: pointer; }
.jv-hm-facts { display: grid; gap: 0.4em; margin: 0.1em 0; }
.jv-hm-facts div { display: flex; flex-direction: column; gap: 0.1em; }
.jv-hm-facts dt { color: var(--ui-300); font-size: 0.72em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-hm-facts dd { margin: 0; color: var(--ui-700); font-size: 0.88em; line-height: 1.4; }
.jv-hm-mini { flex-direction: row; align-items: center; gap: 0.6em; padding: 0.55em 0.8em; }
.jv-hm-mini-t { overflow: hidden; color: var(--ui-700); font-size: 0.85em; white-space: nowrap; text-overflow: ellipsis; }
.jv-hm-mini .app-tag { flex: none; }

/* Investigation */
.jv-dg-win { top: 6%; left: 4%; bottom: auto; width: 64%; display: flex; flex-direction: column; gap: 0.7em; padding-bottom: 1em; }
.jv-dg-table { margin-top: 0; }
.jv-dg-table .jv-rp-row { grid-template-columns: 1.7fr 0.7fr 1fr 0.9fr 0.9fr; font-size: 0.88em; }
.jv-dg-table .jv-rp-row.is-head { font-size: 0.68em; }
.jv-dg-table b { font-weight: 500; }
.jv-rp-row.is-ref-1 { background: #fdf1f0; }
.jv-rp-row.is-ref-2 { background: #eff4fe; }
.jv-dg-ref { display: inline-grid; flex: none; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--ui-900); color: #fff; font-size: 0.75em; font-weight: 500; }
.jv-dg-finding { padding: 0 1.143em; font-size: 0.98em; }

.jv-dg-recs { right: 4%; bottom: 7%; width: 40%; display: flex; flex-direction: column; gap: 0.6em; padding: 1em 1.143em; border-color: var(--blue-200); }
.jv-dg-rec { display: flex; gap: 0.55em; color: var(--ui-700); font-size: 0.92em; line-height: 1.4; }
.jv-dg-rec b { color: var(--ui-900); font-weight: 500; }
.jv-dg-rec .jv-dg-ref { margin-top: 0.15em; }

/* Business context */
.jv-cx-win { top: 6%; left: 4%; bottom: auto; width: 54%; padding-bottom: 0.5em; }
.jv-cx-group { padding: 0.7em 1.143em 0.4em; }
.jv-cx-group + .jv-cx-group { border-top: 1px solid var(--ui-line-soft); }
.jv-cx-head { display: block; margin-bottom: 0.35em; color: var(--blue-850); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-cx-field { display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: 0.5em; padding: 0.3em 0; font-size: 0.9em; }
.jv-cx-field > span { color: var(--ui-300); }
.jv-cx-field b { color: var(--ui-900); font-weight: 500; }
.jv-cx-field.is-hl { margin: 0 -0.5em; padding: 0.3em 0.5em; border-radius: 0.4em; background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-200); }
.jv-cx-sug { color: #6e37ff; font-size: 0.75em; font-style: normal; white-space: nowrap; }

.jv-cx-effect { right: 3%; top: 40%; width: 37%; display: flex; flex-direction: column; gap: 0.55em; padding: 1em 1.143em; border-color: var(--blue-200); }
.jv-cx-compare { display: flex; align-items: center; gap: 0.7em; }
.jv-cx-compare > div { display: flex; flex-direction: column; gap: 0.1em; }
.jv-cx-compare b { color: var(--ui-900); font-size: 1.5em; font-weight: 500; line-height: 1.15; }
.jv-cx-compare b.is-old { color: var(--ui-300); text-decoration: line-through; text-decoration-thickness: 1px; }
.jv-cx-arrow { color: var(--ui-300); }

@container (max-aspect-ratio: 1 / 1) {
  .jv-gl-grid { grid-template-columns: 1fr; }
  .jv-hm-win { top: 3%; left: 3%; right: 3%; width: auto; }
  .jv-hm-feed { top: auto; bottom: 3%; left: 3%; right: 3%; width: auto; }
  .jv-hm-feed .jv-hm-facts,
  .jv-hm-feed .jv-hm-mini { display: none; }
  .jv-dg-win { top: 3%; left: 3%; right: 3%; width: auto; }
  .jv-dg-table .jv-rp-row { grid-template-columns: 1.6fr 0.8fr 0.9fr; }
  .jv-dg-table .jv-rp-row > span:nth-child(2),
  .jv-dg-table .jv-rp-row > span:nth-child(3) { display: none; }
  .jv-dg-finding { display: none; }
  .jv-dg-recs { left: 8%; right: 3%; bottom: 3%; width: auto; }
  .jv-cx-win { top: 3%; left: 3%; right: 3%; width: auto; }
  .jv-cx-group:nth-child(4) { display: none; }
  .jv-cx-effect { top: auto; bottom: 3%; left: 10%; right: 3%; width: auto; }
}

/* ---------- Wide artboard for single-surface views ---------- */
/* Landscape slots: a 3:2 artboard at a larger type scale so the product
   surface fills the frame. Portrait (phones) keeps the 4:5 artboard. */
@container (min-aspect-ratio: 1 / 1) {
  .jv-wide .jv-stage {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(100cqw, 150cqh);
    aspect-ratio: 3 / 2;
    font-size: min(1.62cqw, 2.43cqh);
  }
}

/* ---------- Intelligence A: distinct surfaces ---------- */
.jv-sf-win {
  top: 50%;
  left: 5%;
  right: 5%;
  bottom: auto;
  width: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 1em 1.2em 1.2em;
}

.jv-sf-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }

.jv-ak {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.8em;
  border-radius: 999px;
  background: #f1eeff;
  color: var(--ui-900);
  font-size: 0.93em;
  font-weight: 500;
}

.jv-ak svg { flex: none; color: #6e37ff; }
.jv-sf-src { color: var(--ui-300); font-size: 0.8em; }
.jv-sf-src u { color: var(--blue-850); text-decoration-color: rgba(62, 99, 221, 0.35); }

.jv-sf-hyp {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.8em 1em;
  border: 1px solid var(--blue-200);
  border-left: 3px solid #3e63dd;
  border-radius: 0.571em;
  background: var(--blue-50);
}

.jv-sf-peer { display: flex; flex-direction: column; gap: 0.3em; padding: 0.8em 1em; border: 1px solid #ddd3fd; border-radius: 0.571em; background: #f8f6ff; color: var(--ui-900); font-size: 0.93em; }
.jv-sf-peer .app-fix__label { color: #6e37ff; }

/* Research: ad gallery with pinned observations */
.jv-rs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; padding-top: 0.6em; }

.jv-rs-ad {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.7em;
  border: 1px solid var(--ui-line);
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 6px 18px -14px rgba(32, 41, 44, 0.4);
}

.jv-rs-adbar { display: flex; align-items: center; gap: 0.45em; }
.jv-rs-adbar .ui-logo { margin-left: auto; }
.jv-rs-co { display: flex; flex-direction: column; color: var(--ui-900); font-size: 0.82em; font-weight: 500; line-height: 1.2; }
.jv-rs-co em { color: var(--ui-300); font-size: 0.85em; font-style: normal; font-weight: 400; }
.jv-rs-head { color: var(--ui-900); font-size: 0.9em; font-weight: 500; line-height: 1.3; }
.jv-rs-img { display: block; height: 4.6em; border-radius: 0.4em; }
.jv-rs-img.is-a { background: linear-gradient(135deg, #1f3b73, #3e63dd 60%, #8ea6f2); }
.jv-rs-img.is-b { background: linear-gradient(135deg, #3a2a7a, #7b5cf0 55%, #c9bdfc); }
.jv-rs-img.is-c { background: linear-gradient(135deg, #0f4c4a, #269199 55%, #a9d3d6); }
.jv-rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.jv-rs-foot .jv-hist-detail { font-size: 0.72em; line-height: 1.3; }
.jv-rs-cta { flex: none; padding: 0.25em 0.55em; border: 1px solid var(--ui-line); border-radius: 0.35em; color: var(--ui-900); font-size: 0.72em; font-weight: 500; }

.jv-rs-pin {
  position: absolute;
  top: -0.75em;
  right: 0.6em;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  background: #f5c518;
  color: #3d2f00;
  font-size: 0.75em;
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgba(61, 47, 0, 0.45);
}

/* Goal: experiment brief document */
.jv-gb-doc { display: flex; flex-direction: column; border: 1px solid var(--ui-line); border-radius: 0.6em; overflow: hidden; }
.jv-gb-title { display: flex; flex-direction: column; gap: 0.2em; padding: 0.8em 1em; border-bottom: 1px solid var(--ui-line); background: var(--ui-head); }
.jv-gb-name { color: var(--ui-900); font-size: 1.15em; font-weight: 500; }
.jv-gb-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.8em; padding: 0.65em 1em; }
.jv-gb-row + .jv-gb-row { border-top: 1px solid var(--ui-line-soft); }
.jv-gb-k { color: var(--ui-300); font-size: 0.78em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 0.15em; }
.jv-gb-v { display: flex; flex-direction: column; gap: 0.15em; }
.jv-gb-v b { color: var(--ui-900); font-weight: 500; line-height: 1.35; }
.jv-gb-ok { display: flex; align-items: center; gap: 0.45em; padding: 0.7em 1em; border-top: 1px solid rgba(28, 140, 103, 0.25); background: #f2faf6; color: var(--green-500); font-size: 0.88em; font-weight: 500; }

/* Results: grouped bar chart */
.jv-rx-chart { position: relative; display: flex; flex-direction: column; gap: 0.55em; padding: 0.8em 1em; border: 1px solid var(--ui-line); border-radius: 0.6em; }
.jv-rx-legend { display: flex; gap: 1.2em; color: var(--ui-700); font-size: 0.78em; }
.jv-rx-legend span { display: inline-flex; align-items: center; gap: 0.35em; }
.jv-rx-legend i { width: 0.8em; height: 0.8em; border-radius: 0.2em; }
.jv-rx-legend i.is-aud { background: #c9d3e0; }
.jv-rx-legend i.is-opp { background: #3e63dd; }
.jv-rx-row { display: grid; grid-template-columns: 8em 1fr; align-items: center; gap: 0.8em; padding: 0.2em 0.4em; border-radius: 0.4em; }
.jv-rx-row.is-hi { background: #f5f2ff; box-shadow: inset 0 0 0 1px #ddd3fd; }
.jv-rx-t { color: var(--ui-700); font-size: 0.9em; }
.jv-rx-row.is-hi .jv-rx-t { color: var(--ui-900); font-weight: 500; }
.jv-rx-bars { display: flex; flex-direction: column; gap: 0.2em; }
.jv-rx-bar { position: relative; display: flex; align-items: center; height: 0.85em; width: var(--w); min-width: 1.5em; border-radius: 0.2em; }
.jv-rx-bar.is-aud { background: #c9d3e0; }
.jv-rx-bar.is-opp { background: #3e63dd; }
.jv-rx-bar em { position: absolute; left: calc(100% + 0.4em); color: var(--ui-700); font-size: 0.7em; font-style: normal; white-space: nowrap; }
.jv-rx-row.is-hi .jv-rx-bar.is-opp { background: #6e37ff; }
.jv-rx-call { align-self: flex-end; padding: 0.3em 0.7em; border-radius: 999px; background: #f5c518; color: #3d2f00; font-size: 0.78em; font-weight: 600; }
.jv-rx-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-rx-bar { animation: jv-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: inherit; transform-origin: left center; }
  .jv-sequenced.is-playing .jv-rs-pin { animation: jv-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 0.55s + 0.15s); }
}

@keyframes jv-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes jv-pop { from { opacity: 0; transform: scale(0.6) translateY(0.4em); } to { opacity: 1; transform: none; } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-sf-win { top: 3%; left: 3%; right: 3%; transform: none; padding: 0.8em; gap: 0.6em; }
  .jv-rs-gallery { grid-template-columns: 1fr 1fr; }
  .jv-rs-ad:nth-child(3) { display: none; }
  .jv-rs-img { height: 3em; }
  .jv-rs-foot .jv-hist-detail { display: none; }
  .jv-gb-row { grid-template-columns: 5em 1fr; padding: 0.5em 0.8em; }
  .jv-gb-row .jv-hist-detail { display: none; }
  .jv-rx-foot { grid-template-columns: 1fr; }
  .jv-sf-peer { display: none; }
  .jv-sf-src { display: none; }
}

/* ---------- Intelligence B: suggestions arrive ---------- */
.jv-hm-new { margin-left: auto; padding: 0.15em 0.55em; border-radius: 999px; background: #6e37ff; color: #fff; font-size: 0.72em; font-weight: 500; }
.jv-hm-empty { display: block; padding: 1.4em 1.143em; color: var(--ui-300); font-size: 0.88em; }
.jv-hm-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.1em; padding: 0.4em 0.8em; border-radius: 0.5em; background: var(--ui-900); color: #fff; font-size: 0.82em; font-weight: 500; }
.jv-hm-mark rect { fill: #fff; stroke-width: 1.2; }
.jv-hm-mark.is-error rect { stroke: #e6a3a3; }
.jv-hm-mark.is-warn rect { stroke: #f0c08f; }
.jv-hm-mark.is-resolved rect { stroke: #9fd5c0; }
.jv-hm-mark circle { stroke: none; }
.jv-hm-mark.is-error circle { fill: #d14343; }
.jv-hm-mark.is-warn circle { fill: #da7720; }
.jv-hm-mark.is-resolved circle { fill: #1c8c67; }
.jv-hm-mark .jv-hm-sym { fill: #fff; font-size: 8px; font-weight: 700; font-family: Rubik, Arial, sans-serif; text-anchor: middle; }
.jv-hm-mark .jv-hm-chip { fill: #2b2c4a; font-size: 7.6px; font-weight: 500; font-family: Rubik, Arial, sans-serif; text-anchor: start; }
.jv-hm-mark.is-sel rect { stroke: #3e4fd6; stroke-width: 1.6; }
.jv-hm-cellg { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .jv-hm-in { animation: jv-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .jv-hm-mark { animation: jv-mark-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-box: fill-box; transform-origin: center; }
  .jv-hm-mark.is-sel circle { animation: jv-ping 1.6s ease-out 0.4s 2; transform-box: fill-box; transform-origin: center; }
}

@keyframes jv-slide-in { from { opacity: 0; transform: translateX(1.5em); } to { opacity: 1; transform: none; } }
@keyframes jv-mark-in { from { opacity: 0; transform: translateY(4px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes jv-ping { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- Intelligence C: sequenced investigation ---------- */
.jv-dg-from { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 1.143em 0; }
.jv-dg-body { position: relative; }
.jv-dg-row { --rh: 3.2em; height: var(--rh); box-sizing: border-box; transform: translateY(calc((var(--to) - var(--dom)) * var(--rh))); }
.jv-dg-table .jv-rp-row + .jv-rp-row { border-top: 0; }
.jv-dg-row { border-top: 1px solid var(--ui-line-soft); }
.jv-dg-sortcol { color: var(--blue-850); }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-dg-row { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both; }
  .jv-sequenced.is-playing .jv-dg-sortcol { animation: jv-flash 0.9s ease 3.1s both; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-1 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both, jv-hi-1 0.6s ease 4.6s both; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-2 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both, jv-hi-2 0.6s ease 7.6s both; }
  .jv-sequenced.is-playing .jv-dg-ref { animation: jv-pop 0.4s ease both; }
  .jv-sequenced.is-playing .is-ref-1 .jv-dg-ref { animation-delay: 4.6s; }
  .jv-sequenced.is-playing .is-ref-2 .jv-dg-ref { animation-delay: 7.6s; }
}

@keyframes jv-sort {
  from { transform: translateY(calc((var(--from) - var(--dom)) * var(--rh))); }
  to { transform: translateY(calc((var(--to) - var(--dom)) * var(--rh))); }
}
@keyframes jv-flash { 0%, 100% { color: var(--blue-850); } 40% { color: #6e37ff; } }
@keyframes jv-hi-1 { from { background: #fff; } to { background: #fdf1f0; } }
@keyframes jv-hi-2 { from { background: #fff; } to { background: #eff4fe; } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-from .jv-hist-detail { display: none; }
  .jv-dg-row { --rh: 3.1em; }
}

/* ---------- Intelligence C: two takeaways ---------- */
.jv-dg-win { left: 3%; width: 56%; }
.jv-dg-takes { top: 6%; right: 2.5%; bottom: auto; left: auto; width: 36%; display: flex; flex-direction: column; gap: 0.8em; }
.jv-dg-take { position: relative; display: flex; flex-direction: column; gap: 0.45em; padding: 0.9em 1em; }
.jv-dg-take.is-1 { border-color: #f1c4c0; box-shadow: inset 3px 0 0 #d14343, 0 18px 40px -26px rgba(32, 41, 44, 0.45); }
.jv-dg-take.is-2 { border-color: var(--blue-200); box-shadow: inset 3px 0 0 #3e63dd, 0 18px 40px -26px rgba(32, 41, 44, 0.45); }
.jv-dg-th { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ui-300); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-dg-take .jv-pa-title { font-size: 0.98em; line-height: 1.35; }
.jv-dg-take .jv-hist-detail { line-height: 1.4; }
.jv-dg-take .app-fix { margin: 0.15em 0 0; }
.jv-dg-takes .jv-iv-note { padding: 0 0.2em; }

@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-win { width: auto; }
  .jv-dg-takes { top: auto; bottom: 3%; left: 6%; right: 3%; width: auto; gap: 0.5em; }
  .jv-dg-take { padding: 0.65em 0.8em; gap: 0.3em; }
  .jv-dg-take .jv-hist-detail,
  .jv-dg-takes .jv-iv-note { display: none; }
}
@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-win .jv-pl-ask { display: none; }
  .jv-dg-take .app-fix { padding: 0.4em 0.6em; }
  .jv-dg-take .app-fix__label { display: none; }
  .jv-dg-take .jv-pa-title { font-size: 0.9em; }
  .jv-dg-take .app-fix { font-size: 0.85em; }
}

/* ---------- Measurement B: setup checklist + definitions ---------- */
.p26-journey-visual.jv--setup { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .jv--setup .jv-stage { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(100cqw, 200cqh); aspect-ratio: 2 / 1; font-size: min(1.3cqw, 2.6cqh); }
}
.jv-su { inset: 7% 4%; display: grid; grid-template-columns: 0.95fr 1.25fr; gap: 1.4em; align-items: center; }
.jv-su .jv-win { position: relative; inset: auto; width: auto; }
.jv-su-list { padding-bottom: 0.9em; }
.jv-su-count { margin-left: auto; padding: 0.15em 0.6em; border-radius: 999px; background: #e7f6ef; color: var(--green-500); font-size: 0.78em; font-weight: 500; }
.jv-su-step { display: flex; gap: 0.75em; padding: 0.8em 1.1em; border-bottom: 1px solid var(--ui-line-soft); }
.jv-su-check { display: grid; flex: none; place-items: center; width: 1.6em; height: 1.6em; border: 1.5px solid var(--ui-line); border-radius: 50%; color: transparent; }
.jv-su-check svg { width: 0.9em; height: 0.9em; }
.jv-su-body { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.jv-su-title { color: var(--ui-900); font-weight: 500; }
.jv-su-logos { display: flex; align-items: center; gap: 0.35em; }
.jv-su-logos .ui-logo { font-size: 1.1em; }
.jv-su-status { color: var(--green-500); font-size: 0.8em; }
.jv-su-go { display: flex; align-items: center; justify-content: center; gap: 0.45em; margin: 0.9em 1.1em 0; padding: 0.7em; border-radius: 0.6em; background: var(--ui-900); color: #fff; font-weight: 500; }

/* Resting state: done. */
.jv-su-step .jv-su-check { border-color: #1c8c67; background: #1c8c67; color: #fff; }

.jv-su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; }
.jv-su-card { display: flex; flex-direction: column; gap: 0.55em; padding: 0.9em 1em; }
.jv-su-label { color: var(--blue-850); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-su-chips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.jv-su-chips i { padding: 0.25em 0.6em; border: 1px solid var(--blue-200); border-radius: 999px; background: var(--blue-50); color: var(--ui-900); font-size: 0.85em; font-style: normal; }
.jv-su-sug { color: #6e37ff; font-size: 0.75em; }
.jv-su-pipe { display: flex; align-items: center; gap: 0.25em; }
.jv-su-pipe i { flex: 1; padding: 0.35em 0.2em; border-radius: 0.3em; background: #eef1f6; color: var(--ui-700); font-size: 0.75em; font-style: normal; text-align: center; white-space: nowrap; }
.jv-su-pipe i.is-on { background: #3e63dd; color: #fff; font-weight: 500; }
.jv-su-rules { display: flex; flex-direction: column; gap: 0.3em; font-size: 0.88em; }
.jv-su-rules span { display: flex; align-items: center; gap: 0.4em; color: var(--ui-900); }
.jv-su-rules svg { color: #1c8c67; }
.jv-su-rules .is-off { color: var(--ui-300); text-decoration: line-through; }
.jv-su-rules .is-off i { display: inline-grid; place-items: center; width: 1em; color: #d14343; font-style: normal; font-size: 0.85em; text-decoration: none; }
.jv-su-rules em { margin-left: 0.2em; padding: 0.05em 0.45em; border-radius: 999px; background: #fdecea; color: #b22424; font-size: 0.8em; font-style: normal; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-su-step .jv-su-check { animation: jv-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 1s + 0.3s); }
  .jv-sequenced.is-playing .jv-su-step .jv-su-status { animation: jv-fade 0.4s ease both; animation-delay: calc(var(--i) * 1s + 0.5s); }
}
@keyframes jv-tick {
  from { border-color: var(--ui-line); background: transparent; color: transparent; transform: scale(0.8); }
  to { border-color: #1c8c67; background: #1c8c67; color: #fff; transform: none; }
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-su { inset: 3%; grid-template-columns: 1fr; gap: 0.8em; align-content: start; }
  .jv-su-step { padding: 0.6em 0.8em; }
  .jv-su-grid { gap: 0.5em; }
  .jv-su-card { padding: 0.6em 0.7em; gap: 0.4em; }
  .jv-su-card .jv-hist-detail, .jv-su-sug { display: none; }
}

/* ---------- Measurement C: report previews hug their frame ---------- */
@container (min-aspect-ratio: 1 / 1) {
  .jv--paidimpact .jv-stage,
  .jv--abmimpact .jv-stage { width: min(100cqw, 177.8cqh); aspect-ratio: 16 / 9; font-size: min(1.45cqw, 2.58cqh); }
  .jv--paidimpact .jv-rp-win,
  .jv--abmimpact .jv-rp-win { top: 50%; left: 6%; right: 6%; transform: translateY(-50%); }
}

/* setup: phone keeps the checklist readable */
@container (max-aspect-ratio: 1 / 1) {
  .jv-su-logos { display: none; }
  .jv-su-grid .jv-su-card:nth-child(n + 3) { display: none; }
  .jv-su-go { margin-top: 0.6em; padding: 0.55em; }
}

/* ---------- Measurement C: report library + chat ---------- */
.p26-journey-visual.jv--reportlib,
.p26-journey-visual.jv--attribution { background-image: linear-gradient(160deg, #f5f7ff 0%, #e9ecfb 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .jv--reportlib .jv-stage,
  .jv--attribution .jv-stage { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(100cqw, 177.8cqh); aspect-ratio: 16 / 9; font-size: min(1.18cqw, 2.1cqh); }
}
.jv-rl { inset: 4% 3%; width: auto; display: grid; grid-template-columns: 30% 1fr; overflow: hidden; }
.jv-rl-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ui-line); background: #fbfbfd; }
.jv-rl-chathead { display: flex; align-items: center; gap: 0.45em; padding: 0.9em 1em; border-bottom: 1px solid var(--ui-line); color: var(--ui-900); font-weight: 500; }
.jv-rl-thread { flex: 1; display: flex; flex-direction: column; gap: 0.7em; padding: 1em; overflow: hidden; }
.jv-rl-q { align-self: flex-end; max-width: 92%; padding: 0.55em 0.8em; border-radius: 0.7em; background: #eceef1; color: var(--ui-900); font-size: 0.9em; line-height: 1.4; }
.jv-rl-a { color: var(--ui-700); font-size: 0.9em; line-height: 1.45; }
.jv-rl-a b { color: var(--ui-900); font-weight: 500; }
.jv-rl-artifact { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.6em; background: #fff; }
.jv-rl-artifact b { display: block; color: var(--ui-900); font-weight: 500; font-size: 0.92em; }
.jv-rl-artifact em { color: var(--ui-300); font-size: 0.78em; font-style: normal; }
.jv-rl-doc { flex: none; width: 2em; height: 2em; border-radius: 0.45em; background: #eef2fe url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%233e63dd%27 stroke-width=%271.8%27%3E%3Cpath d=%27M5 20V10M10 20V4M15 20v-7M20 20V8%27/%3E%3C/svg%3E") center / 60% no-repeat; }
.jv-rl-input { display: flex; align-items: center; justify-content: space-between; margin: 0.8em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.6em; background: #fff; color: var(--ui-300); font-size: 0.88em; }
.jv-rl-input i { width: 1.6em; height: 1.6em; border-radius: 0.4em; background: var(--ui-900); }
.jv-rl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.jv-rl-lib { display: flex; align-items: center; gap: 0.4em; padding: 0.7em 1em; border-bottom: 1px solid var(--ui-line); background: var(--ui-head); flex-wrap: wrap; }
.jv-rl-libl { margin-right: 0.4em; color: var(--ui-300); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-rl-tpl { padding: 0.35em 0.75em; border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; color: var(--ui-700); font-size: 0.85em; cursor: pointer; transition: all 0.25s ease; }
.jv-rl-tpl.is-on { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-850); font-weight: 500; }
.jv-rl-tpl.is-more { cursor: default; opacity: 0.75; }
.jv-rl-report { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.jv-rl-report .jv-rp-win { position: static; inset: auto; width: auto; transform: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.jv-rl-report .jv-rp-win .app-title { border-bottom: 1px solid var(--ui-line-soft); }

@media (prefers-reduced-motion: no-preference) {
  .jv-rl-in { animation: jv-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 1s); }
  .jv-rl-report { animation: jv-fade 0.5s ease both; }
}
@keyframes jv-rise { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-rl { inset: 3%; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .jv-rl-chat { order: 2; border-right: 0; border-top: 1px solid var(--ui-line); max-height: 42%; }
  .jv-rl-chat .jv-rl-chathead, .jv-rl-chat .jv-rl-input, .jv-rl-artifact { display: none; }
  .jv-rl-thread { padding: 0.7em; gap: 0.45em; }
  .jv-rl-tpl.is-more, .jv-rl-libl { display: none; }
  .jv-rl-report .jv-rp-metrics .jv-hist-detail, .jv-rl-report .jv-rp-take, .jv-rl-report .jv-ab-flow, .jv-rl-report .jv-ab-next, .jv-rl-report .jv-rp-note { display: none; }
}

/* ---------- Measurement C: attribution views + holdout ---------- */
.jv-at { inset: 6% 4%; display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.4em; align-items: center; }
.jv-at .jv-win { position: relative; inset: auto; width: auto; }
.jv-at-models { padding-bottom: 0.6em; }
.jv-at-path { display: grid; grid-template-columns: 11em repeat(4, 1fr); padding: 1em 1em 0.6em; }
.jv-at-path::before { content: ""; }
.jv-at-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
.jv-at-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1px solid var(--ui-line); border-radius: 50%; background: #fff; }
.jv-at-node.is-conv .jv-at-dot { border-color: #9fd5c0; background: #e7f6ef; color: #1c8c67; }
.jv-at-lbl { color: var(--ui-700); font-size: 0.75em; text-align: center; }
.jv-at-line { position: absolute; top: 1.1em; left: 50%; width: 100%; height: 1px; background: repeating-linear-gradient(90deg, var(--ui-line) 0 4px, transparent 4px 8px); }
.jv-at-row { display: grid; grid-template-columns: 11em 1fr; align-items: center; padding: 0.55em 1em; border-top: 1px solid var(--ui-line-soft); }
.jv-at-name { display: flex; flex-direction: column; }
.jv-at-name b { color: var(--ui-900); font-weight: 500; }
.jv-at-name em { color: var(--ui-300); font-size: 0.75em; font-style: normal; line-height: 1.3; }
.jv-at-credit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.jv-at-cell { display: grid; place-items: center; height: 2em; margin: 0 0.4em; border-radius: 0.4em; background: #f2f4f7; color: transparent; font-size: 0.8em; font-weight: 600; }
.jv-at-cell.is-on { background: #3e63dd; color: #fff; }
.jv-at-cell.is-blank { background: transparent; }

.jv-at-hold { display: flex; flex-direction: column; gap: 0.6em; padding: 1.1em 1.2em; border-color: #f0d9b5; background: #fffaf3; }
.jv-at-holdk { color: #a3540f; font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-at-bars { display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.2em; }
.jv-at-bar { display: grid; grid-template-columns: 5.5em 1fr 3em; align-items: center; gap: 0.6em; font-size: 0.9em; }
.jv-at-bar em { color: var(--ui-700); font-style: normal; }
.jv-at-bar i { display: block; width: var(--w); height: 1.1em; border-radius: 0.3em; }
.jv-at-bar i.is-test { background: #e8892f; }
.jv-at-bar i.is-ctl { background: #d6dbe2; }
.jv-at-bar b { color: var(--ui-900); font-weight: 500; text-align: right; }
.jv-at-lift { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; padding-top: 0.5em; border-top: 1px dashed #f0d9b5; color: var(--ui-700); font-size: 0.9em; }
.jv-at-lift b { color: var(--ui-900); font-weight: 600; }
.jv-at-lift em { color: var(--ui-300); font-size: 0.85em; font-style: normal; }
.jv-at-ci { position: relative; width: 5em; height: 0.5em; border-radius: 999px; background: #f6e3c8; }
.jv-at-ci i { position: absolute; top: -0.2em; left: 46%; width: 0.9em; height: 0.9em; border-radius: 50%; background: #e8892f; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-at-cell.is-on { animation: jv-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 1s); }
  .jv-sequenced.is-playing .jv-at-bar i { animation: jv-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both; transform-origin: left center; }
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-at { inset: 3%; grid-template-columns: 1fr; gap: 0.7em; align-content: start; }
  .jv-at-path, .jv-at-row { grid-template-columns: 6.5em repeat(4, 1fr); }
  .jv-at-row { display: grid; }
  .jv-at-credit { display: contents; }
  .jv-at-name em, .jv-at-lbl { display: none; }
  .jv-at-hold .jv-hist-detail { display: none; }
}

/* ---------- Measurement: destinations ---------- */
.p26-journey-visual.jv--destinations { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .jv--destinations .jv-stage { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(100cqw, 200cqh); aspect-ratio: 2 / 1; font-size: min(1.25cqw, 2.5cqh); }
}
.jv-ds { inset: 5% 4%; display: grid; grid-template-columns: 1fr 0.55fr 1.05fr; align-items: center; }
.jv-ds .jv-win { position: relative; inset: auto; width: auto; }
.jv-ds-event { display: flex; flex-direction: column; gap: 0.6em; padding: 1.1em 1.2em; }
.jv-ds-k { display: flex; align-items: center; gap: 0.4em; color: #1c8c67; font-size: 0.8em; font-weight: 500; }
.jv-ds-event .jv-pa-title { font-size: 1.25em; }
.jv-ds-who { display: flex; align-items: center; gap: 0.6em; color: var(--ui-900); font-size: 0.92em; }
.jv-ds-who b { font-weight: 500; }
.jv-ds-who em { display: block; color: var(--ui-300); font-size: 0.85em; font-style: normal; }
.jv-ds-src { display: flex; align-items: center; gap: 0.35em; padding-top: 0.6em; border-top: 1px solid var(--ui-line-soft); color: var(--ui-700); font-size: 0.82em; }
.jv-ds-wires { width: 100%; height: 100%; overflow: visible; }
.jv-ds-wires path { fill: none; stroke: #b9c3ee; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.jv-ds-list { display: flex; flex-direction: column; gap: 0.45em; }
.jv-ds-dest { display: grid; grid-template-columns: 2em auto 1fr; align-items: center; gap: 0.6em; padding: 0.45em 0.7em; border: 1px solid var(--ui-line); border-radius: 0.6em; background: #fff; box-shadow: 0 6px 18px -14px rgba(32, 41, 44, 0.45); }
.jv-ds-ico { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 0.45em; background: #f5f6f8; }
.jv-ds-ico img, .jv-ds-ico svg { width: 1.25em; height: 1.25em; object-fit: contain; }
.jv-ds-dest b { color: var(--ui-900); font-weight: 500; font-size: 0.92em; }
.jv-ds-dest em { color: var(--ui-300); font-size: 0.78em; font-style: normal; text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-ds-wires path { animation: jv-fade 0.5s ease both; animation-delay: calc(var(--i) * 1s); }
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-ds { inset: 4%; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0.8em; }
  .jv-ds-wires { display: none; }
  .jv-ds-list { display: grid; grid-template-columns: 1fr 1fr; }
  .jv-ds-dest { grid-template-columns: 2em 1fr; }
  .jv-ds-dest em { display: none; }
  .jv-ds-src { display: none; }
}
@container (min-aspect-ratio: 1 / 1) {
  .jv--attribution .jv-stage { font-size: min(1.42cqw, 2.52cqh); }
  .jv-at { inset: 5% 3%; }
}
.jv-ds-list { align-self: stretch; justify-content: space-around; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ds { grid-template-rows: auto auto; align-content: center; }
  .jv-ds-list { align-self: auto; }
}

/* ---------- Intelligence C v3: prompt → analysis → takeaways rise in ---------- */
.jv-dg-win { top: 6%; padding: 1em 0 1em; }
.jv-dg-ask { padding: 0 1.143em; }
.jv-dg-reply { display: flex; align-items: center; gap: 0.45em; padding: 0 1.143em; color: var(--ui-700); font-size: 0.88em; }
.jv-dg-table { margin: 0 1.143em; }
.jv-dg-takes { top: 6%; }
.jv-dg-acts { display: flex; gap: 0.45em; margin-top: 0.2em; }
.jv-dg-btn { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.4em 0.85em; border: 1px solid var(--ui-line); border-radius: 0.5em; background: #fff; color: var(--ui-700); font-size: 0.82em; font-weight: 500; }
.jv-dg-btn.is-yes { border-color: var(--ui-900); background: var(--ui-900); color: #fff; }
.jv-dg-btn svg { width: 0.9em; height: 0.9em; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced:not(.is-playing) .jv-dg-rise { opacity: 0; }
  .jv-sequenced.is-playing .jv-dg-rise { animation: jv-rise-far 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 1s); }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-2 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both, jv-hi-2 0.6s ease 6.8s both; }
  .jv-sequenced.is-playing .is-ref-2 .jv-dg-ref { animation-delay: 6.8s; }
}
@keyframes jv-rise-far { from { opacity: 0; transform: translateY(3em); } to { opacity: 1; transform: none; } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-win .jv-pl-ask { display: block; }
  .jv-dg-reply { display: none; }
  .jv-dg-acts { margin-top: 0; }
  .jv-dg-btn { padding: 0.3em 0.7em; }
}
@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-takes { top: auto; bottom: 3%; }
  .jv-dg-win { top: 3%; padding: 0.7em 0; gap: 0.5em; }
}
.jv-ds-wires { align-self: stretch; height: auto; }

/* setup v2: Integrations + Funnel context windows */
.jv-su { align-items: stretch; }
.jv-su-list { display: flex; flex-direction: column; }
.jv-su-list .jv-su-go { margin-top: auto; }
.jv-su-ctx { display: flex; flex-direction: column; }
.jv-su-ctxk { margin-left: auto; color: #6e37ff; font-size: 0.78em; }
.jv-su-ctx .jv-su-grid { flex: 1; padding: 1em; gap: 0.8em; }
.jv-su-card { border: 1px solid var(--ui-line-soft); border-radius: 0.6em; background: #fafbfd; }
.jv-su-card .jv-su-sug { display: none; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-su { align-items: start; }
  .jv-su-ctx .jv-su-grid { padding: 0.6em; gap: 0.5em; }
  .jv-su-ctxk { display: none; }
}

/* attribution: 2:1 artboard so the frame hugs its two windows */
@container (min-aspect-ratio: 1 / 1) {
  .jv--attribution .jv-stage { width: min(100cqw, 200cqh); aspect-ratio: 2 / 1; font-size: min(1.3cqw, 2.6cqh); }
  .jv-at { inset: 7% 4%; }
}

/* ---------- Intelligence C v4: one chat, takeaways swap in one slot ---------- */
@container (min-aspect-ratio: 1 / 1) {
  .jv--diagnose .jv-stage { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(100cqw, 200cqh); aspect-ratio: 2 / 1; font-size: min(1.25cqw, 2.5cqh); }
  .jv-dg-win { top: 50%; left: 3%; width: 58%; transform: translateY(-50%); }
  .jv-dg-takes { top: 50%; right: 3%; width: 35%; transform: translateY(-50%); display: grid; }
  .jv-dg-takes > * { grid-area: 1 / 1; }
  .jv-dg-takes .jv-iv-note { display: none; }
}
.jv-dg-reply { align-items: flex-start; line-height: 1.4; }
.jv-dg-reply svg { flex: none; margin-top: 0.15em; }
.jv-dg-table .jv-rp-row { grid-template-columns: 2.3fr 0.75fr 1fr 0.85fr 0.85fr; }
.jv-dg-name { white-space: nowrap; }
.jv-dg-ref.is-none { visibility: hidden; }
.jv-dg-row { --rh: 2.6em; }

@media (prefers-reduced-motion: no-preference) {
  /* Takeaway 1 gives way to takeaway 2 in the same spot. */
  .jv-sequenced.is-playing .jv-dg-take.jv-dg-swap { animation: jv-rise-far 0.75s cubic-bezier(0.22, 1, 0.36, 1) 4.6s both, jv-swap-away 0.6s ease 6.9s forwards; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-1 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both, jv-hi-1 0.6s ease 4.6s both, jv-unhi-1 0.5s ease 7.2s forwards; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-2 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 3.4s both, jv-hi-2 0.6s ease 7.6s both; }
  .jv-sequenced.is-playing .is-ref-2 .jv-dg-ref { animation-delay: 7.6s; }
}
@keyframes jv-swap-away { to { opacity: 0; transform: translateY(-1.5em); visibility: hidden; } }
@keyframes jv-unhi-1 { to { background: #fff; } }
@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-takes { display: grid; }
  .jv-dg-takes > * { grid-area: 1 / 1; }
  .jv-dg-takes .jv-iv-note { display: none; }
}
/* Reduced motion: both takeaways, stacked. */
@media (prefers-reduced-motion: reduce) {
  .jv-dg-takes { display: flex !important; flex-direction: column; gap: 0.6em; }
}

/* Intelligence C v5: fill whatever frame the page gives (pinned frames are wide and short). */
@container (min-aspect-ratio: 1 / 1) {
  .jv--diagnose .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.18cqw, 3.15cqh), 17px); }
  .jv-dg-win { left: 4%; width: 57%; }
  .jv-dg-takes { right: 4%; width: 33%; }
}

/* attribution: fill the frame like the investigation, windows top-aligned */
@container (min-aspect-ratio: 1 / 1) {
  .jv--attribution .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.22cqw, 2.85cqh), 17px); }
  .jv-at { inset: 5% 3.5%; align-items: center; gap: 1.6em; }
}
/* phone: let long ad-set names wrap instead of running into the numbers */
@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-name { white-space: normal; }
  .jv-dg-table .jv-rp-row { grid-template-columns: 1.9fr 0.9fr 0.9fr; }
  .jv-dg-row { --rh: 3.1em; }
}

/* ---------- Intelligence C v6: typed question, chat thread anchored to the bottom ---------- */
.jv-dg-chat { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
@container (min-aspect-ratio: 1 / 1) {
  .jv-dg-chat { top: 7%; bottom: 7%; transform: none; }
}
.jv-dg-chathead { display: flex; align-items: center; gap: 0.45em; padding: 0.75em 1em; border-bottom: 1px solid var(--ui-line); color: var(--ui-900); font-weight: 500; }
.jv-dg-chathead .jv-fn-period { margin-left: auto; }
.jv-dg-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1em; overflow: hidden; }
.jv-dg-msg { overflow: hidden; margin-top: 0.7em; }
.jv-dg-msg.is-q { display: flex; justify-content: flex-end; }
.jv-dg-msg.is-q .jv-pl-ask, .jv-dg-msg .app-user { margin: 0; }
.jv-dg-chat .jv-dg-reply { padding: 0; }
.jv-dg-chat .jv-dg-table { margin: 0 0 0.2em; }
.jv-dg-input { display: flex; align-items: center; gap: 0.6em; margin: 0.8em 1em 1em; padding: 0.55em 0.55em 0.55em 0.85em; border: 1px solid var(--ui-line); border-radius: 0.7em; background: #fff; box-shadow: 0 4px 14px -10px rgba(32, 41, 44, 0.35); }
.jv-dg-field { position: relative; flex: 1; min-width: 0; height: 1.5em; overflow: hidden; }
.jv-dg-ph, .jv-dg-typed { position: absolute; left: 0; top: 0; line-height: 1.5em; white-space: nowrap; }
.jv-dg-ph { color: var(--ui-300); }
.jv-dg-typed { overflow: hidden; color: var(--ui-900); border-right: 1.5px solid #3e63dd; }
.jv-dg-send { display: grid; flex: none; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.5em; background: var(--ui-900); color: #fff; }
.jv-dg-send svg { width: 1em; height: 1em; }

/* Resting state (reduced motion / finished): question sent, input empty. */
.jv-dg-typed { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* 0.2–1.6s type · 1.8s send · 1.9s question moves into the thread · 2.6s reply · 3.2s table · 4.6s flash · 4.9s sort · 6.1s takeaway 1 · 8.2s swap · 8.9s takeaway 2 */
  .jv-sequenced.is-playing .jv-dg-ph { animation: jv-ph 2.2s linear 0s both; }
  .jv-sequenced.is-playing .jv-dg-typed { animation: jv-type 1.4s steps(30, end) 0.2s both, jv-sent 0.2s ease 1.8s forwards; }
  .jv-sequenced.is-playing .jv-dg-send { animation: jv-ask-send 0.45s ease 1.6s both; }
  .jv-sequenced.is-playing .jv-dg-msg.is-q { animation: jv-msg-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.9s both; --mh: 6em; }
  .jv-sequenced.is-playing .jv-dg-msg.is-reply { animation: jv-msg-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.6s both; --mh: 5em; }
  .jv-sequenced.is-playing .jv-dg-msg.is-table { animation: jv-msg-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both; --mh: 16em; }
  .jv-sequenced.is-playing .jv-dg-sortcol { animation: jv-flash 0.9s ease 4.6s both; }
  .jv-sequenced.is-playing .jv-dg-row { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 4.9s both; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-1 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 4.9s both, jv-hi-1 0.6s ease 6.1s both, jv-unhi-1 0.5s ease 8.5s forwards; }
  .jv-sequenced.is-playing .jv-rp-row.is-ref-2 { animation: jv-sort 0.8s cubic-bezier(0.65, 0, 0.35, 1) 4.9s both, jv-hi-2 0.6s ease 8.9s both; }
  .jv-sequenced.is-playing .is-ref-1 .jv-dg-ref { animation: jv-pop 0.4s ease 6.1s both; }
  .jv-sequenced.is-playing .is-ref-2 .jv-dg-ref { animation: jv-pop 0.4s ease 8.9s both; }
  .jv-sequenced.is-playing .jv-dg-take.jv-dg-swap { animation: jv-rise-far 0.75s cubic-bezier(0.22, 1, 0.36, 1) 6.1s both, jv-swap-away 0.6s ease 8.2s forwards; }
}
@keyframes jv-ph { 0% { opacity: 1; } 8% { opacity: 0; } 85% { opacity: 0; } 100% { opacity: 1; } }
@keyframes jv-type { from { max-width: 0; opacity: 1; } to { max-width: 32em; opacity: 1; } }
@keyframes jv-sent { from { opacity: 1; } to { opacity: 0; } }
@keyframes jv-msg-in { from { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(0.8em); } to { max-height: var(--mh); opacity: 1; margin-top: 0.7em; transform: none; } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-dg-chat { top: 3%; height: 58%; bottom: auto; }
  .jv-dg-chathead .jv-fn-period { display: none; }
  .jv-dg-input { margin: 0.6em 0.7em 0.7em; }
  .jv-dg-thread { padding: 0 0.7em; }
}

/* ---------- Shared settings window (app style) ---------- */
.jv-st { position: relative; inset: auto; width: auto; display: flex; overflow: hidden; background: #fafafa; }
.jv-st-nav { flex: none; width: 11em; display: flex; flex-direction: column; gap: 0.25em; padding: 1em 0.7em; border-right: 1px solid var(--ui-line); background: #fff; }
.jv-st-navh { padding: 0 0.5em 0.5em; color: var(--ui-900); font-weight: 500; }
.jv-st-navi { padding: 0.45em 0.6em; border-radius: 0.45em; color: var(--ui-700); font-size: 0.88em; }
.jv-st-navi.is-on { background: #eef2fe; color: #2f55cd; font-weight: 500; }
.jv-st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8em; padding: 1em; }
.jv-st-sug { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.8em; border: 1px solid #ddd3fd; border-radius: 0.6em; background: #f8f6ff; color: var(--ui-700); font-size: 0.86em; }
.jv-st-sug b { color: var(--ui-900); font-weight: 500; }
.jv-st-rev { margin-left: auto; padding: 0.2em 0.65em; border-radius: 0.4em; background: #6e37ff; color: #fff; font-weight: 500; }
.jv-st-block { display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em 1em; border-radius: 0.8em; background: #fff; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.06); }
.jv-st-h { color: var(--ui-900); font-size: 1.05em; font-weight: 500; }
.jv-st-size { padding: 0.45em 0.7em; border: 1px solid var(--ui-line); border-radius: 0.5em; color: var(--ui-300); font-size: 0.86em; }
.jv-st-size b { color: var(--ui-900); font-weight: 600; }
.jv-st-crit { border: 1px solid var(--ui-line); border-radius: 0.5em; overflow: hidden; font-size: 0.86em; }
.jv-st-crith { display: flex; align-items: center; justify-content: space-between; padding: 0.45em 0.7em; border-bottom: 1px solid var(--ui-line); background: #f5f6f8; color: var(--ui-900); font-weight: 500; }
.jv-st-edit { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15em 0.5em; border: 1px solid var(--ui-line); border-radius: 0.35em; background: #fff; color: var(--ui-700); font-weight: 400; font-size: 0.92em; }
.jv-st-edit svg { width: 0.9em; height: 0.9em; }
.jv-st-rule { padding: 0.35em 0.7em 0; color: var(--ui-900); }
.jv-st-rule b { font-weight: 600; }
.jv-st-rule i { color: var(--ui-300); font-style: normal; }
.jv-st-rule em { font-style: italic; }
.jv-st-and { display: block; padding: 0.2em 0.7em 0; color: var(--ui-300); font-size: 0.85em; font-weight: 600; }
.jv-st-crit .jv-st-rule:last-child { padding-bottom: 0.55em; }
.jv-st-dom { display: flex; align-items: center; gap: 0.8em; font-size: 0.86em; }
.jv-st-field { flex: 1; padding: 0.4em 0.7em; border: 1px solid var(--ui-line); border-radius: 0.45em; color: var(--ui-900); }
.jv-st-radio { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ui-900); white-space: nowrap; }
.jv-st-radio::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; border: 0.25em solid #3366ff; box-sizing: border-box; }
.jv-st-exk { color: var(--ui-300); font-size: 0.74em; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-st-chips { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0.4em; border: 1px solid var(--ui-line); border-radius: 0.45em; font-size: 0.86em; }
.jv-st-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.55em; border: 1px solid #f1d5d2; border-radius: 0.35em; background: #fdf1f0; color: var(--ui-900); }
.jv-st-chip i { color: var(--ui-300); font-style: normal; }
.jv-st-chip em { color: #6e37ff; font-size: 0.85em; font-style: normal; }
.jv-st-chip.is-new { box-shadow: 0 0 0 2px #ddd3fd; }

/* Measurement: Integrations + compact settings side by side */
.jv-su .jv-st { align-self: stretch; }
.jv-st.is-compact .jv-st-main { gap: 0.6em; padding: 0.8em; }

/* Intelligence D: settings window fills the frame, effect card overlaps bottom-right */
.p26-journey-visual.jv--context .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.2cqw, 2.4cqh), 17px); }
.jv-cx2 { inset: 6% 4%; }
.jv-cx2 > .jv-st { position: absolute; top: 0; left: 0; bottom: 0; width: 72%; }
.jv-cx2 > .jv-cx-effect { top: auto; bottom: 6%; right: 0; left: auto; width: 34%; }

@container (max-aspect-ratio: 1 / 1) {
  .jv-st-nav { display: none; }
  .jv-st-size, .jv-st-crit .jv-st-and:nth-of-type(2), .jv-st-crit .jv-st-rule:last-child { display: none; }
  .jv--context .jv-stage { font-size: clamp(10px, 3.1cqw, 15px); }
  .jv-cx2 { inset: 3%; }
  .jv-cx2 > .jv-st { width: 100%; bottom: 22%; }
  .jv-cx2 > .jv-cx-effect { left: 8%; width: auto; bottom: 0; }
  .jv-cx2 .jv-cx-effect .jv-pa-title { font-size: 0.95em; }
  .jv-su .jv-st .jv-st-block:last-child { display: none; }
}
.jv-st-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; align-content: start; }
.jv-st-grid .jv-st-block { padding: 0.75em 0.85em; }
.jv-st-map { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.45em 0.5em; font-size: 0.86em; }
.jv-st-mk { padding: 0.25em 0.6em; border-radius: 0.35em; background: #eef2fe; color: #2f55cd; font-weight: 500; }
.jv-st-arr { color: var(--ui-300); }
.jv-st-mv { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.6em; border: 1px solid var(--ui-line); border-radius: 0.35em; color: var(--ui-900); }
.jv-st-mv img { width: 1.1em; height: 1.1em; }
/* Intelligence layout */
.jv-cx2 { inset: 6% 4%; display: block; }
.jv-cx2 > .jv-st { position: absolute; inset: 0 22% 0 0; width: auto; }
.jv-cx2 > .jv-cx-effect { position: absolute; top: auto; left: auto; right: 0; bottom: 4%; width: 30%; transform: none; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-st-grid { grid-template-columns: 1fr; }
  .jv-st-grid .jv-st-block:nth-child(n + 3) { display: none; }
  .jv-cx2 > .jv-st { inset: 0 0 24% 0; }
  .jv-cx2 > .jv-cx-effect { left: 8%; right: 0; bottom: 0; width: auto; }
  .jv-su .jv-st .jv-st-grid .jv-st-block:nth-child(n + 2) { display: none; }
}
.jv-st { flex-direction: row !important; }
.jv-st-main { overflow: hidden; }
@container (max-aspect-ratio: 1 / 1) { .jv-st-crit .jv-st-and { display: none; } }
@container (min-aspect-ratio: 1 / 1) {
  .jv-cx2 > .jv-st { top: 50%; bottom: auto; transform: translateY(-50%); }
  .jv-cx2 > .jv-cx-effect { bottom: 2%; }
}

/* Settings window, calmer (closer to the app): white page, plain sections, one bordered box per section */
.jv-st { background: #fff; }
.jv-st-nav { width: 10em; padding: 1.1em 0.6em; background: #fafafa; }
.jv-st-navh { font-size: 0.95em; }
.jv-st-navi { font-size: 0.84em; }
.jv-st-navi.is-on { background: #fff; color: var(--ui-900); box-shadow: 0 1px 2px rgba(32, 41, 44, 0.08); }
.jv-st-main { gap: 1.1em; padding: 1.2em 1.4em; }
.jv-st-sug { padding: 0; border: 0; background: none; font-size: 0.82em; color: var(--ui-700); }
.jv-st-sug b { font-weight: 500; }
.jv-st-rev { margin-left: 0.3em; padding: 0; background: none; color: #3366ff; font-weight: 500; }
.jv-st-grid { gap: 1.3em 1.8em; }
.jv-st-grid .jv-st-block, .jv-st-block { padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 0.55em; }
.jv-st-h { font-size: 0.98em; }
.jv-st-crit { border-color: var(--ui-line); }
.jv-st-crith { background: #fff; font-size: 0.95em; }
.jv-st-crit.is-plain { padding-top: 0.15em; }
.jv-st-and { font-size: 0.78em; }
.jv-st-map { gap: 0.5em 0.6em; }
.jv-st-mk { padding: 0; background: none; color: var(--ui-900); font-weight: 600; }
.jv-st-arr { display: none; }
.jv-st-mv { border: 0; padding: 0; color: var(--ui-700); }
.jv-st-map { grid-template-columns: auto 1fr; }
.jv-st-chip.is-new { box-shadow: none; }
.jv-st-exk { font-size: 0.7em; }
.p26-journey-visual.jv--context .jv-stage { font-size: clamp(11px, min(1.4cqw, 3cqh), 18px); }
@container (max-aspect-ratio: 1 / 1) { .p26-journey-visual.jv--context .jv-stage { font-size: clamp(10px, 3.1cqw, 15px); } }

/* ---------- Measurement B v2: funnel narrows to the segment, attribution toggle moves credit ---------- */
.jv-cn-funnel { display: flex; flex-direction: column; gap: 0.45em; padding: 0.7em 1em 0.8em; border-top: 1px solid var(--ui-line); }
.jv-cn-frow { display: grid; grid-template-columns: 8.5em 1fr 4em; align-items: center; gap: 0.6em; font-size: 0.86em; }
.jv-cn-flabel { color: var(--ui-700); }
.jv-cn-ftrack { height: 0.85em; border-radius: 0.25em; background: #f0f2f6; overflow: hidden; }
.jv-cn-ftrack i { display: block; height: 100%; width: var(--s); border-radius: 0.25em; background: #3e63dd; }
.jv-cn-fnum { color: var(--ui-900); font-weight: 600; text-align: right; }
.jv-cn-credit { display: flex; flex-direction: column; gap: 0.4em; padding: 0.7em 1em 0.8em; border-top: 1px solid var(--ui-line); }
.jv-cn-credhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.jv-cn-tog { margin: 0; }
.jv-cn-tog span { transition: none; }
.jv-cn-crow { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 0.6em; font-size: 0.86em; color: var(--ui-900); }
.jv-cn-tri { display: grid; }
.jv-cn-tri > i { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.5em; font-style: normal; visibility: hidden; }
.jv-cn-tri > i em { display: block; height: 0.85em; border-radius: 0.25em; background: #8ea6f2; }
.jv-cn-tri > i b { font-weight: 600; }
.jv-cn-note { color: var(--ui-300); font-size: 0.76em; }
/* Resting state (reduced motion / finished): Last touch. */
.jv-cn-tri > i.is-t2 { visibility: visible; }
.jv-cn-tog .is-t2 { background: #fff; color: var(--ui-900); font-weight: 500; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.12); }

@media (prefers-reduced-motion: no-preference) {
  /* 4.7s funnel narrows · 5.8s First · 7.2s Last · 8.6s Any */
  .jv-sequenced.is-playing .jv-cn-ftrack i { animation: jv-narrow 0.9s cubic-bezier(0.65, 0, 0.35, 1) 4.7s both; }
  .jv-sequenced.is-playing .jv-cn-fnum { --t: 4.9s; }
  .jv-sequenced.is-playing .jv-cn-credit { animation: jv-fade 0.4s ease 5.6s both; }
  .jv-sequenced.is-playing .jv-cn-tri > i.is-t1 { animation: jv-show-win 1.4s step-end 5.8s both; }
  .jv-sequenced.is-playing .jv-cn-tri > i.is-t2 { animation: jv-show-win 1.4s step-end 7.2s both; }
  .jv-sequenced.is-playing .jv-cn-tri > i.is-t3 { animation: jv-show-after 0.1s step-end 8.6s both; }
  .jv-sequenced.is-playing .jv-cn-tri > i em { animation: jv-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: left; }
  .jv-sequenced.is-playing .jv-cn-tri > .is-t1 em { animation-delay: 5.8s; }
  .jv-sequenced.is-playing .jv-cn-tri > .is-t2 em { animation-delay: 7.2s; }
  .jv-sequenced.is-playing .jv-cn-tri > .is-t3 em { animation-delay: 8.6s; }
  .jv-sequenced.is-playing .jv-cn-tog .is-t2 { animation: jv-tog-on 1.4s step-end 7.2s both; }
  .jv-sequenced.is-playing .jv-cn-tog .is-t1 { animation: jv-tog-on 1.4s step-end 5.8s both; }
  .jv-sequenced.is-playing .jv-cn-tog .is-t3 { animation: jv-tog-after 0.1s step-end 8.6s both; }
}
@keyframes jv-narrow { from { width: var(--a); } to { width: var(--s); } }
@keyframes jv-show-win { 0% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes jv-show-after { from { visibility: hidden; } to { visibility: visible; } }
@keyframes jv-tog-on { 0% { background: #fff; color: var(--ui-900); font-weight: 500; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.12); } 100% { background: transparent; color: var(--ui-700); font-weight: 400; box-shadow: none; } }
@keyframes jv-tog-after { from { background: transparent; color: var(--ui-700); font-weight: 400; box-shadow: none; } to { background: #fff; color: var(--ui-900); font-weight: 500; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.12); } }

@container (max-aspect-ratio: 1 / 1) {
  .jv-cn-frow { grid-template-columns: 6.5em 1fr 3.4em; }
  .jv-cn-credhead .app-tile__label { display: none; }
  .jv-cn-note { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-cn-tri > i.is-t2 { animation: jv-show-mid 2.8s step-end 5.8s both; }
  .jv-sequenced.is-playing .jv-cn-tog .is-t2 { animation: jv-tog-mid 2.8s step-end 5.8s both; }
}
@keyframes jv-show-mid { 0% { visibility: hidden; } 50% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes jv-tog-mid {
  0% { background: transparent; color: var(--ui-700); font-weight: 400; box-shadow: none; }
  50% { background: #fff; color: var(--ui-900); font-weight: 500; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.12); }
  100% { background: transparent; color: var(--ui-700); font-weight: 400; box-shadow: none; }
}

/* Settings window v3: Audiences-page panels (gray header + border); no dead space */
.jv-st-panel { margin: 0; font-size: 0.92em; }
.jv-st-panel .ui-panel__body { display: flex; flex-direction: column; gap: 0.2em; padding: 0.6em 0.8em 0.7em; }
.jv-st-panel .jv-st-rule { padding: 0; }
.jv-st-panel .jv-st-and { padding: 0; }
.jv-st-panel .jv-st-chips { border: 0; padding: 0; }
.jv-st-panel .jv-st-exk { margin-bottom: 0.3em; }
.jv-st-grid { gap: 0.8em; }
.jv-su { align-items: start; }
.jv-su-list { padding-bottom: 0; }
.jv-su-list .jv-su-step:last-child { border-bottom: 0; }
.jv-su { align-items: center; }
.jv-su .jv-st { align-self: center; }
@container (min-aspect-ratio: 1 / 1) {
  .jv--setup .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.25cqw, 2.9cqh), 17px); }
  .jv-su { inset: 6% 4%; }
}
@container (max-aspect-ratio: 1 / 1) {
  .jv-su { align-items: start; align-content: start; }
  .jv-su .jv-st { align-self: start; }
  .jv-su .jv-st .jv-st-grid > .jv-st-panel:nth-child(n + 2) { display: none; }
  .jv-su .jv-st-sug { display: none; }
}
@container (max-aspect-ratio: 1 / 1) { .jv-su .jv-st .jv-st-grid > .jv-st-panel:nth-child(2) { display: block; } }

/* ====================== ABM page ====================== */
.p26-journey-visual[class*="jv--abm"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--abm"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.25cqw, 2.6cqh), 17px); }
}
.jv-ab2-intent { display: inline-flex; align-items: center; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.85em; font-weight: 500; line-height: 1.5; }
.jv-ab2-intent.is-hot { background: #fdecea; color: #b22424; }
.jv-ab2-intent.is-warm { background: #fff2dc; color: #a3540f; }
.jv-ab2-intent.is-cold { background: #e8f0fb; color: #2f5fa8; }

/* hero */
.jv-ah { inset: 7% 5%; display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto auto; gap: 1em 1.2em; align-content: center; }
.jv-ah .jv-win { position: relative; inset: auto; width: auto; }
.jv-ah-play { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0.5em; padding: 1em 1.1em; border-color: #ddd3fd; }
.jv-ah-k { display: flex; align-items: center; gap: 0.4em; color: #6e37ff; font-size: 0.8em; font-weight: 500; }
.jv-ah-play .jv-hist-detail { line-height: 1.5; }
.jv-ah-dest { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.45em; padding: 0.9em 1.1em; }
.jv-ah-logos { display: flex; align-items: center; gap: 0.45em; }
.jv-ah-logos .ui-logo { font-size: 1.25em; }
.jv-ah-prog { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-bottom: 0.9em; }
.jv-ah-row { display: grid; grid-template-columns: 8.5em 1fr 4.5em; align-items: center; gap: 0.6em; padding: 0.55em 1.1em 0; font-size: 0.9em; color: var(--ui-700); }
.jv-ah-row b { color: var(--ui-900); font-weight: 600; text-align: right; }
.jv-ah-bar { height: 0.8em; border-radius: 0.25em; background: #f0f2f6; overflow: hidden; }
.jv-ah-bar i { display: block; height: 100%; border-radius: 0.25em; background: #3e63dd; }
.jv-ah-lift { display: flex; flex-direction: column; gap: 0.2em; margin: 0.9em 1.1em 0; padding: 0.6em 0.8em; border: 1px solid #f0d9b5; border-radius: 0.5em; background: #fffaf3; font-size: 0.88em; color: var(--ui-700); }
.jv-ah-lift .app-tile__label { color: #a3540f; }
.jv-ah-lift b { color: var(--ui-900); font-weight: 600; }
.jv-ah-lift em { margin-left: 0.3em; color: var(--ui-300); font-style: normal; font-size: 0.9em; }

/* audience */
.jv-ab2 { inset: 6% 4%; display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2em; align-items: center; }
.jv-ab2 .jv-win { position: relative; inset: auto; width: auto; }
.jv-ab2-def .app-body { display: flex; flex-direction: column; gap: 0.7em; padding: 0.8em; }
.jv-ab2-stage { border-color: #ddd3fd; box-shadow: 0 0 0 3px rgba(110, 55, 255, 0.08); }
.jv-ab2-stages { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.4em; }
.jv-ab2-opt { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.6em; border: 1px solid var(--ui-line); border-radius: 0.5em; background: #fff; font-size: 0.9em; }
.jv-ab2-opt i { width: 0.85em; height: 0.85em; border: 1.5px solid var(--ui-line); border-radius: 0.2em; }
.jv-ab2-opt.is-on { border-color: #c9bdfc; background: #f8f6ff; }
.jv-ab2-opt.is-on i { border-color: #6e37ff; background: #6e37ff; box-shadow: inset 0 0 0 2px #fff; }
.jv-ab2-opt em { color: var(--ui-300); font-style: normal; font-size: 0.88em; }
.jv-ab2-side { display: flex; flex-direction: column; gap: 0.9em; }
.jv-ab2-size { display: flex; flex-direction: column; gap: 0.2em; padding: 0.9em 1em; }
.jv-ab2-size b { color: var(--ui-900); font-size: 1.5em; font-weight: 600; }
.jv-ab2-dests { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1em; }
.jv-ab2-note { color: #1c8c67; font-size: 0.85em; font-weight: 500; }
.jv-ab2 .jv-cn-swap { --t: 1.4s; }

/* plays */
.jv-ap { inset: 7% 5%; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2em; align-items: center; }
.jv-ap .jv-win { position: relative; inset: auto; width: auto; }
.jv-ap-aud .app-body { display: flex; flex-direction: column; gap: 0.7em; padding: 0.8em; }
.jv-ap-camprow { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; color: var(--ui-900); font-size: 0.92em; }
.jv-ap-res { display: flex; flex-direction: column; gap: 0.6em; padding: 1em 1.1em; }
.jv-ap-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; padding-bottom: 0.5em; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-700); font-size: 0.9em; }
.jv-ap-stat b { color: var(--ui-900); font-size: 1.3em; font-weight: 600; }

/* influence */
.jv-ai { inset: 6% 4%; display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.2em; align-items: center; }
.jv-ai .jv-win, .jv-ai .jv-float { position: relative; inset: auto; width: auto; }
.jv-ai-rep { padding-bottom: 0.9em; }
.jv-ai-ctx { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0.8em 1em 0.2em; }
.jv-ai-ctx span { padding: 0.25em 0.6em; border: 1px solid var(--blue-200); border-radius: 999px; background: var(--blue-50); color: var(--blue-850); font-size: 0.78em; }
.jv-ai-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; padding: 0.8em 1em; }
.jv-ai-step { display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 0.5em; border-radius: 0.5em; background: #f5f6fa; text-align: center; }
.jv-ai-step b { color: var(--ui-900); font-size: 1.4em; font-weight: 600; }
.jv-ai-step span { color: var(--ui-700); font-size: 0.75em; line-height: 1.25; }
.jv-ai-step:nth-child(4) { background: #eef2fe; }
.jv-ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; padding: 0 1em; font-size: 0.85em; color: var(--ui-700); }
.jv-ai-split span { padding: 0.5em 0.7em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; }
.jv-ai-split b { color: var(--ui-900); font-weight: 600; }
.jv-ai-next { display: flex; flex-direction: column; gap: 0.5em; padding: 1em 1.1em; border-color: var(--blue-200); }

/* lift */
.jv-al { inset: 8% 10%; display: grid; align-items: center; }
.jv-al .jv-win { position: relative; inset: auto; width: auto; padding-bottom: 1em; }
.jv-al-design { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; padding: 0.9em 1.1em; }
.jv-al-design > div { display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; }
.jv-al-design b { color: var(--ui-900); font-weight: 600; }
.jv-al-bars { padding: 0 1.1em; }
.jv-al .jv-at-lift { margin: 0.6em 1.1em 0; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-ah-bar i { animation: jv-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.4s both; transform-origin: left; }
  .jv-sequenced.is-playing .jv-al-bars i { animation: jv-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both; transform-origin: left; }
  .jv-sequenced.is-playing .jv-ab2-opt.is-on i { animation: jv-tick 0.4s ease 0.9s both; }
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-ah, .jv-ab2, .jv-ap, .jv-ai { inset: 3%; grid-template-columns: 1fr; grid-template-rows: none; gap: 0.6em; align-content: start; }
  .jv-ah-play, .jv-ah-dest, .jv-ah-prog { grid-column: 1; grid-row: auto; }
  .jv-ah-dest { display: none; }
  .jv-ab2-def .jv-ab2-crit { display: none; }
  .jv-ab2-size { display: none; }
  .jv-ai-flow { grid-template-columns: repeat(3, 1fr); }
  .jv-ai-flow .jv-ai-step:nth-child(1), .jv-ai-flow .jv-ai-step:nth-child(5) { display: none; }
  .jv-ai-ctx, .jv-rp-note { display: none; }
  .jv-al { inset: 3%; }
  .jv-al-design { grid-template-columns: 1fr 1fr; }
  .jv-al-design > div:nth-child(3) { display: none; }
}

/* ====================== ABM v3: same idiom as the product pages ======================
   One primary app window (bleeding off the bottom edge, like Targeting) and
   one floating panel overlapping it. Blue accents, app tags, app panels. */
.p26-journey-visual.jv--abmhero { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--abmaudience { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
.p26-journey-visual.jv--abmintro, .p26-journey-visual.jv--abmintent, .p26-journey-visual.jv--abmopps, .p26-journey-visual.jv--abmquiet { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--abminfluence { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }

@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual.jv--abmhero .jv-stage, .p26-journey-visual.jv--abmaudience .jv-stage, .p26-journey-visual.jv--abmintro .jv-stage, .p26-journey-visual.jv--abmintent .jv-stage, .p26-journey-visual.jv--abmopps .jv-stage, .p26-journey-visual.jv--abmquiet .jv-stage, .p26-journey-visual.jv--abminfluence .jv-stage, .p26-journey-visual.jv--abmlift .jv-stage, .p26-journey-visual.jv--abmimprove .jv-stage, .p26-journey-visual.jv--abmresearch .jv-stage, .p26-journey-visual.jv--abmplay .jv-stage { font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
}
.app-tag.is-info { border-color: rgba(62, 99, 221, 0.3); background: var(--blue-50); color: var(--blue-850); }
.jv-ah-logos .ui-logo svg, .jv-abs-row .ui-logo svg { width: 100%; height: 100%; }

/* hero */
.jv-abh-chat { top: 8%; bottom: auto; left: 3%; width: 53%; transform: none; }
.jv-abh-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.9em; padding: 1em 1.143em 0.2em; min-height: 0; }
.jv-abh-thread .ui-user { align-self: flex-end; }
.jv-abh-thread .jv-dg-reply { padding: 0; font-size: 0.93em; }
.jv-abh-src { display: inline-grid; vertical-align: bottom; }
.jv-abh-src > i { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.3em; padding: 0 0.45em 0 0.25em; border: 1px solid var(--ui-line); border-radius: 0.4em; background: #fff; color: var(--ui-900); font-style: normal; font-weight: 500; white-space: nowrap; }
.jv-abh-src > i:not(:first-child) { visibility: hidden; }
.jv-abh-ico { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; }
.jv-abh-ico img, .jv-abh-ico svg { display: block; max-width: 100%; max-height: 100%; }
.jv-abh-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; color: var(--green-500); font-size: 0.857em; }
.jv-abh-sync > svg { width: 1em; height: 1em; }
.jv-abh-sync .jv-ah-logos { gap: 0.3em; }
.jv-abh-sync .ui-logo { font-size: 1.05em; }
.jv-abh-res { top: auto; bottom: 7%; right: 3%; width: 42%; padding-bottom: 1em; }
.jv-abx-row { grid-template-columns: 1.3fr 1fr; }
@media (prefers-reduced-motion: no-preference) {
  .jv-abh-src > i:nth-child(n) { visibility: visible; animation: jv-src-cycle 10s linear infinite both; animation-delay: calc(var(--k) * 2s); }
}
@keyframes jv-src-cycle {
  0% { opacity: 0; transform: translateY(0.4em); }
  3%, 19% { opacity: 1; transform: none; }
  22%, 100% { opacity: 0; transform: translateY(-0.4em); }
}

/* surround sound: Destinations tab */
.jv-abs-win { top: 7%; bottom: -4%; left: 4%; width: 64%; }
.jv-abs-list { display: flex; flex-direction: column; padding: 0.2em 1.143em; }
.jv-abs-row { display: grid; grid-template-columns: 1.43em 10em 1fr 2.6em auto; align-items: center; gap: 0.7em; padding: 0.55em 0; }
.jv-abs-row + .jv-abs-row { border-top: 1px solid var(--ui-line-soft); }
.jv-abs-name { display: flex; flex-direction: column; line-height: 1.25; }
.jv-abs-name b { color: var(--ui-900); font-weight: 500; }
.jv-abs-name em { color: var(--ui-300); font-size: 0.8em; font-style: normal; }
.jv-abs-rate { color: var(--ui-900); font-weight: 500; text-align: right; }
.jv-abs-cov { bottom: 7%; right: 4%; width: 31%; display: flex; flex-direction: column; gap: 0.3em; padding: 1em 1.143em; }
.jv-abs-big { color: var(--ui-900); font-size: 1.6em; font-weight: 500; line-height: 1.2; }

/* plays */
.jv-abp-win { top: 7%; bottom: -4%; left: 3%; width: 56%; }
.jv-abp-win .jv-ap-camprow { justify-content: flex-start; gap: 1em; }
.jv-abp-body { display: flex; flex-direction: column; gap: 0.7em; padding: 0.8em; }
.jv-abp-prog { top: auto; bottom: 8%; right: 3%; width: 41%; padding: 1em 1.143em; }
.jv-abp-stage { grid-template-columns: 8.8em 1fr 2.4em; margin: 0 -0.5em; padding: 0.5em; border-radius: 0.4em; }
.jv-abp-k { color: var(--ui-700); font-size: 0.9em; }
.jv-abp-stage .jv-hist-bar i { background: #b8c6f3; }
.jv-abp-stage.is-on { background: var(--blue-50); }
.jv-abp-stage.is-on .jv-abp-k { color: var(--blue-850); font-weight: 500; }
.jv-abp-stage.is-on .jv-hist-bar i { background: #3e63dd; }
.jv-abp-stage.is-next .jv-hist-bar i { background: #5fb7a3; }

/* influence */
.jv-abi-win { top: 7%; bottom: auto; left: 3%; right: auto; width: 61%; transform: none; }
.jv-abi-row { grid-template-columns: 1.3fr 0.6fr 1.6fr; }
.jv-abi-cell { display: grid; grid-template-columns: 1fr 2.6em; align-items: center; gap: 0.6em; }
.jv-abi-cell .jv-hist-bar i { background: #3e63dd; }
.jv-abi-cell b { font-weight: 500; text-align: right; }
.jv-abi-next { top: auto; bottom: 9%; right: 3%; width: 33%; display: flex; flex-direction: column; gap: 0.45em; padding: 1em 1.143em; }

@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-abs-row .jv-hist-bar i,
  .jv-sequenced.is-playing .jv-abp-stage .jv-hist-bar i,
  .jv-sequenced.is-playing .jv-abi-cell .jv-hist-bar i { animation: jv-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: inherit; transform-origin: left; }
  .jv-sequenced.is-playing .jv-abp-stage .jv-hist-bar i { animation-delay: 2.4s; }
}

@container (max-aspect-ratio: 1 / 1) {
  .jv-abh-chat, .jv-abs-win, .jv-abp-win, .jv-abi-win { top: 4%; left: 4%; right: 4%; width: auto; }
  .jv-abh-res, .jv-abs-cov, .jv-abp-prog, .jv-abi-next { top: auto; bottom: 4%; left: 10%; right: 4%; width: auto; }
  .jv-abi-win { bottom: auto; }
  .jv-abi-next { top: auto; }
  .jv-layer.jv-win.jv-abh-chat { bottom: auto; height: auto; }
  .jv-abh-chat .jv-dg-chathead .jv-fn-period { display: inline; }
  .jv-abh-chat .jv-dg-reply { display: flex; }
  .jv-abh-chat .jv-dg-input, .jv-abh-thread .ui-artifact .ui-button { display: none; }
  .jv-abh-thread { gap: 0.6em; }
  .jv-abh-res { top: 55%; bottom: auto; }
  .jv-abh-res .jv-abx-row > span:nth-child(2) { display: block; }
  .jv-abh-res .jv-rp-metrics { display: none; }
  .jv-abh-res .jv-rp-table { margin-bottom: 0; }
  .jv-abh-res .jv-rp-row:nth-child(n + 4) { display: none; }
  .jv-abh-res .jv-hist-detail { display: none; }
  .jv-abs-row { grid-template-columns: 1.43em 1fr 2.6em; }
  .jv-abs-row .jv-hist-bar, .jv-abs-row .app-tag, .jv-abs-name em { display: none; }
  .jv-abp-crit, .jv-abp-body .app-fix { display: none; }
  .jv-abp-prog { top: 36%; bottom: auto; }
  .jv-abp-stage { grid-template-columns: 7.4em 1fr 2.4em; }
  .jv-abi-win .jv-rp-metrics > div:nth-child(n + 3) { display: none; }
  .jv-abi-win .jv-rp-metrics { grid-template-columns: 1fr 1fr; }
  .jv-abi-row { grid-template-columns: 1.4fr 1.2fr; }
  .jv-abi-row > span:nth-child(2) { display: none; }
  .jv-abi-win .jv-rp-note { display: none; }
}

/* ABM surround: Targeting reach layout, seven channels */
.jv-ribbon.is-instagram { stroke: #f4b6d2; }
.jv-ribbon.is-facebook { stroke: #b3d1f6; }
.jv-ribbon.is-x { stroke: #c6d3dc; }
.jv-ribbon.is-ctv { stroke: #c9bdfc; }
.jv-ribbon.is-search { stroke: #66b1b7; }
.jv-reach-flow.jv-abs { inset: 4% 4% 4% 5%; grid-template-columns: 36% 1fr 40%; font-size: 1em; }
.jv-abs .ui-dest .ui-logo svg { width: 100%; height: 100%; }
.jv-abs .jv-reach-match { padding-bottom: 0.9em; }
.jv-abs .jv-lift-row { padding: 0.42em 0; }
.jv-abs .jv-lift-bars { gap: 0; }
.jv-abs .jv-lift-num b { font-size: 1.25em; }
.jv-abs .jv-hist-synced { margin-top: 0.4em; }

/* hero: companies preview (app audience preview, Companies tab) */
.jv-abh-chat { width: 47%; }
.jv-abh-res { top: auto; bottom: 6%; right: 3%; width: 55%; padding: 0; }
.jv-co { display: flex; flex-direction: column; font-size: 0.9em; }
.jv-co-bar { display: flex; align-items: center; gap: 0.4em; padding: 0.7em 0.9em; border-bottom: 1px solid var(--ui-line); }
.jv-co-search { display: inline-flex; align-items: center; gap: 0.35em; margin-left: 0.6em; padding: 0.35em 0.7em; border: 1px solid var(--ui-line); border-radius: 0.45em; color: var(--ui-900); font-size: 0.9em; flex: 1; min-width: 0; white-space: nowrap; }
.jv-co-search svg { width: 1em; height: 1em; flex: none; }
.jv-co-search em { margin-left: 0.5em; color: var(--ui-300); font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.jv-co-row { display: grid; grid-template-columns: 1.45fr 1fr 1.55fr; gap: 0.8em; align-items: start; padding: 0.7em 0.9em; }
.jv-co-row + .jv-co-row { border-top: 1px solid var(--ui-line-soft); }
.jv-co-row.is-head { align-items: center; padding: 0.6em 0.9em; background: var(--ui-head); color: var(--ui-700); font-size: 0.78em; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-co-row.is-head > span { display: inline-flex; align-items: center; gap: 0.4em; }
.jv-co-sort { width: 0.6em; height: 0.85em; fill: var(--ui-300); }
.jv-co-name { display: flex; gap: 0.6em; }
.jv-co-tile { display: grid; flex: none; place-items: center; width: 2.4em; height: 2.4em; border: 1px solid #d6dff8; border-radius: 0.45em; background: #f2f5fd; color: #3b4a6b; font-size: 0.85em; font-weight: 600; }
.jv-co-txt { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.jv-co-txt b { color: var(--ui-900); font-weight: 500; white-space: nowrap; }
.jv-co-k { color: var(--ui-300); font-size: 0.78em; white-space: nowrap; }
.jv-co-k i { color: var(--ui-900); font-style: normal; }
.jv-co-flames { display: flex; align-items: center; gap: 0.1em; margin-top: 0.1em; }
.jv-co-flames .ui-logo { width: 1em; height: 1em; margin-right: 0.2em; filter: grayscale(1) opacity(0.6); }
.jv-co-flames svg { width: 1em; height: 1em; color: #e0e3e8; }
.jv-co-flames svg.is-on { color: #e8711a; }
.jv-co-size { display: flex; flex-direction: column; gap: 0.2em; color: var(--ui-900); }
.jv-co-size > span:first-child { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.jv-co-size > span:first-child svg { width: 1.05em; height: 1.05em; color: var(--ui-300); }
.jv-co-eng { display: flex; flex-direction: column; gap: 0.25em; }
.jv-co-sig { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ui-900); }
.jv-co-sig i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #1c8c67; }
.jv-co-icons { display: flex; gap: 0.6em; padding-left: 1.15em; color: var(--ui-300); font-size: 0.8em; }
.jv-co-icons > span { display: inline-flex; align-items: center; gap: 0.2em; }
.jv-co-icons svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.jv-co-icons > span.is-on { color: var(--ui-900); }
.jv-co-icons > span.is-on svg { stroke: #3e63dd; }
.jv-co-eng .jv-co-k { padding-left: 1.4em; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-abh-res { width: auto; }
  .jv-co-bar .jv-co-search, .jv-co-row > .jv-co-size { display: none; }
  .jv-co-row { grid-template-columns: 1fr 1fr; }
  .jv-co-row:nth-child(n + 5) { display: none; }
  .jv-co-icons { padding-left: 0; gap: 0.4em; }
  .jv-co-eng .jv-co-k { display: none; }
}
.jv-abh-thread .ui-artifact .ui-button { display: none; }
.jv-abs .jv-lift-row .ui-logo svg { width: 82%; height: 82%; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-abh-chat { width: auto; }
  .jv-abh-res { width: auto; left: 8%; }
  .jv-co-row.is-head > span:nth-child(2) { display: none; }
  .jv-reach-flow.jv-abs { inset: 4%; grid-template-columns: 1fr; }
}

/* ABM influence: Measurement's ABM Progression report + paid influence card */
.jv-abi-rep .jv-rp-win { top: 50%; left: 3%; right: auto; width: 63%; transform: translateY(-50%); }
.jv-abi-next { top: 30%; bottom: auto; right: 3%; width: 31%; }
.jv-abi-chs { display: flex; flex-direction: column; gap: 0.35em; margin: 0.4em 0 0.1em; padding-top: 0.6em; border-top: 1px solid var(--ui-line-soft); font-size: 0.9em; color: var(--ui-700); }
.jv-abi-chs > span { display: flex; align-items: center; gap: 0.5em; }
.jv-abi-chs .ui-logo { font-size: 0.95em; }
.jv-abi-chs .ui-logo svg { width: 100%; height: 100%; }
.jv-abi-chs b { margin-left: auto; color: var(--ui-900); font-weight: 500; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-abi-rep .jv-rp-win { top: 3%; left: 3%; right: 3%; width: auto; transform: none; }
  .jv-abi-rep .jv-ab-next, .jv-abi-rep .jv-rp-note, .jv-abi-rep .jv-ab-flow { display: none; }
  .jv-abi-next { top: auto; bottom: 3%; left: 10%; right: 3%; width: auto; transform: none; }
  .jv-abi-chs { display: none; }
}

/* Review pass 2026-10-15: phone fixes */
@container (max-aspect-ratio: 1 / 1) {
  /* Report library: fill the frame (no empty band above), one exchange in the chat */
  .p26-journey-visual.jv--reportlib .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(10px, 3.3cqw, 14px); }
  .jv-rl-chat { max-height: 34%; }
  .jv-rl-thread > :nth-child(n + 3) { display: none; }
  /* Research: center the card in the frame instead of leaving the bottom empty */
  .p26-journey-visual.jv--research .jv-sf-win, .p26-journey-visual.jv--abmresearch .jv-sf-win { top: 50%; transform: translateY(-50%); }
  /* Settings: two complete panels instead of four clipped ones */
  .jv-cx2 .jv-st-grid { grid-template-columns: 1fr; }
  .jv-cx2 .jv-st-grid > .jv-st-panel:nth-child(2), .jv-cx2 .jv-st-grid > .jv-st-panel:nth-child(3) { display: none; }
  .jv-cx2 .jv-st-panel .ui-panel__body { max-height: none; overflow: visible; }
}
@container (max-aspect-ratio: 1 / 1) {
  .jv-cx2 > .jv-st { bottom: auto; }
  .jv-rl { bottom: auto; grid-template-rows: auto auto; }
  .jv-rl-chat { max-height: none; }
  .jv-rl-thread { flex: none; }
}
@container (max-aspect-ratio: 1 / 1) {
  .jv-cx2 > .jv-st { top: 6%; transform: none; }
  .jv-cx2 > .jv-cx-effect { top: 62%; bottom: auto; }
}

/* ====================== PLG page (same idiom as ABM v3) ====================== */
.p26-journey-visual[class*="jv--plg"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--plghero, .p26-journey-visual.jv--plgquality { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--plgaudience { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
.p26-journey-visual.jv--plglift { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--plg"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
  .p26-journey-visual.jv--plghero .jv-stage { font-size: clamp(11px, min(1.6cqw, 3.1cqh), 20px); }
}
/* hero float: signup → paid table */
.jv-plh-res { padding-bottom: 0.9em; }
.jv-plh-row { grid-template-columns: 1.5fr 0.8fr 0.8fr; }
.jv-plh-row .ui-logo, .jv-plq-row .ui-logo { width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.2em; }
.jv-plh-row .ui-logo svg, .jv-plq-row .ui-logo svg { width: 100%; height: 100%; }
.jv-plh-res .jv-ab-next { margin: 0.8em 1.143em 0; }
/* quality report */
.jv-plq-win { top: 50%; left: 3%; right: auto; width: 60%; transform: translateY(-50%); }
.jv-plq-row { grid-template-columns: 1.6fr 0.8fr 0.8fr 0.6fr 0.8fr; }
.jv-plq-next { top: 24%; bottom: auto; right: 3%; width: 33%; transform: none; }
/* research/goal/results views centered like ABM */
.p26-journey-visual.jv--plgresearch .jv-sf-win, .p26-journey-visual.jv--plgplay .jv-sf-win, .p26-journey-visual.jv--plgimprove .jv-sf-win { top: 50%; transform: translateY(-50%); }
.jv--plgimprove .jv-rx-t { font-size: 0.85em; line-height: 1.25; }
.jv--plgimprove .jv-rx-row { grid-template-columns: 12em 1fr; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-plq-win { top: 3%; left: 3%; right: 3%; width: auto; transform: none; }
  .jv-plq-win .jv-ai-ctx, .jv-plq-win .jv-rp-note { display: none; }
  .jv-plq-row, .jv-plh-row { grid-template-columns: 1.6fr 0.8fr; }
  .jv-plq-row > span:nth-child(3), .jv-plq-row > span:nth-child(4) { display: none; }
  .jv-plq-next { top: auto; bottom: 3%; left: 10%; right: 3%; width: auto; }
  .jv-plq-next .jv-hist-detail { display: none; }
  .jv-plh-res .jv-ab-next { display: none; }
  .jv--plgimprove .jv-rx-row { grid-template-columns: 7.5em 1fr; }
}
.p26-journey-visual[class*="jv--plg"] .jv-abp-stage { grid-template-columns: 8.8em 1fr 3.4em; }
@container (max-aspect-ratio: 1 / 1) {
  /* PLG hero on phones: keep all four channels (Reddit is the finding) */
  .jv-plh-res { top: auto !important; bottom: 3%; }
  .jv-plh-res .jv-rp-row:nth-child(n) { display: grid; }
  .jv--plghero .jv-abh-thread .jv-dg-reply, .jv--plghero .jv-abh-sync { display: none; }
  .jv-plq-next { top: 64%; bottom: auto; }
}

/* ====================== Demand Gen page (same idiom as ABM / PLG) ====================== */
.p26-journey-visual[class*="jv--dmd"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--dmdhero, .p26-journey-visual.jv--dmdimpact { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--dmdaudience { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
.p26-journey-visual.jv--dmdwarning { background-image: linear-gradient(160deg, #f4f7f9 0%, #e3ecf4 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--dmd"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
  .p26-journey-visual.jv--dmdhero .jv-stage { font-size: clamp(11px, min(1.6cqw, 3.1cqh), 20px); }
}
.p26-journey-visual[class*="jv--dmd"] .jv-abp-stage { grid-template-columns: 8.8em 1fr 3.4em; }
.p26-journey-visual.jv--dmdresearch .jv-sf-win, .p26-journey-visual.jv--dmdplay .jv-sf-win, .p26-journey-visual.jv--dmdimprove .jv-sf-win { top: 50%; transform: translateY(-50%); }
.jv--dmdimprove .jv-rx-row { grid-template-columns: 11em 1fr; }
/* hero + report tables */
.jv--dmdhero .jv-abh-res { width: 50%; }
.jv--dmdhero .jv-abh-chat { width: 47%; }
.jv-dmh-row { grid-template-columns: 2.2fr 0.6fr 1fr 0.6fr; }
.jv-dmq-row { grid-template-columns: 2.2fr 0.6fr 0.9fr 0.6fr 0.9fr; }
.jv-dmh-row .ui-logo, .jv-dmq-row .ui-logo { width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.2em; }
/* audience assembled from three panels + destinations float */
.jv-dma-win { top: 6%; bottom: -4%; left: 3%; width: 58%; }
.jv-dma-body { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; }
.jv-dma-p.is-signal { border-color: #b9c8f5; box-shadow: 0 0 0 3px rgba(62, 99, 221, 0.08); }
.jv-dma-float { top: 50%; right: 3%; width: 35%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.4em; padding: 1em 1.143em; }
.jv-dma-float .ui-dests { margin-top: 0.4em; }
.jv-dma-float .jv-cn-swap { --t: 1.6s; }
/* warning trend */
.jv-dmw-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6em; height: 11em; padding: 0.6em 1.143em 0.4em; align-items: end; }
.jv-dmw-col { display: flex; flex-direction: column; align-items: center; gap: 0.2em; height: 100%; }
.jv-dmw-bars { flex: 1; display: flex; align-items: flex-end; gap: 0.25em; width: 100%; justify-content: center; }
.jv-dmw-bars i { display: block; width: 38%; border-radius: 0.2em 0.2em 0 0; }
.jv-dmw-bars .is-leads { background: #e4e7ee; }
.jv-dmw-bars .is-conv { background: #3e63dd; }
.jv-dmw-col b { color: var(--ui-900); font-size: 0.82em; font-weight: 500; }
.jv-dmw-col em { color: var(--ui-300); font-size: 0.75em; font-style: normal; }
.jv-dmw-col:nth-child(n + 4) .is-conv { background: #e58a8a; }
.jv-dmw-next .app-tag { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .jv-sequenced.is-playing .jv-dmw-bars i { animation: jv-grow-y 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: inherit; transform-origin: bottom; }
}
@keyframes jv-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@container (max-aspect-ratio: 1 / 1) {
  .jv--dmdhero .jv-abh-res, .jv--dmdhero .jv-abh-chat { width: auto; }
  .jv-dmh-row, .jv-dmq-row { grid-template-columns: 1.8fr 0.6fr; }
  .jv-dmh-row > span:nth-child(n + 2):not(:last-child), .jv-dmq-row > span:nth-child(n + 2):not(:last-child) { display: none; }
  .jv--dmdhero .jv-abh-thread .jv-dg-reply, .jv--dmdhero .jv-abh-sync { display: none; }
  .jv-dma-win { top: 3%; left: 3%; right: 3%; width: auto; }
  .jv-dma-p:not(.is-signal) .ui-criteria li:nth-child(n + 2) { display: none; }
  .jv-dma-float { top: auto; bottom: 3%; left: 12%; right: 3%; width: auto; transform: none; }
  .jv-dma-float .ui-dests { display: none; }
  .jv--dmdimprove .jv-rx-row { grid-template-columns: 7em 1fr; }
  .jv-dmw-chart { height: 8em; }
}
.jv-dma-float { top: 12%; transform: none; }
.jv-ai-legend { display: flex; gap: 1em; padding: 0.7em 1.143em 0; color: var(--ui-700); font-size: 0.8em; }
.jv-ai-legend span { display: inline-flex; align-items: center; gap: 0.35em; }
.jv-ai-legend i { width: 0.75em; height: 0.75em; border-radius: 0.2em; background: #e4e7ee; }
.jv-ai-legend i.is-ads { background: #3e63dd; }
@container (max-aspect-ratio: 1 / 1) { .jv-dma-float { top: auto; } }
@container (max-aspect-ratio: 1 / 1) { .jv-dmw-next { top: 52%; } }

/* ====================== Variety pass: shared surfaces ====================== */
/* layout: one main surface (left) + one float (right) */
.jv-mix-win, .jv-sug-win, .jv-map-win, .jv-sig-win, .jv-cos-win, .jv-jr-win, .jv-ex-win, .jv-vis-win, .jv-evt-win, .jv-opp-win { top: 50%; bottom: auto; left: 3%; width: 60%; transform: translateY(-50%); }
.jv-sug-win, .jv-cos-win, .jv-sig-win, .jv-ppl-win { top: 7%; bottom: -4%; transform: none; }
.jv-ovl-win { top: 50% !important; bottom: auto !important; left: 3% !important; width: 60% !important; transform: translateY(-50%); }
.jv-mix-ask, .jv-map-find, .jv-sig-hist, .jv-pc, .jv-ex-res, .jv-adg-res, .jv-adg-aud { top: 22%; right: 3%; width: 34%; display: flex; flex-direction: column; gap: 0.4em; padding: 1em 1.143em; }
.jv-pc { top: auto; bottom: 10%; }
/* tables */
.jv-vis-row { grid-template-columns: 1.3fr 1.6fr 0.5fr 0.8fr; }
.jv-vis-pages { color: var(--ui-700); font-size: 0.88em; }
.jv-stk-row { grid-template-columns: 1.5fr 0.8fr 0.8fr 1.1fr; }
.jv-cov-row { grid-template-columns: 1.5fr repeat(4, 0.75fr); }
.jv-cov { color: var(--ui-300); text-align: center; }
.jv-cov.is-on { color: #1c8c67; }
.jv-cov svg { width: 1em; height: 1em; }
.jv-com-row { grid-template-columns: 1.4fr 1.4fr 0.8fr; }
.jv-com-row .app-avatar { width: 1.8em; height: 1.8em; font-size: 0.8em; margin-right: 0.4em; }
.jv-vis-win .jv-rp-table, .jv-opp-win .jv-rp-table { margin-bottom: 0.4em; }
.jv-vis-win, .jv-opp-win { padding-bottom: 0.8em; }
/* play card */
.jv-pc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; color: var(--ui-700); font-size: 0.88em; }
.jv-pc .ui-logo svg, .jv-ex-applied .ui-logo svg, .jv-adp-chan .ui-logo svg, .jv-mix .ui-logo svg { width: 100%; height: 100%; }
/* feed */
.jv-feed { padding: 0.4em 1.143em 0.8em; }
.jv-feed .jv-hist-item { padding: 0.6em 0; }
.jv-hist-item.is-warn .jv-hist-dot { background: #da7720; }
.jv-sig-hist .jv-feed { padding: 0; }
.jv-sig-hist .jv-hist-when { font-size: 0.78em; }
/* mix grid */
.jv-mix { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 0.45em; padding: 0.9em 1.143em 0.5em; }
.jv-mix-corner { color: var(--ui-300); font-size: 0.78em; align-self: end; }
.jv-mix-col { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ui-700); font-size: 0.85em; font-weight: 500; }
.jv-mix-col .ui-logo { width: 1.1em; height: 1.1em; }
.jv-mix-aud { display: flex; align-items: center; color: var(--ui-900); font-weight: 500; }
.jv-mix-cell { display: grid; place-items: center; height: 3em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; background: #f7f8fa; color: var(--ui-900); font-weight: 500; }
.jv-mix-cell.is-good { background: #eaf6f0; border-color: #bfe3d1; color: #1c8c67; }
.jv-mix-cell.is-warn { background: #fdf1f0; border-color: #f2c9c6; color: #b22424; }
.jv-mix-cell.is-empty { color: var(--ui-300); background: #fff; }
.jv-mix-cell.is-test { border: 1.5px dashed #3e63dd; background: var(--blue-50); color: var(--blue-850); }
.jv-mix-btn { align-self: flex-start; margin-top: 0.3em; padding: 0.45em 0.8em; border-radius: 0.5em; background: var(--ui-900); color: #fff; font-size: 0.88em; font-weight: 500; }
/* suggestions */
.jv-sug-win { padding-bottom: 0.8em; }
.jv-pa-card.is-play { border-color: #bfe3d1; box-shadow: 0 10px 24px -18px rgba(28, 140, 103, 0.45); }
/* conversion map */
.jv-map { position: relative; height: 15em; margin: 0.6em 1.143em 1em; border: 1px solid var(--ui-line-soft); border-radius: 0.6em; background: #fafbfc; overflow: hidden; }
.jv-map-zone { position: absolute; left: 14%; top: 18%; width: 46%; height: 70%; border-radius: 50%; background: rgba(62, 99, 221, 0.06); border: 1px dashed #b9c8f5; padding: 0.6em; color: var(--ui-300); font-size: 0.75em; text-align: center; }
.jv-map-dot { position: absolute; width: 0.55em; height: 0.55em; margin: -0.27em; border-radius: 50%; background: #b8c6f3; }
.jv-map-dot.is-out { background: #6e37ff; }
.jv-map-ring { position: absolute; left: 66%; top: 18%; width: 22%; height: 34%; border: 2px solid #6e37ff; border-radius: 50%; }
.jv-map-ring em { position: absolute; left: 50%; bottom: -1.7em; transform: translateX(-50%); white-space: nowrap; padding: 0.1em 0.5em; border-radius: 999px; background: #6e37ff; color: #fff; font-size: 0.72em; font-style: normal; font-weight: 600; }
/* people with signals */
.jv-sig-size { margin-left: auto; color: var(--ui-700); font-size: 0.85em; }
.jv-sig-row { display: grid; grid-template-columns: 1.3fr 0.9fr 1.8fr; gap: 0.6em; align-items: center; padding: 0.6em 1.143em; border-top: 1px solid var(--ui-line-soft); font-size: 0.92em; }
.jv-sig-row.is-head { background: var(--ui-head); color: var(--ui-700); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-sig-row.is-new { background: #f4fbf7; }
.jv-sig-chips { display: flex; flex-wrap: wrap; gap: 0.3em; }
.jv-sig-chip { padding: 0.1em 0.5em; border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; color: var(--ui-700); font-size: 0.8em; white-space: nowrap; }
.jv-sig-chip.is-hot { border-color: #f2c9c6; background: #fdecea; color: #b22424; }
.jv-sig-chip.is-warm { border-color: #f5d9b0; background: #fff2dc; color: #a3540f; }
.jv-sig-chip.is-info { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-850); }
.jv-sig-hist { top: auto; bottom: 8%; }
/* journey */
.jv-jr-path { padding: 1.4em 1.143em 0.6em; }
.jv-jr-when { display: block; margin-top: 0.15em; color: var(--ui-300); font-size: 0.75em; font-style: normal; }
.jv-jr-path .jv-at-dot svg { width: 60%; height: 60%; }
.jv-jr-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; padding: 0.6em 1.143em 1em; color: var(--ui-700); font-size: 0.85em; }
/* exclusions */
.jv-ex-win { padding-bottom: 0.9em; }
.jv-ex-row { display: flex; align-items: center; justify-content: space-between; padding: 0.65em 1.143em; border-top: 1px solid var(--ui-line-soft); }
.jv-ex-row b { color: var(--ui-900); font-weight: 500; }
.jv-ex-n { color: var(--ui-900); font-weight: 600; }
.jv-ex-applied { display: flex; flex-direction: column; gap: 0.45em; margin: 0.4em 1.143em 0; padding: 0.7em 0.8em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; background: #fafbfc; font-size: 0.9em; }
.jv-ex-applied > span:not(.app-tile__label) { display: flex; align-items: center; gap: 0.5em; }
.jv-ex-applied .ui-logo { width: 1.1em; height: 1.1em; }
.jv-ex-applied .app-tag { margin-left: auto; }
.jv-ex-ba { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.6em; padding: 0.5em 0; border-top: 1px solid var(--ui-line-soft); color: var(--ui-700); font-size: 0.9em; }
.jv-ex-ba s { color: var(--ui-300); }
.jv-ex-ba b { color: #1c8c67; font-size: 1.25em; font-weight: 600; }
/* ad previews */
.jv-adg { top: 50%; left: 3%; width: 60%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.jv-adg3 { width: 94%; grid-template-columns: repeat(3, 1fr); top: 44%; }
.jv-adp { position: relative; display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em; border: 1px solid var(--ui-line); border-radius: 0.8em; background: #fff; box-shadow: 0 1px 2px rgba(32, 41, 44, 0.06), 0 18px 40px -20px rgba(38, 33, 85, 0.28); }
.jv-adp-chan { display: flex; align-items: center; gap: 0.4em; color: var(--ui-300); font-size: 0.75em; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.jv-adp-chan .ui-logo { width: 1.1em; height: 1.1em; }
.jv-adp-bar { display: flex; align-items: center; gap: 0.5em; }
.jv-adp-head { color: var(--ui-900); font-weight: 500; line-height: 1.35; }
.jv-adp .jv-rs-img { height: 6em; }
.jv-adp-tag { align-self: flex-start; padding: 0.15em 0.55em; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-850); font-size: 0.75em; font-weight: 500; }
.jv-adp.is-google { gap: 0.3em; }
.jv-adp-spons { color: var(--ui-900); font-size: 0.8em; }
.jv-adp-gtitle { color: #1a0dab; font-size: 1.08em; line-height: 1.3; }
.jv-adg-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.jv-adg-ab > span { display: flex; flex-direction: column; gap: 0.1em; padding: 0.6em 0.7em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; }
.jv-adg-ab > span:first-child { border-color: #bfe3d1; background: #f4fbf7; }
.jv-adg-ab em { color: var(--ui-700); font-size: 0.8em; font-style: normal; }
.jv-adg-ab b { color: var(--ui-900); font-size: 1.5em; font-weight: 600; line-height: 1.1; }
.jv-adg-aud { top: auto; bottom: 6%; left: 50%; right: auto; width: 44%; transform: translateX(-50%); align-items: center; text-align: center; }
/* opportunity record */
.jv-opp-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; padding: 0.8em 1.143em 0.2em; }
.jv-opp-meta span { display: flex; flex-direction: column; gap: 0.1em; padding: 0.5em 0.7em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; color: var(--ui-900); font-weight: 500; }
.jv-opp-meta em { color: var(--ui-300); font-size: 0.78em; font-style: normal; font-weight: 400; }
/* fonts: same fill-frame rules apply to ABM/PLG/DMD stages already */

@container (max-aspect-ratio: 1 / 1) {
  .jv-mix-win, .jv-sug-win, .jv-map-win, .jv-sig-win, .jv-cos-win, .jv-jr-win, .jv-ex-win, .jv-vis-win, .jv-evt-win, .jv-opp-win, .jv-ovl-win { top: 3% !important; left: 3% !important; right: 3%; width: auto !important; transform: none; bottom: auto !important; }
  .jv-mix-ask, .jv-map-find, .jv-sig-hist, .jv-pc, .jv-ex-res, .jv-adg-res { top: auto; bottom: 3%; left: 10%; right: 3%; width: auto; }
  .jv-pc .jv-pc-row, .jv-pc .jv-hist-detail, .jv-map-find .jv-hist-detail, .jv-mix-ask .jv-hist-detail { display: none; }
  .jv-vis-row { grid-template-columns: 1.4fr 0.8fr; }
  .jv-vis-row > span:nth-child(2), .jv-vis-row > span:nth-child(3) { display: none; }
  .jv-stk-row { grid-template-columns: 1.4fr 1fr; }
  .jv-stk-row > span:nth-child(2), .jv-stk-row > span:nth-child(3) { display: none; }
  .jv-cov-row { grid-template-columns: 1.3fr repeat(4, 0.6fr); font-size: 0.85em; }
  .jv-com-row { grid-template-columns: 1.4fr 0.8fr; }
  .jv-com-row > span:nth-child(2) { display: none; }
  .jv-sig-row { grid-template-columns: 1.2fr 1.4fr; }
  .jv-sig-row > span:nth-child(2) { display: none; }
  .jv-sig-row:nth-child(n + 6) { display: none; }
  .jv-mix { grid-template-columns: 1.1fr repeat(3, 1fr); font-size: 0.85em; }
  .jv-mix-col { font-size: 0; gap: 0; }
  .jv-mix-col .ui-logo { font-size: 1rem; }
  .jv-map { height: 12em; }
  .jv-feed .jv-hist-item:nth-child(n + 5) { display: none; }
  .jv-adg { top: 3%; left: 3%; right: 3%; width: auto; transform: none; grid-template-columns: 1fr; }
  .jv-adg .jv-adp:nth-child(n + 2) { display: none; }
  .jv-adg3 .jv-adp:nth-child(2) { display: flex; }
  .jv-adg-aud { width: 80%; }
  .jv-opp-meta span:nth-child(3) { display: none; }
  .jv-opp-meta { grid-template-columns: 1fr 1fr; }
  .jv-ex-applied { display: none; }
}
/* variety pass: spacing fixes */
.jv-jr-path { grid-template-columns: repeat(4, 1fr); padding-top: 1.6em; }
.jv-jr-path::before { display: none; }
.jv-mix-win, .jv-map-win, .jv-jr-win, .jv-ex-win, .jv-vis-win, .jv-evt-win, .jv-opp-win, .jv-adg { width: 57%; }
.jv-mix-ask, .jv-map-find, .jv-ex-res, .jv-adg-res { top: auto; bottom: 12%; right: 3%; width: 38%; }
.jv-pc, .jv-sig-hist { width: 38%; }
.jv-sug-win { top: 50%; bottom: auto; transform: translateY(-50%); }
@container (max-aspect-ratio: 1 / 1) {
  .jv-mix-ask, .jv-map-find, .jv-ex-res, .jv-adg-res, .jv-pc, .jv-sig-hist { width: auto; }
  .jv-jr-path { grid-template-columns: repeat(4, 1fr); font-size: 0.85em; }
}
.jv-ovl-win { width: 57% !important; }
.jv-adg.jv-adg3 { width: 94%; }
.jv--plglifecycle .jv-pc, .jv--abmintent .jv-pc { bottom: 4%; }
.jv-evt-win { top: 46%; }
.jv-adg:not(.jv-adg3) { top: 42%; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-mix-ask, .jv-map-find, .jv-ex-res, .jv-adg-res, .jv-pc, .jv-sig-hist { top: 52%; bottom: auto; }
  .jv-cov-row > span:nth-child(2) { display: block; }
  .jv-cov-row { grid-template-columns: 1.2fr repeat(4, 0.55fr); font-size: 0.78em; }
  .jv-adg-aud { left: 10%; right: 3%; width: auto; transform: none; bottom: 3%; }
  .jv-adg.jv-adg, .jv-adg:not(.jv-adg3) { top: 3%; left: 3%; right: 3%; width: auto; transform: none; }
  .jv--abmquiet .jv-pc, .jv--dmdicp .jv-adg-res { top: 58%; }
}
@container (max-aspect-ratio: 1 / 1) { .jv-sig-row:nth-child(n + 6) { display: grid; } .jv--plgfind .jv-pc, .jv--dmdaudience .jv-sig-hist { top: 62%; } }

/* GTM balance wrapper: same box as the stage, shifted by useBalance. */
.jv-balance { position: absolute; inset: 0; }
/* No window bleeds off the frame edge on the GTM pages; the composition is centered instead. */
.jv-cos-win, .jv-sig-win, .jv-ppl-win, .jv-sug-win { top: 6%; bottom: auto; transform: none; }
.jv-sig-hist, .jv-pc { bottom: auto; top: 40%; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-cos-win, .jv-sig-win, .jv-ppl-win, .jv-sug-win { top: 3% !important; }
}
/* balance pass: fill sparse compositions */
.jv-jr-win { width: 74%; top: 4%; transform: none; }
.jv--dmdcontinue .jv-pc { top: 46%; right: 3%; }
.jv-dmw-chart { height: 15em; }
.jv-sug-win { width: 82%; left: 9%; }
@container (max-aspect-ratio: 1 / 1) { .jv-jr-win { width: auto; } .jv-dmw-chart { height: 9em; } .jv-sug-win { left: 3%; } }

/* Phones: GTM compositions stack in flow (window, then its float tucked
   under the window's bottom edge) and are centered by the balancer, so
   floats never cover the content they explain. */
@container (max-aspect-ratio: 1 / 1) {
  .jv-balance { display: flex; flex-direction: column; justify-content: center; padding: 4% 4%; box-sizing: border-box; }
  .jv-balance > .jv-layer,
  .jv-balance > :not(.jv-layer) > .jv-layer { position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; height: auto !important; transform: none !important; flex: none; }
  .jv-balance > .jv-layer.jv-float,
  .jv-balance > :not(.jv-layer) > .jv-layer.jv-float { margin: -1.6em 0 0 8%; }
  .jv-balance > :not(.jv-layer) { display: contents; }
}

/* ====================== Primer vs. Clay Ads page ====================== */
.p26-journey-visual[class*="jv--cly"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #e6eeff 100%); }
.p26-journey-visual.jv--clycredits, .p26-journey-visual.jv--clyactivate { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--cly"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
}
/* hero */
.jv-clh-val { top: 10%; bottom: auto; left: 3%; width: 50%; padding-bottom: 0.8em; }
.jv-clh-val .app-val__head { padding: 0.9em 1.143em; border-bottom: 1px solid var(--ui-line); }
.jv-clh-check { display: flex; gap: 0.6em; align-items: flex-start; padding: 0.7em 1.143em; border-bottom: 1px solid var(--ui-line-soft); }
.jv-clh-check > svg { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; color: #1c8c67; }
.jv-clh-check b { color: var(--ui-900); font-weight: 500; }
.jv-clh-cred { display: flex; justify-content: space-between; margin: 0.8em 1.143em 0; padding: 0.6em 0.8em; border: 1px solid #bfe3d1; border-radius: 0.5em; background: #f4fbf7; color: var(--ui-700); font-size: 0.92em; }
.jv-clh-cred b { color: #1c8c67; font-weight: 600; }
.jv-clh-ask { top: 26%; right: 3%; width: 46%; display: flex; flex-direction: column; gap: 0.7em; padding: 1em 1.143em; }
.jv-clh-ask .ui-user { align-self: flex-end; }
.jv-clh-ask .jv-rp-table { margin: 0; }
.jv-clh-row { grid-template-columns: 2.1fr 0.9fr 0.6fr; }
.jv-clh-row .ui-logo { width: 1.1em; height: 1.1em; margin-right: 0.3em; vertical-align: -0.2em; }
/* credits */
.jv-clc-win { top: 8%; left: 3%; width: 58%; }
.jv-clc-body { display: flex; flex-direction: column; gap: 0.7em; padding: 0.8em; }
.jv-clc-cyc { display: inline-grid; vertical-align: bottom; }
.jv-clc-cyc > i { grid-area: 1 / 1; font-style: normal; }
.jv-clc-cyc > i:not(:first-child) { visibility: hidden; }
.jv-clc-val { font-style: italic !important; color: var(--blue-850); background: var(--blue-50); border-radius: 0.3em; padding: 0 0.3em; }
.jv-clc-side { top: 30%; right: 3%; width: 36%; display: flex; flex-direction: column; gap: 0.8em; padding: 1em 1.143em; }
.jv-clc-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.7em 0.8em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; }
.jv-clc-line b { color: var(--ui-900); font-weight: 500; }
.jv-clc-line.is-credit { justify-content: flex-start; border-color: #bfe3d1; background: #f4fbf7; }
.jv-clc-line.is-credit > svg { width: 1.2em; height: 1.2em; color: #1c8c67; flex: none; }
.jv-clc-cap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25em; width: 6em; }
.jv-clc-cap .jv-hist-bar { width: 100%; }
.jv-clc-cap em { color: var(--ui-700); font-size: 0.85em; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .jv-clc-cyc > i { visibility: visible !important; animation: jv-cly-cycle 9s linear infinite both; animation-delay: calc(var(--k) * 3s); }
}
@keyframes jv-cly-cycle {
  0% { opacity: 0; transform: translateY(0.35em); }
  3%, 30% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translateY(-0.35em); }
}
/* validate */
.jv-clv-win { top: 6%; left: 3%; width: 57%; padding-bottom: 0.6em; }
.jv-clv-comp { margin: 0 0.8em; }
.jv-clv-bar { grid-template-columns: 7.5em 1fr 2.6em; margin: 0; }
.jv-clv-rule { top: 34%; right: 3%; width: 38%; display: flex; flex-direction: column; gap: 0.5em; padding: 1em 1.143em; }
/* activate + handoff */
.jv-cla-win { top: 10%; left: 3%; width: 57%; padding-bottom: 0.6em; }
.jv-cla-name { display: flex; align-items: center; gap: 0.5em; color: var(--ui-900); }
.jv-cla-name .ui-logo { width: 1.2em; height: 1.2em; }
.jv-cla-name .ui-logo svg { width: 100%; height: 100%; }
.jv-clo-src { top: 50%; left: 3%; width: 40%; transform: translateY(-50%); bottom: auto; display: flex; flex-direction: column; gap: 0.6em; padding: 1em; }
.jv-clo-src .ui-button { display: none; }
.jv-clo-arrow { position: absolute; left: 44.5%; top: 50%; width: 5%; transform: translateY(-50%); color: #9aa6ad; }
.jv-clo-dst { top: 50%; right: 3%; left: auto; width: 45%; transform: translateY(-50%); bottom: auto; display: flex; flex-direction: column; gap: 0.2em; padding: 1em 0.4em 0.9em; background: #fbfbfd; border-style: dashed; }
.jv-clo-dst > .app-tile__label, .jv-clo-dst > .jv-hist-detail { padding: 0 0.7em; }
.jv-clo-dst > .jv-hist-detail { margin-top: 0.5em; }
.jv-clo-dst .jv-ex-row { padding: 0.55em 0.7em; }
/* analyze */
.jv-cly-rep { width: 58%; }
/* evidence */
.jv-clx-edit { top: auto; bottom: 10%; right: 3%; width: 40%; }
.jv-clx-edit .app-fix__done { display: flex; align-items: center; gap: 0.35em; margin-top: 0.5em; color: #1c8c67; font-size: 0.85em; }
.jv-clx-edit .app-fix__done svg { width: 1em; height: 1em; }
.jv-cls-win { padding-bottom: 0.9em; }
.jv-cls-row { display: grid; grid-template-columns: 11em 1fr 5em auto; gap: 0.7em; align-items: center; padding: 0.7em 1.143em; border-top: 1px solid var(--ui-line-soft); font-size: 0.92em; }
.jv-cls-name { color: var(--ui-900); }
.jv-cls-bars { display: flex; flex-direction: column; gap: 0.25em; }
.jv-cls-bars .is-spend i { background: #c6ced3; }
.jv-cls-bars .is-opp i { background: #3e63dd; }
.jv-cls-num { color: var(--ui-700); font-size: 0.88em; white-space: nowrap; }
.jv-cls-num b { color: var(--ui-900); font-weight: 600; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-clh-row { grid-template-columns: 1.8fr 0.6fr; }
  .jv-clh-row > span:nth-child(2) { display: none; }
  .jv-clh-check:nth-child(n + 4) { display: none; }
  .jv-clv-comp { display: none; }
  .jv-cls-row { grid-template-columns: 1fr auto; }
  .jv-cls-bars, .jv-cls-num { display: none; }
  .jv-clo-arrow { display: none; }
  .jv-clo-dst .jv-hist-detail { display: none; }
}
.jv-clc-win, .jv-clv-win, .jv-cla-win, .jv-clh-val { bottom: auto; }
.jv-clh-val { width: 47%; }
.jv-clh-ask { top: 34%; width: 47%; }
.jv-cls-win { width: 62%; }
.jv--clyspend .jv-map-find, .jv--clyactivate .jv-ex-res { top: auto; bottom: 6%; }
.jv-cla-win .jv-cla-row:last-child { padding-bottom: 0.9em; }
.jv-clh-cred { justify-content: flex-start; gap: 0.6em; }

/* ====================== Primer vs. Influ2 page ====================== */
.p26-journey-visual[class*="jv--inf"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
.p26-journey-visual.jv--infcontrol { background-image: linear-gradient(160deg, #f4f7f9 0%, #e2f0ef 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--inf"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
  .p26-journey-visual.jv--infhero .jv-stage { font-size: clamp(11px, min(1.6cqw, 3.1cqh), 20px); }
}
/* hero */
.jv-ifh-aud { top: 26%; bottom: auto; left: 3%; width: 62%; padding-bottom: 0.8em; }
.jv-ifh-src { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; padding: 0.7em 0.8em 0; }
.jv-ifh-src span { padding: 0.5em 0.7em; border: 1px solid var(--ui-line-soft); border-radius: 0.5em; color: var(--ui-700); font-size: 0.88em; }
.jv-ifh-src span:last-child { border-color: #c9bdfc; background: #faf8ff; }
.jv-ifh-src b { display: block; color: var(--ui-900); font-size: 1.3em; font-weight: 600; }
.jv-ifh-db { display: flex; align-items: center; gap: 0.4em; margin: 0.2em 0.8em 0; color: #6e37ff; font-size: 0.85em; font-weight: 500; }
.jv-ifh-db svg { width: 1em; height: 1em; }
.jv-ifh-find { top: 6%; right: 3%; width: 37%; display: flex; flex-direction: column; gap: 0.45em; padding: 1em 1.143em; }
/* audience */
.jv-ifa-win { top: 6%; bottom: auto; left: 3%; width: 60%; padding-bottom: 0.4em; }
.jv-ifa-body { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; }
.jv-ifa-src { border: 1px solid var(--ui-line-soft); border-radius: 0.6em; overflow: hidden; }
.jv-ifa-src .jv-ex-row:first-child { border-top: 0; }
.jv-ifa-sup { top: 34%; right: 3%; width: 34%; display: flex; flex-direction: column; gap: 0.4em; padding: 1em 1.143em; }
/* control */
.jv-ifc { inset: 8% 3%; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 0.8em; }
.jv-ifc .jv-win { position: relative; inset: auto; width: auto; display: flex; flex-direction: column; gap: 0.6em; padding: 1em; }
.jv-ifc-primer .ui-button { display: none; }
.jv-ifc-flows { display: flex; flex-direction: column; gap: 1.6em; }
.jv-ifc-flow { display: flex; flex-direction: column; gap: 0.35em; color: var(--ui-700); font-size: 0.85em; text-align: center; }
.jv-ifc-flow svg { width: 100%; height: 0.8em; overflow: visible; }
.jv-ifc-flow path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.jv-ifc-flow.is-out path { stroke: #6e37ff; }
.jv-ifc-flow.is-in path { stroke: #1c8c67; }
.jv-ifc-flow.is-in { flex-direction: column-reverse; }
.jv-ifc-accts .jv-ex-row { padding: 0.5em 0; }
/* apply */
.jv-ifp-crit { top: 10%; bottom: auto; left: 3%; width: 55%; margin: 0; }
.jv-ifp-crit .app-fix__done { display: flex; align-items: center; gap: 0.35em; margin-top: 0.5em; color: #1c8c67; font-size: 0.85em; }
.jv-ifp-crit .app-fix__done svg { width: 1em; height: 1em; }
.jv-ifp-val { top: 34%; right: 3%; width: 40%; display: flex; flex-direction: column; gap: 0.5em; padding: 1em 1.143em; }
.jv-ifp-val .jv-clc-line b { color: var(--ui-900); font-weight: 600; }
/* comparison shots: app pieces reused; competitor as a dashed callout */
.p26-journey-visual[class*="jv--vec"], .p26-journey-visual[class*="jv--md"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--vec"] .jv-stage, .p26-journey-visual[class*="jv--md"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
}
.jv-cx-ghost { display: flex; flex-direction: column; gap: 0.35em; padding: 1em 1.143em; border: 1.5px dashed #b4bec3; background: #f7f8f9; box-shadow: 0 10px 24px -16px rgba(32, 41, 44, 0.35); }
.jv-cx-who { color: #8a989e; font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.jv-cx-claim { color: #6b7b82; font-size: 1.05em; font-weight: 600; line-height: 1.3; }
.jv-cx-detail { color: #8a989e; font-size: 0.82em; line-height: 1.4; }
/* match */
.jv-cxm-win { top: 5%; bottom: auto; left: 4%; width: 56%; padding: 1em 1.43em 0.8em; }
.jv-cxm-win .jv-lift-row { padding: 0.5em 0; }
.jv-cxm-win .jv-lift-row .ui-logo { font-size: 1.2em; }
.jv-cxm-win .jv-lift-num b { font-size: 1.15em; }
.jv-cxm-win .jv-lift-num span { white-space: nowrap; }
.jv-cxm-win .jv-lift-num .jv-cxm-none { color: #b4bec3; font-style: italic; }
.jv-lift-bar.is-none { visibility: hidden; }
.jv-cxm-win .app-enrich { margin-top: 0.5em; }
.jv-cxm-ghost { top: 34%; right: 4%; width: 30%; }
.jv-cxm-ghost .jv-cx-claim { font-size: 1.6em; }
/* accounts (History tab) */
.jv-cxa-win { top: 12%; bottom: auto; left: 4%; width: 58%; padding-bottom: 0.4em; }
.jv-cxa-ghost { top: 46%; right: 3%; width: 30%; }
/* holdout (Measurement page card) */
.jv-cxl-win { top: 18%; bottom: auto; left: 7%; width: 50%; }
.jv-cxl-ghost { top: 40%; right: 4%; width: 31%; }
/* credits (audience draft + projected match) */
.jv-cxc-win { top: 5%; bottom: auto; left: 3%; width: 64%; padding-bottom: 0.4em; }
.jv-cxc-body { padding: 0.6em 1.143em 0; }
.jv-cxc-credit { padding: 0.5em 1.143em 0.4em; }
.jv-cxc-ghost { top: 46%; right: 2%; width: 28%; }
.jv-cxc-ghost .jv-cx-claim { font-size: 1.45em; }
/* reveal + Metadata preview */
.jv-cxv-win { top: 5%; bottom: auto; left: 3%; width: 60%; }
.jv-cxv-anon .app-avatar, .jv-cxv-anon .jv-cxv-blur { filter: blur(4px); user-select: none; }
.jv-cxv-pin { position: relative; display: inline-flex; margin-top: 0.3em; color: var(--ui-300); }
.jv-cxv-pin svg { width: 1em; height: 1em; }
.jv-cxv-tip { position: absolute; bottom: calc(100% + 0.5em); left: -0.6em; z-index: 3; padding: 0.45em 0.7em; border-radius: 0.4em; background: #20292c; color: #fff; font-size: 0.8em; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4); }
.jv-cxv-tip::after { content: ""; position: absolute; top: 100%; left: 0.9em; border: 0.35em solid transparent; border-top-color: #20292c; }
.jv-cxd-win { top: 6%; bottom: auto; left: 4%; right: auto; width: 58%; transform: none; }
.jv-cxd-approve { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em; margin-top: 0.6em; }
.jv-cxd-approve .app-save { position: static; }
.jv-cxv-win .app-row > :nth-child(4), .jv-cxd-win .app-row > :nth-child(4) { padding-right: 0; }
.jv-cxv-ghost { top: 38%; bottom: auto; right: 2%; width: 29%; }
.jv--infreveal .jv-cxv-win { left: 14%; width: 72%; }
.jv-cxd-ghost { top: 30%; bottom: auto; right: 2%; width: 31%; }
.jv-cxd-win .jv-pa-card.is-open { border-color: var(--blue-200); box-shadow: none; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-cxm-win .app-enrich { display: none; }
  .jv-cxv-win .app-row { grid-template-columns: 1.15fr 1fr; }
  .jv-cxv-win .app-row > :nth-child(2), .jv-cxv-win .app-row > :nth-child(4) { display: none; }
  .jv-cxv-win .app-row > .app-cell--company, .jv-cxv-win .app-row--head > :nth-child(3) { display: flex; }
  .jv-cxv-win .jv-en-tile:first-child { display: none; }
  .jv-cxd-win { right: 4%; width: auto; }
  .jv-balance > .jv-layer.jv-float.jv-cx-ghost { margin: 0.7em 0 0 8%; }
  .jv-cxc-win .app-estimates { flex-wrap: wrap; }
  .jv-cxc-win .app-tile--grow { flex-basis: 100%; }
  .jv-cxc-win .app-tile__row--wide { flex-wrap: wrap; row-gap: 0.4em; }
}

/* Vibe listing frames (rendered at 1300x1000 for the marketplace images) */
.p26-journey-visual[class*="jv--vb"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--vb"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: 1.95cqw; }
}
.jv-vb-aud { top: 9%; bottom: auto; left: 1%; width: 76%; }
.jv-vb-dests { top: 76%; right: 1%; width: 34%; padding: 0; }
.jv-vb-dests .ui-panel { margin: 0; border: 0; }
.jv-vb-hist { top: 10%; bottom: auto; left: 1%; width: 74%; padding-bottom: 0.4em; }
.jv-vb-use { top: 64%; right: 1%; width: 50%; display: flex; flex-direction: column; gap: 0.2em; padding: 1em 1.143em; }
.jv-vb-use .jv-ex-row { padding-left: 0; padding-right: 0; }
.jv-vb-rep { top: 10%; bottom: auto; left: 1%; width: 84%; }
.jv-vb-hl { background: #f5f3ff; }
.jv-vb-call { top: 44%; right: 1%; width: 44%; display: flex; flex-direction: column; gap: 0.45em; padding: 1em 1.143em; }
.jv-vb-callhead { display: flex; align-items: center; gap: 0.45em; color: #3c327b; font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-vb-next { top: 14%; left: 1%; right: 1%; transform: none; }
.jv-vb-next .jv-pa-card.is-open { border-color: var(--blue-200); box-shadow: none; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ifc { inset: 3%; grid-template-columns: 1fr; gap: 0.5em; }
  .jv-ifc-flows { flex-direction: row; gap: 0.6em; }
  .jv-ifc-flow svg { display: none; }
  .jv-ifc-flow { flex: 1; padding: 0.4em; border-radius: 0.4em; font-size: 0.8em; }
  .jv-ifc-flow.is-out { background: #f3eeff; color: #4b23c4; }
  .jv-ifc-flow.is-in { background: #eaf6f0; color: #1c8c67; }
  .jv-ifc-primer .ui-artifact:nth-child(3), .jv-ifc-accts .jv-hist-detail { display: none; }
  .jv-ifh-src { grid-template-columns: 1fr; }
  .jv-ifh-aud .app-estimates { flex-wrap: wrap; }
  .jv-ifh-aud .app-tile--grow { flex-basis: 100%; }
  .jv-ifh-aud .app-tile:not(.app-tile--grow) { display: none; }
  .jv-ifh-db { display: none; }
  .jv-ifh-aud .app-tile__row--wide { flex-wrap: wrap; row-gap: 0.4em; }
  .jv-ifa-crit .ui-criteria li:nth-child(n + 4) { display: none; }
  .jv-ifm-cols, .jv-ifm-row { grid-template-columns: 7.6em 1fr 5.4em; gap: 0.6em; }
  .jv-ifm-ch { font-size: 0.82em; }
  .jv-ifm-track { margin-right: 3.9em; }
  .jv-ifm-note { display: none; }
}

/* ---------- Agencies page: organization switcher views ---------- */
.jv-agy-head { display: flex; align-items: center; gap: 0.75em; padding: 0.85em 1.1em; background: #4b3a9e; color: #fff; }
.jv-agy-head .app-stack { flex: 1; min-width: 0; }
.jv-agy-head b { color: #fff; font-weight: 600; }
.jv-agy-role { font-size: 0.82em; color: rgba(255, 255, 255, 0.75); }
.jv-agy-chev { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.3s; }
.jv-agy-chev.is-open { transform: rotate(180deg); }
.jv-agy-tile { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 0.4em; color: #fff; font-weight: 600; font-size: 0.9em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.jv-agy-head .jv-agy-tile { background: #fff !important; color: #4b3a9e; width: 2.2em; height: 2.2em; font-size: 1em; }

/* Hero: client context + finding, next-test float */
.jv-agh-win { top: 9%; bottom: auto; left: 3%; width: 60%; }
.jv-agh-body { display: flex; flex-direction: column; gap: 0.9em; padding: 1.1em; }
.jv-agh-body .ui-user { align-self: flex-end; max-width: 85%; }
.jv-agh-find { display: grid; gap: 0.6em; padding: 0.9em 1em; border: 1px solid var(--ui-line); border-radius: 0.6em; background: var(--ui-50, #f7f9fa); }
.jv-agh-label { font-size: 0.78em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-500, #6b7b82); }
.jv-agh-find p { margin: 0; color: var(--ui-900); }
.jv-agh-find b { font-weight: 600; }
.jv-agh-bar { display: flex; height: 0.6em; border-radius: 99px; overflow: hidden; background: #e9edf0; }
.jv-agh-bar i { display: block; height: 100%; background: #3e63dd; }
.jv-agh-bar i.is-out { background: #f0a43a; }
.jv-agh-legend { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; font-size: 0.82em; color: var(--ui-700); }
.jv-agh-legend i { display: inline-block; width: 0.65em; height: 0.65em; margin-right: 0.35em; border-radius: 50%; background: #3e63dd; vertical-align: -0.05em; }
.jv-agh-legend i.is-out { background: #f0a43a; }
.jv-agh-next { top: 52%; right: 3%; width: 46%; display: grid; gap: 0.7em; padding: 1em 1.1em; }
.jv-agh-next .app-tag { justify-self: start; }
.jv-agh-next p { margin: 0; color: var(--ui-900); }
.jv-agh-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.jv-agh-for { font-size: 0.8em; color: var(--ui-500, #6b7b82); }
.app-btn.is-primary { border-color: #3e63dd; background: #3e63dd; color: #fff; box-shadow: none; }

/* Management: switcher open + new client checklist */
.jv-ago-menu { top: 7%; left: 3%; width: 42%; }
.jv-ago-list { list-style: none; margin: 0; padding: 0.4em 0; }
.jv-ago-list li { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 1.1em; color: var(--ui-900); font-weight: 500; }
.jv-ago-list li.is-current { background: var(--blue-50, #eef3ff); }
.jv-ago-new .app-tag { margin-left: auto; }
.jv-ago-create { color: #4b3a9e !important; border-top: 1px solid var(--ui-line-soft); margin-top: 0.3em; padding-top: 0.75em !important; }
.jv-ago-plus { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 1.5px solid currentColor; border-radius: 0.4em; font-weight: 600; }
.jv-ago-win { top: 30%; bottom: auto; left: auto; right: 2%; width: 50%; padding-bottom: 0.4em; }
.jv-ago-step { display: flex; align-items: center; gap: 0.75em; padding: 0.75em 1.1em; border-top: 1px solid var(--ui-line-soft); }
.jv-ago-step .jv-su-body { flex: 1; min-width: 0; display: grid; gap: 0.2em; }
.jv-ago-step .jv-su-title { color: var(--ui-900); font-weight: 500; }
.jv-ago-step .jv-su-status { color: var(--ui-700); font-size: 0.86em; }
.jv-ago-step .jv-su-logos { display: inline-flex; gap: 0.35em; }
.jv-ago-step .jv-su-check { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid var(--ui-line); color: #fff; }
.jv-ago-step.is-done .jv-su-check { background: #1c8c67; border-color: #1c8c67; }
.jv-ago-step.is-done .jv-su-check svg { width: 0.9em; height: 0.9em; }
.jv-ago-step.is-next .jv-su-check { border-color: #3e63dd; }
.jv-ago-step.is-later { opacity: 0.75; }

/* Agencies: in landscape frames the stage fills the whole frame (like the
   ABM / PLG / Demand Gen views) so the compositions use the width; the
   balance hook then centres and scales them. */
.p26-journey-visual[class*="jv--agy"] { background-image: linear-gradient(160deg, #f5f7ff 0%, #ece9ff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--agy"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
  .jv-agh-win { top: 50%; left: 4%; width: 50%; transform: translateY(-58%); }
  .jv-agh-next { top: auto; bottom: 14%; right: 4%; width: 40%; }
  .jv-ago-menu { top: 50%; left: 6%; width: 34%; transform: translateY(-50%); }
  .jv-ago-win { top: 50%; right: 6%; width: 46%; transform: translateY(-42%); }
}
/* Phones (portrait frames): the stacked switcher + checklist fit the 4:5 frame. */
@container (max-aspect-ratio: 1 / 1) {
  .jv-ago-list { padding: 0.2em 0; }
  .jv-ago-list li { padding: 0.38em 1em; }
  .jv-ago-create { padding-top: 0.5em !important; }
  .jv-ago-step { padding: 0.5em 1em; }
  .jv-ago-win .app-title { padding-top: 0.6em; padding-bottom: 0.6em; }
}

/* ---------- Connections page: sources and routing views ---------- */
.p26-journey-visual[class*="jv--cn"] { background-image: linear-gradient(160deg, #f4f7f9 0%, #e8eef8 100%); }
.jv-cn-glyph { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border: 1px solid var(--ui-line); border-radius: 0.45em; background: #fff; color: #3c327b; font-size: 0.78em; font-weight: 700; }
.jv-cn-glyph svg { width: 1.1em; height: 1.1em; }
.jv-cni-win { top: 8%; bottom: auto; left: 3%; width: 54%; padding-bottom: 0.3em; }
.jv-cni-row, .jv-cno-row { display: flex; align-items: center; gap: 0.75em; padding: 0.62em 1.1em; border-top: 1px solid var(--ui-line-soft); }
.jv-cni-row .ui-logo, .jv-cno-row .ui-logo { width: 1.9em; height: 1.9em; flex: none; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 0.45em; background: #fff; }
.jv-cni-row .ui-logo img, .jv-cno-row .ui-logo img { width: 1.15em; height: 1.15em; }
.jv-cni-row .app-stack, .jv-cno-row .app-stack { flex: 1; min-width: 0; }
.jv-cni-row b, .jv-cno-row b { color: var(--ui-900); font-weight: 500; }
.jv-cni-wh { display: inline-flex; gap: 0.3em; }
.jv-cni-wh img { width: 1.15em; height: 1.15em; }
.jv-cni-ok { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; background: #1c8c67; color: #fff; }
.jv-cni-ok svg { width: 0.8em; height: 0.8em; }
.jv-cni-res { top: 30%; bottom: auto; right: 3%; width: 38%; display: grid; gap: 0.7em; padding: 1em 1.15em; }
.jv-cni-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.6em; }
.jv-cni-stat b { color: var(--ui-900); font-size: 1.35em; font-weight: 600; letter-spacing: -0.01em; }
.jv-cni-stat span { color: var(--ui-700); font-size: 0.86em; }
.jv-cno-conv { top: 50%; left: 4%; width: 40%; display: grid; gap: 0.5em; padding: 1em 1.15em; transform: translateY(-50%); }
.jv-cno-live { display: inline-flex; align-items: center; gap: 0.35em; color: #1c8c67; font-size: 0.82em; font-weight: 500; }
.jv-cno-live svg { width: 1em; height: 1em; }
.jv-cno-title { color: var(--ui-900); font-size: 1.15em; font-weight: 600; }
.jv-cno-touch { display: inline-flex; align-items: center; gap: 0.35em; padding-top: 0.5em; border-top: 1px solid var(--ui-line-soft); color: var(--ui-700); font-size: 0.82em; }
.jv-cno-win { top: 50%; bottom: auto; left: auto; right: 4%; width: 48%; padding-bottom: 0.3em; transform: translateY(-50%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--cn"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(11px, min(1.45cqw, 3cqh), 19px); }
}

/* ---------- Reddit play (/plays/reddit): recreated app screens ---------- */
.p26-journey-visual[class*="jv--rd"], .p26-journey-visual[class*="jv--li"], .p26-journey-visual[class*="jv--me"], .p26-journey-visual[class*="jv--se"], .p26-journey-visual[class*="jv--ac"], .p26-journey-visual[class*="jv--gd"], .p26-journey-visual[class*="jv--pm"], .p26-journey-visual[class*="jv--ml"], .p26-journey-visual[class*="jv--ln"], .p26-journey-visual[class*="jv--oa"], .p26-journey-visual[class*="jv--sg"], .p26-journey-visual[class*="jv--bx"], .p26-journey-visual[class*="jv--ui"], .p26-journey-visual[class*="jv--us"], .p26-journey-visual[class*="jv--wr"], .p26-journey-visual[class*="jv--yt"] { background-image: linear-gradient(160deg, #fff6f1 0%, #f3ecff 100%); }
@container (min-aspect-ratio: 1 / 1) {
  .p26-journey-visual[class*="jv--rd"] .jv-stage, .p26-journey-visual[class*="jv--li"] .jv-stage, .p26-journey-visual[class*="jv--me"] .jv-stage, .p26-journey-visual[class*="jv--se"] .jv-stage, .p26-journey-visual[class*="jv--ac"] .jv-stage, .p26-journey-visual[class*="jv--gd"] .jv-stage, .p26-journey-visual[class*="jv--pm"] .jv-stage, .p26-journey-visual[class*="jv--ml"] .jv-stage, .p26-journey-visual[class*="jv--ln"] .jv-stage, .p26-journey-visual[class*="jv--oa"] .jv-stage, .p26-journey-visual[class*="jv--sg"] .jv-stage, .p26-journey-visual[class*="jv--bx"] .jv-stage, .p26-journey-visual[class*="jv--ui"] .jv-stage, .p26-journey-visual[class*="jv--us"] .jv-stage, .p26-journey-visual[class*="jv--wr"] .jv-stage, .p26-journey-visual[class*="jv--yt"] .jv-stage { top: 0; left: 0; bottom: auto; transform: none; width: 100cqw; height: 100cqh; aspect-ratio: auto; font-size: clamp(9px, min(1.08cqw, 2.25cqh), 15px); }
}
/* App window: nav rail · chat column · artifact sidebar (Figma 1464×928). */
.jv-rd-app { top: 5%; bottom: 5%; left: 3%; right: 3%; flex-direction: row; background: #fafafa; }
.jv-rd-rail { display: flex; flex: none; flex-direction: column; align-items: center; gap: 1.15em; width: 3.4em; padding: 1.1em 0; border-right: 1px solid var(--ui-line-soft); color: var(--ui-700); }
.jv-rd-rail span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.5em; }
.jv-rd-rail span.is-on { background: #eceef1; color: var(--ui-900); }
.jv-rd-rail svg { width: 1.1em; height: 1.1em; }
.jv-rd-rail .jv-rd-mark { width: 1.5em; height: auto; margin-bottom: 0.5em; }
.jv-rd-chat { display: flex; flex: none; flex-direction: column; width: 31%; min-width: 0; padding: 0 1.4em; }
.jv-rd-chathead { display: flex; align-items: center; justify-content: space-between; height: 3.6em; color: var(--ui-900); font-size: 1.15em; }
.jv-rd-chathead i { color: var(--ui-700); font-style: normal; }
.jv-rd-thread { display: flex; flex: 1; flex-direction: column; gap: 0.85em; overflow: hidden; color: var(--ui-900); font-size: 1em; line-height: 1.5; }
.jv-rd-thread p { margin: 0; }
.jv-rd-q { align-self: flex-end; max-width: 92%; padding: 0.7em 1em; border-radius: 1.1em; background: #e9ebee; }
.jv-rd-worked { display: inline-flex; align-items: center; gap: 0.2em; color: #8a9fa9; font-size: 0.9em; }
.jv-rd-worked svg { width: 0.8em; height: 0.8em; }
.jv-rd-artifact { margin: 0.2em 0; }
.jv-rd-sources { align-self: flex-start; padding: 0.2em 0.7em; border: 1px solid var(--ui-line); border-radius: 999px; color: var(--ui-700); font-size: 0.85em; }
.jv-rd-follow { display: grid; gap: 0.45em; margin: 0; padding: 0; color: var(--ui-700); font-size: 0.88em; list-style: none; }
.jv-rd-input { display: flex; align-items: center; justify-content: space-between; margin: 0.8em 0 1.4em; padding: 0.8em 1em; border: 1.5px solid #4f7cff; border-radius: 1.1em; background: #fff; color: #8a9fa9; }
.jv-rd-input i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 1px solid var(--ui-line); border-radius: 50%; }
.jv-rd-input svg { width: 0.8em; height: 0.8em; }
.jv-rd-side { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0.6em 0.6em 0 0; border: 1px solid var(--ui-line); border-radius: 1em 1em 0 0; background: #fff; }
.jv-rd-sidehead { display: flex; align-items: center; gap: 0.75em; height: 3.8em; padding: 0 1.4em; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-900); }
.jv-rd-sidehead > svg { width: 1em; height: 1em; color: var(--ui-700); }
.jv-rd-sidetitle { flex: 1; overflow: hidden; font-size: 1.15em; text-overflow: ellipsis; white-space: nowrap; }
.jv-rd-save { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.45em 1em; border-radius: 999px; background: var(--ui-900); color: #fff; font-size: 0.9em; }
.jv-rd-save svg, .jv-rd-sf img { width: 0.9em; height: 0.9em; }
.jv-rd-sidebody { display: flex; flex: 1; flex-direction: column; gap: 0.85em; overflow: hidden; padding: 1.1em 1.4em; }
/* Audience preview */
.jv-rd-est { display: grid; grid-template-columns: auto 1fr; gap: 0.7em; }
.jv-rd-esttile { display: grid; gap: 0.35em; padding: 0.75em 1em; border: 1px solid var(--ui-line); border-radius: 0.8em; }
.jv-rd-esttile em, .jv-rd-tile em { color: #8a9fa9; font-size: 0.85em; font-style: normal; }
.jv-rd-esttile b { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ui-900); font-size: 1.15em; font-weight: 500; }
.jv-rd-esttile svg { width: 0.95em; height: 0.95em; color: var(--ui-700); }
.jv-rd-esttile .ui-logo, .jv-rd-sumstrip .ui-logo { width: 1.1em; height: 1.1em; }
.jv-rd-seg { display: inline-flex; align-self: flex-start; gap: 0.2em; padding: 0.2em; border: 1px solid var(--ui-line); border-radius: 0.6em; font-size: 0.9em; }
.jv-rd-seg span { padding: 0.3em 0.8em; border-radius: 0.45em; color: var(--ui-700); }
.jv-rd-seg .is-on { background: #eef2ff; color: #3e63dd; }
.jv-rd-table { display: grid; font-size: 0.88em; }
.jv-rd-tr { display: grid; grid-template-columns: 1.35fr 1.4fr 1.1fr 1fr; align-items: center; gap: 0.6em; padding: 0.55em 0; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-900); }
.jv-rd-tr.is-head { color: #8a9fa9; font-size: 0.82em; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-rd-tr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-rd-person { display: inline-flex; align-items: center; gap: 0.55em; }
.jv-rd-person i { display: grid; flex: none; place-items: center; width: 2em; height: 2em; border: 1px solid var(--ui-line); border-radius: 50%; color: var(--ui-700); font-size: 0.8em; font-style: normal; }
.jv-rd-person b { font-weight: 500; }
.jv-rd-hit { display: inline-flex; align-items: center; gap: 0.3em; color: #1c8c67; }
.jv-rd-hit svg { width: 0.85em; height: 0.85em; }
.jv-rd-miss { color: #8a9fa9; }
/* Editor + destinations */
.jv-rd-editor { flex-direction: row; }
.jv-rd-edit { display: flex; flex: none; flex-direction: column; gap: 0.8em; width: 34%; padding: 1em 1.2em; border-right: 1px solid var(--ui-line-soft); background: #fff; }
.jv-rd-tabs { display: inline-flex; gap: 0.4em; font-size: 0.9em; }
.jv-rd-tabs span { padding: 0.35em 0.8em; border-radius: 0.5em; color: var(--ui-700); }
.jv-rd-tabs .is-on { background: #eef2ff; color: #3e63dd; }
.jv-rd-box { display: grid; gap: 0.5em; padding: 0.9em; border: 1px solid var(--ui-line); border-radius: 0.8em; }
.jv-rd-boxhead { color: var(--ui-900); font-weight: 500; }
.jv-rd-dest { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.55em; color: var(--ui-900); }
.jv-rd-dest.is-on { border-color: #b9c8ff; background: #f5f8ff; }
.jv-rd-dest .ui-logo { width: 1.2em; height: 1.2em; }
.jv-rd-check { display: grid; place-items: center; width: 1.15em; height: 1.15em; margin-left: auto; border: 1.5px solid #c6ced3; border-radius: 0.25em; color: #fff; font-style: normal; }
.jv-rd-dest.is-on .jv-rd-check { border-color: #3e63dd; background: #3e63dd; }
.jv-rd-check svg { width: 0.75em; height: 0.75em; }
.jv-rd-enrich { display: flex; gap: 0.5em; padding: 0.6em 0.75em; border-radius: 0.55em; background: #eef8f5; color: var(--ui-700); font-size: 0.85em; line-height: 1.4; }
.jv-rd-enrich svg { flex: none; width: 1em; height: 1em; color: #1c8c67; }
.jv-rd-crit { margin: 0; color: var(--ui-700); font-size: 0.9em; line-height: 1.7; }
.jv-rd-crit b { color: var(--ui-900); font-weight: 500; }
.jv-rd-crit em { color: var(--ui-900); font-style: italic; }
.jv-rd-sum { display: flex; flex: 1; flex-direction: column; gap: 1em; padding: 1em 1.4em; background: #fff; }
.jv-rd-sumstrip { display: flex; align-items: center; gap: 1.6em; padding-bottom: 0.9em; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-900); font-weight: 500; }
.jv-rd-sumstrip span { display: inline-flex; align-items: center; gap: 0.4em; }
.jv-rd-sumstrip svg { width: 1em; height: 1em; color: var(--ui-700); }
.jv-rd-bars { display: grid; gap: 0.55em; }
.jv-rd-bars > b { color: #8a9fa9; font-size: 0.8em; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-rd-bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.45em 0.6em; color: var(--ui-900); font-size: 0.9em; }
.jv-rd-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 0.3em; background: #eef1ff; }
.jv-rd-bar em, .jv-rd-bar b { position: relative; font-style: normal; font-weight: 400; }
.jv-rd-synced { right: 4%; bottom: 10%; display: grid; gap: 0.35em; width: 30%; padding: 1em 1.2em; }
.jv-rd-live { display: inline-flex; align-items: center; gap: 0.35em; color: #1c8c67; font-size: 0.85em; font-weight: 500; }
.jv-rd-live svg { width: 0.9em; height: 0.9em; }
.jv-rd-synced b { color: var(--ui-900); font-size: 1.1em; font-weight: 500; }
.jv-rd-synced > span:last-child { color: var(--ui-700); font-size: 0.85em; }
/* Reddit Ads Manager */
.jv-rd-ads { top: 6%; bottom: 5%; left: 3%; right: 3%; background: #fff; font-family: "IBM Plex Sans", Rubik, Arial, sans-serif; }
.jv-rd-adsbar { display: flex; flex: none; align-items: center; gap: 1em; height: 3.6em; padding: 0 1.2em; border-bottom: 1px solid #e5ebee; color: #1c1c1c; }
.jv-rd-adsbar b { font-weight: 600; }
.jv-rd-acct { padding: 0.35em 0.8em; border-radius: 0.5em; background: #eef1f3; font-size: 0.92em; }
.jv-rd-snoo { margin: 0 auto; }
.jv-rd-snoo .ui-logo { width: 1.8em; height: 1.8em; }
.jv-rd-adsbody { display: grid; flex: 1; grid-template-columns: 22% 1fr 26%; min-height: 0; background: #f6f7f8; }
.jv-rd-tree { display: grid; align-content: start; gap: 0.2em; padding: 1em 0.8em; border-right: 1px solid #e5ebee; background: #fff; color: #1c1c1c; font-size: 0.9em; }
.jv-rd-tree span { padding: 0.5em 0.7em; border-radius: 0.4em; }
.jv-rd-tree .is-on { background: #eef1f3; font-weight: 600; }
.jv-rd-tree .is-ad { padding-left: 1.8em; color: #576f76; }
.jv-rd-form { display: flex; flex-direction: column; gap: 0.5em; margin: 1em 1.4em; padding: 1.2em 1.4em; border-radius: 0.8em; background: #fff; overflow: hidden; }
.jv-rd-h { margin-top: 0.4em; color: #1c1c1c; font-size: 1.2em; font-weight: 700; }
.jv-rd-label { margin-top: 0.4em; color: #1c1c1c; font-size: 0.88em; font-weight: 600; }
.jv-rd-field { display: flex; align-items: center; min-height: 2.6em; padding: 0.35em 0.6em; border: 1px solid #c9d2d6; border-radius: 0.5em; color: #1c1c1c; }
.jv-rd-field.is-empty { color: #576f76; font-size: 0.9em; }
.jv-rd-chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3em 0.75em; border-radius: 999px; background: #e9f0ff; color: #1c1c1c; font-size: 0.88em; }
.jv-rd-chip em { color: #576f76; font-size: 0.85em; font-style: normal; }
.jv-rd-radio { display: inline-flex; align-items: center; gap: 0.55em; color: #1c1c1c; font-size: 0.92em; }
.jv-rd-radio i { width: 1em; height: 1em; border: 1.5px solid #8ba2ad; border-radius: 50%; }
.jv-rd-radio i.is-on { border: 0.32em solid #0a449b; }
.jv-rd-estimate { display: flex; align-self: start; flex-direction: column; gap: 0.55em; margin: 1em 1.2em 0 0; padding: 1.2em; border: 1px solid #e5ebee; border-radius: 0.8em; background: #fff; color: #1c1c1c; }
.jv-rd-estimate > b { font-size: 1.1em; font-weight: 700; }
.jv-rd-estimate em { color: #576f76; font-size: 0.85em; font-style: normal; }
.jv-rd-range { position: relative; height: 0.35em; margin-top: 1.9em; border-radius: 999px; background: linear-gradient(90deg, #e5ebee 0 36%, #2ea44f 36% 58%, #e5ebee 58%); }
.jv-rd-range b { position: absolute; left: 30%; bottom: 0.9em; padding: 0.2em 0.6em; border-radius: 999px; background: #1c1c1c; color: #fff; font-size: 0.82em; font-weight: 600; white-space: nowrap; }
.jv-rd-scale { display: flex; justify-content: space-between; }
.jv-rd-week { margin-top: 0.5em; font-size: 0.88em; }
.jv-rd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.jv-rd-kpis span { display: grid; gap: 0.15em; }
.jv-rd-kpis b { font-size: 1.05em; font-weight: 700; }
.jv-rd-adsfoot { display: flex; flex: none; align-items: center; justify-content: space-between; height: 3.8em; padding: 0 1.4em; border-top: 1px solid #e5ebee; color: #1c1c1c; font-weight: 600; }
.jv-rd-cta { padding: 0.55em 1.2em; border-radius: 999px; background: #1c1c1c; color: #fff; }
/* Reddit mobile feed + formats */
.jv-rd-phone { top: 6%; bottom: -5%; left: 22%; width: 27%; overflow: hidden; border: 0.5em solid #1c1c1c; border-bottom: 0; border-radius: 2.4em 2.4em 0 0; background: #fff; box-shadow: 0 28px 56px -22px rgba(38, 33, 85, 0.45); font-family: "IBM Plex Sans", Rubik, Arial, sans-serif; color: #1c1c1c; }
.jv-rd-phonebar { display: flex; align-items: center; gap: 0.5em; padding: 1.4em 1em 0.7em; border-bottom: 1px solid #edeff1; font-weight: 600; }
.jv-rd-phonebar .ui-logo { width: 1.5em; height: 1.5em; }
.jv-rd-post { display: grid; gap: 0.55em; padding: 0.9em 1em; border-bottom: 6px solid #edeff1; }
.jv-rd-by { display: inline-flex; align-items: center; gap: 0.4em; color: #576f76; font-size: 0.82em; }
.jv-rd-by i { width: 1.4em; height: 1.4em; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #19c2a0); }
.jv-rd-by em { font-style: normal; }
.jv-rd-ptitle { font-size: 1.12em; font-weight: 700; line-height: 1.3; }
.jv-rd-post p { margin: 0; font-size: 0.88em; line-height: 1.5; }
.jv-rd-diagram { display: flex; align-items: flex-end; gap: 0.7em; height: 6.5em; padding: 0.7em 1em; border: 1px solid #edeff1; border-radius: 0.6em; background: #fafbfc; }
.jv-rd-diagram i { flex: 1; border-radius: 0.25em 0.25em 0 0; background: #2f6bff; }
.jv-rd-diagram i:nth-child(2) { background: #ff4500; }
.jv-rd-actions { color: #576f76; font-size: 0.82em; }
.jv-rd-comments { display: grid; gap: 0.8em; padding: 0.9em 1em; }
.jv-rd-cmt { display: grid; gap: 0.2em; font-size: 0.86em; line-height: 1.45; }
.jv-rd-cmt b { display: inline-flex; align-items: center; gap: 0.4em; color: #576f76; font-size: 0.92em; font-weight: 600; }
.jv-rd-cmt em { padding: 0 0.35em; border-radius: 0.3em; background: #e9f0ff; color: #0a449b; font-size: 0.8em; font-style: normal; }
.jv-rd-cmt.is-reply { margin-left: 1em; padding-left: 0.9em; border-left: 2px solid #edeff1; }
.jv-rd-formats { top: 24%; right: 14%; display: grid; gap: 0.6em; width: 30%; padding: 1.1em 1.2em; }
.jv-rd-formats > b { color: var(--ui-900); font-weight: 500; }
.jv-rd-fmt { display: flex; align-items: center; gap: 0.75em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.6em; }
.jv-rd-fmt.is-on { border-color: #ffb199; background: #fff6f2; }
.jv-rd-fmt i { display: grid; flex: none; place-items: center; width: 2em; height: 2em; border-radius: 0.5em; background: #ff4500; color: #fff; font-style: normal; }
.jv-rd-fmt span { display: grid; }
.jv-rd-fmt b { color: var(--ui-900); font-weight: 500; }
.jv-rd-fmt em { color: var(--ui-700); font-size: 0.85em; font-style: normal; }
.jv-rd-note { color: var(--ui-700); font-size: 0.82em; }
/* Report artifacts (Paid Engagement, ABM Impact) */
.jv-rd-kicker { color: #8a9fa9; font-size: 0.85em; }
.jv-rd-rtitle { margin-top: -0.5em; color: var(--ui-900); font-size: 1.45em; font-weight: 500; }
.jv-rd-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55em; }
.jv-rd-tile { display: grid; gap: 0.15em; min-width: 0; padding: 0.65em 0.8em; border: 1px solid var(--ui-line); border-radius: 0.7em; }
.jv-rd-tile em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-rd-tile b { color: var(--ui-900); font-size: 1.3em; font-weight: 500; white-space: nowrap; }
.jv-rd-tile small { color: #8a9fa9; font-size: 0.6em; font-weight: 400; }
.jv-rd-card { display: grid; gap: 0.55em; padding: 0.9em 1.1em; border: 1px solid var(--ui-line); border-radius: 0.7em; }
.jv-rd-card > b { color: var(--ui-900); font-weight: 500; }
.jv-rd-sub { color: var(--ui-700); font-size: 0.85em; }
.jv-rd-stack { display: flex; gap: 2px; height: 1.4em; overflow: hidden; border-radius: 0.4em; background: #f1f3f6; }
.jv-rd-stack i, .jv-rd-band i { display: block; min-width: 0.5em; height: 100%; border-radius: 0.3em; }
.is-a { background: #3b5cff !important; }
.is-b { background: #99b0ff !important; }
.is-c { background: #ccd8ff !important; }
.is-n { background: #1c3399 !important; }
.jv-rd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.9em; color: var(--ui-700); font-size: 0.8em; }
.jv-rd-legend i { display: inline-block; width: 0.7em; height: 0.7em; margin-right: -0.5em; border-radius: 0.2em; background: #f1f3f6; }
.jv-rd-band { position: relative; display: flex; align-items: center; height: 1.4em; overflow: hidden; border-radius: 0.4em; background: #f1f3f6; }
.jv-rd-band i { position: absolute; inset: 0 auto 0 0; }
.jv-rd-bandrow { display: grid; grid-template-columns: 1fr 9.5em; align-items: center; gap: 0.8em; }
.jv-rd-bandrow em { color: var(--ui-700); font-size: 0.8em; font-style: normal; }
.jv-rd-card .jv-rd-tr { grid-template-columns: 1.6fr 1.1fr 0.8fr 0.9fr; }
.jv-rd-accts .jv-rd-tr { grid-template-columns: 1.3fr 1.7fr 0.9fr 0.8fr 0.9fr; }
.jv-rd-pills { display: inline-flex; gap: 0.3em; }
.jv-rd-pills i, .jv-rd-int { padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.85em; font-style: normal; font-weight: 500; }
.jv-rd-pills .is-green { background: #dcf2e3; color: #1f7340; }
.jv-rd-pills .is-blue { background: #e0eaff; color: #1c3399; }
.jv-rd-int.is-hot { background: #ffe0db; color: #b32e1f; }
.jv-rd-int.is-warm { background: #fff0d1; color: #996105; }
.jv-rd-int.is-cold { background: #f1f3f6; color: var(--ui-700); }
/* Phones and other portrait frames: the artifact or preview alone. */
@container (max-aspect-ratio: 1 / 1) {
  .jv-rd-app { left: 4%; right: 4%; top: 5%; }
  .jv-rd-app .jv-rd-rail, .jv-rd-app .jv-rd-chat { display: none; }
  /* No chat to wait for: the panel is there from the start; its contents still build in. */
  .jv-sequenced.is-playing .jv-rd-side.jv-seq { animation-delay: 0s; }
  .jv-sequenced.is-playing .jv-rd-side .jv-seq { animation-delay: calc((var(--i) - 2.2) * 0.55s + 0.15s); }
  .jv-rd-side { margin: 0; border: 0; border-radius: 0; }
  .jv-rd-tiles { grid-template-columns: repeat(3, 1fr); }
  .jv-rd-tiles .jv-rd-tile:nth-child(n + 4) { display: none; }
  .jv-rd-people .jv-rd-tr { grid-template-columns: 1.4fr 1.4fr 1fr; }
  .jv-rd-people .jv-rd-tr > :nth-child(3) { display: none; }
  .jv-rd-accts .jv-rd-tr { grid-template-columns: 1.3fr 1.8fr 1fr; }
  .jv-rd-accts .jv-rd-tr > :nth-child(n + 4) { display: none; }
  /* Phones: counts + Apply & run on top, then filters and destinations (no breakdown bars). */
  .jv-rd-editor { flex-direction: column; }
  .jv-rd-editor .jv-rd-sum { order: -1; flex: none; padding: 0.8em 1em 0; }
  .jv-rd-editor .jv-rd-sum .jv-rd-bars, .jv-rd-editor .jv-rd-tabs, .jv-rd-editor .jv-rd-enrich { display: none; }
  .jv-rd-editor .jv-rd-sumstrip { gap: 0.9em; padding-bottom: 0.8em; }
  .jv-rd-edit { width: auto; flex: 1; border-right: 0; }
  .jv-rd-synced { left: 8%; right: 8%; bottom: 6%; width: auto; }
  .jv-rd-adsbody { grid-template-columns: 1fr; }
  .jv-rd-tree, .jv-rd-estimate { display: none; }
  .jv-rd-phone { left: 6%; width: 62%; }
  .jv-rd-ads { bottom: 4%; }
  .jv-rd-formats { top: auto; bottom: 8%; right: 4%; width: 50%; }
}

/* Reddit play walkthroughs: Arcade-style cursor, highlight and numbered tip over the
   control each step uses (positions set inline by WalkCursor). */
.jv-walk { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.jv-walk-ring { position: absolute; border: 2px solid #6b5fc7; border-radius: 0.6em; box-shadow: 0 0 0 4px rgba(107, 95, 199, 0.18); }
.jv-walk-cursor { position: absolute; width: 1.6em; height: 1.6em; fill: #1c1c1c; stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.jv-walk-tip { position: absolute; z-index: 5; max-width: 46%; padding: 0.6em 0.85em; border-radius: 0.6em; background: #2a2266; color: #fff; font-size: 1em; font-weight: 500; line-height: 1.35; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 28px -8px rgba(28, 22, 70, 0.7); }
.jv-walk-tip b { margin-right: 0.35em; padding: 0.05em 0.45em; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-weight: 600; white-space: nowrap; }
.jv-rd-apply { margin-left: auto; padding: 0.5em 1.1em; border-radius: 0.55em; background: #1c1c1c; color: #fff; font-weight: 500; white-space: nowrap; }
.jv-rd-apply.is-done { background: #e7f6ee; color: #1f7a4d; }
.jv-rd-apply svg { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.jv-rd-modal { inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(28, 24, 64, 0.28); }
.jv-rd-dialog { display: grid; gap: 0.7em; width: 42%; padding: 1.3em 1.5em; border-radius: 0.9em; background: #fff; box-shadow: 0 24px 48px -18px rgba(28, 24, 64, 0.5); color: var(--ui-700); font-size: 0.95em; }
.jv-rd-dialog b { color: var(--ui-900); font-size: 1.1em; font-weight: 500; }
.jv-rd-dialog em { color: var(--ui-900); font-style: normal; font-weight: 500; }
.jv-rd-dlgbtns { display: flex; justify-content: flex-end; align-items: center; gap: 1em; margin-top: 0.3em; }
.jv-rd-more { align-self: flex-start; padding: 0.3em 0; color: #0045ac; font-weight: 600; }
.jv-rd-field { position: relative; }
.jv-rd-field.is-focus { border-color: #0045ac; box-shadow: 0 0 0 2px rgba(0, 69, 172, 0.15); }
.jv-rd-ph { color: #8a9ba1; font-size: 0.9em; font-style: normal; }
.jv-rd-menu { position: absolute; top: calc(100% + 0.3em); left: 0; right: 0; z-index: 5; display: grid; padding: 0.35em; border: 1px solid #c9d2d6; border-radius: 0.5em; background: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3); }
.jv-rd-menu > span { display: flex; justify-content: space-between; gap: 1em; padding: 0.45em 0.6em; border-radius: 0.35em; font-size: 0.9em; }
.jv-rd-menu > span.is-on { background: #e9f0ff; }
.jv-rd-menu em { color: #576f76; font-size: 0.85em; font-style: normal; }
.jv-rd-cta.is-done { background: #1f7a4d; }
.jv-rd-video { position: relative; display: grid; place-items: center; height: 11em; border-radius: 0.6em; background: linear-gradient(160deg, #1d2329, #0e1114); color: #9fb0b8; font-size: 0.8em; }
.jv-rd-video > i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1c1c1c; font-size: 1.1em; font-style: normal; }
.jv-rd-video > em { position: absolute; right: 0.7em; bottom: 0.6em; padding: 0.1em 0.45em; border-radius: 0.3em; background: rgba(0, 0, 0, 0.6); color: #fff; font-style: normal; }
.jv-rd-video > span { position: absolute; left: 0.8em; top: 0.7em; font-family: ui-monospace, Menlo, monospace; }
.jv-rd-link { display: flex; align-items: center; gap: 0.8em; padding: 0.6em; border: 1px solid #edeff1; border-radius: 0.6em; }
.jv-rd-link > span:last-child { display: grid; gap: 0.2em; font-size: 0.85em; }
.jv-rd-link em { color: #0045ac; font-style: normal; }
.jv-rd-diagram.is-small { flex: none; width: 5.5em; height: 4em; padding: 0.4em; gap: 0.3em; }
.jv-rd-sumstrip .jv-rd-apply svg { color: inherit; }
.jv-rd-apply.is-done svg { width: 0.9em; height: 0.9em; }

/* ---------- LinkedIn play (/plays/primer-linkedin): Campaign Manager screens ---------- */
.jv-li-app { top: 5%; bottom: 5%; left: 3%; right: 3%; display: flex; flex-direction: column; background: #fff; color: #1d2226; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.jv-li-bar { display: flex; flex: none; align-items: center; gap: 0.6em; height: 3.2em; padding: 0 1.3em; border-bottom: 1px solid #e8e8e8; }
.jv-li-logo { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.25em; background: #0a66c2; color: #fff; font-weight: 700; font-size: 0.95em; }
.jv-li-product { color: #0a66c2; font-size: 1.15em; }
.jv-li-product i { margin: 0 0.15em; color: #8c8c8c; font-style: normal; }
.jv-li-acct { margin-left: auto; color: #404040; font-size: 0.9em; }
.jv-li-head { display: flex; flex: none; align-items: center; gap: 1em; padding: 0.9em 1.4em 0.4em; }
.jv-li-head > b { margin-right: auto; font-size: 1.2em; font-weight: 600; }
.jv-li-saved { color: #404040; font-size: 0.9em; }
.jv-li-btn { padding: 0.45em 1.1em; border-radius: 999px; background: #0a66c2; color: #fff; font-weight: 600; font-size: 0.92em; white-space: nowrap; }
.jv-li-btn.is-ghost { border: 1px solid #404040; background: #fff; color: #404040; }
.jv-li-btn.is-done { background: #057642; }
.jv-li-tabs { display: flex; flex: none; gap: 1.6em; padding: 0 1.4em; border-bottom: 1px solid #e8e8e8; color: #404040; }
.jv-li-tabs span { padding: 0.7em 0.1em; border-bottom: 2px solid transparent; }
.jv-li-tabs span.is-on { border-color: #1d2226; color: #1d2226; font-weight: 600; }
.jv-li-body { display: flex; flex: 1; gap: 1em; min-height: 0; padding: 1em 1.4em; background: #f4f2ee; }
.jv-li-main { display: flex; flex: 1; flex-direction: column; gap: 0.8em; min-width: 0; }
.jv-li-card { display: grid; gap: 0.7em; padding: 1em 1.2em; border: 1px solid #e0dfdc; border-radius: 0.6em; background: #fff; }
.jv-li-card > b { font-size: 1em; font-weight: 600; }
.jv-li-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; color: #404040; font-size: 0.88em; }
.jv-li-stats b { display: block; color: #1d2226; font-size: 1.15em; }
.jv-li-stats strong, .jv-li-rule strong { color: #1d2226; }
.jv-li-locs { display: grid; gap: 0.4em; font-size: 0.88em; }
.jv-li-locs span { display: flex; justify-content: space-between; }
.jv-li-locs em { color: #404040; font-style: normal; }
.jv-li-table { display: grid; padding: 0.4em 1.2em; border: 1px solid #e0dfdc; border-radius: 0.6em; background: #fff; }
.jv-li-tr { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; align-items: center; gap: 1em; padding: 0.55em 0.3em; border-bottom: 1px solid #ececec; font-size: 0.9em; }
.jv-li-tr.is-head { color: #1d2226; font-weight: 600; }
.jv-li-tr > span:nth-child(2) { text-align: right; }
.jv-li-tr.is-off { background: #fff1ee; }
.jv-li-tr.is-off > span:first-child::after { content: " · outside ICP"; color: #b24020; font-size: 0.85em; }
.jv-li-pct { display: flex; align-items: center; gap: 0.4em; }
.jv-li-pct i { height: 0.8em; border-radius: 0.1em; background: #0a66c2; }
.jv-li-target { display: flex; flex: none; flex-direction: column; gap: 0.6em; width: 36%; padding: 1em 1.1em; border: 1px solid #e0dfdc; border-radius: 0.6em; background: #fff; }
.jv-li-target > b { font-weight: 600; }
.jv-li-rule { display: grid; gap: 0.3em; padding: 0.75em 0.9em; border-radius: 0.5em; background: #f3f2ef; color: #404040; font-size: 0.88em; }
.jv-li-rule em { font-style: normal; }
.jv-li-rule b { color: #1d2226; font-weight: 600; }
.jv-li-size { margin-top: auto; color: #404040; font-size: 0.9em; }
.jv-li-size b { color: #1d2226; }
/* A/B test setup */
.jv-li-test { bottom: 4%; flex-direction: row; background: #f4f2ee; }
.jv-li-nav { display: flex; flex: none; flex-direction: column; gap: 0.35em; width: 16%; padding: 1.1em 1em; border-right: 1px solid #e0dfdc; background: #fff; color: #404040; font-size: 0.88em; }
.jv-li-nav b { margin-bottom: 0.5em; color: #1d2226; font-size: 1.05em; }
.jv-li-nav em { margin-top: 0.6em; color: #1d2226; font-style: normal; font-weight: 600; }
.jv-li-nav span { padding-left: 0.5em; }
.jv-li-nav span.is-on { color: #0a66c2; font-weight: 600; }
.jv-li-form { position: relative; display: flex; flex: 1; flex-direction: column; gap: 0.8em; min-width: 0; padding: 1em; }
.jv-li-sets { display: grid; }
.jv-li-sets .jv-li-tr { grid-template-columns: 1.7fr 0.8fr 1fr; }
.jv-li-input { padding: 0.5em 0.7em; border: 1px solid #8c8c8c; border-radius: 0.35em; text-align: left !important; }
.jv-li-input em { color: #8c8c8c; font-style: normal; }
.jv-li-input.is-focus { border-color: #0a66c2; box-shadow: 0 0 0 1px #0a66c2; }
.jv-li-audhead { display: flex; align-items: center; gap: 1.2em; }
.jv-li-audhead b { font-size: 1.05em; font-weight: 600; }
.jv-li-link { color: #0a66c2; font-weight: 600; }
.jv-li-card { position: relative; }
.jv-li-menu { position: absolute; top: 3em; left: 7em; z-index: 5; display: grid; width: 55%; padding: 0.5em 0; border-radius: 0.5em; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 0.92em; }
.jv-li-menu em { padding: 0.3em 1em; color: #666; font-size: 0.85em; font-style: normal; }
.jv-li-menu span { padding: 0.55em 1em; }
.jv-li-menu span.is-on { background: #eef3f8; }
.jv-li-chosen { padding: 0.6em 0.8em; border-radius: 0.45em; background: #f3f2ef; font-size: 0.9em; }
.jv-li-chosen em { color: #666; font-style: normal; }
.jv-li-check { display: flex; align-items: center; gap: 0.6em; font-size: 0.92em; }
.jv-li-check i { display: grid; place-items: center; width: 1.2em; height: 1.2em; border: 1.5px solid #404040; border-radius: 0.2em; }
.jv-li-check i.is-on { border-color: #0a66c2; background: #0a66c2; color: #fff; }
.jv-li-check svg { width: 0.85em; height: 0.85em; }
.jv-li-kv { display: flex; justify-content: space-between; gap: 1em; font-size: 0.9em; }
.jv-li-kv em { color: #666; font-style: normal; }
.jv-li-kv strong { font-weight: 500; text-align: right; }
.jv-li-next { display: flex; justify-content: flex-end; margin-top: auto; }
.jv-li-summary { display: flex; flex: none; flex-direction: column; gap: 0.25em; width: 24%; margin: 1em 1em 1em 0; padding: 1em 1.1em; border-radius: 0.6em; background: #fff; color: #404040; font-size: 0.86em; }
.jv-li-summary > b { margin-bottom: 0.4em; color: #1d2226; font-size: 1.15em; font-weight: 600; }
.jv-li-summary em { margin-top: 0.5em; font-style: normal; }
.jv-li-summary strong { color: #1d2226; font-weight: 600; }
.jv-li-summary span { margin-top: 0.3em; }
/* Primer build step */
.jv-li-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.jv-li-chips i { padding: 0.25em 0.6em; border-radius: 999px; background: #fdecea; color: #a12b1d; font-size: 0.85em; font-style: normal; }
.jv-li-chips em { color: #8a9ba1; font-size: 0.9em; font-style: normal; }
.jv-li-titlebar.is-gone em { color: #a12b1d; text-decoration: line-through; }
.jv-li-titlebar.is-gone b { color: #a12b1d; font-weight: 500; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-li-app { left: 4%; right: 4%; top: 5%; }
  .jv-li-target, .jv-li-nav, .jv-li-summary, .jv-li-head .jv-li-saved, .jv-li-head .is-ghost { display: none; }
  .jv-li-tr { grid-template-columns: 1.6fr 1fr 1fr; font-size: 0.85em; }
}
.jv-li-newrule { display: block; margin-top: 0.15em; padding: 0.15em 0.4em; border-radius: 0.35em; background: #fdecea; }
.jv-li-addrule { display: inline-block; margin-top: 0.5em; color: #3e63dd; font-weight: 600; }
/* Audience page (Figma 2101:23382): estimate + CRM metric tiles, then History. */
.jv-au-row { display: grid; grid-template-columns: auto 1fr; gap: 0.55em; }
.jv-au-row.is-funnel { grid-template-columns: repeat(4, 1fr) auto; }
.jv-au-tile { display: grid; gap: 0.35em; min-width: 0; padding: 0.7em 0.9em; border: 1px solid var(--ui-line); border-radius: 0.7em; }
.jv-au-tile em { color: #8a9fa9; font-size: 0.82em; font-style: normal; white-space: nowrap; }
.jv-au-tile b { display: flex; align-items: center; justify-content: flex-start; gap: 0.45em; color: var(--ui-900); font-size: 1.15em; font-weight: 500; white-space: nowrap; }
.jv-au-row.is-funnel .jv-au-tile b { justify-content: space-between; }
.jv-au-tile svg, .jv-au-tile .ui-logo { width: 0.95em; height: 0.95em; color: var(--ui-700); }
.jv-au-tile small { color: #8a9fa9; font-size: 0.62em; font-weight: 400; }
.jv-au-tile small strong { color: var(--ui-900); font-weight: 500; }
.jv-au-tile.is-range { text-align: right; }
.jv-au-tile.is-range b { font-size: 1em; font-weight: 400; }
.jv-au-tabs { display: inline-flex; align-self: flex-start; gap: 0.2em; padding: 0.2em; border: 1px solid var(--ui-line); border-radius: 0.7em; font-size: 0.9em; color: var(--ui-700); }
.jv-au-tabs span { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.7em; border-radius: 0.5em; }
.jv-au-tabs .is-on { background: #eef2ff; color: #3e63dd; }
.jv-au-tabs svg { width: 0.95em; height: 0.95em; }
.jv-au-history .jv-rd-tr { grid-template-columns: 7em 1fr 6.5em; align-items: start; }
.jv-au-type { display: inline-block; padding: 0.1em 0.55em; border: 1px solid #c9b8f5; border-radius: 999px; color: #6b3fd6; font-size: 0.85em; font-style: normal; white-space: nowrap; }
.jv-au-type.is-crit { border-color: #f3c38c; color: #c36a00; }
.jv-au-sum { display: grid; gap: 0.35em; }
.jv-au-size { display: inline-flex; align-items: center; gap: 0.35em; }
.jv-au-size svg, .jv-au-size .ui-logo { width: 1em; height: 1em; color: var(--ui-700); }
.jv-au-size small { color: #2f9e6a; font-size: 0.82em; }
.jv-au-size small.is-down { color: #8a9fa9; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-au-row, .jv-au-row.is-funnel { grid-template-columns: 1fr 1fr; }
  .jv-au-tile.is-range { display: none; }
  .jv-au-history .jv-rd-tr { grid-template-columns: 6.5em 1fr; }
  .jv-au-history .jv-rd-tr > :nth-child(3) { display: none; }
}
/* Meta play (Ads Manager + Experiments, from the play's walkthroughs). */
.jv-me-added { padding: 0 0.2em; border-radius: 0.25em; background: #e6f4ea; color: #1e6b3a; font-style: italic; }
.jv-me-low { color: #b24020; }
.jv-me-low i { margin-left: 0.4em; padding: 0.05em 0.45em; border-radius: 999px; background: #fdecea; font-size: 0.8em; font-style: normal; }
.jv-me-app { top: 5%; bottom: 5%; left: 3%; right: 3%; display: flex; flex-direction: row; background: #f0f2f5; color: #1c2b33; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.jv-me-rail { display: flex; flex: none; flex-direction: column; align-items: center; gap: 0.95em; width: 3em; padding: 0.9em 0; background: #1c2b33; }
.jv-me-rail .ui-logo { width: 1.5em; height: 1.5em; padding: 0.15em; border-radius: 0.35em; background: #fff; }
.jv-me-rail i { width: 1.15em; height: 1.15em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.28); }
.jv-me-rail i.is-on { background: #fff; }
.jv-me-tree { display: flex; flex: none; flex-direction: column; width: 22%; padding: 0.6em 0; border-right: 1px solid #dadde1; background: #fff; font-size: 0.9em; }
.jv-me-tree > span { display: flex; align-items: center; gap: 0.55em; overflow: hidden; padding: 0.65em 0.9em; white-space: nowrap; text-overflow: ellipsis; }
.jv-me-tree > span.is-on { background: #e7f0fe; box-shadow: inset 3px 0 0 #0866ff; font-weight: 600; }
.jv-me-tree > span.is-ad { padding-left: 1.9em; }
.jv-me-ic { flex: none; width: 0.9em; height: 0.9em; border: 1.5px solid #65676b; border-radius: 0.15em; }
.jv-me-ic.is-set { border: 0; background: linear-gradient(90deg, #0866ff 45%, transparent 45% 55%, #0866ff 55%); }
.jv-me-main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; }
.jv-me-crumbs { display: flex; flex: none; align-items: center; gap: 0.4em; overflow: hidden; padding: 0.8em 1.1em; border-bottom: 1px solid #dadde1; background: #fff; color: #65676b; font-size: 0.88em; white-space: nowrap; }
.jv-me-crumbs b { color: #0866ff; font-weight: 600; }
.jv-me-exp .jv-me-crumbs b { color: #1c2b33; font-size: 1.15em; }
.jv-me-form { display: flex; flex: 1; flex-direction: column; gap: 0.7em; overflow: hidden; padding: 0.8em 1.1em; }
.jv-me-card { position: relative; display: flex; flex-direction: column; gap: 0.55em; padding: 0.9em 1.1em; border-radius: 0.6em; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.jv-me-card > b, .jv-me-cardhead b { font-size: 1.05em; font-weight: 700; }
.jv-me-card > em, .jv-me-field > em, .jv-me-kv em, .jv-me-menu > em { color: #65676b; font-size: 0.85em; font-style: normal; font-weight: 600; }
.jv-me-cardhead { display: flex; align-items: center; justify-content: space-between; }
.jv-me-badge { padding: 0.15em 0.6em; border-radius: 999px; background: #e6f4ea; color: #1e6b3a; font-size: 0.82em; font-weight: 600; }
.jv-me-badge.is-off { background: #eceff2; color: #444950; }
.jv-me-check { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.92em; }
.jv-me-check i { display: grid; place-items: center; width: 1em; height: 1em; border: 1.5px solid #8a8d91; border-radius: 0.2em; }
.jv-me-check i.is-on { border-color: #0866ff; background: #0866ff; color: #fff; }
.jv-me-check svg { width: 0.75em; height: 0.75em; }
.jv-me-radios { display: flex; align-self: flex-start; gap: 1.2em; }
.jv-me-radios.is-col { flex-direction: column; gap: 0.4em; }
.jv-me-radios > span { display: inline-flex; align-items: center; gap: 0.45em; }
.jv-me-radios i, .jv-me-opt > i { flex: none; width: 1em; height: 1em; border: 1.5px solid #8a8d91; border-radius: 50%; }
.jv-me-radios .is-on i, .jv-me-opt.is-on > i { border: 0.3em solid #0866ff; }
.jv-me-field { position: relative; display: flex; flex-direction: column; gap: 0.3em; }
.jv-me-field small { color: #65676b; font-size: 0.8em; }
.jv-me-input { display: flex; align-items: center; gap: 0.45em; padding: 0.5em 0.75em; border: 1px solid #ccd0d5; border-radius: 0.4em; background: #fff; color: #65676b; }
.jv-me-input.is-set { border-color: #31a24c; color: #1c2b33; }
.jv-me-input svg { width: 0.9em; height: 0.9em; }
.jv-me-input.is-set svg { margin-left: auto; color: #31a24c; }
.jv-me-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5em; padding: 0.35em 0.7em; border-radius: 0.4em; background: #e7f0fe; color: #0a4fc4; font-weight: 600; }
.jv-me-chip i { color: #65676b; font-style: normal; }
.jv-me-menu { position: absolute; z-index: 3; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; margin-top: 0.3em; padding: 0.35em; border-radius: 0.5em; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.jv-me-menu > span { display: flex; flex-direction: column; padding: 0.5em 0.6em; border-radius: 0.35em; color: #65676b; font-size: 0.85em; }
.jv-me-menu > span b { color: #1c2b33; font-size: 1.08em; font-weight: 600; }
.jv-me-menu > span.is-on { background: #f0f2f5; }
.jv-me-menu > em { padding: 0.3em 0.6em; }
.jv-me-kv { display: flex; gap: 0.6em; font-size: 0.92em; }
.jv-me-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.jv-rd-sumstrip .jv-me-low { white-space: nowrap; }
.jv-me-suggest { color: #444950; font-size: 0.88em; line-height: 1.4; }
.jv-me-suggest b { display: block; color: #1c2b33; }
.jv-me-limit { align-self: flex-start; padding: 0.5em 0.9em; border-radius: 0.4em; background: #eceff2; font-weight: 600; font-size: 0.92em; }
.jv-me-limit.is-done { background: #e7f0fe; color: #0a4fc4; }
.jv-me-foot { display: flex; flex: none; align-items: center; gap: 0.8em; padding: 0.7em 1.1em; border-top: 1px solid #dadde1; background: #fff; }
.jv-me-saved { display: inline-flex; align-items: center; gap: 0.35em; margin-right: auto; color: #31a24c; font-size: 0.88em; }
.jv-me-saved svg { width: 0.9em; height: 0.9em; }
.jv-me-btn { padding: 0.5em 1.1em; border-radius: 0.4em; background: #0866ff; color: #fff; font-weight: 600; font-size: 0.92em; white-space: nowrap; }
.jv-me-btn.is-ghost { border: 1px solid #ccd0d5; background: #fff; color: #1c2b33; }
.jv-me-btn.is-done { background: #31a24c; }
.jv-me-exp .jv-me-foot .is-ghost { margin-left: auto; }
.jv-me-side { display: flex; flex: none; flex-direction: column; gap: 0.6em; width: 24%; padding: 1em; border-left: 1px solid #dadde1; background: #fff; font-size: 0.9em; }
.jv-me-side > b { font-size: 1.05em; }
.jv-me-side .jv-me-kv { flex-direction: column; gap: 0.15em; }
.jv-me-gauge { position: relative; height: 0.45em; margin-top: 0.4em; border-radius: 999px; background: linear-gradient(90deg, #31a24c, #f7b928 55%, #e4513c); }
.jv-me-gauge i { position: absolute; top: -0.3em; width: 0.25em; height: 1.05em; margin-left: -0.12em; border-radius: 0.1em; background: #1c2b33; transition: left 0.5s ease; }
.jv-me-gaugel { display: flex; justify-content: space-between; color: #65676b; font-size: 0.82em; }
.jv-me-gaugel em { font-style: normal; }
.jv-me-note { color: #444950; font-size: 0.88em; line-height: 1.4; }
.jv-me-modal { position: absolute; z-index: 4; top: 18%; left: 26%; right: 20%; display: flex; flex-direction: column; gap: 0.6em; padding: 1.1em; border-radius: 0.7em; background: #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.25); }
.jv-me-modal > b { font-size: 1.1em; }
.jv-me-opt { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.5em; background: #f5f6f7; color: #444950; font-size: 0.86em; line-height: 1.35; }
.jv-me-opt.is-on { background: #e7f0fe; }
.jv-me-opt b { display: block; color: #1c2b33; font-size: 1.08em; }
.jv-me-modalfoot { display: flex; justify-content: flex-end; gap: 0.6em; }
.jv-me-expnav { display: flex; flex: none; flex-direction: column; gap: 0.3em; width: 18%; padding: 1em 0.7em; border-right: 1px solid #dadde1; background: #fff; font-size: 0.92em; }
.jv-me-expnav b { margin-bottom: 0.5em; font-size: 1.15em; }
.jv-me-expnav span { padding: 0.5em 0.6em; border-radius: 0.4em; }
.jv-me-expnav .is-on { background: #e7f0fe; color: #0a4fc4; font-weight: 600; }
.jv-me-ctable .jv-rd-tr { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-me-app { left: 4%; right: 4%; top: 5%; }
  .jv-me-tree, .jv-me-side, .jv-me-expnav, .jv-me-saved { display: none; }
  .jv-me-rail { width: 2.4em; }
  .jv-me-modal { left: 8%; right: 8%; }
  .jv-me-exp .jv-me-foot .is-ghost { margin-left: auto; }
  .jv-me-foot { justify-content: flex-end; }
  .jv-me-ctable .jv-rd-tr { grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: 0.9em; }
  .jv-rd-sumstrip .jv-me-low i { display: none; }
}
/* Search Exclusion play (Google Ads, from the play's walkthroughs). */
.jv-se-rule { display: block; }
.jv-se-rule.is-new { margin-top: 0.15em; padding: 0 0.3em; border-radius: 0.3em; background: #e6f4ea; }
.jv-se-empty { color: var(--ui-500, #8a9fa9); }
.jv-li-addrule.is-search { display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.6em; border: 1px solid #b9c8ff; border-radius: 0.45em; background: #fff; color: var(--ui-900); font-weight: 400; }
.jv-li-addrule.is-search svg { width: 0.9em; height: 0.9em; }
.jv-li-addrule.is-search i { margin-left: auto; color: #3e63dd; font-style: normal; font-weight: 600; }
.jv-ga-app { top: 5%; bottom: 5%; left: 3%; right: 3%; display: flex; flex-direction: column; background: #f8f9fa; color: #202124; font-family: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.jv-ga-bar { display: flex; flex: none; align-items: center; gap: 0.5em; height: 3em; padding: 0 1.1em; border-bottom: 1px solid #dadce0; background: #fff; }
.jv-ga-bar .ui-logo { width: 1.3em; height: 1.3em; }
.jv-ga-name { color: #5f6368; font-size: 1.15em; }
.jv-ga-acct { margin-left: auto; color: #5f6368; font-size: 0.85em; }
.jv-ga-body { display: flex; flex: 1; min-height: 0; }
.jv-ga-nav { display: flex; flex: none; flex-direction: column; gap: 0.15em; width: 17%; padding: 0.8em 0; border-right: 1px solid #dadce0; background: #fff; font-size: 0.9em; }
.jv-ga-nav span { padding: 0.55em 1em; color: #3c4043; }
.jv-ga-nav .is-on { border-radius: 0 999px 999px 0; background: #e8f0fe; color: #1967d2; font-weight: 500; }
.jv-ga-main { display: flex; flex: 1; flex-direction: column; gap: 0.7em; min-width: 0; overflow: hidden; padding: 0.9em 1.3em; }
.jv-ga-crumb { color: #5f6368; font-size: 0.85em; }
.jv-ga-crumb b { color: #1967d2; font-weight: 500; }
.jv-ga-title { font-size: 1.25em; font-weight: 400; }
.jv-ga-tabs { display: flex; gap: 1.4em; border-bottom: 1px solid #dadce0; font-size: 0.92em; }
.jv-ga-tabs span { padding: 0.4em 0.1em 0.55em; color: #5f6368; }
.jv-ga-tabs .is-on { box-shadow: inset 0 -3px 0 #1a73e8; color: #1967d2; font-weight: 500; }
.jv-ga-card { display: flex; flex-direction: column; gap: 0.35em; padding: 0.8em 1em; border: 1px solid #dadce0; border-radius: 0.5em; background: #fff; }
.jv-ga-search { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.75em; border-bottom: 2px solid #1a73e8; background: #f1f3f4; color: #3c4043; }
.jv-ga-search svg { width: 0.95em; height: 0.95em; }
.jv-ga-group { margin-top: 0.3em; color: #5f6368; font-size: 0.8em; font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.jv-ga-opt { display: flex; align-items: center; gap: 0.7em; padding: 0.45em 0.3em; border-radius: 0.3em; color: #5f6368; font-size: 0.85em; }
.jv-ga-opt > span { display: flex; flex-direction: column; }
.jv-ga-opt b { color: #202124; font-size: 1.08em; font-weight: 400; }
.jv-ga-opt i { display: grid; flex: none; place-items: center; width: 1.05em; height: 1.05em; border: 2px solid #5f6368; border-radius: 0.15em; color: #fff; }
.jv-ga-opt.is-on { background: #e8f0fe; }
.jv-ga-opt.is-on i { border-color: #1a73e8; background: #1a73e8; }
.jv-ga-opt svg { width: 0.75em; height: 0.75em; }
.jv-ga-selected em { color: #5f6368; font-size: 0.85em; font-style: normal; }
.jv-ga-selected b { font-weight: 500; }
.jv-ga-selected span { color: #80868b; font-size: 0.9em; }
.jv-ga-actions { display: flex; justify-content: flex-end; gap: 0.6em; margin-top: auto; }
.jv-ga-btn { padding: 0.5em 1.2em; border-radius: 0.3em; background: #1a73e8; color: #fff; font-weight: 500; font-size: 0.92em; white-space: nowrap; }
.jv-ga-btn.is-ghost { background: transparent; color: #1a73e8; }
.jv-ga-btn.is-done { background: #188038; }
.jv-ga-form { gap: 0.55em; }
.jv-ga-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 1em; align-items: start; padding: 0.75em 1em; border: 1px solid #dadce0; border-radius: 0.5em; background: #fff; }
.jv-ga-row > em { font-style: normal; font-weight: 500; }
.jv-ga-row > span { display: flex; flex-direction: column; gap: 0.35em; }
.jv-ga-row small { color: #5f6368; font-size: 0.82em; }
.jv-ga-row b { font-weight: 500; }
.jv-ga-row .jv-ga-inline { flex-direction: row; align-items: center; gap: 0.6em; color: #5f6368; font-size: 0.9em; }
.jv-ga-input { padding: 0.35em 0.7em; border: 1px solid #80868b; border-radius: 0.25em; color: #202124; white-space: nowrap; }
.jv-ga-goals { flex-direction: row !important; flex-wrap: wrap; gap: 0.5em !important; }
.jv-ga-goals > span:not(.jv-ga-input) { padding: 0.3em 0.7em; border-radius: 999px; background: #e8f0fe; color: #1967d2; font-size: 0.88em; }
.jv-ga-goals b { margin-right: 0.3em; }
.jv-ga-slider { position: relative; width: 55%; height: 0.25em; margin: 0.4em 0; border-radius: 999px; background: linear-gradient(90deg, #1a73e8 50%, #c6dafc 50%); }
.jv-ga-slider i { position: absolute; top: 50%; left: 50%; width: 0.9em; height: 0.9em; border-radius: 50%; background: #1a73e8; transform: translate(-50%, -50%); }
.jv-ga-radios { display: flex; gap: 1.3em; font-size: 0.9em; }
.jv-ga-radios > span { display: inline-flex; align-items: center; gap: 0.45em; }
.jv-ga-radios i { width: 1em; height: 1em; border: 2px solid #5f6368; border-radius: 50%; }
.jv-ga-radios .is-on i { border: 0.3em solid #1a73e8; }
.jv-ga-exphead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.8em; align-self: flex-start; }
.jv-ga-exphead small { flex-basis: 100%; color: #5f6368; font-size: 0.85em; }
.jv-ga-status { padding: 0.1em 0.55em; border-radius: 0.3em; background: #e6f4ea; color: #137333; font-size: 0.85em; }
.jv-ga-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; }
.jv-ga-score { display: flex; flex-direction: column; gap: 0.2em; padding: 0.75em 0.9em; border: 1px solid #dadce0; border-radius: 0.5em; background: #fff; }
.jv-ga-score em { color: #5f6368; font-size: 0.85em; font-style: normal; }
.jv-ga-score b { font-size: 1.45em; font-weight: 400; }
.jv-ga-score b.is-good, .jv-ga-tr .is-good { color: #137333; }
.jv-ga-score small { color: #80868b; font-size: 0.75em; }
.jv-ga-table { gap: 0; padding: 0.3em 1em; }
.jv-ga-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 0.55em 0; border-bottom: 1px solid #f1f3f4; font-size: 0.9em; }
.jv-ga-tr:last-child { border-bottom: 0; }
.jv-ga-apply { flex-direction: row; align-items: center; justify-content: space-between; }
.jv-ga-apply > span:first-child { display: flex; flex-direction: column; gap: 0.15em; }
.jv-ga-apply small { color: #5f6368; font-size: 0.82em; }
.jv-ga-apply b { font-weight: 500; }
.jv-ga-tr.is-head { color: #5f6368; font-size: 0.8em; font-weight: 500; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ga-app { left: 4%; right: 4%; }
  .jv-ga-nav, .jv-ga-acct { display: none; }
  .jv-ga-row { grid-template-columns: 1fr; gap: 0.4em; }
  .jv-ga-scores { grid-template-columns: 1fr 1fr; }
  .jv-ga-table, .jv-ga-extra { display: none; }
}
/* ABM Ads Aircover play: holdout box, cross-channel pickers, Conversion Map. */
.jv-ac-li .jv-rd-check { margin-left: 0.4em; }
.jv-ac-seg { display: inline-flex; margin-left: auto; padding: 0.1em; border: 1px solid var(--ui-line); border-radius: 0.4em; background: #fff; font-size: 0.78em; }
.jv-ac-seg span { padding: 0.15em 0.5em; border-radius: 0.3em; color: var(--ui-700); }
.jv-ac-seg .is-on { background: #eef2ff; color: #3e63dd; font-weight: 500; }
.jv-ac-holdout span { color: var(--ui-700); font-size: 0.88em; line-height: 1.45; }
.jv-ac-holdout span b { color: var(--ui-900); font-weight: 500; }
.jv-ac-launch { top: 5%; bottom: 5%; left: 3%; right: 3%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8em; padding: 0.8em; background: #f4f5f7; }
.jv-ac-plat { position: relative; display: flex; flex-direction: column; gap: 0.4em; min-width: 0; padding: 0.9em 1em; border: 1px solid var(--ui-line); border-radius: 0.7em; background: #fff; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: box-shadow 0.3s; }
.jv-ac-plat.is-active { box-shadow: 0 6px 20px -8px rgba(38, 33, 85, 0.35); }
.jv-ac-plathead { display: flex; align-items: center; gap: 0.5em; }
.jv-ac-plathead .ui-logo { width: 1.2em; height: 1.2em; }
.jv-ac-plat small { overflow: hidden; color: #65676b; font-size: 0.8em; text-overflow: ellipsis; white-space: nowrap; }
.jv-ac-plat > em { margin-top: 0.3em; color: #444950; font-size: 0.8em; font-style: normal; font-weight: 600; }
.jv-ac-field { display: flex; align-items: center; gap: 0.4em; min-height: 2.2em; padding: 0.3em 0.6em; border: 1px solid #ccd0d5; border-radius: 0.4em; color: #65676b; font-size: 0.85em; }
.jv-ac-field svg { width: 0.85em; height: 0.85em; }
.jv-ac-field.is-set { border-color: #b9c8ff; }
.jv-ac-chip { overflow: hidden; padding: 0.2em 0.5em; border-radius: 0.3em; background: #e7f0fe; color: #0a4fc4; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.jv-ac-chip i { margin-left: 0.3em; color: #65676b; font-style: normal; }
.jv-ac-fieldwrap { position: relative; display: block; }
.jv-ac-field.is-focus { border-color: #1a73e8; }
.jv-ac-menu { position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% + 0.7em); display: flex; flex-direction: column; padding: 0.5em 0.7em; border-radius: 0.4em; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); color: #65676b; font-size: 0.8em; }
.jv-ac-menu b { color: #1c2b33; font-weight: 600; }
.jv-ac-kv { display: flex; gap: 0.5em; color: #1c2b33; font-size: 0.8em; }
.jv-ac-kv em { min-width: 6.5em; color: #65676b; font-style: normal; }
.jv-ac-match { display: inline-flex; align-items: center; gap: 0.35em; margin-top: auto; color: #8a8d91; font-size: 0.8em; }
.jv-ac-match.is-on { color: #1e6b3a; font-weight: 600; }
.jv-ac-match svg { width: 0.8em; height: 0.8em; }
.jv-ac-tabs { display: flex; gap: 1.2em; border-bottom: 1px solid var(--ui-line-soft); font-size: 0.92em; }
.jv-ac-tabs span { padding: 0.2em 0.1em 0.5em; color: var(--ui-700); }
.jv-ac-tabs .is-on { box-shadow: inset 0 -2px 0 var(--ui-900); color: var(--ui-900); font-weight: 500; }
.jv-ac-chart { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em 0.9em; border: 1px solid var(--ui-line); border-radius: 0.7em; }
.jv-ac-charthead { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.jv-ac-charthead b { color: var(--ui-900); font-size: 0.92em; font-weight: 500; }
.jv-ac-charthead > span { display: inline-flex; gap: 0.3em; font-size: 0.85em; }
.jv-ac-weeks { display: flex; align-items: stretch; gap: 0.45em; height: 7.5em; }
.jv-ac-week { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.2em; }
.jv-ac-stack { display: flex; flex: 1; flex-direction: column; width: 100%; overflow: hidden; border-radius: 0.25em; }
.jv-ac-stack i { display: block; width: 100%; }
.jv-ac-stack .is-hot { background: #f2a49c; }
.jv-ac-stack .is-warm { background: #f7c98a; }
.jv-ac-stack .is-cold { background: #dbe6f6; }
.jv-ac-week small { color: #8a9fa9; font-size: 0.7em; }
.jv-ac-vs { display: grid; flex: none; align-content: center; gap: 0 0.5em; grid-template-columns: auto 1fr; align-items: baseline; width: 34%; padding-left: 0.6em; }
.jv-ac-vs b { color: var(--ui-900); font-size: 1.3em; font-weight: 600; }
.jv-ac-vs b.is-dim { color: #8a9fa9; }
.jv-ac-vs small { color: #8a9fa9; font-size: 0.75em; line-height: 1.2; }
.jv-ac-accts .jv-rd-tr { grid-template-columns: 1.5fr 0.8fr 1.1fr 1.5fr; align-items: center; }
.jv-ac-accts .jv-rd-tr.is-hl { background: #fff7f5; }
.jv-ac-spark { width: 80%; height: 1.9em; overflow: visible; }
.jv-ac-spark polyline { fill: none; stroke: #5b47e0; stroke-width: 6; vector-effect: non-scaling-stroke; stroke-width: 1.5px; stroke-linejoin: round; }
.jv-cm-panel { display: flex; flex: none; flex-direction: column; gap: 0.75em; width: 40%; padding: 0.9em 1.1em; overflow: hidden; border-right: 1px solid var(--ui-line-soft); background: #fff; }
.jv-cm-head { display: flex; flex-direction: column; gap: 0.5em; }
.jv-cm-head > b { overflow: hidden; color: var(--ui-900); font-size: 1.05em; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.jv-cm-counts { display: flex; align-items: center; gap: 0.5em; color: var(--ui-900); font-size: 0.85em; }
.jv-cm-counts > span { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.5em; border: 1px solid var(--ui-line); border-radius: 0.4em; }
.jv-cm-counts svg { width: 0.9em; height: 0.9em; color: var(--ui-700); }
.jv-cm-counts .ui-logo { width: 1.1em; height: 1.1em; }
.jv-cm-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.jv-cm-funnel span { display: flex; flex-direction: column; gap: 0.1em; padding: 0.5em 0.4em; border-bottom: 2px solid transparent; background: linear-gradient(180deg, #ece6ff, #f8f6ff); border-radius: 0.3em 0.3em 0 0; }
.jv-cm-funnel span.is-on { border-color: #5b47e0; background: linear-gradient(180deg, #c9bdff, #e9e4ff); }
.jv-cm-funnel b { color: var(--ui-900); font-size: 1.1em; font-weight: 600; }
.jv-cm-funnel em { color: #8a9fa9; font-size: 0.68em; font-style: normal; line-height: 1.2; }
.jv-cm-groups { display: flex; flex-direction: column; gap: 0.35em; padding: 0.6em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.6em; font-size: 0.85em; }
.jv-cm-groups > em { color: #8a9fa9; font-size: 0.85em; font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-cm-groups > span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.1em 0.5em; color: var(--ui-900); }
.jv-cm-groups i { width: 0.9em; height: 0.9em; border: 1px solid #c9bdff; border-radius: 0.2em; }
.jv-cm-groups i.is-exp { background: #c9bdff; }
.jv-cm-groups b { font-weight: 500; }
.jv-cm-groups small { grid-column: 2 / -1; color: #5b47e0; font-size: 0.85em; }
.jv-cm-lift { display: flex; flex-direction: column; gap: 0.4em; padding: 0.7em 0.8em; border: 1px solid var(--ui-line); border-radius: 0.6em; }
.jv-cm-lift > em { color: #8a9fa9; font-size: 0.8em; font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-cm-liftrow { display: flex; align-items: center; gap: 0.6em; }
.jv-cm-liftrow b { color: var(--ui-900); font-size: 1.7em; font-weight: 600; }
.jv-cm-liftrow i { padding: 0.15em 0.55em; border-radius: 0.3em; background: #fdf3e1; color: #a15c00; font-size: 0.85em; font-style: normal; }
.jv-cm-liftrow i.is-high { background: #e6f4ea; color: #1e6b3a; }
.jv-cm-bars { display: grid; grid-template-columns: 1fr 1fr 1.3fr; align-items: end; gap: 0.6em; height: 7.5em; }
.jv-cm-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.15em; height: 100%; text-align: center; }
.jv-cm-bars i { width: 70%; border: 1px solid #c9bdff; border-radius: 0.2em 0.2em 0 0; background: #f4f1ff; transition: height 0.5s ease; }
.jv-cm-bars i.is-exp { background: #b5a6ff; }
.jv-cm-bars i.is-cost { width: 45%; background: linear-gradient(180deg, #d6ccff, #ece7ff); }
.jv-cm-bars b { color: var(--ui-900); font-size: 0.9em; font-weight: 600; }
.jv-cm-bars small { color: #8a9fa9; font-size: 0.68em; line-height: 1.15; }
.jv-cm-map { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #f6f5fd; }
.jv-cm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jv-cm-map path { fill: #fff; stroke: #dcd8ee; stroke-width: 0.35; }
.jv-cm-map path.is-aud { fill: #c4b6ff; stroke: #2c3e8c; stroke-width: 0.45; }
.jv-cm-map path.is-other { fill: #e4ddff; stroke: #cfc5fb; }
.jv-cm-label { position: absolute; max-width: 30%; color: #2c3e8c; font-size: 0.72em; font-weight: 600; line-height: 1.2; }
.jv-cm-label.is-dim { color: #6b7280; font-weight: 500; }
.jv-cm-badge { position: absolute; padding: 0.2em 0.6em; border: 1px solid #e0b400; border-radius: 999px; background: #ffd84d; color: #1d1d1d; font-size: 0.85em; font-weight: 700; }
.jv-cm-badge.is-dim { border-color: #d7dbe0; background: #fff; font-weight: 600; }
.jv-cm-ctl { position: absolute; left: 0.8em; top: 0.8em; display: flex; flex-direction: column; gap: 0.35em; font-size: 0.8em; }
.jv-cm-ctl > span { padding: 0.4em 0.7em; border: 1px solid #e3e5e8; border-radius: 0.45em; background: #fff; color: var(--ui-700); }
.jv-cm-range { color: var(--ui-900) !important; font-weight: 500; }
.jv-cm-metric { box-shadow: inset 0 2px 0 #5b47e0; color: var(--ui-900) !important; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ac-launch { left: 4%; right: 4%; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 0.5em; padding: 0.5em; }
  .jv-ac-plat small, .jv-ac-plat > em, .jv-ac-kv { display: none; }
  .jv-cm .jv-cm-map { display: none; }
  .jv-cm-panel { flex: 1; width: auto; border: 0; }
  .jv-ac-vs { width: 40%; }
  .jv-ac-accts .jv-rd-tr { grid-template-columns: 1.5fr 0.9fr 1fr; }
  .jv-ac-accts .jv-rd-tr > :nth-child(4) { display: none; }
}
.jv-ac-in { animation: jv-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 1s); }
.jv-ac-views { display: inline-flex; margin-left: auto; margin-right: 0.8em; padding: 0.15em; border: 1px solid var(--ui-line); border-radius: 0.5em; font-size: 0.82em; }
.jv-ac-views span { padding: 0.2em 0.65em; border-radius: 0.35em; color: var(--ui-700); }
.jv-ac-views .is-on { background: #eef2ff; color: #3e63dd; font-weight: 500; }
.jv-ac-infl .jv-rp-row { grid-template-columns: 1.2fr 0.7fr 2fr; }
.jv-ac-inflbar { display: flex; align-items: center; gap: 0.6em; }
.jv-ac-inflbar i { height: 0.55em; max-width: 60%; border-radius: 999px; background: #5b47e0; }
.jv-ac-inflbar b { color: var(--ui-900); font-weight: 500; white-space: nowrap; }
.jv-ac-chs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.9em; margin: 0.6em 1.143em 0; padding: 0.6em 0.9em; border: 1px solid var(--ui-line); border-radius: 0.6em; font-size: 0.85em; }
.jv-ac-chs .app-tile__label { flex-basis: 100%; }
.jv-ac-chs > span:not(.app-tile__label) { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ui-700); }
.jv-ac-chs .ui-logo { width: 1em; height: 1em; }
.jv-ac-chs b { color: var(--ui-900); font-weight: 600; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ac-views { margin-right: 0; }
  .jv-ac-chs { display: none; }
  .jv-ac-infl .jv-rp-row { grid-template-columns: 1.1fr 1.5fr; }
  .jv-ac-infl .jv-rp-row > span:nth-child(3) { display: flex; }
}
/* Demand Gen play: campaign objective / type tiles, ad group audience picker. */
.jv-gd-tiles { flex-direction: row !important; flex-wrap: wrap; gap: 0.45em !important; }
.jv-gd-tiles span { padding: 0.45em 0.8em; border: 1px solid #dadce0; border-radius: 0.4em; color: #3c4043; font-size: 0.88em; }
.jv-gd-tiles .is-on { border-color: #1a73e8; background: #e8f0fe; color: #1967d2; font-weight: 500; }
.jv-gd-aud { gap: 0.2em !important; }
/* Performance Max play: data exclusions, asset group signal, asset group comparison. */
.jv-pm-excl { display: flex; flex-direction: column; gap: 0.35em; }
.jv-ga-check { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9em; }
.jv-ga-check i { display: grid; place-items: center; width: 1.05em; height: 1.05em; border: 2px solid #5f6368; border-radius: 0.15em; color: #fff; }
.jv-ga-check i.is-on { border-color: #1a73e8; background: #1a73e8; }
.jv-ga-check svg { width: 0.75em; height: 0.75em; }
.jv-pm-sig { display: flex; flex-direction: column; gap: 0.2em; }
.jv-rd-sumstrip .jv-pm-ok { color: #1e6b3a; white-space: nowrap; }
.jv-rd-sumstrip .jv-pm-ok i { margin-left: 0.3em; padding: 0.05em 0.45em; border-radius: 999px; background: #e6f4ea; font-size: 0.8em; font-style: normal; }
.jv-pm-groups .jv-ga-tr { grid-template-columns: 1.2fr 1.6fr 1fr 0.6fr 0.9fr; }
.jv-pm-groups .jv-ga-tr.is-win { background: #e6f4ea; }
.jv-pm-groups b { font-weight: 500; }
.jv-pm-down em { color: #5f6368; font-size: 0.82em; font-style: normal; font-weight: 500; }
.jv-pm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; margin-top: 0.3em; }
.jv-pm-cols > span { display: flex; flex-direction: column; gap: 0.1em; }
.jv-pm-cols small { color: #5f6368; font-size: 0.8em; }
.jv-pm-cols b { font-size: 1.4em; font-weight: 400; }
.jv-pm-cols b.is-good { color: #137333; }
.jv-pm-cols i { color: #80868b; font-size: 0.78em; font-style: normal; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-pm-groups .jv-ga-tr { grid-template-columns: 1.2fr 1fr 0.9fr; font-size: 0.85em; }
  .jv-pm-groups .jv-ga-tr > :nth-child(2), .jv-pm-groups .jv-ga-tr > :nth-child(4) { display: none; }
  .jv-pm-groups { display: flex; }
}
/* Meta Lookalikes play: seed win rates, lookalike size, results. */
.jv-ml-or { margin-left: 0.6em; padding-left: 0.5em !important; border-left: 2px solid #b9c8ff; }
.jv-rd-bar.jv-ml-pick i { background: #c9bdff; }
.jv-rd-bar.jv-ml-pick em, .jv-rd-bar.jv-ml-pick b { color: #3e2fb8; font-weight: 600; }
.jv-ml-size { position: relative; display: block; height: 0.4em; margin: 0.5em 0 0.2em; border-radius: 999px; background: #e4e6eb; }
.jv-ml-size i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #0866ff; transition: width 0.4s ease; }
.jv-ml-excl { background: #fdecea !important; color: #a12b1d !important; }
.jv-ml-win { display: flex; flex-direction: column; gap: 0.2em; padding: 0.7em 0.8em; border-radius: 0.5em; background: #e7f3ec; font-size: 0.9em; }
.jv-ml-win b { color: #1e6b3a; }
.jv-ml-win span { color: #444950; }
.jv-ml-table .jv-ga-tr { grid-template-columns: 1.8fr 0.7fr 0.9fr 0.9fr; }
.jv-ml-table .jv-ga-tr.is-win { background: #e7f3ec; }
.jv-ml-table b { font-weight: 600; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ml-table { display: block !important; }
  .jv-ml-table .jv-ga-tr { grid-template-columns: 1.6fr 0.7fr 0.9fr; font-size: 0.85em; }
  .jv-ml-table .jv-ga-tr > :nth-child(4) { display: none; }
}
/* Lead Nurture play: CRM source tabs, object tags, holdout card. */
.jv-ln-src { display: flex; flex-wrap: wrap; gap: 0.3em; font-size: 0.85em; }
.jv-ln-src span { padding: 0.25em 0.6em; border-radius: 0.4em; color: var(--ui-700); }
.jv-ln-src .is-on { background: #eef2ff; color: #3e63dd; font-weight: 500; box-shadow: inset 0 -2px 0 #3e63dd; }
.jv-ln-obj { margin-left: 0.3em; padding: 0 0.4em; border-radius: 0.3em; background: #f1f3f5; color: #8a9fa9; font-size: 0.8em; font-style: normal; }
.jv-ln-hold { background: #fafafe; border-style: dashed; }
.jv-ln-holdbar { display: flex; height: 0.55em; margin: 0.4em 0; overflow: hidden; border-radius: 999px; background: #e4e1f7; }
.jv-ln-holdbar i:first-child { background: #8f7cf0; }

/* Signal-based Audiences: signal sources (CRM integrations and the API), ingest call, per-signal table. */
.jv-sg-main { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0.4em 0 0.8em; background: #fff; }
.jv-sg-actions { display: inline-flex; gap: 0.4em; margin-left: auto; }
.jv-sg-btn { padding: 0.3em 0.75em; border: 1px solid var(--ui-line); border-radius: 0.45em; color: var(--ui-900); font-size: 0.8em; font-weight: 500; }
.jv-sg-btn.is-primary { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.jv-sg-dtable { display: grid; margin: 0.6em 1em 0; }
.jv-sg-api-rows { display: grid; border-radius: 0.4em; }
.jv-sg-tr { display: grid; grid-template-columns: 2fr 0.9fr 1.1fr 0.7fr 0.9fr; align-items: center; gap: 0.6em; padding: 0.6em 0.4em; border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-900); }
.jv-sg-tr.is-head { color: #8a9fa9; font-size: 0.8em; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.jv-sg-tr.is-new { animation: jv-sg-in 0.5s ease both; }
.jv-sg-tr.is-fresh { background: #f6f4ff; }
@keyframes jv-sg-in { from { opacity: 0; transform: translateY(-0.3em); } }
.jv-sg-name { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; text-overflow: ellipsis; white-space: nowrap; }
.jv-sg-via { display: inline-flex; align-items: center; gap: 0.4em; }
.jv-sg-via i { padding: 0 0.4em; border-radius: 0.3em; background: #2a2266; color: #fff; font-size: 0.75em; font-style: normal; font-weight: 600; }
.jv-sg-via.is-csv i { background: #e4e1f7; color: #3c327b; }
.jv-sg-api { right: 4%; bottom: 8%; display: grid; gap: 0.45em; width: 44%; padding: 0.9em 1.1em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82em; }
.jv-sg-code b { margin-right: 0.4em; padding: 0.05em 0.4em; border-radius: 0.3em; background: #2a2266; color: #fff; font-weight: 600; }
.jv-sg-json { overflow: hidden; color: var(--ui-700); text-overflow: ellipsis; white-space: nowrap; }
.jv-sg-ok { display: inline-flex; align-items: center; gap: 0.35em; color: var(--green-500); font-family: inherit; }
.jv-sg-ok svg { width: 0.95em; height: 0.95em; }
.jv-sg-seg { margin-left: auto; color: var(--ui-700); }
.jv-se-rule.is-excl b { color: #c2410c; }
.jv-rd-card.jv-sg-table .jv-rd-tr { grid-template-columns: 1.7fr 0.8fr 0.8fr 0.7fr 0.8fr; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-sg-tr { grid-template-columns: 1.8fr 1fr 0.8fr; }
  .jv-sg-tr > :nth-child(2), .jv-sg-tr > :nth-child(5) { display: none; }
  .jv-sg-api { left: 4%; width: auto; }
  .jv-rd-card.jv-sg-table .jv-rd-tr { grid-template-columns: 1.6fr 0.8fr 0.8fr; }
  .jv-rd-card.jv-sg-table .jv-rd-tr > :nth-child(n + 4) { display: none; }
}

/* Box-in Retargeting: an excluded custom audience in the Meta ad set. */
.jv-me-chip.is-excl { background: #fdecea; color: #b42318; }

/* Search Inclusion: search terms report, targeting setting, per-keyword table. */
.jv-ui-terms .jv-ui-noisy, .jv-ui-terms > span[data-walk] { display: grid; }
.jv-ui-terms .jv-ga-tr > span:first-child { display: inline-flex; align-items: center; gap: 0.55em; min-width: 0; }
.jv-ga-tr.is-flag { background: #fef7e0; }
.jv-ui-box { display: grid; flex: none; place-items: center; width: 1em; height: 1em; border: 2px solid #5f6368; border-radius: 0.15em; color: #fff; }
.jv-ga-tr.is-flag .jv-ui-box { border-color: #1a73e8; background: #1a73e8; }
.jv-ui-box svg { width: 0.7em; height: 0.7em; }
.jv-ui-tag { padding: 0 0.4em; border-radius: 0.3em; background: #e8f0fe; color: #1967d2; font-size: 0.78em; }
.jv-ui-mode { flex-direction: column; gap: 0.55em; }
.jv-ui-mode > span { align-items: baseline; color: #5f6368; }
.jv-ui-mode b { color: #202124; font-weight: 500; }
.jv-rd-card.jv-ui-byterm .jv-rd-tr { grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr; }
.jv-ui-float { bottom: 20%; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ui-terms { display: block !important; }
  .jv-ui-terms .jv-ga-tr { grid-template-columns: 1.7fr 0.8fr 0.6fr; font-size: 0.85em; }
  .jv-ui-terms .jv-ga-tr > :nth-child(4) { display: none; }
}
.jv-ui-segs .jv-ga-tr { grid-template-columns: 1.6fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr; align-items: center; }
.jv-ui-segs .jv-ga-tr > span { position: relative; }
.jv-ui-pill { padding: 0.1em 0.5em; border-radius: 999px; background: #e8f0fe; color: #1967d2; font-size: 0.85em; font-style: normal; }
.jv-ui-bid b { color: #188038; font-weight: 600; }
.jv-ui-good { color: #188038; font-weight: 500; }
.jv-ui-pop { position: absolute; top: 1.6em; left: -0.4em; z-index: 3; display: grid; gap: 0.4em; width: 11em; padding: 0.7em; border-radius: 0.5em; background: #fff; box-shadow: 0 2px 10px rgb(60 64 67 / 0.3); }
.jv-ui-pop em { color: #5f6368; font-size: 0.8em; font-style: normal; }
.jv-ui-gquote { left: 6%; bottom: 8%; display: grid; gap: 0.45em; width: 52%; padding: 0.9em 1.1em; }
.jv-ui-gsrc { display: inline-flex; align-items: center; gap: 0.4em; color: #5f6368; font-size: 0.8em; font-weight: 500; }
.jv-ui-gsrc .ui-logo, .jv-ui-gsrc svg, .jv-ui-gsrc img { width: 1em; height: 1em; }
.jv-ui-gquote q { color: #202124; font-size: 0.95em; line-height: 1.4; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-ui-segs { display: block !important; }
  .jv-ui-segs .jv-ga-tr { grid-template-columns: 1.5fr 0.8fr 0.8fr; font-size: 0.85em; }
  .jv-ui-segs .jv-ga-tr > :nth-child(2), .jv-ui-segs .jv-ga-tr > :nth-child(4), .jv-ui-segs .jv-ga-tr > :nth-child(6) { display: none; }
  .jv-ui-gquote { left: 4%; right: 4%; width: auto; }
}

/* Website Reveal Retargeting: revealed visitors list, funnel, account journey. */
.jv-wr-status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border-radius: 999px; background: #f1f3f5; color: #8a9fa9; font-size: 0.8em; font-weight: 500; }
.jv-wr-status.is-on { background: #e7f6ef; color: var(--green-500); }
.jv-wr-status svg { width: 0.9em; height: 0.9em; }
.jv-wr-sum { margin: 0.3em 1.4em 0; color: var(--ui-700); font-size: 0.88em; }
.jv-wr-sum b { color: var(--ui-900); font-weight: 600; }
.jv-wr-sum .jv-wr-hid { margin-left: 1em; color: #b42318; }
.jv-wr-table .jv-sg-tr { grid-template-columns: 1.6fr 1.3fr 1fr 1.1fr 0.5fr; }
.jv-wr-table .app-stack b { font-weight: 500; }
.jv-wr-blk { margin-left: 0.4em; padding: 0 0.4em; border-radius: 0.3em; background: #fdecea; color: #b42318; font-size: 0.75em; font-style: normal; white-space: nowrap; }
.jv-wr-icp { padding: 0 0.45em; border-radius: 0.3em; background: #e7f6ef; color: var(--green-500); font-size: 0.8em; font-style: normal; font-weight: 600; }
.jv-wr-journey { display: grid; gap: 0.1em; }
.jv-wr-step { position: relative; display: grid; grid-template-columns: 4.2em 1fr; gap: 0.6em; padding: 0.45em 0 0.45em 0.9em; border-left: 2px solid #e4e1f7; }
.jv-wr-step::before { content: ""; position: absolute; left: -0.36em; top: 0.85em; width: 0.6em; height: 0.6em; border-radius: 50%; background: #8f7cf0; }
.jv-wr-step.is-win::before { background: var(--green-500); }
.jv-wr-step em { color: #8a9fa9; font-size: 0.82em; font-style: normal; }
.jv-wr-step b { color: var(--ui-900); font-weight: 500; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-wr-table .jv-sg-tr { grid-template-columns: 1.6fr 1fr 0.6fr; }
  .jv-wr-table .jv-sg-tr > :nth-child(2), .jv-wr-table .jv-sg-tr > :nth-child(3) { display: none; }
  .jv-wr-sum .jv-wr-hid { display: block; margin: 0.2em 0 0; }
}

/* YouTube: video campaign objective, reach, revealed accounts by creative. */
.jv-yt-chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.jv-yt-chips > span { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45em 0.8em; border: 1px solid #dadce0; border-radius: 0.5em; color: #5f6368; font-size: 0.88em; }
.jv-yt-chips > span.is-on { border-color: #1a73e8; background: #e8f0fe; color: #1967d2; font-weight: 500; }
.jv-yt-chips .ui-logo, .jv-yt-chips img { width: 1.1em; height: 1.1em; }
.jv-yt-reach { display: grid; gap: 0.2em; }
.jv-yt-reach b { color: #202124; font-size: 1.3em; font-weight: 500; }
.jv-yt-reach small { color: #5f6368; }
.jv-yt-table .jv-sg-tr { grid-template-columns: 1.3fr 1.6fr 0.5fr 0.9fr 1.2fr; }
.jv-yt-table b { color: var(--ui-900); font-weight: 500; }
.jv-yt-bars { margin: 0.8em 1.4em 0; }
@container (max-aspect-ratio: 1 / 1) {
  .jv-yt-table .jv-sg-tr { grid-template-columns: 1.3fr 1.5fr 0.5fr; }
  .jv-yt-table .jv-sg-tr > :nth-child(n + 4) { display: none; }
  .jv-yt-chips > span:not(.is-on) { display: none; }
}

.jv-plgn-win .jv-pa-card.is-open { border-color: var(--blue-200); box-shadow: none; }