/* The partner pages. Built only from the account's own values: obsidian, charcoal, bone
   and the one orange, Century for display and Inter for everything else. No mono face
   (banned 16 September), no gradient (his rule, 4 September), no small tracked label
   above a heading (banned 5 September), orange only where it signals something. */

#v5-root { --vpp-ob: #0A0A0A; --vpp-ch: #3A3A39; --vpp-bone: #F5F5F5; --vpp-or: #DF7127; --vpp-line: rgba(10,10,10,.12); }

/* ---------- type ---------- */
#v5-root .answer .vpp-h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 39px;
  line-height: 1.04; letter-spacing: -0.01em; color: var(--vpp-ob); margin: 0; }
#v5-root .answer .vpp-h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 25px;
  line-height: 1.1; color: var(--vpp-ob); margin: 0 0 12px; }
#v5-root .answer .vpp-meta { font-family: var(--font-body); font-size: 16px; color: var(--vpp-ch); margin: 8px 0 0; }
#v5-root .answer .vpp-lede { font-family: var(--font-body); font-size: 17.5px; line-height: 1.6; color: var(--vpp-ob); max-width: 62ch; margin: 12px 0 24px; }
#v5-root .answer .vpp-small { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--vpp-ch); margin: 12px 0 0; }
#v5-root .answer .vpp-sum-k { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: inherit; opacity: .8; margin: 0 0 6px; }
#v5-root .answer .vpp-num, #v5-root .answer .vpp-stats b, #v5-root .answer .vpp-sum-total { font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-big { font-family: var(--font-display); font-weight: 700; font-size: 61px; line-height: 1; margin: 24px 0; color: var(--vpp-ob); }

/* ---------- controls ---------- */
#v5-root .answer .vpp-btn, #v5-root .answer .vp-page .vpp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--vpp-or); border-radius: 999px; background: var(--vpp-or); color: #fff;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: normal; text-align: center; line-height: 1.2; }
#v5-root .answer .vpp-btn:hover { background: var(--vessel-orange-700, #A8501F); border-color: var(--vessel-orange-700, #A8501F); color: #fff; }
#v5-root .answer .vpp-btn[disabled] { opacity: .4; cursor: not-allowed; }
#v5-root .answer .vpp-btn-ghost, #v5-root .answer .vp-page .vpp-btn-ghost { background: transparent; color: var(--vpp-ob); border-color: rgba(10,10,10,.3); }
#v5-root .answer .vpp-btn-ghost:hover { background: var(--vpp-ob); color: var(--vpp-bone); border-color: var(--vpp-ob); }
#v5-root .answer .vpp-btn-block { width: 100%; }
#v5-root .answer .vpp-quiet { font-family: var(--font-body); font-size: 16px; color: var(--vpp-ch); }
#v5-root .answer .vpp-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#v5-root .answer .vpp-f { display: block; margin: 0 0 16px; }
#v5-root .answer .vpp-f span { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: inherit; margin: 0 0 6px; }
#v5-root .answer .vpp-f input, #v5-root .answer .vpp-f select, #v5-root .answer .vpp-signin input {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(10,10,10,.2); border-radius: 10px;
  background: #fff; color: var(--vpp-ob); font-family: var(--font-body); font-size: 16px; }
#v5-root .answer .vpp-check, #v5-root .answer .vpartner-check label { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
#v5-root .answer .vpp-check input, #v5-root .answer .vpartner-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vpp-or); flex: none; }
#v5-root .answer .vpp-signin { max-width: 440px; }
#v5-root .answer .vpp-note { font-family: var(--font-body); font-size: 16px; padding: 14px 18px; border-radius: 12px; margin: 0 0 24px;
  background: #fff; border: 1px solid var(--vpp-line); color: var(--vpp-ob); }
#v5-root .answer .vpp-note-good { border-color: var(--vpp-ob); }

/* ---------- the application form (kept from 1.1.0, the mono face taken out) ---------- */
#v5-root .answer .vpartner-form { max-width: 760px; margin: 0; }
#v5-root .answer .vpartner-hp { position: absolute; left: -9999px; }
#v5-root .answer .vpartner-kind { border: 0; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#v5-root .answer .vpartner-kind legend { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20px; color: var(--vpp-ob); margin: 0 0 16px; padding: 0; }
#v5-root .answer .vpartner-opt { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid rgba(10,10,10,.16); border-radius: 14px; cursor: pointer; background: #fff; }
#v5-root .answer .vpartner-opt:has(input:checked) { border-color: var(--vpp-ob); box-shadow: inset 0 0 0 1px var(--vpp-ob); }
#v5-root .answer .vpartner-opt input { margin-top: 4px; accent-color: var(--vpp-or); }
#v5-root .answer .vpartner-opt b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 18px; }
#v5-root .answer .vpartner-opt i { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--vpp-ch); }
#v5-root .answer .vpartner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#v5-root .answer .vpartner-field { margin: 0 0 20px; }
#v5-root .answer .vpartner-field > label { display: block; margin: 0 0 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--vpp-ob); }
#v5-root .answer .vpartner-field input:not([type=checkbox]), #v5-root .answer .vpartner-field textarea {
  width: 100%; padding: 12px 16px; background: #fff; border: 1px solid rgba(10,10,10,.18); border-radius: 10px;
  font-family: var(--font-body); font-size: 16px; color: var(--vpp-ob); }
#v5-root .answer .vpartner-field input:focus, #v5-root .answer .vpartner-field textarea:focus, #v5-root .answer .vpp-f input:focus, #v5-root .answer .vpp-f select:focus { outline: 2px solid var(--vpp-ob); outline-offset: 1px; }
#v5-root .answer .vpartner-sign-h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20px; margin: 12px 0 12px; }
#v5-root .answer .vpartner-agreement { max-height: 300px; overflow: auto; padding: 20px 22px; background: #fff; border: 1px solid var(--vpp-line);
  border-radius: 12px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--vpp-ob); }
#v5-root .answer .vpartner-agreement h4 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 18px 0 6px; text-transform: none; }
#v5-root .answer .vpartner-agreement p { margin: 0 0 10px; }
#v5-root .answer .vpartner-draft { font-weight: 600; color: var(--vpp-ch); }
#v5-root .answer .vpartner-agree-meta { font-family: var(--font-body); font-size: 14px; color: var(--vpp-ch); margin: 8px 0 20px; }
#v5-root .answer .vpartner-sigrow { align-items: end; }
#v5-root .answer .vpartner-form .cta-block { width: 100%; margin-top: 8px; }
#v5-root .answer .vpartner-note { margin-top: 14px; font-family: var(--font-body); font-size: 14px; color: var(--vpp-ch); }
#v5-root .answer .vpartner-done h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 31px; margin: 0 0 12px; color: var(--vpp-ob); }
#v5-root .answer .vpartner-done p { font-size: 17.5px; line-height: 1.65; max-width: 60ch; }
#v5-root .answer .vpartner-warn { padding: 14px 18px; margin: 0 0 24px; border-radius: 12px; border: 1px solid var(--vpp-ob); background: #fff; }
#v5-root .answer .vpartner-warn p { font-family: var(--font-body); font-size: 16px; margin: 0; color: var(--vpp-ob); }
#v5-root .answer .vp-page a.vpartner-jump, #v5-root .answer .vpartner-jump { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; margin: 8px 0 0;
  border-radius: 999px; background: var(--vpp-or); color: #fff; font-family: var(--font-body); font-size: 18px; font-weight: 500; text-decoration: none; }

/* ---------- account ---------- */
#v5-root .answer .vpp-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
#v5-root .answer .vpp-linkcard { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 32px; border-radius: 20px;
  background: var(--vpp-ob); color: var(--vpp-bone); }
#v5-root .answer .vpp-linkcard .vpp-small { color: rgba(245,245,245,.78); max-width: 56ch; }
#v5-root .answer .vpp-link { font-family: var(--font-display); font-weight: 700; font-size: 31px; line-height: 1.15; margin: 0; overflow-wrap: normal; color: var(--vpp-bone); }
#v5-root .answer .vpp-link-plain { font-family: var(--font-display); font-weight: 700; font-size: 31px; margin: 0; text-transform: uppercase; }
#v5-root .answer .vpp-linkcard .vpp-btn-ghost { color: var(--vpp-bone); border-color: rgba(245,245,245,.4); }
#v5-root .answer .vpp-linkcard .vpp-btn-ghost:hover { background: var(--vpp-bone); color: var(--vpp-ob); }
#v5-root .answer .vpp-qr { width: 180px; height: 180px; border-radius: 12px; display: block; }
#v5-root .answer .vpp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 32px 0 0; border-top: 1px solid var(--vpp-line); }
#v5-root .answer .vpp-stats > div { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--vpp-line); }
#v5-root .answer .vpp-stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 49px; line-height: 1; color: var(--vpp-ob); }
#v5-root .answer .vpp-stats span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 14px; color: var(--vpp-ch); }
#v5-root .answer .vpp-stats-3 { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
#v5-root .answer .vpp-pitch .vpp-stats { grid-template-columns: repeat(3, 1fr); }
#v5-root .answer .vpp-block { margin-top: 64px; }
#v5-root .answer .vpp-scroll { overflow-x: auto; }
#v5-root .answer .vpp-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 16px; margin: 8px 0 0; }
#v5-root .answer .vp-page .vpp-table th, #v5-root .answer .vpp-table th { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vpp-ch);
  text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--vpp-line); white-space: nowrap; }
#v5-root .answer .vp-page .vpp-table td, #v5-root .answer .vpp-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid rgba(10,10,10,.07); }
#v5-root .answer .vpp-stage { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--vpp-line); font-size: 14px; white-space: nowrap; }
#v5-root .answer .vpp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
#v5-root .answer .vpp-inline { padding: 24px; background: #fff; border: 1px solid var(--vpp-line); border-radius: 16px; }
#v5-root .answer .vpp-inline .vpp-sum-k { color: var(--vpp-ob); }
#v5-root .answer .vpp-inline-details summary { cursor: pointer; color: var(--vpp-ob); text-decoration: underline; display: inline; }
#v5-root .answer .vpp-agreed { margin-top: 48px; }

/* ---------- the share kit ---------- */
#v5-root .answer .vpp-kit-shapes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--vpp-line); margin: 0 0 24px; }
#v5-root .answer .vpp-kit-shapes button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--vpp-ob);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; }
#v5-root .answer .vpp-kit-shapes button[aria-selected="true"] { background: var(--vpp-ob); color: var(--vpp-bone); }
#v5-root .answer .vpp-kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
#v5-root .answer .vpp-kit-grid[data-shape="story"] { grid-template-columns: repeat(4, 1fr); }
#v5-root .answer .vpp-kit-card { margin: 0; }
#v5-root .answer .vpp-kit-card canvas { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--vpp-ch); box-shadow: 0 0 0 1px var(--vpp-line); }
#v5-root .answer .vpp-kit-card figcaption { margin-top: 12px; }
#v5-root .answer .vpp-kit-card figcaption b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 16px; margin: 0 0 10px; }
#v5-root .answer .vpp-kit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#v5-root .answer .vpp-kit-btns .vpp-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
#v5-root .answer .vpp-kit-rules { margin-top: 40px; padding: 20px 24px; background: #fff; border: 1px solid var(--vpp-line); border-radius: 16px; font-family: var(--font-body); }
#v5-root .answer .vpp-kit-rules summary { cursor: pointer; font-size: 17.5px; font-weight: 600; }
#v5-root .answer .vpp-kit-rules ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.6; }

/* ---------- the wholesale order page ---------- */
#v5-root .answer .vpp-levels { list-style: none; margin: 24px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#v5-root .answer .vpp-levels li { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--vpp-line); font-family: var(--font-body); }
#v5-root .answer .vpp-levels b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 16px; }
#v5-root .answer .vpp-levels span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 31px; margin: 4px 0; font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-levels i { font-style: normal; font-size: 14px; color: var(--vpp-ch); }
#v5-root .answer .vpp-levels li.is-hit { background: var(--vpp-ob); color: var(--vpp-bone); border-color: var(--vpp-ob); }
#v5-root .answer .vpp-levels li.is-hit i { color: rgba(245,245,245,.78); }
#v5-root .answer .vpp-order-form { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
#v5-root .answer .vpp-lines { display: grid; gap: 12px; }
#v5-root .answer .vpp-line { display: grid; grid-template-columns: 95px 1fr auto; gap: 20px; align-items: center; padding: 14px; background: #fff;
  border: 1px solid var(--vpp-line); border-radius: 16px; }
#v5-root .answer .vpp-line.is-on { border-color: var(--vpp-ob); box-shadow: inset 0 0 0 1px var(--vpp-ob); }
#v5-root .answer .vp-page img.vpp-line-img, #v5-root .answer .vpp-line-img { width: 95px; height: 128px; object-fit: cover; border-radius: 10px; }
#v5-root .answer .vpp-line-words { display: grid; gap: 4px; font-family: var(--font-body); min-width: 0; }
#v5-root .answer .vpp-line-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; }
#v5-root .answer .vpp-line-for, #v5-root .answer .vpp-line-margin { font-size: 14px; color: var(--vpp-ch); }
#v5-root .answer .vpp-line-price { font-size: 16px; }
#v5-root .answer .vpp-line-price s { color: var(--vpp-ch); margin-right: 4px; }
#v5-root .answer .vpp-line-price b { font-size: 20px; font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-qty { display: flex; align-items: center; border: 1px solid rgba(10,10,10,.2); border-radius: 999px; overflow: hidden; background: #fff; }
#v5-root .answer .vpp-qty input { width: 64px; height: 48px; border: 0; text-align: center; font-family: var(--font-body); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; background: transparent; color: var(--vpp-ob); }
#v5-root .answer .vpp-qty input::-webkit-inner-spin-button, #v5-root .answer .vpp-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#v5-root .answer .vpp-step { width: 48px; height: 48px; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--vpp-ob); }
#v5-root .answer .vpp-step:hover { background: var(--vpp-bone); }
#v5-root .answer .vpp-sum { position: sticky; top: 96px; padding: 28px; border-radius: 20px; background: var(--vpp-ob); color: var(--vpp-bone); font-family: var(--font-body); }
#v5-root .answer .vpp-sum-total { font-family: var(--font-display); font-weight: 700; font-size: 61px; line-height: 1; margin: 0; color: var(--vpp-bone); }
#v5-root .answer .vpp-sum-boxes { font-size: 16px; margin: 8px 0 20px; color: rgba(245,245,245,.8); }
#v5-root .answer .vpp-meter { position: relative; height: 10px; border-radius: 999px; background: rgba(245,245,245,.18); margin: 0 0 14px; }
#v5-root .answer .vpp-meter span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--vpp-or); transition: width .2s cubic-bezier(.2,.7,.2,1); }
#v5-root .answer .vpp-meter i { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--vpp-bone); transform: translateX(-1px); }
#v5-root .answer .vpp-sum-next { font-size: 16px; line-height: 1.45; margin: 0 0 20px; }
#v5-root .answer .vpp-free { margin: 0 0 20px; }
#v5-root .answer .vpp-free-pick { display: block; font-size: 14px; font-weight: 600; margin: 0 0 10px; }
#v5-root .answer .vpp-free-pick select { display: block; width: 100%; min-height: 44px; margin-top: 6px; border-radius: 10px; font-size: 16px; padding: 8px 12px; }
#v5-root .answer .vpp-sum .vpp-f span { color: var(--vpp-bone); }
#v5-root .answer .vpp-ship { margin: 0 0 16px; border-top: 1px solid rgba(245,245,245,.18); padding-top: 16px; }
#v5-root .answer .vpp-ship summary { cursor: pointer; font-size: 16px; font-weight: 600; margin-bottom: 12px; }
#v5-root .answer .vpp-ship summary span { font-weight: 400; color: rgba(245,245,245,.8); }
#v5-root .answer .vpp-sum .vpp-small { color: rgba(245,245,245,.78); }
#v5-root .answer .vpp-history { margin-top: 64px; }
#v5-root .answer .vpp-done { max-width: 640px; }

/* ---------- the rep's sales page ---------- */
#v5-root .answer .vpp-pitch-hero .vpp-h2 { font-size: 49px; max-width: 18ch; }
#v5-root .answer .vpp-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 48px 0; }
#v5-root .answer .vpp-box { display: grid; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--vpp-line); border-radius: 16px; font-family: var(--font-body); font-size: 14px; color: var(--vpp-ch); }
#v5-root .answer .vp-page .vpp-box img, #v5-root .answer .vpp-box img { width: 100%; height: auto; aspect-ratio: 285 / 384; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
#v5-root .answer .vpp-box > b { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; color: var(--vpp-ob); }
#v5-root .answer .vpp-box-price b { font-size: 18px; color: var(--vpp-ob); font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-box-keep { margin-top: 6px; font-weight: 600; color: var(--vpp-ob); }
#v5-root .answer .vpp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#v5-root .answer .vpp-tier { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--vpp-line); font-family: var(--font-body); }
#v5-root .answer .vpp-tier.is-mid { background: var(--vpp-ob); color: var(--vpp-bone); border-color: var(--vpp-ob); }
#v5-root .answer .vpp-tier p { margin: 0; }
#v5-root .answer .vpp-tier-name { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; font-weight: 700; }
#v5-root .answer .vpp-tier-min { font-family: var(--font-display); font-weight: 700; font-size: 49px; line-height: 1.05; margin: 8px 0 !important; font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-tier-what { font-size: 16px; }
#v5-root .answer .vpp-pitch-how { margin-top: 56px; }
#v5-root .answer .vpp-pitch-how ol { list-style: none; counter-reset: s; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#v5-root .answer .vpp-pitch-how li { counter-increment: s; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--vpp-ch); }
#v5-root .answer .vpp-pitch-how li::before { content: counter(s); display: block; font-family: var(--font-display); font-weight: 700; font-size: 39px; color: var(--vpp-ob); line-height: 1; margin-bottom: 8px; }
#v5-root .answer .vpp-pitch-how li b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 20px; color: var(--vpp-ob); margin-bottom: 4px; }

/* ---------- whose link you came in on ---------- */
.vpp-refbar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9990;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; border-radius: 999px;
  background: #0A0A0A; color: #F5F5F5; font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; box-shadow: 0 0 0 1px rgba(245,245,245,.14); }
.vpp-refbar p { margin: 0; }
.vpp-refbar button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(245,245,245,.12); color: #F5F5F5; font-size: 20px; cursor: pointer; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  #v5-root .answer .vpp-order-form { grid-template-columns: 1fr; }
  #v5-root .answer .vpp-sum { position: static; }
  #v5-root .answer .vpp-boxes { grid-template-columns: repeat(3, 1fr); }
  #v5-root .answer .vpp-kit-grid[data-shape="story"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  #v5-root .answer .vpp-h2 { font-size: 31px; }
  #v5-root .answer .vpp-pitch-hero .vpp-h2 { font-size: 39px; }
  #v5-root .answer .vpartner-kind, #v5-root .answer .vpartner-grid, #v5-root .answer .vpp-two, #v5-root .answer .vpp-tiers, #v5-root .answer .vpp-pitch-how ol { grid-template-columns: 1fr; }
  #v5-root .answer .vpp-linkcard { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  #v5-root .answer .vpp-qr { width: 160px; height: 160px; }
  #v5-root .answer .vpp-link, #v5-root .answer .vpp-link-plain { font-size: 25px; }
  #v5-root .answer .vpp-stats, #v5-root .answer .vpp-pitch .vpp-stats { grid-template-columns: 1fr 1fr; }
  #v5-root .answer .vpp-stats b { font-size: 39px; }
  #v5-root .answer .vpp-kit-grid, #v5-root .answer .vpp-kit-grid[data-shape="story"] { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  #v5-root .answer .vpp-kit-btns .vpp-btn { flex: 1 1 100%; }
  #v5-root .answer .vpp-kit-shapes { display: flex; }
  #v5-root .answer .vpp-kit-shapes button { flex: 1; padding: 0 8px; }
  #v5-root .answer .vpp-levels { grid-template-columns: 1fr; }
  #v5-root .answer .vpp-levels li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  #v5-root .answer .vpp-levels i { grid-column: 1 / -1; }
  #v5-root .answer .vpp-line { grid-template-columns: 72px 1fr; gap: 14px; }
  #v5-root .answer .vp-page img.vpp-line-img, #v5-root .answer .vpp-line-img { width: 72px; height: 97px; grid-row: span 2; }
  #v5-root .answer .vpp-qty { justify-self: start; }
  #v5-root .answer .vpp-sum-total { font-size: 49px; }
  #v5-root .answer .vpp-boxes { grid-template-columns: 1fr 1fr; }
  #v5-root .answer .vpp-head-row { align-items: flex-start; }
}

/* Light words on the dark cards. The section's own rule paints every paragraph on a light
   section dark, so a card that is dark has to say so for its paragraphs by name. */
#v5-root .answer .vpp-linkcard p, #v5-root .answer .vpp-sum p, #v5-root .answer .vpp-tier.is-mid p,
#v5-root .answer .vpp-levels li.is-hit, #v5-root .answer .vpp-sum label { color: var(--vpp-bone); }
#v5-root .answer .vpp-linkcard .vpp-small, #v5-root .answer .vpp-sum .vpp-small, #v5-root .answer .vpp-sum .vpp-sum-boxes { color: rgba(245,245,245,.78); }
#v5-root .answer .vpp-meta, #v5-root .answer .vpp-small, #v5-root .answer .vpp-stats span { color: var(--vpp-ch); }
#v5-root .answer .vpp-lede { color: var(--vpp-ob); }

/* The account, order and sales pages. The floating bar sits over the top 116 to 148
   pixels, as it does on the legal pages, so the section starts below it. The page's own
   title stays for search and for screen readers; the page shows its own heading. */
body.vpp-partner-app #v5-root .answer.on-bone { padding-top: 148px; padding-bottom: 96px; }
body.vpp-partner-app #v5-root .answer .answer-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { body.vpp-partner-app #v5-root .answer.on-bone { padding-top: 116px; padding-bottom: 64px; } }

/* The kit on a phone: one row that swipes, each card most of the screen wide, so a
   partner sees a whole picture at a readable size and the next one waiting at the edge. */
#v5-root .answer .vpp-kit-cap { margin-top: 10px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--vpp-ob); text-decoration: underline; text-underline-offset: 3px; }
#v5-root .answer .vpp-kit-btns .vpp-btn { flex: 1 1 auto; }
@media (max-width: 760px) {
  #v5-root .answer .vpp-kit-grid, #v5-root .answer .vpp-kit-grid[data-shape="story"] {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; margin: 0 -22px; padding-left: 22px; padding-right: 22px;
    scroll-padding-left: 22px; }
  #v5-root .answer .vpp-kit-card { scroll-snap-align: start; }
  #v5-root .answer .vpp-kit-btns .vpp-btn { flex: 1 1 0; }
}

/* Levels: the figure first, then its name, so no small label sits above a number. */
#v5-root .answer .vpp-levels b { font-size: 16px; margin-top: 2px; }
#v5-root .answer .vpp-tier-name { margin-top: 2px !important; }
#v5-root .answer .vpp-box > b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
/* The theme gives every number box on a page a full-width white field of its own. */
#v5-root .answer .vpp-qty input[type=number] { width: 64px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Centred with left 50% the bar may only use the right half of the screen, so on a
   phone it wrapped to two lines. Pinned to both sides and sized to its words instead. */
.vpp-refbar { left: 16px; right: 16px; transform: none; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto; }
@media (max-width: 480px) { .vpp-refbar { font-size: 15px; padding-left: 16px; } }

/* ---------- 23 September: the review ---------- */
/* agreement headings are signposts, not display type: the theme's h4 tracking comes off */
#v5-root .answer .vpartner-agreement h4 { letter-spacing: 0; font-size: 16px; }
/* the offer, figures first */
#v5-root .answer .vpp-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 12px; max-width: none; }
#v5-root .answer .vpp-hero-card { display: grid; gap: 6px; align-content: start; padding: 24px 22px; border-radius: 18px; background: var(--vpp-ob); color: var(--vpp-bone); text-decoration: none; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
#v5-root .answer .vpp-hero-card:hover { transform: translateY(-2px); color: var(--vpp-bone); }
#v5-root .answer .vpp-hero-fig { font-family: var(--font-display); font-weight: 700; font-size: 49px; line-height: 1; font-variant-numeric: tabular-nums; }
#v5-root .answer .vpp-hero-who { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 18px; margin-top: 4px; }
#v5-root .answer .vpp-hero-what { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: rgba(245,245,245,.82); }
#v5-root .answer .vpp-hero-go { margin-top: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--vpp-or); }
#v5-root .answer .vpp-hero-in { margin: 0 0 32px; }
/* links straight to one strip */
#v5-root .answer .vpp-deep { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
#v5-root .answer .vpp-deep .vpp-small { margin: 0 6px 0 0; }
#v5-root .answer .vpp-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--vpp-line); background: #fff; color: var(--vpp-ob);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 14px; cursor: pointer; }
#v5-root .answer .vpp-chip:hover { border-color: var(--vpp-ob); }
/* 30 days */
#v5-root .answer .vpp-chart { margin-top: 40px; }
#v5-root .answer .vpp-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; height: 96px; margin-top: 14px; }
#v5-root .answer .vpp-bar { display: block; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: rgba(10,10,10,.18); }
#v5-root .answer .vpp-bar.has-order { background: var(--vpp-ob); }
#v5-root .answer .vpp-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-body); font-size: 14px; color: var(--vpp-ch); }
@media (max-width: 760px) {
  #v5-root .answer .vpp-hero { grid-template-columns: 1fr; }
  #v5-root .answer .vpp-hero-fig { font-size: 39px; }
  #v5-root .answer .vpp-bars { gap: 2px; height: 72px; }
}
/* the cards sit a step below the page heading, and every card's action sits on its floor */
#v5-root .answer .vpp-hero { margin-top: 28px; }
#v5-root .answer .vpp-hero-card { display: flex; flex-direction: column; gap: 6px; }
#v5-root .answer .vpp-hero-go { margin-top: auto; padding-top: 14px; }
/* His rule, 2 September: any orange text is #DF7127, never a second orange. The page
   template paints links in the darker press-state orange, so on the partner pages the
   links take the one Vessel orange. */
body.vp-partners #v5-root .answer .vp-page a:not(.vpp-btn):not(.vpp-hero-card):not(.vpartner-jump),
body.vp-partner-app #v5-root .answer .vp-page a:not(.vpp-btn):not(.vpp-hero-card) { color: var(--vpp-or); }

/* 2026-09-24. Each black card beside the section that explains it, so the top of the
   partner page reads as three offers, not a wall of text. Each row is its own two
   column grid, so a paragraph the editor wraps around the card cannot break it. */
#v5-root .answer .vpp-pairs { display: grid; gap: 20px; margin: 28px 0 8px; max-width: none; }
#v5-root .answer .vpp-pair { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 36px; align-items: start; }
#v5-root .answer .vpp-pair > p { margin: 0; }
#v5-root .answer .vpp-pair > p:empty, #v5-root .answer .vpp-pairs > p:empty { display: none; }
#v5-root .answer .vpp-pair > .vpp-hero-card { grid-column: 1; }
#v5-root .answer .vpp-pair > .vpp-pair-text { grid-column: 2; }
#v5-root .answer .vpp-pair-text h2 { margin-top: 0; }
#v5-root .answer .vpp-pair-text p:last-child { margin-bottom: 0; }
#v5-root .answer .vpp-pair-last { padding-top: 8px; }
#v5-root .answer .vpp-pair-last .vpp-pair-text { grid-column: 2; }
#v5-root .answer .vp-page p.vpp-affrow, #v5-root .answer p.vpp-affrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 44px 0 48px; }
#v5-root .answer .vpp-affrow .vpp-small { margin: 0; }
@media (max-width: 760px) {
  #v5-root .answer .vpp-pairs { gap: 32px; }
  #v5-root .answer .vpp-pair { grid-template-columns: 1fr; gap: 16px; }
  #v5-root .answer .vpp-pair > .vpp-pair-text,
  #v5-root .answer .vpp-pair-last .vpp-pair-text { grid-column: 1; }
}

/* 2026-09-29. The Collect press, ACH only. */
#v5-root .answer .vpp-collect { margin: 20px 0 24px; display: grid; gap: 8px; justify-items: start; }
#v5-root .answer .vpp-collect .vpp-btn[disabled] { opacity: .45; }
#v5-root .answer .vpp-collect-say { margin: 0; font-family: var(--font-body); font-size: 16px; }