.vp-b {
  --vp-ink: #10131c;
  --vp-muted: #687083;
  --vp-line: rgba(16, 19, 28, 0.12);
  --vp-paper: #f8f8fb;
  --vp-accent: var(--card-accent, #6f4bd8);
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--vp-paper);
  color: var(--vp-ink);
  grid-template-rows: 44px minmax(0, 1fr) auto;
}

.vp-b *, .vp-b *::before, .vp-b *::after { box-sizing: border-box; }
.vp-b button, .vp-b input { font: inherit; }
.vp-b button { color: inherit; }

.vp-b__bar {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--vp-line);
  background: rgba(255, 255, 255, 0.88);
  gap: 12px;
}

.vp-b__bar > span { display: flex; gap: 6px; }
.vp-b__bar i { width: 8px; height: 8px; background: #ff6d61; border-radius: 50%; }
.vp-b__bar i:nth-child(2) { background: #f0bd50; }
.vp-b__bar i:nth-child(3) { background: #58bd85; }
.vp-b__bar b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.vp-b__body {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.vp-b__note {
  padding: 7px 14px;
  border-top: 1px solid var(--vp-line);
  background: #fff9e7;
  color: #715a1b;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}

.vp-b small {
  color: var(--vp-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

.vp-b button { border: 0; background: none; cursor: default; }

/* Real, approved CreatorStudio and Imager product imagery. */
.vp-b__media { position: relative; min-height: 0; overflow: hidden; background: #071423; }
.vp-b__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.vp-b__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(4, 12, 24, 0.9)); content: ""; }
.vp-b__media-copy { position: absolute; z-index: 2; right: 22px; bottom: 46px; left: 22px; display: grid; color: white; gap: 6px; }
.vp-b__media-copy small { color: #a8c7ff; }
.vp-b__media-copy strong { max-width: 23ch; font-size: clamp(21px, 2vw, 34px); letter-spacing: -0.045em; line-height: 0.98; }
.vp-b__chips { position: absolute; z-index: 2; right: 20px; bottom: 15px; left: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.vp-b__chips span { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(0, 0, 0, 0.42); color: white; border-radius: 999px; font-size: 9px; font-weight: 680; backdrop-filter: blur(7px); }

.vp-b--creator-picker .vp-b__body, .vp-b--imager-tools .vp-b__body { grid-template-columns: 158px minmax(0, 1fr); }
.vp-b__studio-rail, .vp-b__tool-rail { display: flex; min-height: 0; flex-direction: column; padding: 16px 12px; border-right: 1px solid var(--vp-line); background: #101522; gap: 5px; }
.vp-b__studio-rail span, .vp-b__tool-rail span { padding: 9px 10px; color: #9da5b7; border-radius: 8px; font-size: 10px; font-weight: 680; }
.vp-b__studio-rail .is-active, .vp-b__tool-rail .is-active { background: var(--vp-accent); color: white; }
.vp-b__studio-stage, .vp-b__tool-result { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #06131f; }
.vp-b__studio-stage img, .vp-b__tool-result img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.vp-b__studio-stage::after, .vp-b__tool-result::after { position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(3, 9, 18, 0.92)); content: ""; }
.vp-b__studio-stage > div, .vp-b__tool-result > div { position: absolute; z-index: 2; right: 22px; bottom: 20px; left: 22px; display: grid; color: white; gap: 4px; }
.vp-b__studio-stage > div small, .vp-b__tool-result > div small { color: #bbadff; }
.vp-b__studio-stage > div strong, .vp-b__tool-result > div strong { max-width: 22ch; font-size: clamp(20px, 1.9vw, 31px); letter-spacing: -0.04em; line-height: 1; }

.vp-b--creator-handoff .vp-b__body { padding: 16px; background: #0b1220; color: white; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.vp-b__gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vp-b__gallery-head > div { display: grid; gap: 3px; }
.vp-b__gallery-head small { color: #a8a0ff; }
.vp-b__gallery-head strong { font-size: 14px; }
.vp-b__gallery-head button { padding: 8px 11px; background: #fff; border-radius: 999px; font-size: 10px; font-weight: 730; }
.vp-b__gallery-grid { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.vp-b__gallery-grid figure { position: relative; min-width: 0; min-height: 0; overflow: hidden; margin: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 13px; }
.vp-b__gallery-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.vp-b__gallery-grid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 8px; background: rgba(5, 9, 17, 0.84); font-size: 9px; font-weight: 680; }
.vp-b__handoff { display: grid; align-items: center; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); border-radius: 12px; grid-template-columns: auto 1fr auto auto 1fr; gap: 9px; }
.vp-b__handoff b { font-size: 11px; }.vp-b__handoff span { color: #a7afbf; font-size: 9px; }.vp-b__handoff i { color: #ff7a66; font-style: normal; }

.vp-b--imager-compare .vp-b__body { padding: 14px; background: #091426; color: white; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 11px; }
.vp-b__compare-sources { display: grid; align-content: center; gap: 9px; }
.vp-b__compare-sources span { display: flex; align-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 10px; font-size: 9px; font-weight: 700; gap: 7px; }
.vp-b__compare-sources b { display: grid; width: 23px; height: 23px; background: #ff735e; border-radius: 50%; place-items: center; }
.vp-b__compare-main { position: relative; min-height: 0; overflow: hidden; border-radius: 14px; }
.vp-b__compare-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.vp-b__compare-actions { position: absolute; right: 9px; bottom: 9px; display: flex; gap: 6px; }
.vp-b__compare-actions button { padding: 7px 9px; background: #fff; border-radius: 999px; font-size: 9px; font-weight: 700; }
.vp-b__compare-prompt { display: grid; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 11px; grid-column: 1 / -1; gap: 3px; }
.vp-b__compare-prompt small { color: #ff9a89; }.vp-b__compare-prompt strong { font-size: 11px; }

.vp-b--imager-finish .vp-b__body { padding: 14px; background: #0b1424; color: white; grid-template-columns: 1.4fr 0.85fr; gap: 11px; }
.vp-b__finish-main, .vp-b__finish-side { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.vp-b__finish-main img, .vp-b__finish-side img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.vp-b__finish-main > span { position: absolute; bottom: 10px; left: 10px; padding: 6px 9px; background: #fff; color: #10131c; border-radius: 999px; font-size: 8px; font-weight: 800; }
.vp-b__finish-side > div { position: absolute; right: 8px; bottom: 8px; left: 8px; display: grid; padding: 10px; background: rgba(5,9,17,.84); border-radius: 10px; gap: 3px; }
.vp-b__finish-side small { color: #a8c7ff; }.vp-b__finish-side strong { font-size: 17px; }.vp-b__finish-side span { color: #b7c0d0; font-size: 9px; }

/* Automation and sequence proof. */
.vp-b--automation .vp-b__body, .vp-b--automation-timing .vp-b__body { background: #f1f5f9; }
.vp-b__canvas { display: grid; min-height: 0; padding: 20px; background-image: radial-gradient(#ccd4e0 1px, transparent 1px); background-size: 16px 16px; grid-template-rows: auto 1fr auto; gap: 14px; }
.vp-b__canvas-head { display: flex; justify-content: space-between; }.vp-b__canvas-head span { color: #168464; font-size: 9px; font-weight: 800; }
.vp-b__flow { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 8px; }
.vp-b__flow-node { display: grid; min-width: 0; width: min(27%, 155px); min-height: 112px; align-content: center; padding: 14px; border: 1px solid #d4dae3; background: white; border-radius: 14px; box-shadow: 0 10px 25px rgba(16,19,28,.08); gap: 7px; }
.vp-b__flow-node.is-accent { border-color: var(--vp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-accent) 14%, transparent); }
.vp-b__flow-node strong { font-size: clamp(12px, 1vw, 16px); line-height: 1.08; }.vp-b__flow-node span { color: var(--vp-muted); font-size: 9px; }
.vp-b__flow-arrow { color: var(--vp-accent); font-size: 20px; }
.vp-b__flow-footer { padding: 8px 11px; background: #e8fff7; color: #16634e; border-radius: 9px; font-size: 10px; font-weight: 700; text-align: center; }

.vp-b--automation-trigger .vp-b__body { align-items: center; padding: 24px; background: #edf3f7; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 18px; }
.vp-b__event, .vp-b__event-start { display: grid; padding: 24px; border: 1px solid #d4dae3; background: white; border-radius: 17px; box-shadow: 0 16px 34px rgba(16,19,28,.09); gap: 8px; }
.vp-b__event strong, .vp-b__event-start strong { font-size: clamp(19px,2vw,31px); letter-spacing: -.045em; line-height: 1; }
.vp-b__event span, .vp-b__event-start small { color: var(--vp-muted); font-size: 10px; }
.vp-b__event-start { border-color: var(--vp-accent); background: color-mix(in srgb, var(--vp-accent) 8%, white); }
.vp-b__event-start > span { color: var(--vp-accent); font-size: 9px; font-weight: 800; }
.vp-b__event-arrow { color: var(--vp-accent); font-size: 32px; }

.vp-b--automation-branch .vp-b__body { align-content: center; padding: 20px; background: #f3f5f8; grid-template-rows: auto 44px auto; }
.vp-b__branch-source { display: grid; justify-self: center; min-width: 50%; padding: 18px 22px; border: 2px solid var(--vp-accent); background: white; border-radius: 15px; gap: 5px; text-align: center; }
.vp-b__branch-source strong { font-size: clamp(15px,1.4vw,22px); }
.vp-b__branch-lines { position: relative; display: flex; justify-content: space-around; padding-top: 13px; color: var(--vp-accent); font-size: 9px; font-weight: 800; }
.vp-b__branch-lines::before { position: absolute; top: 0; left: 25%; width: 50%; height: 12px; border: 2px solid var(--vp-accent); border-bottom: 0; content: ""; }
.vp-b__branch-targets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.vp-b__branch-targets article { display: grid; padding: 18px; border: 1px solid #d5dae3; background: white; border-radius: 14px; gap: 6px; }
.vp-b__branch-targets article:first-child { background: color-mix(in srgb,var(--vp-accent) 9%,white); }
.vp-b__branch-targets strong { font-size: clamp(14px,1.3vw,20px); }.vp-b__branch-targets span { color: var(--vp-muted); font-size: 10px; }

.vp-b--automation-history .vp-b__body { background: #f4f6f9; grid-template-columns: minmax(180px,.72fr) minmax(0,1.28fr); }
.vp-b__runs { display: grid; align-content: start; padding: 18px 12px; border-right: 1px solid var(--vp-line); gap: 7px; }
.vp-b__runs > small { padding: 5px 8px; }.vp-b__runs button { display: grid; padding: 11px; border-radius: 10px; text-align: left; grid-template-columns: auto 1fr auto; gap: 7px; }
.vp-b__runs button.is-active { background: var(--vp-accent); color: white; }.vp-b__runs button span { font-size: 10px; }.vp-b__runs button em { font-size: 8px; font-style: normal; }
.vp-b__run-trace { display: grid; align-content: center; padding: 22px; gap: 9px; }.vp-b__run-trace > strong { font-size: clamp(20px,2vw,31px); letter-spacing: -.04em; }
.vp-b__run-trace ol { display: grid; padding: 0; margin: 8px 0; list-style: none; gap: 7px; }
.vp-b__run-trace li { display: grid; padding: 9px 11px; background: white; border-radius: 9px; font-size: 10px; grid-template-columns: 52px 1fr; }
.vp-b__run-trace li b { color: var(--vp-accent); }.vp-b__run-trace > div { display: flex; gap: 7px; }.vp-b__run-trace button { padding: 7px 10px; border: 1px solid var(--vp-line); background: white; border-radius: 999px; font-size: 9px; font-weight: 700; }

.vp-b--sequence-overview .vp-b__body { align-content: center; padding: 22px; background: #f5f7fa; grid-template-rows: 1fr auto; gap: 14px; }
.vp-b__sequence-line { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 8px; }
.vp-b__sequence-line article { display: grid; min-width: 0; width: 29%; min-height: 128px; align-content: center; padding: 16px; border: 1px solid #d6dce5; background: white; border-radius: 15px; gap: 7px; }
.vp-b__sequence-line article.is-accent { border-color: var(--vp-accent); background: color-mix(in srgb,var(--vp-accent) 9%,white); }
.vp-b__sequence-line strong { font-size: clamp(13px,1.2vw,19px); }.vp-b__sequence-line span { color: var(--vp-muted); font-size: 9px; }.vp-b__sequence-line > b { color: var(--vp-accent); font-size: 20px; }
.vp-b__contact-strip { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 12px; background: #101522; color: white; border-radius: 11px; gap: 8px; }
.vp-b__contact-strip span { color: #b9b4ff; font-size: 9px; font-weight: 800; }.vp-b__contact-strip b { padding: 5px 8px; background: rgba(255,255,255,.1); border-radius: 999px; font-size: 9px; }

.vp-b--sequence-library .vp-b__body { background: #f3f5f8; grid-template-columns: .78fr 1.22fr; }
.vp-b__library, .vp-b__conversation-list, .vp-b__saved-list { display: flex; min-height: 0; flex-direction: column; padding: 16px 12px; border-right: 1px solid var(--vp-line); gap: 7px; }
.vp-b__library > small, .vp-b__conversation-list > small, .vp-b__saved-list > small { padding: 4px 7px; }
.vp-b__library button, .vp-b__conversation-list button, .vp-b__saved-list button { display: grid; padding: 11px; border-radius: 10px; text-align: left; gap: 4px; }
.vp-b__library button.is-active, .vp-b__conversation-list button.is-active, .vp-b__saved-list button.is-active { background: var(--vp-accent); color: white; }
.vp-b__library strong, .vp-b__conversation-list strong, .vp-b__saved-list strong { font-size: 11px; }.vp-b__library span, .vp-b__conversation-list span, .vp-b__saved-list span { color: inherit; font-size: 9px; opacity: .72; }
.vp-b__sequence-preview { display: grid; align-content: center; padding: 22px; gap: 10px; }
.vp-b__sequence-preview ol { display: grid; padding: 0; margin: 4px 0; list-style: none; gap: 8px; }.vp-b__sequence-preview li { display: grid; align-items: center; padding: 10px; background: white; border-radius: 10px; grid-template-columns: 34px 1fr; }
.vp-b__sequence-preview li b { color: var(--vp-accent); }.vp-b__sequence-preview li span { font-size: 11px; font-weight: 680; }.vp-b__sequence-preview button { justify-self: start; padding: 8px 11px; background: #101522; color: white; border-radius: 999px; font-size: 9px; font-weight: 720; }

.vp-b--sequence-timing .vp-b__body { align-content: center; padding: 22px; background: #f4f6f9; grid-template-rows: auto auto; gap: 16px; }
.vp-b__timing { display: flex; align-items: center; }.vp-b__timing span { padding: 6px 9px; background: #dce2ea; border-radius: 999px; font-size: 8px; font-weight: 800; }.vp-b__timing span.is-now { background: var(--vp-accent); color: white; }.vp-b__timing i { height: 2px; flex: 1; background: #ccd3dd; }
.vp-b__timing-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.vp-b__timing-cards article { display: grid; padding: 15px; border: 1px solid #d5dbe4; background: white; border-radius: 13px; gap: 7px; }.vp-b__timing-cards strong { font-size: clamp(12px,1vw,16px); }.vp-b__timing-cards span { color: var(--vp-muted); font-size: 9px; }

.vp-b--sequence-behavior .vp-b__body { align-content: center; padding: 22px; background: #f4f6f9; grid-template-rows: auto auto; gap: 16px; }
.vp-b__signal { display: grid; justify-self: center; min-width: 55%; padding: 18px; border: 2px solid var(--vp-accent); background: white; border-radius: 14px; gap: 4px; text-align: center; }.vp-b__signal strong { font-size: clamp(18px,1.8vw,28px); }.vp-b__signal span { color: var(--vp-muted); font-size: 9px; }
.vp-b__behavior-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.vp-b__behavior-paths article { display: grid; padding: 17px; border: 1px solid #d5dbe4; background: white; border-radius: 13px; gap: 6px; }.vp-b__behavior-paths article.is-accent { background: color-mix(in srgb,var(--vp-accent) 10%,white); }.vp-b__behavior-paths strong { font-size: clamp(13px,1.2vw,19px); }.vp-b__behavior-paths span { color: var(--vp-muted); font-size: 9px; }

.vp-b--sequence-state .vp-b__body { align-content: center; padding: 20px; background: #f2f5f8; grid-template-rows: auto auto auto; gap: 10px; }
.vp-b__profile { display: flex; align-items: center; gap: 10px; }.vp-b__profile > span { display: grid; width: 46px; height: 46px; background: var(--vp-accent); color: white; border-radius: 50%; font-size: 13px; font-weight: 800; place-items: center; }.vp-b__profile > div { display: grid; gap: 1px; }.vp-b__profile strong { font-size: 16px; }.vp-b__profile em { color: var(--vp-muted); font-size: 9px; font-style: normal; }
.vp-b__state-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.vp-b__state-grid article { display: grid; padding: 11px; background: white; border-radius: 10px; gap: 4px; }.vp-b__state-grid strong { font-size: 10px; }
.vp-b__state-reason { display: flex; align-items: center; padding: 10px 12px; background: #101522; color: white; border-radius: 10px; gap: 12px; }.vp-b__state-reason small { color: #b9b4ff; }.vp-b__state-reason strong { font-size: 10px; }

/* Forms. */
.vp-b--forms-overview .vp-b__body, .vp-b--forms-templates .vp-b__body, .vp-b--forms-report .vp-b__body { padding: 18px; background: #eef4f1; grid-template-columns: minmax(0,1.12fr) minmax(170px,.88fr); gap: 15px; }
.vp-b__form-page { display: grid; align-content: center; padding: clamp(18px,2.2vw,34px); background: linear-gradient(145deg,#10241f,#174f41); color: white; border-radius: 17px; gap: 9px; }
.vp-b__form-page > small { color: #8de6c5; }.vp-b__form-page > strong { max-width: 13ch; font-size: clamp(24px,2.5vw,41px); letter-spacing: -.05em; line-height: .96; }.vp-b__form-page > p { max-width: 34ch; margin: 0; color: #c7dbd4; font-size: 10px; line-height: 1.4; }
.vp-b__form-page label { display: grid; color: #d9ebe4; font-size: 9px; font-weight: 700; gap: 4px; }.vp-b__form-page input { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: white; border-radius: 8px; font-size: 10px; }.vp-b__form-page button { justify-self: start; padding: 9px 12px; background: #dff5a7; color: #143325; border-radius: 999px; font-size: 9px; font-weight: 800; }.vp-b__form-page > span { color: #a9beb6; font-size: 8px; }
.vp-b__form-actions, .vp-b__submission-actions { display: grid; align-content: center; gap: 8px; }.vp-b__form-actions article, .vp-b__submission-actions article { display: grid; align-items: center; padding: 11px; background: white; border-radius: 10px; box-shadow: 0 8px 20px rgba(16,19,28,.05); grid-template-columns: 25px 1fr; gap: 8px; }.vp-b__form-actions b { display: grid; width: 22px; height: 22px; background: #d9f6e9; color: #197458; border-radius: 50%; font-size: 10px; place-items: center; }.vp-b__form-actions span, .vp-b__submission-actions span { font-size: 10px; font-weight: 680; }
.vp-b__template-list { display: grid; align-content: center; gap: 7px; }.vp-b__template-list > small { padding: 0 5px; }.vp-b__template-list button { display: grid; align-items: center; padding: 9px; background: white; border-radius: 9px; grid-template-columns: 38px 1fr; gap: 8px; text-align: left; }.vp-b__template-list button.is-active { outline: 2px solid var(--vp-accent); }.vp-b__template-list i { height: 28px; background: linear-gradient(135deg,#23483e,#dff5a7); border-radius: 6px; }.vp-b__template-list strong { font-size: 10px; }
.vp-b__form-page.is-compact { padding: 22px; }.vp-b__form-page.is-compact > strong { font-size: clamp(20px,2vw,32px); }
.vp-b--forms-hosted .vp-b__body { padding: 16px; background: #e9eff4; }.vp-b__browser { display: grid; min-height: 0; overflow: hidden; border: 1px solid #cfd6df; background: white; border-radius: 14px; grid-template-rows: 38px 1fr; }.vp-b__browser > div { display: flex; align-items: center; padding: 0 12px; background: #f6f7f9; gap: 6px; }.vp-b__browser > div i { width: 7px; height: 7px; background: #ff705f; border-radius: 50%; }.vp-b__browser > div i:nth-child(2) { background:#efbd51; }.vp-b__browser > div i:nth-child(3) { background:#5ec08a; }.vp-b__browser > div span { overflow: hidden; flex: 1; padding: 6px 9px; margin-left: 6px; background: white; border-radius: 7px; color: var(--vp-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.vp-b__browser > div b { color:#17845f; font-size:8px; }.vp-b__form-page.is-hosted { margin: 13px; }
.vp-b--forms-embed .vp-b__body { padding: 14px; background: #eef1f5; }.vp-b__site-mock { display: grid; min-height: 0; overflow: hidden; background: #fffaf2; border-radius: 14px; grid-template-rows: 42px 1fr; }.vp-b__site-mock header { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #e7dfd1; }.vp-b__site-mock header b { font-size: 13px; }.vp-b__site-mock header nav { color:#726b60; font-size:8px; }.vp-b__site-mock main { position: relative; display: grid; align-content: center; padding: 24px; padding-right: 47%; gap: 8px; }.vp-b__site-mock main > strong { max-width: 14ch; font-size: clamp(22px,2.3vw,38px); letter-spacing:-.05em; line-height:.96; }.vp-b__site-mock main > p { margin:0; color:#716a61; font-size:10px; }.vp-b__site-mock .vp-b__form-page.is-inline { position:absolute; top:18px; right:18px; bottom:18px; width:40%; padding:16px; }.vp-b__site-mock .vp-b__form-page.is-inline > strong { font-size:18px; }
.vp-b__submission { display:grid; align-content:center; padding:20px; background:white; border-radius:14px; gap:7px; }.vp-b__submission > strong { font-size:clamp(20px,2vw,30px); }.vp-b__submission > span { color:var(--vp-muted); font-size:9px; }.vp-b__submission dl { display:grid; margin:7px 0 0; gap:6px; }.vp-b__submission dl div { display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--vp-line); font-size:9px; }.vp-b__submission dt { color:var(--vp-muted); }.vp-b__submission dd { margin:0; font-weight:700; }.vp-b__submission-actions article b { color:var(--vp-accent); }.vp-b__submission-actions footer { display:flex; justify-content:space-between; padding:10px; background:#10241f; color:white; border-radius:10px; }.vp-b__submission-actions footer strong { font-size:12px; }.vp-b__submission-actions footer span { color:#b9d0c8; font-size:8px; }

/* VideoPlayer. */
.vp-b--video-player .vp-b__body, .vp-b--video-brand .vp-b__body, .vp-b--video-cta .vp-b__body, .vp-b--video-capture .vp-b__body { padding: 14px; background:#eae7f7; }
.vp-b__player { position:relative; display:grid; min-height:0; overflow:hidden; background:#0c101b; border-radius:14px; grid-template-rows:minmax(0,1fr) 34px; }.vp-b__video-frame { position:relative; display:grid; min-height:0; align-content:center; justify-items:center; overflow:hidden; padding:20px; background:radial-gradient(circle at 70% 30%,rgba(111,75,216,.72),transparent 34%),linear-gradient(135deg,#0b1221,#1d1237); color:white; text-align:center; }.vp-b__video-frame::after { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:24px 24px; content:""; }.vp-b__video-frame > * { position:relative; z-index:2; }.vp-b__play { display:grid; width:50px; height:50px; margin-bottom:12px; background:rgba(255,255,255,.94); color:#21143d; border-radius:50%; font-size:16px; place-items:center; }.vp-b__video-frame small { color:#c4b5ff; }.vp-b__video-frame > strong { max-width:19ch; font-size:clamp(18px,1.8vw,29px); letter-spacing:-.04em; line-height:1; }.vp-b__controls { display:grid; align-items:center; padding:0 12px; color:white; grid-template-columns:auto 1fr auto auto; gap:9px; }.vp-b__controls b { font-size:9px; }.vp-b__controls > span { height:4px; background:#343949; border-radius:999px; }.vp-b__controls > span i { display:block; width:34%; height:100%; background:var(--vp-accent); border-radius:inherit; }.vp-b__controls em { color:#aab0bf; font-size:8px; font-style:normal; }.vp-b__video-cta { margin-top:13px; padding:8px 12px; background:#fff; color:#21143d; border-radius:999px; font-size:9px; font-weight:800; }.vp-b__player-foot { position:absolute; z-index:3; right:25px; bottom:18px; left:25px; display:flex; justify-content:center; gap:6px; pointer-events:none; }.vp-b__player-foot span { padding:5px 8px; background:rgba(12,16,27,.75); color:white; border-radius:999px; font-size:8px; font-weight:700; }
.vp-b--video-brand .vp-b__body { grid-template-columns:minmax(0,1fr) 160px; gap:12px; }.vp-b__brand-controls { display:grid; align-content:center; padding:14px; background:white; border-radius:14px; gap:8px; }.vp-b__brand-controls label { display:flex; justify-content:space-between; padding:8px; background:#f3f4f7; border-radius:8px; font-size:9px; }.vp-b__brand-controls label i { width:18px; height:18px; background:var(--vp-accent); border-radius:50%; }.vp-b__brand-controls button { padding:8px; background:#111522; color:white; border-radius:999px; font-size:9px; font-weight:700; }
.vp-b--video-cta .vp-b__body { grid-template-rows:minmax(0,1fr) 70px; gap:10px; }.vp-b__timeline { display:grid; align-items:center; padding:10px 14px; background:white; border-radius:12px; grid-template-columns:auto 1fr auto; gap:12px; }.vp-b__timeline > span { position:relative; height:5px; background:#d8dce4; border-radius:999px; }.vp-b__timeline > span i { position:absolute; top:-4px; width:12px; height:12px; background:var(--vp-accent); border-radius:50%; }.vp-b__timeline > span b { position:absolute; bottom:11px; padding:4px 7px; background:var(--vp-accent); color:white; border-radius:6px; font-size:7px; white-space:nowrap; }.vp-b__timeline button { padding:6px 8px; border:1px solid var(--vp-line); border-radius:999px; font-size:8px; }
.vp-b__lead-capture { display:grid; width:min(78%,340px); padding:16px; background:white; color:#111522; border-radius:13px; gap:8px; }.vp-b__lead-capture strong { font-size:15px; }.vp-b__lead-capture input { min-width:0; padding:8px; border:1px solid #d9dce4; border-radius:7px; font-size:9px; }.vp-b__lead-capture button { padding:8px; background:var(--vp-accent); color:white; border-radius:999px; font-size:9px; font-weight:700; }.vp-b__capture-route { display:flex; align-items:center; justify-content:center; padding:8px; background:white; border-radius:10px; gap:10px; font-size:9px; font-weight:700; }.vp-b__capture-route b { color:var(--vp-accent); }
.vp-b--video-analytics .vp-b__body, .vp-b--webinar-analytics .vp-b__body { padding:18px; background:#f3f5f8; grid-template-rows:auto auto minmax(0,1fr); gap:12px; }.vp-b__analytics-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.vp-b__analytics-head > div { display:grid; gap:3px; }.vp-b__analytics-head strong { font-size:14px; }.vp-b__analytics-head > span { color:var(--vp-muted); font-size:9px; }.vp-b__analytics-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.vp-b__analytics-kpis article { display:grid; padding:11px 13px; background:white; border-radius:10px; gap:4px; }.vp-b__analytics-kpis strong { font-size:clamp(18px,1.8vw,28px); letter-spacing:-.04em; }.vp-b__retention { position:relative; min-height:0; padding:12px; background:#111522; color:white; border-radius:13px; }.vp-b__retention svg { width:100%; height:calc(100% - 24px); overflow:visible; }.vp-b__retention path { fill:none; stroke:var(--vp-accent); stroke-width:5; }.vp-b__retention line { stroke:#ff735e; stroke-dasharray:4 4; }.vp-b__retention text { fill:#ffb09f; font-size:10px; }.vp-b__retention > span { position:absolute; bottom:8px; color:#8f96a6; font-size:8px; }.vp-b__retention > span:last-child { right:12px; }

/* HighTicketGPT. */
.vp-b--high-ticket-script .vp-b__body, .vp-b--high-ticket-history .vp-b__body { background:#f3f1f8; grid-template-columns:185px minmax(0,1fr); }.vp-b__chat-rail { display:flex; min-height:0; flex-direction:column; padding:15px 11px; background:#1a1430; color:white; gap:7px; }.vp-b__chat-rail small { padding:5px 7px; color:#bcb0e8; }.vp-b__chat-rail button { padding:10px; color:#aaa1c2; border-radius:9px; font-size:9px; text-align:left; }.vp-b__chat-rail button.is-active { background:#6f4bd8; color:white; }.vp-b__chat-rail span { padding:9px; margin-top:auto; background:rgba(255,255,255,.08); border-radius:8px; color:#bcb4cc; font-size:8px; }
.vp-b__script-doc { display:grid; align-content:start; min-height:0; overflow:hidden; padding:18px 22px; background:white; gap:8px; }.vp-b__script-doc header { display:flex; align-items:center; justify-content:space-between; }.vp-b__script-doc header button { padding:6px 9px; border:1px solid var(--vp-line); border-radius:999px; font-size:8px; }.vp-b__script-doc h3 { margin:3px 0 5px; font-size:clamp(20px,2vw,31px); letter-spacing:-.05em; }.vp-b__script-doc section { padding:9px 11px; background:#f5f3fa; border-radius:9px; }.vp-b__script-doc section b { color:#6f4bd8; font-size:8px; }.vp-b__script-doc section p { margin:4px 0 0; font-size:10px; line-height:1.42; }.vp-b__script-doc footer { color:#8b5260; font-size:8px; font-weight:680; }
.vp-b--high-ticket-files .vp-b__body { background:#f2f0f7; grid-template-columns:.84fr 1.16fr; }.vp-b__file-stack { display:grid; align-content:center; padding:18px 13px; border-right:1px solid var(--vp-line); gap:7px; }.vp-b__file-stack button { display:grid; align-items:center; padding:9px; background:white; border-radius:9px; grid-template-columns:42px 1fr auto; gap:8px; text-align:left; }.vp-b__file-stack button.is-active { outline:2px solid #6f4bd8; }.vp-b__file-stack button b { display:grid; height:29px; background:#eee9ff; color:#6f4bd8; border-radius:7px; font-size:8px; place-items:center; }.vp-b__file-stack button span { overflow:hidden; font-size:9px; font-weight:680; text-overflow:ellipsis; white-space:nowrap; }.vp-b__file-stack button i { color:#238763; font-style:normal; }
.vp-b__grounded-draft { display:grid; align-content:center; padding:22px; gap:9px; }.vp-b__grounded-draft > strong { max-width:15ch; font-size:clamp(22px,2.3vw,36px); letter-spacing:-.05em; line-height:1; }.vp-b__grounded-draft blockquote { padding:13px; margin:0; border-left:3px solid #6f4bd8; background:white; font-size:10px; line-height:1.45; }.vp-b__grounded-draft > span { color:#6f4bd8; font-size:8px; font-weight:700; }
.vp-b__conversation-list { background:#1a1430; color:white; }.vp-b__conversation-list button:not(.is-active) { color:#aaa1c2; }.vp-b__conversation { display:grid; align-content:center; padding:20px; gap:9px; }.vp-b__conversation article { display:grid; max-width:86%; padding:11px 13px; background:white; border-radius:12px; gap:5px; }.vp-b__conversation article.is-ai { margin-left:auto; background:#eee9ff; }.vp-b__conversation article p { margin:0; font-size:10px; line-height:1.42; }.vp-b__conversation footer { display:flex; align-items:center; justify-content:space-between; padding-top:6px; }.vp-b__conversation footer span { color:#6f4bd8; font-size:8px; font-weight:700; }.vp-b__conversation footer button { padding:7px 9px; background:#1a1430; color:white; border-radius:999px; font-size:8px; }

/* WebinarBaser. Every scene is explicitly a product preview or simulated example. */
.vp-b--webinar-registration .vp-b__body { padding:18px; background:#fff1ec; grid-template-columns:1.05fr .95fr; gap:14px; }.vp-b__registration { display:grid; align-content:center; padding:22px; background:linear-gradient(145deg,#36120c,#a63f27); color:white; border-radius:15px; gap:8px; }.vp-b__registration small { color:#ffc2b2; }.vp-b__registration > strong { max-width:14ch; font-size:clamp(22px,2.3vw,37px); letter-spacing:-.05em; line-height:.98; }.vp-b__registration > span { font-size:9px; }.vp-b__registration label { display:grid; color:#ffd8cc; font-size:8px; gap:4px; }.vp-b__registration input { min-width:0; padding:8px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:white; border-radius:7px; font-size:9px; }.vp-b__registration button { justify-self:start; padding:8px 10px; background:white; color:#5d1c10; border-radius:999px; font-size:9px; font-weight:800; }.vp-b__reminders { display:grid; align-content:center; gap:8px; }.vp-b__reminders article { display:grid; align-items:center; padding:10px; background:white; border-radius:10px; grid-template-columns:35px 1fr; gap:8px; }.vp-b__reminders article b { color:#c04a2a; }.vp-b__reminders article span { font-size:9px; font-weight:680; }
.vp-b--webinar-presenter .vp-b__body { padding:14px; background:#181019; color:white; grid-template-columns:1.2fr .8fr; gap:11px; }.vp-b__webinar-stage { display:grid; min-height:0; overflow:hidden; background:radial-gradient(circle at 50% 35%,#783f51,transparent 42%),#0c0b10; border-radius:13px; grid-template-rows:1fr 38px; }.vp-b__webinar-stage > div { display:grid; align-content:center; justify-items:center; padding:15px; text-align:center; gap:7px; }.vp-b__webinar-stage > div > span { display:grid; width:44px; height:44px; background:white; color:#471827; border-radius:50%; place-items:center; }.vp-b__webinar-stage > div small { color:#f3a991; }.vp-b__webinar-stage > div strong { max-width:16ch; font-size:clamp(17px,1.7vw,27px); line-height:1; }.vp-b__webinar-stage footer { display:flex; align-items:center; padding:0 10px; background:#08080c; gap:6px; }.vp-b__webinar-stage footer button { padding:5px 7px; background:#24232c; color:white; border-radius:6px; font-size:8px; }.vp-b__webinar-stage footer span { margin-left:auto; color:#9ca1ae; font-size:8px; }.vp-b__engagement { display:grid; align-content:center; gap:7px; }.vp-b__engagement article { display:grid; align-items:center; padding:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); border-radius:9px; grid-template-columns:40px 1fr auto; gap:7px; }.vp-b__engagement article b { color:#ff8c6c; font-size:8px; }.vp-b__engagement article span { font-size:9px; }.vp-b__engagement article em { color:#75dbac; font-size:7px; font-style:normal; }.vp-b__engagement > button { padding:8px; background:#fff; border-radius:999px; font-size:8px; font-weight:700; }
.vp-b__webinar-chart { position:relative; min-height:0; padding:11px; background:#21121a; color:white; border-radius:13px; }.vp-b__webinar-chart svg { width:100%; height:calc(100% - 25px); }.vp-b__webinar-chart path { fill:none; stroke:#ff7e5f; stroke-width:5; }.vp-b__webinar-chart line { stroke:#f4b55c; stroke-dasharray:4 4; }.vp-b__webinar-chart > div { display:flex; justify-content:space-between; color:#a9a1a8; font-size:8px; }.vp-b__webinar-chart > b { position:absolute; top:19px; left:60%; padding:5px 7px; background:#f4b55c; color:#311914; border-radius:7px; font-size:8px; }

/* Proof Widget. */
.vp-b--proof-overview .vp-b__body, .vp-b--proof-placement .vp-b__body { padding:14px; background:#eef1e8; grid-template-rows:minmax(0,1fr) auto; gap:10px; }.vp-b__shop, .vp-b__placement-page { position:relative; display:grid; min-height:0; overflow:hidden; background:#fffaf0; border-radius:14px; grid-template-rows:42px 1fr; }.vp-b__shop header, .vp-b__placement-page header { display:flex; align-items:center; justify-content:space-between; padding:0 17px; border-bottom:1px solid #e8e1d2; font-size:10px; }.vp-b__shop header nav { color:#756d5d; font-size:8px; }.vp-b__shop main, .vp-b__placement-page main { display:grid; align-content:center; padding:24px; background:radial-gradient(circle at 84% 20%,#dcecb6,transparent 30%); gap:7px; }.vp-b__shop main > strong, .vp-b__placement-page main > strong { max-width:13ch; font-size:clamp(22px,2.4vw,38px); letter-spacing:-.055em; line-height:.95; }.vp-b__shop main button, .vp-b__placement-page main button { justify-self:start; padding:8px 10px; background:#111522; color:white; border-radius:999px; font-size:8px; }.vp-b__shop aside, .vp-b__placement-page aside, .vp-b__proof-toast { display:flex; align-items:center; gap:9px; padding:11px 12px; background:#15181e; color:white; border-radius:11px; box-shadow:0 12px 28px rgba(16,19,28,.2); }.vp-b__shop aside, .vp-b__placement-page aside { position:absolute; z-index:2; right:13px; bottom:13px; }.vp-b__shop aside i, .vp-b__placement-page aside i, .vp-b__proof-toast > i { display:grid; width:28px; height:28px; background:#77b64b; border-radius:50%; font-style:normal; place-items:center; }.vp-b__shop aside div, .vp-b__proof-toast div { display:grid; gap:2px; }.vp-b__shop aside strong, .vp-b__placement-page aside b, .vp-b__proof-toast strong { font-size:10px; }.vp-b__shop aside span, .vp-b__placement-page aside span, .vp-b__proof-toast span { color:#b7bbc5; font-size:8px; }.vp-b__proof-source, .vp-b__feed-route { display:flex; align-items:center; justify-content:center; padding:9px; background:white; border-radius:10px; gap:10px; }.vp-b__proof-source span, .vp-b__feed-route span { font-size:9px; font-weight:700; }.vp-b__proof-source b, .vp-b__feed-route b { color:var(--vp-accent); }
.vp-b--proof-source .vp-b__body { align-items:center; padding:21px; background:#f1f3ee; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:15px; }.vp-b__sale-record { display:grid; padding:20px; background:white; border-radius:14px; gap:7px; }.vp-b__sale-record > strong { font-size:clamp(19px,1.8vw,28px); }.vp-b__sale-record dl { display:grid; margin:6px 0 0; gap:0; }.vp-b__sale-record dl div { display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--vp-line); font-size:9px; }.vp-b__sale-record dt { color:var(--vp-muted); }.vp-b__sale-record dd { margin:0; }.vp-b__sale-record dd b { color:#26825f; }.vp-b__proof-arrow { color:var(--vp-accent); font-size:28px; }
.vp-b--proof-privacy .vp-b__body { align-items:center; padding:20px; background:#f2f4ef; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:13px; }.vp-b__identity-private, .vp-b__identity-public { display:grid; padding:19px; background:white; border-radius:14px; gap:6px; }.vp-b__identity-private strong, .vp-b__identity-public strong { font-size:clamp(18px,1.8vw,28px); }.vp-b__identity-private span, .vp-b__identity-public span { color:var(--vp-muted); font-size:9px; }.vp-b__privacy-mask { display:grid; justify-items:center; gap:7px; }.vp-b__privacy-mask > span { color:var(--vp-muted); font-size:8px; font-weight:800; }.vp-b__privacy-mask > b { display:grid; width:47px; height:47px; background:var(--vp-accent); color:white; border-radius:50%; place-items:center; }.vp-b__privacy-mask > i { padding:4px 6px; background:#e4e7e1; color:#6c7469; border-radius:999px; font-size:7px; font-style:normal; font-weight:700; }
.vp-b--proof-placement .vp-b__body { grid-template-columns:minmax(0,1fr) 180px; grid-template-rows:1fr; }.vp-b__placement-controls { display:grid; align-content:center; padding:13px; background:white; border-radius:13px; gap:9px; }.vp-b__placement-controls > div { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }.vp-b__placement-controls > div button { height:40px; background:#f0f2ed; border-radius:8px; }.vp-b__placement-controls > div button.is-active { background:var(--vp-accent); color:white; }.vp-b__placement-controls label { display:grid; padding:8px; background:#f4f5f1; border-radius:8px; color:var(--vp-muted); font-size:8px; gap:3px; }.vp-b__placement-controls label b { color:var(--vp-ink); font-size:9px; }.vp-b__placement-controls > button { padding:8px; background:#15181e; color:white; border-radius:999px; font-size:8px; }
.vp-b--proof-feed .vp-b__body { align-content:center; padding:18px; background:#f1f3ee; grid-template-columns:.8fr 1.2fr; grid-template-rows:auto auto; gap:12px; }.vp-b__feed { display:grid; grid-row:1 / 3; gap:7px; }.vp-b__feed article { display:grid; align-items:center; padding:10px; background:white; border-radius:9px; grid-template-columns:24px 1fr auto; gap:8px; }.vp-b__feed article.is-active { outline:2px solid var(--vp-accent); }.vp-b__feed article i { display:grid; width:20px; height:20px; background:#ddefcf; color:#3c7a25; border-radius:50%; font-size:8px; font-style:normal; place-items:center; }.vp-b__feed article strong { font-size:9px; }.vp-b__feed article span { color:var(--vp-muted); font-size:8px; }.vp-b__proof-toast.is-wide { justify-self:center; min-width:80%; }

/* AffiliatePages. */
.vp-b--affiliate-sections .vp-b__body, .vp-b--affiliate-order .vp-b__body, .vp-b--affiliate-saved .vp-b__body { background:#f3eef8; grid-template-columns:190px minmax(0,1fr); }.vp-b__section-rail, .vp-b__order-list { display:flex; min-height:0; flex-direction:column; padding:13px 10px; border-right:1px solid var(--vp-line); gap:5px; }.vp-b__section-rail > small { padding:4px 7px; }.vp-b__section-rail button { display:grid; align-items:center; padding:7px 8px; border-radius:8px; grid-template-columns:29px 1fr; gap:6px; text-align:left; }.vp-b__section-rail button.is-active { background:#6f4bd8; color:white; }.vp-b__section-rail button i { font-size:7px; font-style:normal; }.vp-b__section-rail button span { font-size:9px; font-weight:680; }
.vp-b__section-editor { display:grid; min-height:0; padding:16px; grid-template-rows:auto 1fr; gap:10px; }.vp-b__section-editor header { display:flex; align-items:center; justify-content:space-between; }.vp-b__section-editor header > div { display:grid; gap:2px; }.vp-b__section-editor header strong { font-size:13px; }.vp-b__section-editor header button { padding:7px 9px; background:#6f4bd8; color:white; border-radius:999px; font-size:8px; }.vp-b__section-editor article { display:grid; align-content:center; padding:20px; background:white; border-radius:13px; gap:8px; }.vp-b__section-editor h3 { max-width:17ch; margin:0; font-size:clamp(21px,2.2vw,35px); letter-spacing:-.05em; line-height:1; }.vp-b__section-editor p { max-width:45ch; margin:0; color:var(--vp-muted); font-size:10px; line-height:1.42; }.vp-b__section-editor blockquote { padding:8px 10px; margin:0; border-left:3px solid #6f4bd8; background:#f4f1fa; font-size:8px; font-weight:680; }
.vp-b__order-list header { display:flex; align-items:center; justify-content:space-between; padding:5px; }.vp-b__order-list header button { padding:5px 7px; background:white; border-radius:999px; font-size:8px; }.vp-b__order-list article { display:grid; align-items:center; padding:8px; background:white; border-radius:8px; grid-template-columns:auto 1fr auto; gap:7px; }.vp-b__order-list article > b { color:#aaa2b3; }.vp-b__order-list article > span { display:grid; align-items:center; font-size:9px; font-weight:680; grid-template-columns:24px 1fr; }.vp-b__order-list article i { color:#6f4bd8; font-size:7px; font-style:normal; }.vp-b__order-list article em { color:#26825f; font-size:8px; font-style:normal; }
.vp-b__affiliate-preview, .vp-b__saved-preview { display:grid; min-height:0; overflow:hidden; margin:14px; background:white; border-radius:13px; grid-template-rows:37px 1fr; }.vp-b__affiliate-preview > small { display:none; }.vp-b__affiliate-preview header { display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid var(--vp-line); }.vp-b__affiliate-preview header b { font-size:10px; }.vp-b__affiliate-preview header span { color:var(--vp-muted); font-size:7px; }.vp-b__affiliate-preview main, .vp-b__saved-preview main { display:grid; align-content:center; justify-items:start; padding:21px; background:radial-gradient(circle at 85% 25%,#e4d5ff,transparent 28%),#fffaf2; gap:7px; }.vp-b__affiliate-preview main i { padding:4px 6px; background:#eadfff; color:#6740c8; border-radius:999px; font-size:7px; font-style:normal; font-weight:800; }.vp-b__affiliate-preview h3 { max-width:16ch; margin:0; font-size:clamp(19px,1.9vw,30px); letter-spacing:-.05em; line-height:1; }.vp-b__affiliate-preview p { margin:0; color:#6f675f; font-size:9px; }.vp-b__affiliate-preview button, .vp-b__saved-preview main button { padding:7px 9px; background:#2b174d; color:white; border-radius:999px; font-size:8px; }
.vp-b__saved-list footer { margin-top:auto; }.vp-b__saved-list footer button { padding:7px 9px; background:#2b174d; color:white; border-radius:999px; font-size:8px; }.vp-b__saved-preview { grid-template-rows:37px 1fr auto; }.vp-b__saved-preview > header { display:flex; align-items:center; justify-content:space-between; padding:0 11px; border-bottom:1px solid var(--vp-line); font-size:8px; }.vp-b__saved-preview > header button { padding:6px 8px; background:#6f4bd8; color:white; border-radius:999px; }.vp-b__saved-preview main small { color:#6f4bd8; }.vp-b__saved-preview main > strong { max-width:14ch; font-size:clamp(20px,2vw,32px); letter-spacing:-.05em; line-height:.98; }.vp-b__saved-preview main p { margin:0; color:var(--vp-muted); font-size:9px; }.vp-b__saved-preview footer { display:flex; justify-content:space-between; padding:8px 11px; background:#2b174d; color:white; font-size:8px; }.vp-b__saved-preview footer span { color:#c7b5e4; }

@media (max-width: 760px) {
  .vp-b { grid-template-rows: 34px minmax(0, 1fr) auto; }
  .vp-b__bar { padding: 0 11px; gap: 8px; }
  .vp-b__bar i { width: 6px; height: 6px; }
  .vp-b__bar b { font-size: 9px; }
  .vp-b__note { padding: 4px 8px; font-size: 7px; }
  .vp-b small { font-size: 7px; }

  .vp-b--creator-picker .vp-b__body, .vp-b--imager-tools .vp-b__body { grid-template-columns: 86px minmax(0, 1fr); }
  .vp-b__studio-rail, .vp-b__tool-rail { padding: 8px 6px; gap: 2px; }
  .vp-b__studio-rail span, .vp-b__tool-rail span { padding: 5px 6px; font-size: 7px; }
  .vp-b__studio-stage > div, .vp-b__tool-result > div { right: 10px; bottom: 9px; left: 10px; }
  .vp-b__studio-stage > div strong, .vp-b__tool-result > div strong { font-size: 15px; }
  .vp-b__media-copy { right: 12px; bottom: 38px; left: 12px; }
  .vp-b__media-copy strong { font-size: 17px; }
  .vp-b__chips { right: 10px; bottom: 9px; left: 10px; gap: 3px; }
  .vp-b__chips span { padding: 3px 5px; font-size: 6px; }
  .vp-b__gallery-grid { gap: 4px; }
  .vp-b__gallery-grid figure:nth-child(3) { display: none; }
  .vp-b__gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .vp-b__canvas { padding: 10px; gap: 7px; }
  .vp-b__flow { gap: 3px; }
  .vp-b__flow-node { width: 30%; min-height: 82px; padding: 8px; gap: 3px; }
  .vp-b__flow-node strong { font-size: 9px; }
  .vp-b__flow-node span { font-size: 6px; }
  .vp-b__flow-arrow { font-size: 12px; }
  .vp-b__flow-footer { padding: 5px; font-size: 7px; }

  .vp-b--automation-trigger .vp-b__body, .vp-b--proof-source .vp-b__body, .vp-b--proof-privacy .vp-b__body { padding: 10px; gap: 6px; }
  .vp-b__event, .vp-b__event-start, .vp-b__sale-record, .vp-b__identity-private, .vp-b__identity-public { padding: 10px; }
  .vp-b__event strong, .vp-b__event-start strong, .vp-b__sale-record > strong, .vp-b__identity-private strong, .vp-b__identity-public strong { font-size: 13px; }
  .vp-b__event-arrow, .vp-b__proof-arrow { font-size: 16px; }
  .vp-b__privacy-mask > b { width: 32px; height: 32px; }
  .vp-b__privacy-mask > i { font-size: 5px; }

  .vp-b--automation-history .vp-b__body, .vp-b--sequence-library .vp-b__body, .vp-b--high-ticket-script .vp-b__body, .vp-b--high-ticket-history .vp-b__body, .vp-b--high-ticket-files .vp-b__body, .vp-b--affiliate-sections .vp-b__body, .vp-b--affiliate-order .vp-b__body, .vp-b--affiliate-saved .vp-b__body { grid-template-columns: 105px minmax(0,1fr); }
  .vp-b__runs, .vp-b__library, .vp-b__conversation-list, .vp-b__saved-list, .vp-b__chat-rail, .vp-b__file-stack, .vp-b__section-rail, .vp-b__order-list { padding: 7px 5px; gap: 3px; }
  .vp-b__runs button, .vp-b__library button, .vp-b__conversation-list button, .vp-b__saved-list button, .vp-b__chat-rail button, .vp-b__file-stack button { padding: 6px; font-size: 6px; }
  .vp-b__runs button { grid-template-columns: auto 1fr; }
  .vp-b__runs button em { display:none; }
  .vp-b__run-trace, .vp-b__sequence-preview, .vp-b__grounded-draft, .vp-b__conversation, .vp-b__section-editor { padding: 10px; }
  .vp-b__run-trace > strong, .vp-b__grounded-draft > strong { font-size: 16px; }
  .vp-b__run-trace li, .vp-b__conversation article, .vp-b__script-doc section { padding: 6px; font-size: 7px; }

  .vp-b__sequence-line { gap: 3px; }
  .vp-b__sequence-line article { width: 31%; min-height: 90px; padding: 8px; gap: 3px; }
  .vp-b__sequence-line strong { font-size: 9px; }
  .vp-b__sequence-line > b { font-size: 11px; }
  .vp-b__contact-strip { padding: 5px; gap: 3px; }
  .vp-b__contact-strip b { padding: 3px 4px; font-size: 6px; }

  .vp-b--forms-overview .vp-b__body, .vp-b--forms-templates .vp-b__body, .vp-b--forms-report .vp-b__body, .vp-b--webinar-registration .vp-b__body { padding: 8px; grid-template-columns: 1.08fr .92fr; gap: 6px; }
  .vp-b__form-page, .vp-b__registration { padding: 10px; gap: 4px; }
  .vp-b__form-page > strong, .vp-b__registration > strong { font-size: 16px; }
  .vp-b__form-page > p, .vp-b__form-page > span, .vp-b__registration > span { display: none; }
  .vp-b__form-page input, .vp-b__registration input { padding: 5px; font-size: 7px; }
  .vp-b__form-page button, .vp-b__registration button { padding: 5px 7px; font-size: 7px; }
  .vp-b__form-actions article, .vp-b__submission-actions article, .vp-b__reminders article { padding: 6px; }

  .vp-b--video-brand .vp-b__body, .vp-b--proof-placement .vp-b__body { grid-template-columns: minmax(0,1fr) 100px; }
  .vp-b__brand-controls, .vp-b__placement-controls { padding: 7px; gap: 4px; }
  .vp-b__brand-controls label { padding: 5px; font-size: 6px; }
  .vp-b__video-frame > strong { font-size: 14px; }
  .vp-b__play { width: 34px; height: 34px; margin-bottom: 5px; }
  .vp-b__video-cta { margin-top: 6px; padding: 5px 7px; font-size: 6px; }
  .vp-b__player-foot { display: none; }
  .vp-b__analytics-kpis article { padding: 6px; }
  .vp-b__analytics-kpis strong { font-size: 15px; }

  .vp-b__script-doc { padding: 9px; gap: 4px; }
  .vp-b__script-doc h3 { font-size: 16px; }
  .vp-b__script-doc section p, .vp-b__grounded-draft blockquote, .vp-b__conversation article p { font-size: 7px; }
  .vp-b__file-stack button { grid-template-columns: 27px 1fr; }
  .vp-b__file-stack button i { display:none; }

  .vp-b--webinar-presenter .vp-b__body { padding: 7px; gap: 5px; }
  .vp-b__engagement article { padding: 5px; grid-template-columns: 28px 1fr; }
  .vp-b__engagement article em { display:none; }
  .vp-b__webinar-stage > div strong { font-size: 14px; }

  .vp-b__shop main, .vp-b__placement-page main { padding: 12px; }
  .vp-b__shop main > strong, .vp-b__placement-page main > strong { font-size: 16px; }
  .vp-b__shop aside, .vp-b__placement-page aside { right: 6px; bottom: 6px; padding: 7px; }
  .vp-b__shop aside i, .vp-b__placement-page aside i, .vp-b__proof-toast > i { width: 20px; height: 20px; }
  .vp-b__shop aside strong, .vp-b__proof-toast strong { font-size: 7px; }
  .vp-b__shop aside span, .vp-b__proof-toast span { font-size: 6px; }

  .vp-b__section-rail button { padding: 4px; grid-template-columns: 19px 1fr; }
  .vp-b__section-rail button span, .vp-b__order-list article > span { font-size: 6px; }
  .vp-b__section-editor h3, .vp-b__affiliate-preview h3, .vp-b__saved-preview main > strong { font-size: 16px; }
  .vp-b__section-editor p { font-size: 7px; }
  .vp-b__affiliate-preview, .vp-b__saved-preview { margin: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-b *, .vp-b *::before, .vp-b *::after { animation: none !important; transition: none !important; }
}