/* Paid without the onboarding (flag paid_start), js/views/paid-start.js.
   Step 0 with the plan confirmed on top. */

body.new-ui .ps-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
body.new-ui .ps-receipt {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-card);
  font-size: 13.5px; color: var(--ui-ink-2);
}
body.new-ui .ps-ok {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ui-accent-soft); color: var(--ui-accent-ink);
}
body.new-ui .ps-ok svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.new-ui .ps-head .ps-sub { margin: 0; max-width: 60ch; line-height: 1.55; }

/* "Included in your Agency plan", under the agency card */
body.new-ui .ps-incl { font-size: 12.5px; color: var(--ui-ink-3); }

/* The example tag in the sample report's corner */
body.new-ui .ou-rep-top .ou-pill-r { margin-left: auto; }

/* The first brand's step: one way on */
body.new-ui .ps-next { display: flex; flex-direction: column; gap: 12px; }
body.new-ui .ps-next .ou-hint { margin: 0; }

/* The empty dashboard: pick the steps up again */
body.new-ui .ps-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; padding: 18px 20px;
  border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-card); box-shadow: var(--ui-shadow);
}
body.new-ui .ps-resume[hidden] { display: none; }
body.new-ui .ps-resume div { display: flex; flex-direction: column; gap: 4px; }
body.new-ui .ps-resume b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ui-ink); }
body.new-ui .ps-resume span { font-size: 14px; color: var(--ui-ink-2); }

/* One pattern on every step of this path: the ink primary on top, Back as a
   text link under it (Valentina, round 2). Markup order is Back, primary. */
body.new-ui .ou-direct .ou-nav, body.new-ui .ou-direct .ou-btns { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
body.new-ui .ou-direct .ou-nav .ui-btn:not(.ghost), body.new-ui .ou-direct .ou-btns .ui-btn:not(.ghost) {
  background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-paper);
}
body.new-ui .ou-direct .ou-nav .ui-btn:not(.ghost):hover:not(:disabled),
body.new-ui .ou-direct .ou-btns .ui-btn:not(.ghost):hover:not(:disabled) { filter: none; opacity: 1; box-shadow: 0 0 0 3px rgba(31, 79, 255, .18); }
body.new-ui .ou-direct .ou-nav .ui-btn.ghost, body.new-ui .ou-direct .ou-btns .ui-btn.ghost {
  align-self: center; height: auto; padding: 6px 8px; border: 0; background: none; box-shadow: none;
  font-size: 14px; color: var(--ui-ink-2); text-decoration: underline; text-underline-offset: 3px;
}
body.new-ui .ou-direct .ou-nav .ui-btn.ghost:hover:not(:disabled), body.new-ui .ou-direct .ou-btns .ui-btn.ghost:hover:not(:disabled) { background: none; color: var(--ui-ink); }
body.new-ui .ou-direct .ou-nav > span:empty { display: none; }

/* Questions and rivals: the action stays in sight while the list scrolls */
body.new-ui .ps-form .ou-nav {
  position: sticky; bottom: 0; z-index: 2; margin: 0 -44px -40px; padding: 14px 44px 18px;
  background: var(--ui-card); border-top: 1px solid var(--ui-line);
}
body.new-ui .ps-form .ou-lede { line-height: 1.5; }

/* Lighter rows: one card with hairlines instead of a box per question */
body.new-ui .ou-direct .ou-items { gap: 0; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-card); overflow: hidden; }
body.new-ui .ou-direct .ou-item { border: 0; border-radius: 0; min-height: 48px; background: none; }
body.new-ui .ou-direct .ou-item + .ou-item { border-top: 1px solid var(--ui-line); }

/* The report on the right, with the rivals as rows */
body.new-ui .ps-rows { display: flex; flex-direction: column; margin-top: 8px; }
body.new-ui .ps-rows span { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; min-width: 0; }
body.new-ui .ps-rows span + span { border-top: 1px solid var(--ui-line); }
body.new-ui .ps-rows b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui .ps-rows .fav { width: 16px; height: 16px; border-radius: 4px; flex: none; }

/* No logo on their site: a place to drop one where it will go */
body.new-ui .ou-drop {
  position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; flex: none;
  border: 1px dashed var(--ui-ink-3); border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ui-ink-2);
  cursor: pointer; white-space: nowrap; pointer-events: auto;
}
body.new-ui .ou-drop:hover { border-color: var(--ui-ink); color: var(--ui-ink); }
body.new-ui .ou-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* "The site says English; we measure in Spanish. Change" */
body.new-ui .ou-lang-note[hidden] { display: none; }
body.new-ui .ou-lang-note .ui-link { font-size: 13px; }

/* The empty dashboard with no brand yet: only the way back into the steps */
body.new-ui #newBrandBox.ps-only > h1, body.new-ui #newBrandBox.ps-only > .sub,
body.new-ui #newBrandBox.ps-only > #form, body.new-ui #newBrandBox.ps-only > .lang-row,
body.new-ui #newBrandBox.ps-only > .nb { display: none; }

@media (max-width: 640px) {
  body.new-ui .ps-resume { flex-direction: column; align-items: stretch; }
  body.new-ui .ps-receipt { border-radius: 14px; text-align: left; }
  body.new-ui .ps-form .ou-nav { margin: 0 -16px -28px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
}