/* Live partner portal: the new design applied to the wwm-partners plugin's
   own login, signup and dashboard markup (moved into the shells by live.js).
   Scoped under .wwm-pp-live so it wins over the plugin's partners.css. */

/* ---------- Shared ---------- */
.wwm-pp-live .wwm-pt { gap: 20px; }
.wwm-pp-live .wwm-pt-auth { width: 100%; }
.wwm-pp-live .wwm-pt-form { gap: 16px; }
.wwm-pp-live .wwm-pt-grid { gap: 16px; }
.wwm-pp-live .wwm-pt-field { gap: 6px; font-size: var(--text-s); font-weight: 600; min-width: 0; }
.wwm-pp-live .wwm-pt-input { border-radius: 12px; font-size: var(--text-s); }
.wwm-pp-live .wwm-pt-input:focus { border-color: transparent; }
.wwm-pp-live .wwm-pp-pw .wwm-pt-input { padding-right: 72px; }
.wwm-pp-live .wwm-pt-check { font-size: var(--text-meta); }
.wwm-pp-live .wwm-pt-check input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.wwm-pp-live .wwm-pt-submit.wwm-pp-submit { justify-self: stretch; justify-content: center; }
.wwm-pp-live .wwm-pp-more .wwm-pt-grid { gap: 16px; }
.wwm-pp-live .wwm-pt-note { border-radius: 12px; }
.wwm-pp-form-head { display: grid; gap: 4px; }
.wwm-pp-form-head .wwm-card-title { margin: 0; }

/* ---------- Log in / sign up ---------- */
.wwm-pp-live .wwm-pt-tabs.wwm-pp-seg { display: grid; gap: 0; }
.wwm-pp-live .wwm-pt-tabs .wwm-chip-btn.wwm-pp-seg-b {
  padding: 10px 14px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: var(--text-s); font-weight: 600; color: var(--muted); box-shadow: none;
}
.wwm-pp-live .wwm-pt-tabs .wwm-chip-btn.wwm-pp-seg-b.is-active {
  background: var(--on-brand); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- Dashboard ---------- */
.wwm-pp-live .wwm-pt-dash { gap: 24px; }
.wwm-pp-live .wwm-pt-head { align-items: flex-end; }
.wwm-pp-live .wwm-pt-who { display: none; } /* name, badge and log out live in the side menu */

.wwm-pp-live .wwm-pt-stats { gap: 12px; border: 0; }
.wwm-pp-live .wwm-pt-stat {
  padding: 18px 20px; background: var(--on-brand);
  border: 1px solid var(--rule); border-radius: 16px; box-shadow: none;
}
.wwm-pp-live .wwm-pt-stat .wwm-stat {
  margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 800;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.wwm-pp-live .wwm-pt-meter,
.wwm-pp-live .wwm-pt-card {
  padding: 24px; background: var(--on-brand);
  border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 30px 60px -48px var(--ink);
}
.wwm-pp-live .wwm-pt-meter { gap: 10px; }
.wwm-pp-live .wwm-pt-card .wwm-ft1-k { margin-bottom: 0; }
.wwm-pp-live .wwm-pt-cols { gap: 24px; }
.wwm-pp-live .wwm-pt-empty { border-radius: 14px; background: var(--paper); border-color: var(--rule); }

.wwm-pp-live.is-empty { grid-template-columns: minmax(0, 1fr); }
.wwm-pp-live.is-empty .wwm-pp-side { display: none; }
.wwm-pp-live.is-empty .wwm-pp-main { width: min(560px, 100%); margin: 0 auto; }

/* ---------- Dashboard extras (built by live.js) ---------- */
.wwm-pp-quick { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; }
.wwm-pp-quick .wwm-btn-outline.wwm-pp-submit { justify-self: auto; }

.wwm-pp-live .wwm-pt-stat { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.wwm-pp-live .wwm-pt-stat:hover { transform: translateY(-2px); border-color: var(--rule-2); box-shadow: 0 18px 36px -30px var(--ink); }

.wwm-pp-live .wwm-pt-meter > .wwm-split { display: none; } /* the ladder title says the same */
.wwm-pp-ladder-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.wwm-pp-ladder-top .wwm-ft1-k { margin-bottom: 4px; }
.wwm-pp-ladder-top .wwm-card-title { margin: 0; }
.wwm-pp-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.wwm-pp-rung {
  display: grid; gap: 8px; align-content: start; justify-items: start; padding: 14px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.wwm-pp-rung .wwm-tier-badge { opacity: 0.55; }
.wwm-pp-rung.is-done .wwm-tier-badge, .wwm-pp-rung.is-now .wwm-tier-badge { opacity: 1; }
.wwm-pp-rung.is-now { border-color: var(--mock-pos); background: var(--mock-pos-tint); box-shadow: 0 0 0 3px var(--mock-pos-tint); }
.wwm-pp-rung-d { font-size: 12px; line-height: 1.4; color: var(--muted); }
.wwm-pp-rung.is-now .wwm-pp-rung-d { color: var(--ink); }

.wwm-pp-calc { gap: 20px; }
.wwm-pp-calc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.wwm-pp-calc-head .wwm-card-title { margin: 0; }
.wwm-pp-calc-total { display: grid; gap: 6px; justify-items: end; text-align: right; }
.wwm-pp-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wwm-pp-ctrl { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.wwm-pp-n { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.wwm-pp-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 4px 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--mock-pos) 0 var(--pp-fill, 30%), var(--rule-2) var(--pp-fill, 30%) 100%); cursor: pointer;
}
.wwm-pp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border: 3px solid var(--on-brand); border-radius: 50%;
  background: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.wwm-pp-range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--on-brand); border-radius: 50%; background: var(--ink); }
.wwm-pp-range:focus-visible { outline: 2px solid var(--mock-pos); outline-offset: 4px; }
.wwm-pp-calc .wwm-tier-badge { transition: background-color 0.25s ease, color 0.25s ease; }
.wwm-pp-calc .is-pop { animation: wwm-pp-pop 0.5s ease; }
@keyframes wwm-pp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.wwm-pp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wwm-pp-filters .wwm-chip-btn { border: 0; font-family: inherit; cursor: pointer; }
.wwm-pp-filters .wwm-chip-btn span { margin-left: 4px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.wwm-pp-live .wwm-pt-ref[hidden] { display: none; }


@media (prefers-reduced-motion: reduce) {
  .wwm-pp-live .wwm-pt-stat, .wwm-pp-rung, .wwm-pp-calc .wwm-tier-badge, .wwm-pp-tile, .wwm-pp-tile-go span { transition: none; }
  .wwm-pp-view.is-in, .wwm-pp-calc .is-pop { animation: none; }
}

/* ---------- Screens: one per menu item ---------- */
.wwm-pp-view { display: grid; gap: 24px; }
.wwm-pp-view[hidden] { display: none; }
.wwm-pp-view.is-in { animation: wwm-pp-in 0.35s ease both; }
@keyframes wwm-pp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wwm-pp-view-head { display: grid; gap: 10px; max-width: 64ch; }
.wwm-pp-view-head .wwm-eyebrow, .wwm-pp-view-head .wwm-h2, .wwm-pp-view-head .wwm-deck { margin: 0; }
.wwm-pp-view-b { display: grid; gap: 24px; min-width: 0; }
.wwm-pp-view--refer .wwm-pp-view-b { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.wwm-pp-view--refer .wwm-pp-view-b > :first-child { grid-row: span 2; }
.wwm-pp-view--refer .wwm-pt-card > .wwm-card-title,
.wwm-pp-view--referrals .wwm-pt-list > .wwm-split .wwm-card-title { display: none; }
.wwm-pp-view--referrals .wwm-pt-list > .wwm-split { justify-content: flex-end; }
/* Referrals: list on the left, how-it-works beside it */
.wwm-pp-view--referrals .wwm-pp-view-b { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.wwm-pp-how .wwm-ft1-k + .wwm-pp-small { margin-top: -6px; }
.wwm-pp-stages, .wwm-pp-facts { display: grid; gap: 12px; margin: 0 0 6px; padding: 0; list-style: none; }
.wwm-pp-stages li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: var(--text-meta); line-height: 1.45; }
.wwm-pp-stages strong { display: block; color: var(--ink); font-size: var(--text-s); }
.wwm-pp-stages .wwm-pp-step-n { flex-shrink: 0; }
.wwm-pp-facts li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: var(--text-meta); line-height: 1.5; }
.wwm-pp-facts li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--mock-pos); }
.wwm-pp-next { gap: 14px; }
.wwm-pp-next .wwm-pp-steps { margin: 0; }

/* Referral link card (overview) and its copy on the Refer screen */
.wwm-pt-link { display: grid; gap: 16px; }
.wwm-pt-link .wwm-card-title { margin: 0; }
.wwm-pt-link-row { display: flex; gap: 10px; align-items: center; }
.wwm-pt-link-url { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-s); }
.wwm-pt-link-copy { --btn-pr: 18px; flex-shrink: 0; } /* no arrow, so even padding both sides */
.wwm-pt-link-share { display: flex; flex-wrap: wrap; gap: 8px; }
.wwm-pt-link-share .wwm-chip-btn { text-decoration: none; }
.wwm-pt-link-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.wwm-pt-link-stats div { display: grid; gap: 2px; }
.wwm-pt-link-stats dt { font-size: var(--text-meta); color: var(--muted); }
.wwm-pt-link-stats dd { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.wwm-pt-link-mini .wwm-pt-link-row { flex-direction: column; align-items: stretch; }
.wwm-pt-link-mini .wwm-pp-small { margin: 0; }
/* Own screens: the page heading already says what the card is */
.wwm-pp-view--link .wwm-pt-link > div:first-child, .wwm-pp-view--link .wwm-pt-link > .wwm-pp-small { display: none; }
.wwm-pp-view--withdraw .wwm-pp-cols { grid-template-columns: minmax(0, 1fr); }
.wwm-pp-view--withdraw .wwm-pp-more-b { max-width: 720px; }
.wwm-pp-view--withdraw .wwm-pp-seg--3 { max-width: 480px; }
.wwm-pp-view--payouts .wwm-pp-quick { margin: 0; }
.wwm-pt-payouts { display: grid; gap: 24px; min-width: 0; }
.wwm-pt-payouts .wwm-pt-note { margin: 0; }
/* Withdraw on top, payout methods directly under it, both full width so the method fields have room. */
.wwm-pt-payouts .wwm-pp-cols { grid-template-columns: minmax(0, 1fr); }
.wwm-pt-payouts .wwm-pp-more-b { max-width: 720px; }
.wwm-pt-payouts .wwm-pp-seg--3 { max-width: 480px; }
.wwm-pp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wwm-pp-tile {
  display: grid; gap: 8px; align-content: start; padding: 20px;
  background: var(--on-brand); border: 1px solid var(--rule); border-radius: 16px;
  color: var(--ink); text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wwm-pp-tile .wwm-ft1-k { margin: 0; }
.wwm-pp-tile:hover { transform: translateY(-2px); border-color: var(--rule-2); box-shadow: 0 18px 36px -30px var(--ink); }
.wwm-pp-tile:focus-visible { outline: 2px solid var(--mock-pos); outline-offset: 2px; }
.wwm-pp-tile-go { margin-top: 6px; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); }
.wwm-pp-tile-go span { display: inline-block; transition: transform 0.2s ease; }
.wwm-pp-tile:hover .wwm-pp-tile-go span { transform: translateX(3px); }

@media (max-width: 1119px) {
  .wwm-pp-live .wwm-pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwm-pp-live .wwm-pt-cols { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwm-pp-view--refer .wwm-pp-view-b,
  .wwm-pp-view--referrals .wwm-pp-view-b { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-view--refer .wwm-pp-view-b > :first-child { grid-row: auto; }
}

@media (max-width: 767px) {
  .wwm-pt-link-row { flex-direction: column; align-items: stretch; }
  .wwm-pt-link-url { font-size: 13px; }
  .wwm-pt-payouts .wwm-pp-seg-b { padding-inline: 6px; white-space: nowrap; }
  .wwm-pp-live .wwm-pt-stat { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .wwm-pp-live .wwm-pt-meter, .wwm-pp-live .wwm-pt-card { padding: 20px; }
  .wwm-pp-live .wwm-pt-stat .wwm-stat { font-size: 26px; }
  .wwm-pp-calc-grid, .wwm-pp-tiles { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-calc-total { justify-items: start; text-align: left; }
  .wwm-pp-quick > * { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Full-screen log in / sign up (.wwm-pp-split) ----------
   No site header or footer on this page; the page's own wrappers go flush.
   Left: plain dark panel with a live earnings slider.
   Right: the plugin's forms on plain white. No grid lines on either side. */
body:has(.wwm-pp-split, .wwm-pp-app) .wwm-hd1,
body:has(.wwm-pp-split, .wwm-pp-app) .wwm-ft1,
body:has(.wwm-pp-split, .wwm-pp-app) .wwm-ft1-cta { display: none !important; }
body:has(.wwm-pp-split, .wwm-pp-app) { background: var(--neutral-100); }
body:has(.wwm-pp-split, .wwm-pp-app) .wwm-section-ruled { border: 0; background: transparent; }
body:has(.wwm-pp-split, .wwm-pp-app) .wwm-section-ruled > .wwm-wrap { max-width: none; padding: 0; border: 0; }

.wwm-pp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100svh - 24px - var(--wp-admin--admin-bar--height, 0px));
  margin: 12px;
  padding: 10px;
  border-radius: 28px;
  background: var(--on-brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -36px rgba(0, 0, 0, 0.25);
  color: var(--ink);
}

/* Left panel */
.wwm-pp-split-l {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(28px, 3.4vw, 48px);
  overflow: hidden;
  border-radius: 20px;
  color: var(--paper);
  background: var(--ink);
  isolation: isolate;
}
.wwm-pp-split-l::before,
.wwm-pp-split-l::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: wwm-pp-drift 18s ease-in-out infinite alternate;
}
.wwm-pp-split-l::before { top: -20%; left: -15%; background: var(--primary-500); }
.wwm-pp-split-l::after { right: -20%; bottom: -25%; background: var(--mock-pos); animation-delay: -9s; }
@keyframes wwm-pp-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8%, 6%) scale(1.12); }
}

.wwm-pp-split-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wwm-pp-split-logo.wwm-hd1-logo { color: var(--paper); text-decoration: none; }
.wwm-pp-split-k {
  display: flex; align-items: center; gap: 12px; margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.wwm-pp-split-k::before { content: ""; width: 48px; height: 1px; background: rgba(255, 255, 255, 0.35); }

.wwm-pp-split-hero { display: grid; gap: 16px; margin-top: auto; }
.wwm-pp-split-h {
  max-width: 13ch; margin: 0;
  color: var(--paper);
  font-family: var(--serif); font-size: clamp(40px, 4.6vw, 72px); font-weight: var(--font-800);
  line-height: 0.98; letter-spacing: var(--heading-h1-tracking);
}
.wwm-pp-split-h em { font-style: normal; font-weight: var(--font-400); color: rgba(255, 255, 255, 0.72); }
.wwm-pp-split-sub { max-width: 44ch; margin: 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-m); line-height: var(--leading-relaxed); }

/* Live earnings slider (dash.js) */
.wwm-pp-split-calc {
  display: grid; gap: 12px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}
.wwm-pp-split-calc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wwm-pp-split-calc-k { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: var(--text-meta); }
.wwm-pp-split-calc-k strong { color: var(--paper); font-weight: 600; }
.wwm-pp-split-calc .wwm-tier-badge { white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.wwm-pp-split-calc-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wwm-pp-split-big {
  margin: 0; color: var(--paper);
  font-family: var(--serif); font-size: clamp(36px, 3.4vw, 48px); font-weight: var(--font-800);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.wwm-pp-split-then { margin: 0; color: var(--mock-live-soft); font-size: var(--text-meta); }
.wwm-pp-split-calc .wwm-pd-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 6px 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--mock-live) 0 var(--pd-fill, 36%), rgba(255, 255, 255, 0.18) var(--pd-fill, 36%) 100%);
}
.wwm-pp-split-calc .wwm-pd-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}
.wwm-pp-split-calc .wwm-pd-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.wwm-pp-split-calc .wwm-pd-range:focus-visible { outline: 2px solid var(--mock-live); outline-offset: 4px; }
.wwm-pp-split-calc .is-pop { animation: wwm-pp-pop 0.5s ease; }
@keyframes wwm-pp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.wwm-pp-split-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.85); font-size: var(--text-meta); }
.wwm-pp-split-facts li::before { content: "✓"; margin-right: 8px; color: var(--mock-live); font-weight: 700; }

/* Right panel */
.wwm-pp-split-r {
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 80px);
  background: var(--on-brand);
  border-radius: 0 20px 20px 0;
}
.wwm-pp-split-bar { display: flex; justify-content: space-between; gap: 16px; }
.wwm-pp-split-back { color: var(--neutral-600); font-size: var(--text-meta); text-decoration: none; transition: color 0.2s ease; }
.wwm-pp-split-back:hover { color: var(--ink); }
.wwm-pp-split-form { width: min(460px, 100%); margin: auto; }
.wwm-pp-split-foot { margin: 0; color: var(--neutral-600); font-size: var(--text-meta); text-align: center; }
.wwm-pp-split-foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* Forms inside the split */
.wwm-pp-split .wwm-pt-auth { gap: 24px; }
.wwm-pp-split .wwm-pp-form-head .wwm-card-title { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: var(--heading-h3-tracking); }
.wwm-pp-split .wwm-pt-input { min-height: 48px; border-color: var(--neutral-200); background: var(--on-brand); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.wwm-pp-split .wwm-pt-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 12%, transparent); outline: 0; }
.wwm-pp-split .wwm-pt-input:user-valid { border-color: var(--mock-pos-line); }
.wwm-pp-split .wwm-pt-input:user-invalid { border-color: var(--danger); }
.wwm-pp-split .wwm-pt-form.is-in { animation: wwm-pp-in 0.35s ease both; }
@keyframes wwm-pp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sliding tab indicator */
.wwm-pp-split .wwm-pt-tabs.wwm-pp-seg { position: relative; isolation: isolate; }
.wwm-pp-split .wwm-pt-tabs.wwm-pp-seg::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wwm-pp-split .wwm-pt-tabs[data-pp-on="signup"]::before { transform: translateX(100%); }
.wwm-pp-split .wwm-pt-tabs .wwm-chip-btn.wwm-pp-seg-b,
.wwm-pp-split .wwm-pt-tabs .wwm-chip-btn.wwm-pp-seg-b.is-active { background: transparent; box-shadow: none; transition: color 0.3s ease; }
.wwm-pp-split .wwm-pt-tabs .wwm-chip-btn.wwm-pp-seg-b.is-active { color: var(--paper); }

/* Signup progress */
.wwm-pp-prog { display: grid; gap: 8px; }
.wwm-pp-prog-t { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-prog-bar { height: 4px; overflow: hidden; border-radius: 999px; background: var(--rule); }
.wwm-pp-prog-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-500), var(--mock-live)); transition: width 0.35s ease; }
.wwm-pp-prog.is-done .wwm-pp-prog-t { color: var(--mock-pos); }

/* Password strength */
.wwm-pp-strength { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 6px; margin-top: 2px; }
.wwm-pp-strength span { height: 4px; border-radius: 999px; background: var(--rule); transition: background-color 0.25s ease; }
.wwm-pp-strength em { margin-left: 6px; color: var(--muted); font-size: var(--text-xs); font-style: normal; font-weight: 400; }
.wwm-pp-strength[data-s="0"] span:nth-child(1) { background: var(--danger); }
.wwm-pp-strength[data-s="1"] span:nth-child(-n+1) { background: var(--mock-warn); }
.wwm-pp-strength[data-s="2"] span:nth-child(-n+2) { background: var(--mock-live); }
.wwm-pp-strength[data-s="3"] span:nth-child(-n+3) { background: var(--mock-pos); }

@media (max-width: 1023px) {
  .wwm-pp-split { grid-template-columns: minmax(0, 1fr); margin: 8px; padding: 8px; border-radius: 22px; }
  .wwm-pp-split-l { display: contents; }
  .wwm-pp-split-l::before, .wwm-pp-split-l::after { display: none; }
  .wwm-pp-split-top, .wwm-pp-split-hero, .wwm-pp-split-calc, .wwm-pp-split-facts { background-color: var(--ink); color: var(--paper); }
  .wwm-pp-split-top { order: 1; padding: 20px 20px 0; border-radius: 16px 16px 0 0; }
  .wwm-pp-split-hero { order: 2; margin: 0; padding: 20px 20px 28px; border-radius: 0 0 16px 16px; background-image: radial-gradient(ellipse 80% 90% at 0% 0%, color-mix(in srgb, var(--primary-500) 45%, transparent), transparent 70%), radial-gradient(ellipse 70% 80% at 100% 100%, color-mix(in srgb, var(--mock-pos) 45%, transparent), transparent 70%); }
  .wwm-pp-split-h { font-size: clamp(34px, 9vw, 48px); }
  .wwm-pp-split-r { order: 3; padding: 20px 12px; border-radius: 16px; background: var(--on-brand); }
  .wwm-pp-split-calc { order: 4; margin-top: 8px; padding: 20px; border-radius: 16px 16px 0 0; border: 0; }
  .wwm-pp-split-facts { order: 5; padding: 0 20px 20px; border-radius: 0 0 16px 16px; }
  .wwm-pp-split-top + .wwm-pp-split-hero { margin-top: -1px; }
}
@media (max-width: 479px) {
  .wwm-pp-split-k::before { width: 20px; }
  .wwm-pp-split-bar { font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .wwm-pp-split-l::before, .wwm-pp-split-l::after { animation: none; }
  .wwm-pp-split .wwm-pt-form.is-in, .wwm-pp-split-calc .is-pop { animation: none; }
  .wwm-pp-split .wwm-pt-tabs.wwm-pp-seg::before, .wwm-pp-prog-bar span { transition: none; }
}

/* ---------- Full-screen partner dashboard (.wwm-pp-app) ----------
   Light and monochrome: white cards with a thin edge on a plain grey page,
   black for what matters and one green accent. Secondary text is a step
   darker than the site's so it reads on white. Side menu on the left; the
   overview leads with a summary card, then small cards. */
body:has(.wwm-pp-app) { background: #f1f1f3; }
.wwm-pp.wwm-pp-app {
  --pp-bg: #f1f1f3;
  --pp-card: #fff;
  --pp-card-2: #f1f1f3;
  --pp-line: #e2e1e6;
  --muted: var(--neutral-600);
  --muted-2: var(--neutral-500);
  width: auto;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 100svh;
  margin: 0;
  padding: 12px;
  background: var(--pp-bg);
  color: var(--ink);
}

/* Side menu */
.wwm-pp-app .wwm-pp-side {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
  display: flex; flex-direction: column; gap: 18px;
  height: auto; max-height: calc(100svh - 24px - var(--wp-admin--admin-bar--height, 0px));
  padding: 22px 14px 14px;
  overflow: hidden;
  border: 1px solid var(--pp-line); border-radius: 20px;
  background: var(--pp-card);
}
.wwm-pp-app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 6px; }
.wwm-pp-app-top .wwm-pp-split-logo.wwm-hd1-logo { color: var(--ink); }
.wwm-pp-app-top .wwm-pp-split-k { color: var(--muted); }
.wwm-pp-app-top .wwm-pp-split-k::before { width: 20px; background: var(--rule-2); }
.wwm-pp-app .wwm-pp-nav { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.wwm-pp-app .wwm-pp-nav-h { padding-top: 14px; color: var(--muted-2); }
.wwm-pp-app .wwm-pp-link { min-height: 38px; border-radius: 10px; color: var(--ink-2); font-size: var(--text-meta); }
.wwm-pp-app .wwm-pp-link svg { width: 17px; height: 17px; opacity: 0.7; }
.wwm-pp-app .wwm-pp-link:hover { background: var(--pp-card-2); color: var(--ink); }
.wwm-pp-app .wwm-pp-link.is-active { background: var(--ink); color: var(--paper); box-shadow: none; }
.wwm-pp-app .wwm-pp-link--out { color: var(--muted); }
.wwm-pp-app .wwm-pp-count { background: var(--pp-card-2); color: var(--ink); }
.wwm-pp-app .wwm-pp-link.is-active .wwm-pp-count { background: var(--mock-live); color: var(--ink); }
.wwm-pp-app .wwm-pp-me { order: 3; padding: 10px; border: 0; border-radius: 14px; background: var(--pp-card-2); }
.wwm-pp-app .wwm-pp-me .wwm-title-s { margin: 0; font-size: var(--text-s); }
.wwm-pp-app .wwm-pp-av { width: 38px; height: 38px; background: var(--ink); color: var(--paper); font-size: 13px; }
.wwm-pp-app .wwm-pp-me .wwm-tier-badge { font-size: 9px; }

/* Main column */
.wwm-pp-app-r {
  display: flex; flex-direction: column; gap: 24px; min-width: 0;
  padding: 18px clamp(16px, 2.4vw, 36px) 24px;
}
.wwm-pp-app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.wwm-pp-app-crumb { margin: 0; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-app-crumb span { margin: 0 6px; opacity: 0.5; }
.wwm-pp-app-crumb strong { color: var(--ink); font-weight: 500; }
.wwm-pp-app-links { display: flex; gap: 20px; }
.wwm-pp-app .wwm-pp-main { width: 100%; }

/* Headings: light and large */
.wwm-pp-app .wwm-pp-view-head .wwm-eyebrow, .wwm-pp-app .wwm-pt-hello .wwm-eyebrow { display: none; }
.wwm-pp-app .wwm-pp-view-head .wwm-h2, .wwm-pp-app .wwm-pt-hello .wwm-h2 {
  font-size: clamp(30px, 2.8vw, 44px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em;
}
.wwm-pp-app .wwm-pp-view-head .wwm-h2 em, .wwm-pp-app .wwm-pt-hello .wwm-h2 em { color: var(--muted-2); }
.wwm-pp-app .wwm-pp-view-head .wwm-deck { max-width: 62ch; color: var(--muted); font-size: var(--text-body); }

/* Cards everywhere: soft fill, no borders */
.wwm-pp-app .wwm-pt-card, .wwm-pp-app .wwm-pt-meter, .wwm-pp-app .wwm-pp-card,
.wwm-pp-app .wwm-pp-kpi, .wwm-pp-app .wwm-pt-stat, .wwm-pp-app .wwm-pp-tile {
  border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); box-shadow: none;
}
.wwm-pp-app .wwm-pt-stat:hover, .wwm-pp-app .wwm-pp-tile:hover { transform: none; box-shadow: none; background: var(--pp-card-2); }
.wwm-pp-app .wwm-pp-rung, .wwm-pp-app .wwm-pp-ctrl, .wwm-pp-app .wwm-pt-empty { border: 0; background: var(--pp-bg); }
.wwm-pp-app .wwm-pt-input, .wwm-pp-app .wwm-pp-input { border-color: var(--neutral-200); background: #fff; }

/* Overview */
.wwm-pp-app .wwm-pp-view--overview .wwm-pt-stats { display: none; } /* shown in the small cards instead */
.wwm-pp-app .wwm-pp-view--overview .wwm-pp-view-b { gap: 20px; }
.wwm-pp-app .wwm-pt-head { align-items: center; }
.wwm-pp-app .wwm-pt-head .wwm-pp-quick { flex-basis: auto; }
.wwm-pp-app .wwm-pt-head .wwm-pp-quick > * { min-height: 42px; }
.wwm-pp-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; gap: 6px 40px;
  padding: 24px 28px; border: 1px solid var(--pp-line, var(--rule)); border-radius: 16px; background: var(--pp-card, var(--on-brand));
}
.wwm-pp-hero > .wwm-pp-hero-k { grid-column: 1; }
.wwm-pp-hero > .wwm-pp-hero-n { grid-column: 1; }
.wwm-pp-hero-k { margin: 0; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-hero-n {
  margin: 0; color: var(--ink);
  font-family: var(--serif); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.wwm-pp-hero-sub {
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: end; gap: 12px 24px;
  margin: 0; padding-left: 40px; border-left: 1px solid var(--pp-line, var(--rule));
  color: var(--muted); font-size: var(--text-meta);
}
.wwm-pp-hero-sub span { display: grid; gap: 2px; }
.wwm-pp-hero-sub b { color: var(--ink); font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.wwm-pp-chart { display: grid; gap: 10px; }
.wwm-pp-chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.wwm-pp-chart-k { margin: 0 0 8px; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-chart-legend { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--ink-2); }
.wwm-pp-chart-legend li { display: flex; align-items: center; gap: 6px; }
.wwm-pp-chart-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.wwm-pp-chart-legend .is-line::before { background: transparent; border: 1.5px solid var(--ink); }
.wwm-pp-chart-pace { display: flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--muted); }
.wwm-pp-chart-pace span { margin-right: 8px; }
.wwm-pp-chart-pace button {
  min-width: 36px; padding: 6px 8px; border: 0; border-bottom: 1.5px solid transparent; background: none;
  font: inherit; color: var(--muted); cursor: pointer;
}
.wwm-pp-chart-pace button.is-on { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.wwm-pp-chart-pace button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wwm-pp-chart-plot { position: relative; height: clamp(220px, 30vh, 320px); padding-right: 56px; }
.wwm-pp-chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wwm-pp-chart-svg .g { stroke: var(--pp-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.wwm-pp-chart-svg .tr { fill: #e3e3e7; }
.wwm-pp-chart-svg .b { fill: #b8b8bf; transition: fill 0.2s ease; }
.wwm-pp-chart-svg .b.is-on { fill: var(--ink); }
.wwm-pp-chart-svg .hit { fill: transparent; cursor: crosshair; }
.wwm-pp-chart-svg .l { fill: none; stroke: var(--muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wwm-pp-chart-y { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-2); font-family: var(--mono); font-size: 10px; text-align: right; }
.wwm-pp-chart-y span { transform: translateY(-50%); }
.wwm-pp-chart-y span:last-child { transform: translateY(50%); }
.wwm-pp-chart-tip {
  position: absolute; top: -6px; transform: translateX(-50%);
  display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px;
  background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);
  font-size: var(--text-xs); color: var(--muted); white-space: nowrap; pointer-events: none;
  transition: left 0.2s ease;
}
.wwm-pp-chart-tip b { color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 500; }
.wwm-pp-chart-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-right: 56px; color: var(--muted-2); font-family: var(--mono); font-size: 10px; text-align: center; }
.wwm-pp-chart-fine { margin: 0; color: var(--muted); font-size: var(--text-xs); }

.wwm-pp-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wwm-pp-mini {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px 20px;
  border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); color: var(--ink); text-decoration: none;
  transition: border-color 0.2s ease;
}
.wwm-pp-mini:hover { border-color: var(--neutral-300); }
.wwm-pp-mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wwm-pp-mini-h { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-mini-go { font-family: var(--sans); font-size: 13px; letter-spacing: 0; transition: transform 0.2s ease; }
.wwm-pp-mini:hover .wwm-pp-mini-go { transform: translate(2px, -2px); color: var(--ink); }
.wwm-pp-mini-n { font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wwm-pp-mini-l { color: var(--muted); font-size: var(--text-xs); }
.wwm-pp-mini-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 84px; margin-top: auto; padding-top: 16px; }
.wwm-pp-mini-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.wwm-pp-mini-bar i { display: block; width: 6px; height: var(--h); border-radius: 3px; background: var(--ink); }
.wwm-pp-mini-bar em { position: absolute; top: calc(100% - var(--h) - 18px); color: var(--ink-2); font-family: var(--mono); font-size: 10px; font-style: normal; }
.wwm-pp-mini-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; color: var(--muted-2); font-size: 10px; text-align: center; }
.wwm-pp-mini-arc { display: block; width: 100%; max-width: 200px; margin: auto auto 0; padding-top: 12px; }
.wwm-pp-mini-arc path { fill: none; stroke-width: 12; stroke-linecap: round; }
.wwm-pp-mini-arc .t { stroke: var(--pp-line); }
.wwm-pp-mini-arc .v { stroke: var(--ink); }
.wwm-pp-mini-note { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.wwm-pp-mini-dl { display: grid; gap: 8px; margin: auto 0 0; padding-top: 16px; }
.wwm-pp-mini-dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--pp-line); font-size: var(--text-xs); }
.wwm-pp-mini-dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.wwm-pp-mini-dl dt { color: var(--muted); }
.wwm-pp-mini-dl dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Every other screen: a big figure first, then the content in plain soft cards */
.wwm-pp-app .wwm-pp-view--refer .wwm-pp-view-b,
.wwm-pp-app .wwm-pp-view--referrals .wwm-pp-view-b { grid-template-columns: minmax(0, 1fr); }
.wwm-pp-app .wwm-pp-view--refer .wwm-pp-view-b > :first-child { grid-row: auto; }
.wwm-pp-app .wwm-pp-view-b { gap: 16px; }
.wwm-pp-app .wwm-pp-view-head { margin-bottom: 12px; }

.wwm-pp-lead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px;
  padding: 24px 28px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card);
}
.wwm-pp-app .wwm-pp-lead { order: -1; }
.wwm-pp-lead-l { display: grid; gap: 4px; min-width: 0; }
.wwm-pp-lead-n {
  margin: 0; color: var(--ink);
  font-family: var(--serif); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.wwm-pp-lead-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; color: var(--muted); font-size: var(--text-meta); }
.wwm-pp-lead-sub b { color: var(--ink); font-weight: 600; }
.wwm-pp-lead-r { flex: 0 1 auto; min-width: 0; }
.wwm-pp-lead--progress .wwm-pp-lead-r .wwm-tier-badge { font-size: 12px; padding: 8px 14px; }

/* Four or three numbered steps in a row */
.wwm-pp-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.wwm-pp-flow li { position: relative; display: grid; align-content: start; gap: 2px; padding: 34px 20px 0 0; font-size: var(--text-xs); }
.wwm-pp-flow li::after { content: ""; position: absolute; top: 11px; left: 30px; right: 10px; height: 1px; background: var(--pp-line); }
.wwm-pp-flow li:last-child::after { display: none; }
.wwm-pp-flow li > span {
  position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 10px;
}
.wwm-pp-flow strong { color: var(--ink); font-size: var(--text-s); font-weight: 600; }
.wwm-pp-flow em { color: var(--muted); font-style: normal; }
.wwm-pp-lead--refer .wwm-pp-lead-r { flex: 1 1 520px; max-width: 680px; }

/* Refer: the form as one clean card */
.wwm-pp-app .wwm-pp-view--refer #refer, .wwm-pp-app .wwm-pp-view--refer .wwm-pt-card { padding: clamp(20px, 2.4vw, 32px); }
.wwm-pp-app .wwm-pp-view--refer .wwm-pt-form { gap: 16px; }
.wwm-pp-strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
  padding: 16px 20px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); color: var(--muted); font-size: var(--text-meta); text-decoration: none;
  transition: border-color 0.2s ease;
}
.wwm-pp-strip strong { color: var(--ink); font-weight: 600; }
.wwm-pp-strip > span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.wwm-pp-strip:hover { border-color: var(--neutral-300); }

/* Referral link: the link is the headline */
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link { gap: 14px; padding: 24px 28px; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link-row { gap: 12px; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link > div:first-child { display: block; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link > div:first-child .wwm-card-title { display: none; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link .wwm-ft1-k { margin: 0; color: var(--muted); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link-url {
  height: auto; padding: 0; border: 0; background: none; box-shadow: none; text-overflow: ellipsis;
  color: var(--ink); font-family: var(--serif); font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.02em; line-height: 1.2;
}
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link-url:focus { outline: none; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link-stats { display: none; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link-share .wwm-chip-btn { border: 0; background: var(--pp-bg); }

/* Referral link switched off: a greyed placeholder, then the request form */
.wwm-pt-link.is-off .wwm-pt-link-url { color: var(--muted-2); cursor: not-allowed; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link.is-off .wwm-pt-link-url { color: var(--muted-2); letter-spacing: 0; }
.wwm-pt-link-get { --btn-pr: 18px; flex-shrink: 0; }
.wwm-pt-link-req { display: grid; gap: 16px; padding: 20px; border-radius: 14px; background: var(--pp-bg, var(--paper)); }
.wwm-pt-link-req[hidden] { display: none; }
.wwm-pt-link-req-h { margin: 0; color: var(--ink-2); font-size: var(--text-s); line-height: 1.5; }
.wwm-pt-link-req-h strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: var(--text-m); }
.wwm-pt-link-req .wwm-pt-form { gap: 14px; }
.wwm-pt-link-req .wwm-pt-submit { justify-self: start; }
.wwm-pp-app .wwm-pp-view--link .wwm-pt-link.is-off > .wwm-pp-small { display: block; margin: 0; color: var(--muted); }
.wwm-pp-bigstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wwm-pp-bigstat { display: grid; align-content: start; gap: 6px; padding: 20px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-bigstat .wwm-pp-hero-k { margin: 0; }
.wwm-pp-bigstat-n { margin: 12px 0 0; font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wwm-pp-bigstat-s { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.wwm-pp-bigstat.is-ink { background: var(--ink); color: var(--paper); }
.wwm-pp-bigstat.is-ink .wwm-pp-hero-k, .wwm-pp-bigstat.is-ink .wwm-pp-bigstat-s { color: rgba(255, 255, 255, 0.6); }
.wwm-pp-flowcard { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-flowcard .wwm-pp-hero-k { margin: 0; }

/* Referrals: total and the split by stage */
.wwm-pp-lead--referrals .wwm-pp-lead-r { flex: 1 1 380px; max-width: 560px; display: grid; gap: 12px; }
.wwm-pp-split-bar { display: flex; gap: 4px; height: 14px; }
.wwm-pp-split-bar i { display: block; min-width: 14px; border-radius: 7px; }
.wwm-pp-split-bar .is-open, .wwm-pp-split-keys .is-open::before { background: #b8b8bf; }
.wwm-pp-split-bar .is-won, .wwm-pp-split-keys .is-won::before { background: var(--ink-2); }
.wwm-pp-split-bar .is-paid, .wwm-pp-split-keys .is-paid::before { background: var(--mock-live); }
.wwm-pp-split-bar .is-none { background: var(--pp-line); }
.wwm-pp-split-bar .is-closed, .wwm-pp-split-keys .is-closed::before { background: var(--mock-neg, #c2410c); opacity: 0.55; }
.wwm-pp-split-keys { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-xs); }
.wwm-pp-split-keys li { display: flex; align-items: center; gap: 6px; }
.wwm-pp-split-keys li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.wwm-pp-split-keys b { color: var(--ink); font-weight: 600; }
.wwm-pp-app .wwm-pp-view--referrals .wwm-pt-list { gap: 0; padding: 8px 22px; }
.wwm-pp-app .wwm-pp-view--referrals .wwm-pt-list > .wwm-split { display: none; }
.wwm-pp-app .wwm-pp-filters { padding: 12px 0; border-bottom: 1px solid var(--pp-line); }
.wwm-pp-app .wwm-pp-filters .wwm-chip-btn { border: 0; background: none; color: var(--muted); }
.wwm-pp-app .wwm-pp-filters .wwm-chip-btn.is-active { background: var(--ink); color: var(--paper); }
.wwm-pp-app .wwm-pt-ref { padding: 20px 0; border: 0; border-bottom: 1px solid var(--pp-line); border-radius: 0; background: none; box-shadow: none; }
.wwm-pp-app .wwm-pt-ref:last-child { border-bottom: 0; }

/* Badge progress: one track across every badge */
.wwm-pp-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wwm-pp-app .wwm-pp-track { padding: 20px 28px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-track-s { display: grid; gap: 8px; }
.wwm-pp-track-s::before { content: ""; grid-area: 1 / 1; height: 14px; border-radius: 7px; background: var(--pp-card-2); }
.wwm-pp-track-s i { grid-area: 1 / 1; display: block; height: 14px; border-radius: 7px; background: var(--ink); }
.wwm-pp-track-s.is-now i { background: var(--ink); box-shadow: 0 0 0 3px var(--mock-live); }
.wwm-pp-track-s span { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.wwm-pp-app .wwm-pp-view--progress .wwm-pt-meter { padding: 0; border: 0; background: none; }
.wwm-pp-app .wwm-pp-view--progress .wwm-pt-meter > :not(.wwm-pp-ladder) { display: none; }
.wwm-pp-app .wwm-pp-ladder { gap: 12px; margin: 0; }
.wwm-pp-app .wwm-pp-rung { display: grid; align-content: start; gap: 14px; min-height: 140px; padding: 20px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); box-shadow: none; }
.wwm-pp-app .wwm-pp-rung.is-now { background: var(--ink); box-shadow: none; }
.wwm-pp-app .wwm-pp-rung.is-now .wwm-pp-rung-d { color: rgba(255, 255, 255, 0.75); }
.wwm-pp-app .wwm-pp-rung-d { font-size: var(--text-meta); }

/* Earnings calculator: the yearly figure leads */
.wwm-pp-app .wwm-pp-calc { gap: 16px; padding: 24px 28px; }
.wwm-pp-app .wwm-pp-calc .wwm-pp-ctrl, .wwm-pp-app .wwm-pp-calc .wwm-pp-calc-split div { border-color: transparent; background: var(--pp-bg); }
.wwm-pp-app .wwm-pp-calc-head { flex-direction: column-reverse; align-items: stretch; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--pp-line); }
.wwm-pp-app .wwm-pp-calc-head .wwm-card-title { color: var(--muted); font-size: var(--text-meta); font-weight: 400; }
.wwm-pp-app .wwm-pp-calc-head .wwm-ft1-k { display: none; }
.wwm-pp-app .wwm-pp-calc-total { justify-items: start; text-align: left; }
.wwm-pp-app .wwm-pp-calc .wwm-pp-big { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.wwm-pp-app .wwm-pp-calc .wwm-c-success { color: var(--ink-2); font-weight: 500; }
.wwm-pp-app .wwm-pp-ctrl { padding: 22px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-app .wwm-pp-ctrl .wwm-pp-n { font-family: var(--serif); font-size: 40px; font-weight: 400; letter-spacing: -0.03em; }
.wwm-pp-calc-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.wwm-pp-calc-split div { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-calc-split dt { color: var(--muted); font-size: var(--text-xs); }
.wwm-pp-calc-split dd { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wwm-pp-live:not(.wwm-pp-app) .wwm-pp-calc-split { display: none; }

/* Payouts: total earned leads, three small figures and the history */
.wwm-pp-app .wwm-pp-view--payouts .wwm-pp-kpi:last-child { display: none; }
.wwm-pp-app .wwm-pp-view--payouts .wwm-pp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wwm-pp-app .wwm-pp-kpi { padding: 20px; }
.wwm-pp-app .wwm-pp-kpi-n { font-family: var(--serif); font-size: 44px; font-weight: 400; letter-spacing: -0.04em; }
.wwm-pp-app .wwm-pp-kpi-n.wwm-c-success { color: var(--ink); }
.wwm-pp-app .wwm-pt-payouts { gap: 16px; }
.wwm-pp-app .wwm-pp-tr { border-color: var(--pp-line); }

/* Two-column screens (Refer, Withdraw): the screen on the left (55%), a
   self-contained column on the right (45%) */
.wwm-pp-app .wwm-pp-view.wwm-pp-wd:not([hidden]) { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: 0; align-items: start; }
.wwm-pp-app .wwm-pp-wd > .wwm-pp-view-b { padding-right: clamp(20px, 2.6vw, 40px); }
.wwm-pp-app .wwm-pp-wd .wwm-pp-view-head { order: -2; }
.wwm-pp-wd-side {
  position: sticky; top: 12px; align-self: start;
}
.wwm-pp-wd-side { display: grid; gap: 12px; }
.wwm-pp-wd-side .wwm-pp-rail-card { animation: none; }
.wwm-pp-app .wwm-pp-view.is-headless .wwm-pp-view-head { display: none; }
.wwm-pp-refer-flow { padding: 4px 0 18px; border-bottom: 1px solid var(--pp-line); }
.wwm-pp-tiny { min-height: 100px; } /* empty on purpose */
.wwm-pp-wd-side .wwm-pp-seg-b { padding-left: 6px; padding-right: 6px; white-space: nowrap; font-size: 13px; }
.wwm-pp-app .wwm-pp-wd-side .wwm-pp-card { padding: clamp(20px, 2vw, 28px); }
.wwm-pp-wd-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wwm-pp-wd-help .wwm-pp-rail-card { animation: none; }
.wwm-pp-app .wwm-pp-view--withdraw .wwm-pp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wwm-pp-app .wwm-pp-view--withdraw .wwm-pp-price { display: none; }
.wwm-pp-app .wwm-pp-view--withdraw .wwm-pp-cols .wwm-pp-card { padding: clamp(20px, 2.4vw, 32px); }
.wwm-pp-app .wwm-pp-view--withdraw .wwm-pp-seg--3 { max-width: none; }
@media (max-width: 1279px) {
  .wwm-pp-wd-help { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .wwm-pp-app .wwm-pp-view.wwm-pp-wd:not([hidden]) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .wwm-pp-app .wwm-pp-wd > .wwm-pp-view-b { display: contents; }
  .wwm-pp-wd-side { position: static; order: 1; }
  .wwm-pp-app .wwm-pp-wd .wwm-pp-cols { order: 0; }
  .wwm-pp-wd-help { order: 2; }
  .wwm-pp-tiny { display: none; }
}

/* Reports: real month-by-month figures, nothing estimated */
.wwm-pp-real-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wwm-pp-real { align-content: start; padding: 22px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-real-n { margin: 0; font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wwm-pp-real-n span { color: var(--muted); font-family: var(--sans); font-size: var(--text-meta); letter-spacing: 0; }
.wwm-pp-real .wwm-pp-chart-plot { height: 180px; padding-right: 0; }
.wwm-pp-real .wwm-pp-chart-x { margin-right: 0; }
.wwm-pp-real-v { color: var(--ink-2); }
.wwm-pp-real-e { margin: 8px 0 0; padding: 28px 20px; border-radius: 12px; background: var(--pp-bg); color: var(--muted); font-size: var(--text-meta); text-align: center; }
.wwm-pp-real-e strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--text-s); }

/* Overview: latest referrals */
.wwm-pp-latest { display: grid; gap: 6px; padding: 18px 22px; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card); }
.wwm-pp-latest-h { display: flex; justify-content: space-between; align-items: center; }
.wwm-pp-latest-h .wwm-pp-hero-k { margin: 0; }
.wwm-pp-latest-h a, .wwm-pp-latest-e a { color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.wwm-pp-latest-l { display: grid; margin: 0; padding: 0; list-style: none; }
.wwm-pp-latest-l li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--pp-line); }
.wwm-pp-latest-l li:last-child { border-bottom: 0; padding-bottom: 4px; }
.wwm-pp-latest-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--pp-card-2); font-weight: 600; font-size: 13px; }
.wwm-pp-latest-t { display: grid; flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--muted); }
.wwm-pp-latest-t strong { color: var(--ink); font-size: var(--text-s); font-weight: 600; }
.wwm-pp-latest-e { margin: 8px 0 4px; color: var(--muted); font-size: var(--text-meta); }

@media (max-width: 1119px) {
  .wwm-pp-bigstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wwm-pp-flow { grid-auto-flow: row; gap: 14px; }
  .wwm-pp-flow li { padding: 0 0 0 34px; }
  .wwm-pp-flow li::after { display: none; }
  .wwm-pp-real .wwm-pp-real-v span { visibility: visible; font-size: 8px; }
  .wwm-pp-real-grid, .wwm-pp-calc-split, .wwm-pp-app .wwm-pp-view--payouts .wwm-pp-kpis { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-track { gap: 4px; }
  .wwm-pp-app .wwm-pp-view--link .wwm-pt-link-url { font-size: 18px; }
  .wwm-pp-bigstat-n { font-size: 40px; }
}

/* With more room, two-column screens stay side by side; otherwise they stack */
@media (max-width: 1279px) {
  .wwm-pp-app .wwm-pp-view--refer .wwm-pp-view-b,
  .wwm-pp-app .wwm-pp-view--referrals .wwm-pp-view-b { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-app .wwm-pp-view--refer .wwm-pp-view-b > :first-child { grid-row: auto; }
}

/* Good to know: help cards for the screen you're on */
.wwm-pp-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.wwm-pp-rail-card {
  display: grid; gap: 12px; padding: 22px;
  border: 1px solid var(--pp-line); border-radius: 16px; background: var(--pp-card);
  animation: wwm-pp-in 0.35s ease both;
}
.wwm-pp-rail-card[hidden], .wwm-pp-rail-btn[hidden] { display: none; }
.wwm-pp-rail-card .wwm-ft1-k { margin: 0; }
.wwm-pp-rail-t { margin: 0; color: var(--ink-2); font-size: var(--text-meta); line-height: 1.55; }
.wwm-pp-rail-t strong { color: var(--ink); }
.wwm-pp-rail-fine { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.wwm-pp-rail-hero { background: var(--ink); color: var(--paper); }
.wwm-pp-rail-hero .wwm-ft1-k { color: rgba(255, 255, 255, 0.55); }
.wwm-pp-rail-hero .wwm-pp-rail-t { color: rgba(255, 255, 255, 0.75); }
.wwm-pp-rail-big { margin: 0; color: var(--paper); font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.wwm-pp-rail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.wwm-pp-rail-stats[hidden] { display: none; }
.wwm-pp-rail-stats div { display: grid; gap: 2px; }
.wwm-pp-rail-stats dt { color: rgba(255, 255, 255, 0.55); font-size: 11px; }
.wwm-pp-rail-stats dd { margin: 0; color: var(--paper); font-family: var(--serif); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wwm-pp-rail-btn { --btn-pr: 18px; justify-self: start; margin-top: 4px; }
.wwm-pp-rail-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: rail; }
.wwm-pp-rail-steps li { position: relative; display: grid; gap: 2px; padding-left: 36px; color: var(--muted); font-size: var(--text-meta); line-height: 1.5; counter-increment: rail; }
.wwm-pp-rail-steps li::before {
  content: counter(rail); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px;
}
.wwm-pp-rail-steps strong { color: var(--ink); font-size: var(--text-s); font-weight: 600; }
.wwm-pp-rail-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wwm-pp-rail-list li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: var(--text-meta); line-height: 1.5; }
.wwm-pp-rail-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.wwm-pp-rail-list strong { color: var(--ink); font-weight: 600; }
.wwm-pp-rail-hero .wwm-pp-rail-list li { color: rgba(255, 255, 255, 0.82); }
.wwm-pp-rail-hero .wwm-pp-rail-list li::before { background: var(--mock-live); }
.wwm-pp-rail-rates { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wwm-pp-rail-rates li { display: grid; justify-items: start; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed var(--pp-line); color: var(--muted); font-size: var(--text-meta); }
.wwm-pp-rail-rates li:last-child { padding-bottom: 0; border-bottom: 0; }

/* Logged out: no menu or help; the login card sits in the middle */
.wwm-pp.wwm-pp-app.is-empty { grid-template-columns: minmax(0, 1fr); }
.wwm-pp-app.is-empty .wwm-pp-rail { display: none; }
.wwm-pp-app.is-empty .wwm-pp-app-r { min-height: calc(100svh - 24px); }
.wwm-pp-app.is-empty .wwm-pp-app-crumb span, .wwm-pp-app.is-empty .wwm-pp-app-crumb strong { display: none; }
.wwm-pp-app.is-empty .wwm-pp-main { width: min(520px, 100%); margin: auto; }
.wwm-pp-app.is-empty .wwm-pp-auth-card { border: 1px solid var(--pp-line); box-shadow: none; background: var(--pp-card); }

@media (max-width: 1119px) {
  .wwm-pp-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .wwm-pp.wwm-pp-app { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
  .wwm-pp-app .wwm-pp-side { top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px); height: auto; gap: 0; padding: 10px 12px; border-radius: 16px; box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.4); }
  .wwm-pp-app-top { display: none; }
  .wwm-pp-app .wwm-pp-me { order: 0; padding: 0; background: none; }
  .wwm-pp-app .wwm-pp-burger { border-color: var(--pp-line); background: #fff; }
  .wwm-pp-app.is-menu-open .wwm-pp-nav { flex: none; border-top-color: var(--pp-line); }
  .wwm-pp-app-r { padding: 12px 8px 16px; gap: 20px; }
}
@media (max-width: 767px) {
  .wwm-pp-app-links { display: none; }
  .wwm-pp-rail { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-chart-plot { padding-right: 44px; }
  .wwm-pp-chart-x { margin-right: 44px; font-size: 9px; }
  .wwm-pp-chart-x span:nth-child(even) { visibility: hidden; }
}
@media (max-width: 767px) {
  .wwm-pp-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .wwm-pp-hero-sub { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--pp-line, var(--rule)); }
}
@media (max-width: 479px) {
  .wwm-pp-minis { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-hero-n { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wwm-pp-rail-card { animation: none; }
  .wwm-pp-chart-svg .b, .wwm-pp-chart-tip, .wwm-pp-mini, .wwm-pp-mini-go { transition: none; }
}

/* Referral pipeline (from the add-on): seven stages, the current one
   ringed, a closed one marked with a cross. Stacks when the card is narrow. */
.wwm-pt-ref:has(.wwm-pt-pipe) { container-type: inline-size; }
.wwm-pt-track.wwm-pt-pipe { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 10px; }
.wwm-pt-pipe .wwm-pt-step { align-content: start; }
.wwm-pt-pipe .wwm-pt-step-l { font-size: 11px; }
.wwm-pt-pipe .wwm-pt-step-s { color: var(--ink-2); font-size: 11px; line-height: 1.3; }
.wwm-pt-pipe .wwm-pt-step.is-stop .wwm-pt-dot { border-color: var(--mock-neg, #c2410c); background: var(--mock-neg, #c2410c); color: #fff; }
.wwm-pt-pipe .wwm-pt-step.is-stop .wwm-pt-step-l { color: var(--ink); }
.wwm-pt-pipe .wwm-pt-step.is-stop .wwm-pt-step-s { color: var(--mock-neg, #c2410c); font-weight: 600; }
.wwm-pt-pipe .wwm-pt-step.is-stop ~ .wwm-pt-step { opacity: 0.45; }
@container (max-width: 640px) {
  .wwm-pt-track.wwm-pt-pipe { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wwm-pt-pipe .wwm-pt-step { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 0; padding: 0 0 14px; }
  .wwm-pt-pipe .wwm-pt-step:last-child { padding-bottom: 0; }
  .wwm-pt-pipe .wwm-pt-dot { grid-row: 1 / span 2; }
  .wwm-pt-pipe .wwm-pt-step-l { grid-column: 2; padding-top: 4px; font-size: var(--text-xs); }
  .wwm-pt-pipe .wwm-pt-step-s { grid-column: 2; }
  .wwm-pt-pipe .wwm-pt-step-d { grid-column: 3; grid-row: 1; padding-top: 5px; }
  .wwm-pt-pipe .wwm-pt-step::before { top: 24px; bottom: 0; left: 11px; right: auto; width: 2px; height: auto; }
}

/* Account manager: down the right on wide screens, above the screen otherwise */
.wwm-pt-am {
  display: grid; gap: 16px; padding: 22px;
  border: 1px solid var(--pp-line, var(--rule)); border-radius: 16px; background: var(--pp-card, #fff);
}
.wwm-pt-am .wwm-ft1-k { margin: 0; }
.wwm-pt-am-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wwm-pt-am-av {
  position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 18px; font-weight: 500; letter-spacing: 0.02em;
}
.wwm-pt-am-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wwm-pt-am-t { min-width: 0; }
.wwm-pt-am-t .wwm-title-s { margin: 0; font-size: var(--text-body); font-weight: 600; line-height: 1.25; }
.wwm-pt-am-t .wwm-pp-small { margin: 2px 0 0; color: var(--muted); }
.wwm-pt-am-dl { display: grid; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--pp-line, var(--rule)); }
.wwm-pt-am-dl div { display: grid; gap: 2px; min-width: 0; }
.wwm-pt-am-dl dt { color: var(--muted-2); font-family: var(--mono); font-size: var(--text-xxs); letter-spacing: var(--track-label); text-transform: uppercase; }
.wwm-pt-am-dl dd { margin: 0; color: var(--ink); font-size: var(--text-s); overflow-wrap: anywhere; }
.wwm-pt-am-dl a { color: inherit; text-decoration: none; }
.wwm-pt-am-dl a:hover { text-decoration: underline; }
.wwm-pt-am-book { justify-self: stretch; justify-content: center; }
.wwm-pt-am > .wwm-pp-small { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
@media (min-width: 1280px) {
  .wwm-pp-app.has-am .wwm-pp-app-r { display: grid; grid-template-columns: minmax(0, 1fr) 288px; grid-template-rows: auto auto 1fr; align-items: start; gap: 24px 48px; }
  .wwm-pp-app.has-am .wwm-pp-app-bar { grid-column: 1 / -1; }
  .wwm-pp-app.has-am .wwm-pp-main { grid-column: 1; grid-row: 2; }
  .wwm-pp-app.has-am .wwm-pp-rail { grid-column: 1; grid-row: 3; }
  .wwm-pp-app.has-am .wwm-pt-am { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px); }
  /* Sections split by rules, evenly spaced: contact, note, then who it is. */
  .wwm-pp-app.has-am .wwm-pt-am { gap: 0; padding: 22px 22px 4px; }
  .wwm-pp-app.has-am .wwm-pt-am > * { margin: 0; padding: 18px 0; border-top: 1px solid var(--pp-line); }
  .wwm-pp-app.has-am .wwm-pt-am > .wwm-ft1-k { order: 0; padding-top: 0; border-top: 0; }
  .wwm-pp-app.has-am .wwm-pt-am-dl { order: 1; gap: 14px; }
  .wwm-pp-app.has-am .wwm-pt-am-book { order: 2; margin-bottom: 18px; padding-block: 0; border-top: 0; }
  .wwm-pp-app.has-am .wwm-pt-am > .wwm-pp-small { order: 3; }
  .wwm-pp-app.has-am .wwm-pt-am-who { order: 4; }
}
@media (max-width: 1279px) {
  .wwm-pp-app.has-am .wwm-pt-am { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) auto; align-items: center; column-gap: 28px; row-gap: 12px; padding: 18px 22px; }
  .wwm-pp-app.has-am .wwm-pt-am .wwm-ft1-k { grid-column: 1 / -1; }
  .wwm-pp-app.has-am .wwm-pt-am-dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--pp-line); }
  .wwm-pp-app.has-am .wwm-pt-am-book { justify-self: end; }
  .wwm-pp-app.has-am .wwm-pt-am > .wwm-pp-small { display: none; }
}
@media (max-width: 767px) {
  .wwm-pp-app.has-am .wwm-pt-am { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .wwm-pp-app.has-am .wwm-pt-am-av { width: 44px; height: 44px; font-size: 15px; }
  .wwm-pp-app.has-am .wwm-pt-am-dl { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--pp-line); }
  .wwm-pp-app.has-am .wwm-pt-am-dl div { grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; }
  .wwm-pp-app.has-am .wwm-pt-am-book { justify-self: stretch; }
}

/* The main site's top bar, full width above the side menu and the screen */
.wwm-pp-app > .wwm-pp-topbar { grid-column: 1 / -1; margin: -12px -12px 0; }
.wwm-pp-app > .wwm-pp-topbar .wwm-hd1-topbar-in { max-width: none; }
@media (max-width: 1023px) {
  .wwm-pp-app > .wwm-pp-topbar { margin: -8px -8px 0; }
}

/* ---------- One set of controls and surfaces ----------
   Every button and field in the app is 44px tall with 10px corners and
   14px text. Primary is the site's dark button, secondary is white with a
   thin edge, filters are small pills, and text links end in an arrow.
   Cards are white with a 1px edge and 16px corners; pairs line up. */
.wwm-pp-app { --pp-ctl: 44px; --pp-r: 10px; }
.wwm-pp-app .wwm-btn, .wwm-pp-app .wwm-btn-outline {
  min-height: var(--pp-ctl); border-radius: var(--pp-r); font-size: 14px; font-weight: 600; box-shadow: none; transform: none;
}
.wwm-pp-app .wwm-btn { --btn-py: 4px; --btn-pl: 16px; --btn-pr: 4px; gap: 10px; }
.wwm-pp-app .wwm-btn:not(:has(.wwm-btn-arrow)) { --btn-pr: 16px; }
.wwm-pp-app .wwm-btn .wwm-btn-arrow { width: 34px; height: 34px; }
.wwm-pp-app .wwm-btn:hover { box-shadow: 0 10px 20px -12px rgba(14, 13, 15, 0.55); transform: translate3d(0, -1px, 0); }
.wwm-pp-app .wwm-btn-outline,
.wwm-pp-app .wwm-btn-outline:hover {
  padding: 0 16px; border: 1px solid var(--neutral-200); background: #fff; background-image: none; color: var(--ink); box-shadow: none;
}
.wwm-pp-app .wwm-btn-outline:hover { border-color: var(--ink); }
.wwm-pp-app .wwm-pp-submit, .wwm-pp-app .wwm-pt-am-book { justify-content: center; }

/* Fields */
.wwm-pp-app .wwm-pt-input, .wwm-pp-app .wwm-pp-input {
  min-height: var(--pp-ctl); border: 1px solid var(--neutral-200); border-radius: var(--pp-r); background-color: #fff; font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wwm-pp-app textarea.wwm-pt-input { min-height: 96px; }
.wwm-pp-app .wwm-pt-input:focus, .wwm-pp-app .wwm-pp-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14, 13, 15, 0.08); outline: 0; }
.wwm-pp-app select.wwm-pt-input, .wwm-pp-app select.wwm-pp-input {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230e0d0f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.wwm-pp-app .wwm-pt-link-row .wwm-btn { flex-shrink: 0; }

/* Filters and share chips: small pills */
.wwm-pp-app .wwm-chip-btn:not(.wwm-pp-seg-b) {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* Text links with an arrow */
.wwm-pp-app .wwm-pp-res, .wwm-pp-app .wwm-pp-strip > span:last-child, .wwm-pp-app .wwm-pp-latest-h a {
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
}

/* Surfaces */
.wwm-pp-app .wwm-pp-card, .wwm-pp-app .wwm-pp-rail-card, .wwm-pp-app .wwm-pp-strip, .wwm-pp-app .wwm-pp-flowcard { border-radius: 16px; }
.wwm-pp-app .wwm-pp-rail, .wwm-pp-app .wwm-pp-wd-help { align-items: stretch; }
.wwm-pp-app .wwm-pp-method.is-default, .wwm-pp-app .wwm-pp-method:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }

/* Payouts: Withdraw sits in the "available" card it acts on */
.wwm-pp-app .wwm-pp-kpi .wwm-pp-quick { margin-top: 10px; }
.wwm-pp-app .wwm-pp-kpi .wwm-pp-quick .wwm-btn { width: 100%; justify-content: space-between; }

/* Narrow main column (beside the account manager): fewer columns */
.wwm-pp-app .wwm-pp-main { container-type: inline-size; }
@container (max-width: 820px) {
  .wwm-pp-app .wwm-pp-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwm-pp-app .wwm-pp-rung { min-height: 0; }
}
.wwm-pp-app .wwm-pp-rung .wwm-tier-badge { white-space: nowrap; }
.wwm-pp-app .wwm-pp-flowcard.wwm-pp-refer-flow { padding: 22px; border: 1px solid var(--pp-line); }
.wwm-pp-app .wwm-pp-kpi { align-content: start; }
.wwm-pp-app .wwm-pp-kpi:has(.wwm-pp-quick) { grid-template-rows: auto auto auto 1fr; }
.wwm-pp-app .wwm-pp-kpi .wwm-pp-quick { align-self: end; }

/* ---------- Responsive fixes ---------- */
/* Overview greeting: the line under the title had no breathing room */
.wwm-pp-app .wwm-pt-hello .wwm-pt-small { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.wwm-pp-app .wwm-pt-head .wwm-pp-quick { margin-top: 20px; }

/* Refer and Withdraw sit side by side only when the main column has room
   for it (it shrinks next to the side menu and the account manager). */
@container (max-width: 720px) {
  .wwm-pp-app .wwm-pp-view.wwm-pp-wd:not([hidden]) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .wwm-pp-app .wwm-pp-wd > .wwm-pp-view-b { display: contents; padding-right: 0; }
  .wwm-pp-app .wwm-pp-wd-side { position: static; order: 1; }
  .wwm-pp-app .wwm-pp-wd .wwm-pp-cols { order: 0; }
  .wwm-pp-app .wwm-pp-wd-help { order: 2; }
}

@media (max-width: 767px) {
  /* Phones: the screen first, the account manager after it */
  .wwm-pp-app.has-am .wwm-pt-am { order: 99; }
  .wwm-pp-app .wwm-pt-head .wwm-pp-quick { margin-top: 16px; }
  /* Payout figures two across, the withdraw card full width */
  .wwm-pp-app .wwm-pp-kpis, .wwm-pp-app .wwm-pp-view--payouts .wwm-pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wwm-pp-app .wwm-pp-kpis > .wwm-pp-kpi:has(.wwm-pp-quick) { grid-column: 1 / -1; }
  .wwm-pp-app .wwm-pp-kpi .wwm-pp-kpi-n { font-size: 26px; }
  /* Filters scroll sideways instead of wrapping onto a ragged second row */
  .wwm-pp-app .wwm-pp-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 6px; scrollbar-width: none; }
  .wwm-pp-app .wwm-pp-filters::-webkit-scrollbar { display: none; }
  .wwm-pp-app .wwm-pp-filters .wwm-chip-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* The app is at least a screen tall. Without this, spare height on a tall
   window was shared out between the rows, so the top bar grew and pushed the
   whole dashboard down to the middle. */
.wwm-pp-app { align-content: start; }
.wwm-pp-app:has(> .wwm-pp-topbar) { grid-template-rows: auto minmax(0, 1fr); }

/* Maintenance notice under the top bar */
.wwm-pp-app > .wwm-pp-notice {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px 10px 16px;
  border: 1px solid #f3d9a4; border-radius: 12px; background: #fff8e8; color: #5c4210; font-size: 13px; line-height: 1.45;
}
.wwm-pp-notice p { flex: 1; margin: 0; }
.wwm-pp-notice strong { color: #3d2b06; font-weight: 600; }
.wwm-pp-notice-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
.wwm-pp-notice-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.wwm-pp-notice-x:hover { background: rgba(92, 66, 16, 0.08); }
.wwm-pp-app:has(> .wwm-pp-topbar):has(> .wwm-pp-notice) { grid-template-rows: auto auto minmax(0, 1fr); }

/* Top bar: "Welcome, first name" where the site shows Client login */
.wwm-pp-topbar .wwm-pp-welcome { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Design refresh, from the example dashboard (pages/partners/example-dashboard):
   one framed sheet with the account manager in a ruled right column,
   Google Sans headlines with a muted second half, ruled rows of figures
   instead of rounded cards, dark textured panels for each screen's key
   figure, and the WWM buttons (dark with a green dot and arrow box, white
   ghost, white on dark panels). Comes last so it wins over the rules above.
   ========================================================================== */
.wwm-pp-app {
  --x-ink: #0e0d0f; --x-rule: #e4e3e8; --x-paper: #f9f9fa; --x-muted: #726d80;
  --x-pad: clamp(20px, 2.8vw, 40px); --x-gap: 28px;
  --x-head: "Google Sans", "Plus Jakarta Sans", system-ui, sans-serif;
  --x-grain: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27240%27%20height=%27240%27%3E%3Cfilter%20id=%27p%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.05%20.09%27%20numOctaves=%274%27%20seed=%277%27%20stitchTiles=%27stitch%27%20result=%27f%27/%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.75%27%20numOctaves=%272%27%20seed=%273%27%20stitchTiles=%27stitch%27%20result=%27g%27/%3E%3CfeComposite%20in=%27f%27%20in2=%27g%27%20operator=%27arithmetic%27%20k2=%27.7%27%20k3=%27.3%27/%3E%3CfeDiffuseLighting%20lighting-color=%27%23fff%27%20surfaceScale=%271.2%27%20diffuseConstant=%271%27%3E%3CfeDistantLight%20azimuth=%2745%27%20elevation=%2760%27/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix%20values=%270%200%200%200%201%200%200%200%200%201%200%200%200%200%201%20.3%200%200%200%20-.2%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23p%29%27/%3E%3C/svg%3E");
  --btn-bg: #18181b; --btn-bg-hover: #000; --btn-text: #fff; --btn-dot: #14734e; --btn-dot-ring: rgba(20, 115, 78, 0.1);
  --ghost-bg: #fff; --ghost-bg-hover: #f2f2f3; --ghost-text: #18181b; --ghost-border: #d4d4d8; --ghost-border-hover: #a1a1aa; --focus: #365fdb;
}

/* ---------- Buttons ---------- */
.wwm-pp-app .wwm-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; min-height: 40px; padding: 0 8px 0 14px;
  border: 1px solid transparent; border-radius: 8px; background: var(--btn-bg); background-image: none; color: var(--btn-text);
  font: 600 0.8125rem/1 "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: 0 4px 12px #0001; transform: none; transition: background 130ms, transform 130ms;
}
.wwm-pp-app .wwm-btn:not(:has(.wwm-btn-arrow)) { padding: 0 14px; }
.wwm-pp-app .wwm-btn::before, .wwm-pp-app .wwm-btn::after, .wwm-pp-app .wwm-btn-outline::before, .wwm-pp-app .wwm-btn-outline::after { display: none; }
.wwm-pp-app .wwm-btn:hover { background: var(--btn-bg-hover); box-shadow: 0 4px 12px #0001; transform: none; }
.wwm-pp-app .wwm-btn:active { transform: translateY(1px); }
.wwm-pp-app .wwm-btn .wwm-btn-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--btn-dot); box-shadow: 0 0 0 3px var(--btn-dot-ring); }
.wwm-pp-app .wwm-btn .wwm-btn-txt { color: inherit; }
.wwm-pp-app .wwm-btn .wwm-btn-arrow {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 1px solid color-mix(in srgb, var(--btn-text) 18%, transparent); border-radius: 6px; background: none;
  color: inherit; font-size: 0; line-height: 0;
}
.wwm-pp-app .wwm-btn .wwm-btn-arrow::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0-6-6m6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0-6-6m6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wwm-pp-app .wwm-btn-outline, .wwm-pp-app .wwm-btn-outline:hover {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--ghost-border); border-radius: 8px; background: var(--ghost-bg); background-image: none; color: var(--ghost-text);
  font: 500 0.8125rem/1 "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: 0 1px 2px #0001; transform: none; transition: background 130ms, border-color 130ms;
}
.wwm-pp-app .wwm-btn-outline:hover { background: var(--ghost-bg-hover); border-color: var(--ghost-border-hover); }
/* On dark panels: white */
.wwm-pp-app .wwm-btn.wwm-btn-light, .wwm-pp-app .wwm-pp-rail-hero .wwm-btn, .wwm-pp-app .wwm-pp-hero .wwm-btn, .wwm-pp-app .wwm-pp-lead .wwm-btn, .wwm-pp-app .is-ink .wwm-btn { --btn-text: #0c0c0e; background: #fff; color: #0c0c0e; }
.wwm-pp-app .wwm-btn.wwm-btn-light:hover, .wwm-pp-app .wwm-pp-rail-hero .wwm-btn:hover, .wwm-pp-app .wwm-pp-hero .wwm-btn:hover, .wwm-pp-app .wwm-pp-lead .wwm-btn:hover, .wwm-pp-app .is-ink .wwm-btn:hover { background: #f2f2f3; }
.wwm-pp-app .wwm-btn.wwm-btn-light .wwm-btn-arrow, .wwm-pp-app .wwm-pp-rail-hero .wwm-btn .wwm-btn-arrow, .wwm-pp-app .wwm-pp-hero .wwm-btn .wwm-btn-arrow, .wwm-pp-app .wwm-pp-lead .wwm-btn .wwm-btn-arrow, .wwm-pp-app .is-ink .wwm-btn .wwm-btn-arrow { border-left-color: #0001; }
.wwm-pp-app .wwm-pp-lead .wwm-btn-outline, .wwm-pp-app .wwm-pp-hero .wwm-btn-outline { border-color: rgba(255, 255, 255, 0.28); background: transparent; color: #fff; box-shadow: none; }
.wwm-pp-app .wwm-pp-lead .wwm-btn-outline:hover, .wwm-pp-app .wwm-pp-hero .wwm-btn-outline:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.wwm-pp-app .wwm-btn:focus-visible, .wwm-pp-app .wwm-btn-outline:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wwm-pp-app .wwm-btn, .wwm-pp-app .wwm-btn-outline { transition: none; } }
/* Fields match the buttons' corners */
.wwm-pp-app { --pp-r: 8px; }

/* ---------- The sheet ---------- */
.wwm-pp-app .wwm-pp-app-r {
  gap: 0; padding: 0; border: 1px solid var(--x-rule); border-radius: 16px; background: var(--x-paper); overflow: clip;
}
.wwm-pp-app .wwm-pp-app-bar { min-height: 52px; padding: 12px var(--x-pad); border-bottom: 1px solid var(--x-rule); background: #fff; }
.wwm-pp-app .wwm-pp-main { padding-bottom: 8px; }
.wwm-pp-app .wwm-pp-view { gap: 0; }
.wwm-pp-app .wwm-pp-view-b { gap: 20px; padding: 0 var(--x-pad); }
.wwm-pp-app .wwm-pp-view--overview .wwm-pp-view-b { gap: 0; padding: 0; }

/* Page header: the same block on every screen */
.wwm-pp-app .wwm-pp-view-head, .wwm-pp-app .wwm-pt-head { max-width: none; margin: 0; padding: 40px var(--x-pad) 32px; }
.wwm-pp-app .wwm-pp-wd .wwm-pp-view-head { padding-left: 0; padding-right: 0; }
.wwm-pp-app .wwm-pp-view-head .wwm-h2, .wwm-pp-app .wwm-pt-hello .wwm-h2 {
  max-width: 22ch; font-family: var(--x-head); font-size: clamp(34px, 3.4vw, 50px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: var(--x-ink);
}
.wwm-pp-app .wwm-pp-view-head .wwm-h2 em, .wwm-pp-app .wwm-pt-hello .wwm-h2 em { font-style: normal; font-weight: 400; color: var(--x-muted); }
.wwm-pp-app .wwm-pp-view-head .wwm-deck { max-width: 56ch; color: #3a3740; font-size: 15px; line-height: 1.55; }
.wwm-pp-app .wwm-pt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.wwm-pp-app .wwm-pt-head .wwm-pp-quick { margin-top: 0; }
.wwm-pp-app .wwm-pt-head .wwm-pp-quick > * { min-height: 40px; }

/* Dark textured panels: the overview's total and each screen's key figure */
.wwm-pp-app .wwm-pp-hero, .wwm-pp-app .wwm-pp-lead {
  --ink: #fff; --ink-2: rgba(255, 255, 255, 0.82); --muted: rgba(255, 255, 255, 0.66); --muted-2: rgba(255, 255, 255, 0.5);
  --pp-line: rgba(255, 255, 255, 0.14); --pp-card: rgba(255, 255, 255, 0.06); --pp-card-2: rgba(255, 255, 255, 0.1); --pp-bg: rgba(255, 255, 255, 0.06);
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: var(--x-ink); color: #fff;
}
.wwm-pp-app .wwm-pp-hero::before, .wwm-pp-app .wwm-pp-lead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--x-grain); background-size: 240px; opacity: 0.55; pointer-events: none;
}
.wwm-pp-app .wwm-pp-hero { padding: 36px var(--x-pad) 38px; column-gap: 0; }
.wwm-pp-app .wwm-pp-hero .wwm-pp-hero-k, .wwm-pp-app .wwm-pp-lead .wwm-pp-hero-k { color: rgba(255, 255, 255, 0.6); }
.wwm-pp-app .wwm-pp-hero-n, .wwm-pp-app .wwm-pp-lead-n { color: #fff; font-family: var(--x-head); font-weight: 700; letter-spacing: -0.05em; }
.wwm-pp-app .wwm-pp-hero-n { margin-top: 8px; font-size: clamp(56px, 6vw, 88px); line-height: 0.95; }
.wwm-pp-app .wwm-pp-hero-sub {
  display: grid; grid-template-columns: minmax(0, 1fr); align-self: end; gap: 0; margin-left: 40px; padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.68); font-size: 14px;
}
.wwm-pp-app .wwm-pp-hero-sub span { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.wwm-pp-app .wwm-pp-hero-sub b { color: #fff; font-family: var(--x-head); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.wwm-pp-app .wwm-pp-lead { margin-inline: calc(-1 * var(--x-pad)); padding: 32px var(--x-pad) 34px; }
.wwm-pp-app .wwm-pp-wd .wwm-pp-lead { margin-inline: 0; padding: 28px 28px 30px; border-radius: 12px; }
.wwm-pp-app .wwm-pp-lead-sub b { color: #fff; }
.wwm-pp-app .wwm-pp-lead .wwm-tier-badge, .wwm-pp-app .wwm-pp-lead .wwm-tag { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Overview: ruled rows on paper */
.wwm-pp-app .wwm-pp-minis, .wwm-pp-app .wwm-pp-latest, .wwm-pp-app .wwm-pp-rail {
  gap: 0; margin-top: var(--x-gap); border: 0; border-top: 1px solid var(--x-rule); border-bottom: 1px solid var(--x-rule); border-radius: 0; background: #fff;
}
.wwm-pp-app .wwm-pp-mini { padding: 26px 24px 28px; border: 0; border-radius: 0; background: transparent; }
.wwm-pp-app .wwm-pp-mini + .wwm-pp-mini { border-left: 1px solid var(--x-rule); }
.wwm-pp-app .wwm-pp-mini:first-child { padding-left: var(--x-pad); }
.wwm-pp-app .wwm-pp-mini:last-child { padding-right: var(--x-pad); }
.wwm-pp-app .wwm-pp-mini:hover { background: #fcfcfd; }
.wwm-pp-app .wwm-pp-mini-n { font-family: var(--x-head); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; }
.wwm-pp-app .wwm-pp-latest { padding: 0; }
.wwm-pp-app .wwm-pp-latest-h { min-height: 52px; padding: 0 var(--x-pad); border-bottom: 1px solid var(--x-rule); }
.wwm-pp-app .wwm-pp-latest-l li { padding: 14px var(--x-pad); border-bottom-color: var(--x-rule); }
.wwm-pp-app .wwm-pp-latest-l li:last-child { padding-bottom: 14px; }
.wwm-pp-app .wwm-pp-latest-e { margin: 0; padding: 18px var(--x-pad); }

/* Help panels under every screen: one ruled row */
.wwm-pp-app .wwm-pp-rail { margin-bottom: 40px; }
.wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card { align-self: stretch; padding: 28px 24px 30px; border: 0; border-radius: 0; background: transparent; }
.wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card:first-child { padding-left: var(--x-pad); }
.wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card:last-child { padding-right: var(--x-pad); }
.wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card + .wwm-pp-rail-card { border-left: 1px solid var(--x-rule); }
.wwm-pp-app .wwm-pp-rail-hero, .wwm-pp-app .wwm-pp-rail .wwm-pp-rail-hero { position: relative; isolation: isolate; background: var(--x-ink); }
.wwm-pp-app .wwm-pp-rail-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--x-grain); background-size: 240px; opacity: 0.55; pointer-events: none; }
.wwm-pp-app .wwm-pp-rail-big { font-family: var(--x-head); font-weight: 700; }

/* Withdraw and Refer: the second column keeps clear of the account manager's rule */
.wwm-pp-app .wwm-pp-wd-side { padding: 40px var(--x-pad) 0 0; }
@container (max-width: 720px) { .wwm-pp-app .wwm-pp-wd-side { padding: 0; } }
/* No help row when a screen has moved its help cards elsewhere */
.wwm-pp-app .wwm-pp-rail:not(:has(> .wwm-pp-rail-card:not([hidden]))) { display: none; }

/* Cards left on the other screens: flat white with a thin rule */
.wwm-pp-app .wwm-pt-card, .wwm-pp-app .wwm-pt-meter, .wwm-pp-app .wwm-pp-card, .wwm-pp-app .wwm-pp-kpi, .wwm-pp-app .wwm-pt-stat,
.wwm-pp-app .wwm-pp-tile, .wwm-pp-app .wwm-pp-flowcard, .wwm-pp-app .wwm-pp-strip, .wwm-pp-app .wwm-pp-chart.wwm-pp-real, .wwm-pp-app .wwm-pp-wd-help .wwm-pp-rail-card, .wwm-pp-app .wwm-pp-wd-side .wwm-pp-rail-card {
  border: 1px solid var(--x-rule); border-radius: 12px; box-shadow: none;
}

/* Account manager: the sheet's right column */
@media (min-width: 1280px) {
  .wwm-pp-app.has-am .wwm-pp-app-r {
    grid-template-columns: minmax(0, 1fr) 300px; column-gap: 0; row-gap: 0;
    background: linear-gradient(to right, transparent calc(100% - 301px), var(--x-rule) calc(100% - 301px), var(--x-rule) calc(100% - 300px), transparent calc(100% - 300px)) no-repeat, var(--x-paper);
  }
  .wwm-pp-app.has-am .wwm-pt-am { top: 0; padding: 32px 24px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .wwm-pp-app.has-am .wwm-pp-rail { margin-bottom: 40px; }
}
@media (max-width: 1279px) {
  .wwm-pp-app.has-am .wwm-pt-am { margin: 0; border: 0; border-bottom: 1px solid var(--x-rule); border-radius: 0; background: #fff; padding-inline: var(--x-pad); }
}

/* Narrower screens: the small figures go two across */
@media (max-width: 1119px) {
  .wwm-pp-app .wwm-pp-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwm-pp-app .wwm-pp-mini { padding: 22px var(--x-pad); }
  .wwm-pp-app .wwm-pp-mini + .wwm-pp-mini { border-left: 0; }
  .wwm-pp-app .wwm-pp-mini:nth-child(even) { border-left: 1px solid var(--x-rule); }
  .wwm-pp-app .wwm-pp-mini:nth-child(n + 3) { border-top: 1px solid var(--x-rule); }
}
@media (max-width: 767px) {
  .wwm-pp-app { --x-pad: 20px; --x-gap: 20px; }
  .wwm-pp-app .wwm-pp-app-r { padding: 0; border-radius: 12px; }
  .wwm-pp-app .wwm-pp-view-head, .wwm-pp-app .wwm-pt-head { padding: 28px var(--x-pad) 24px; }
  .wwm-pp-app .wwm-pt-head .wwm-pp-quick { width: 100%; }
  .wwm-pp-app .wwm-pp-hero { padding: 28px var(--x-pad); }
  .wwm-pp-app .wwm-pp-hero-sub { margin: 16px 0 0; padding: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .wwm-pp-app .wwm-pp-minis { grid-template-columns: minmax(0, 1fr); }
  .wwm-pp-app .wwm-pp-mini, .wwm-pp-app .wwm-pp-mini:first-child, .wwm-pp-app .wwm-pp-mini:last-child { padding: 22px var(--x-pad); }
  .wwm-pp-app .wwm-pp-mini:nth-child(even) { border-left: 0; }
  .wwm-pp-app .wwm-pp-mini + .wwm-pp-mini { border-top: 1px solid var(--x-rule); }
  .wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card, .wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card:first-child, .wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card:last-child { padding: 24px var(--x-pad); }
  .wwm-pp-app .wwm-pp-rail .wwm-pp-rail-card + .wwm-pp-rail-card { border-left: 0; border-top: 1px solid var(--x-rule); }
}