/* =====================================================================================================================
   pages-partners-v3.css: /partners/ only (v3 words, 2026-09-29). Linked after site.css, group-b.css and pages-g4.css.
   Look follows the Tom-approved /itad/ v3 page (pages-g2.css + pages-g2-itad.css): ink photo hero, text-led splits,
   numbered step cards with the partner's own steps on lime, one ink band, visible answers. Every rule is scoped by a
   pv- class that exists on /partners/ alone. Lime / black / white tokens only; no shared part restyled.
   Previous page: handoffs/draft4/site-backup-partners-pre-v3/
   ===================================================================================================================== */

/* ---------- hero: the /itad/ photo card (g2-hero recipe, re-scoped) ---------- */
.pv-eyebrow { font-size: 1rem; line-height: 1.35; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--green-text); }
.pv-hero .hero__h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 17ch; }
.pv-hero .hero__sub { margin-top: var(--s4); max-width: 34rem; }
.pv-hero .hero__actions { margin-top: var(--s6); }
.pv-hero .hero__photo img { object-position: 50% 74%; }
/* Tom 10-08 (file_495): MSP hero background = the wrapped pallets, full-bleed fade (portrait card dropped) */
.pv-hero--pallets .hero__photo img { object-position: 50% 55%; }
/* Tom 10-08 "show more pallet": at 64rem+ the panel takes the near-square photo's shape on the right, not a wide band */
@media (min-width: 64rem) { .pv-hero.pv-hero--pallets .hero__photo { left: auto; right: 0; top: 0; bottom: 0; height: 100%; width: auto; min-width: 40%; aspect-ratio: 1 / 1; } .pv-hero--pallets .hero__photo img { object-position: 50% 50%; } }
@media (max-width: 47.99rem) { .pv-hero .hero__actions .btn, .pv-hero .hero__actions .textlink--strong { width: 100%; } }
@media (min-width: 64rem) {
  .pv-hero { padding: var(--inset) var(--inset) var(--s6); }
  .pv-hero .hero__grid { max-width: 1440px; margin-inline: auto; overflow: hidden;
    min-height: clamp(480px, calc(100svh - var(--header-h) - var(--utility-h) - 170px), 620px); }
  .pv-hero .hero__photo { left: 40%; }
  .pv-hero .hero__photo picture { border-radius: 0; }
  .pv-hero .hero__photo::after { border-radius: 0;
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 10%, rgb(18 19 17 / 0.9) 18%, rgb(18 19 17 / 0.72) 27%,
        rgb(18 19 17 / 0.5) 37%, rgb(18 19 17 / 0.3) 49%, rgb(18 19 17 / 0.14) 63%, rgb(18 19 17 / 0.05) 80%, rgb(18 19 17 / 0.02) 100%),
      linear-gradient(0deg, rgb(18 19 17 / 0.32) 0%, rgb(18 19 17 / 0) 34%); }
  .pv-hero .hero__text { padding: 64px max(40px, (min(100vw - 32px, 1440px) - var(--container)) / 2); }
  .pv-hero .hero__text > * { max-width: 36rem; }
  .pv-hero .hero__h1 { max-width: 16ch; }
  .pv-hero .hero__sub { color: #e4e5df; }
  .pv-hero .pv-eyebrow { color: var(--lime); }
  /* one filled lime button per view: the hero's "Become a partner" is the filled one, so the header's pickup button
     takes the header's outline style on this page (carried over from the v2 page rule) */
}

/* ---------- shared heading / body split for the text-led sections ---------- */
.pv-split { display: grid; gap: var(--s6); }
@media (min-width: 64rem) {
  .pv-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}
.pv-split > .h2 { max-width: 16ch; }

/* ---------- What is the partner program? ---------- */
.pv-what { padding-bottom: var(--s16); }
@media (min-width: 64rem) { .pv-hero + .pv-what { padding-top: var(--s16); } }
.pv-what__body { display: grid; gap: var(--s6); }
.pv-what__gap { padding-top: var(--s6); border-top: 2px solid var(--lime); max-width: 40rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.008em; }

/* ---------- Two ways ---------- */
.pv-ways { padding-top: var(--s16); }
.pv-head { display: grid; gap: var(--s4); margin-bottom: var(--s10); }
.pv-head .answer { max-width: 40rem; }
@media (min-width: 64rem) {
  .pv-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: end; }
}
.pv-ways__main { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
/* 10-05: three equal lanes (MSP, Referral, Education) */
@media (min-width: 64rem) { .pv-ways__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.pv-way { display: grid; gap: var(--s3); align-content: start; padding: var(--s8) var(--s6); border-radius: 24px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (min-width: 64rem) { .pv-way { padding: var(--s10); } }
.pv-way--ink { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.pv-way__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; }
.pv-way__lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 700; color: var(--green-text); }
.pv-way--ink .pv-way__lead { color: var(--lime); }
.pv-way__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.pv-way--ink .pv-way__text { color: var(--on-ink-2); }

/* the "Also:" row: three lighter items on a ruled line, not three more cards */
.pv-also { margin-top: var(--s12); }
.pv-also__label { font-size: var(--fs-lead); font-weight: 700; margin-bottom: var(--s4); }
.pv-also__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.pv-also__item { display: grid; gap: var(--s2); align-content: start; padding: var(--s5) 0 var(--s6); border-bottom: 1px solid var(--hairline); }
.pv-also__item p { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 40rem; }
/* run-in label: the words continue the label's sentence, so it stays inline rather than a heading over a lower-case line */
.pv-also__item strong { font-weight: 700; color: var(--ink); }
.pv-also__item .link-arrow { justify-self: start; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (min-width: 64rem) {
  .pv-also__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s10); border-bottom: 1px solid var(--hairline); }
  .pv-also__item { border-bottom: 0; padding-bottom: var(--s8); }
}

/* ---------- Who keeps the client relationship? (tint band, two lists side by side) ---------- */
.pv-rel__answer { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; font-weight: 500; max-width: 34rem; }
.pv-rel__answer strong { font-weight: 700; }
.pv-rel__lists { display: grid; gap: var(--s4); margin-top: var(--s10); }
@media (min-width: 48rem) { .pv-rel__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.pv-list { padding: var(--s8) var(--s6); border-radius: 24px; background: var(--paper); }
@media (min-width: 64rem) { .pv-list { padding: var(--s10); } }
.pv-list--you { background: var(--ink); color: var(--on-dark); }
.pv-list__h { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--s4); }
.pv-list__items { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lime); }
.pv-list__items li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--s4); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); font-size: 1.0625rem; line-height: 1.5; font-weight: 600; }
.pv-list__items li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); transform: translateY(-1px); }
.pv-list--you .pv-list__items li { border-bottom-color: var(--hairline-dark); }
.pv-list__items li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- How it works: four numbered cards, the partner's two steps on lime (the /itad/ track) ---------- */
.pv-how__h2 { margin-bottom: var(--s10); }
.pv-track { counter-reset: pvstep; display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.pv-step { counter-increment: pvstep; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: var(--s4); row-gap: var(--s2); align-content: start; padding: var(--s5);
  border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.pv-step::before { content: counter(pvstep); grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pv-step__title { grid-column: 2; padding-top: 11px; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }
.pv-step__text { grid-column: 2; color: var(--text-2); line-height: 1.55; }
.pv-step--you { background: var(--lime); box-shadow: none; }
.pv-step--you::before { background: var(--ink); color: var(--on-dark); }
.pv-step--you .pv-step__text { color: var(--ink); }
@media (min-width: 48rem) { .pv-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .pv-step { padding: var(--s6); } }
/* 2 x 2 at every width from 48rem: the content column tops out at 1102px, and four across left each card's text at
   ~215px with "U.S.-" breaking at 1280 and 1920 */
@media (min-width: 64rem) { .pv-track { gap: var(--s5); } .pv-step { padding: var(--s8); } .pv-step__text { max-width: 30rem; } }
.pv-how__more { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8); }
.pv-how__more .link-arrow { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; font-size: 1.0625rem; }

/* ---------- Why partners pick Regadget: the page's one ink band ---------- */
.pv-why__grid { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 64rem) { .pv-why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); } }
.pv-why__text { display: grid; gap: var(--s5); align-content: start; }
.pv-why__text .h2 { color: var(--on-dark); max-width: 16ch; }
.pv-why__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 36rem; }
.pv-why__fig { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink-3); }
.pv-why__fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 64rem) { .pv-why__fig img { aspect-ratio: 1 / 1; max-height: 420px; } }
.pv-proof { display: grid; gap: 0; margin: var(--s10) 0 0; padding: 0; list-style: none; }
.pv-proof li { padding: var(--s5) 0; border-top: 2px solid var(--lime); font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; color: var(--on-dark); }
@media (min-width: 48rem) {
  .pv-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); }
  .pv-proof li { padding-bottom: 0; }
}

/* ---------- What partners ask first ---------- */
/* Tom 10-06 "make them vertical list like all the other pages": the two-column override is gone, so partner FAQs use the
   site's default .faq layout. */
.pv-faq .h2 { max-width: 20ch; }

.pv-nowrap { white-space: nowrap; }

/* ---------- visible keyboard focus on the page's own dark surfaces ---------- */
.pv-way--ink :where(a):focus-visible, .pv-list--you :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }

/* =====================================================================================================================
   10-05 rebuild (Tom): MSP + Education routing pair, three ways to refer with links, 3-step track, "what you get" grid.
   ===================================================================================================================== */
/* hero: the payoff sentence ("Earn a referral fee.") starts its own line rather than mid-line (Tom's headline, v209) */
.pv-hero .hero__h1 .accent { display: block; }
/* routing pair: two equal cards right under the hero, MSP on ink, Education on paper */
.pv-routes { padding-top: var(--s12); }
@media (min-width: 64rem) { .pv-hero + .pv-routes { padding-top: var(--s16); } }
.pv-routes__grid { display: grid; gap: var(--s4); }
@media (min-width: 64rem) { .pv-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.pv-route { display: grid; gap: var(--s4); align-content: start; grid-template-rows: auto auto 1fr auto auto;
  padding: var(--s8) var(--s6); border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); scroll-margin-top: 96px; }
#education.pv-route { grid-template-rows: auto auto 1fr auto; }
@media (min-width: 64rem) { .pv-route { padding: var(--s12) var(--s10); } }
.pv-route--ink { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.pv-route__h { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
.pv-route__lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 700; color: var(--green-text); max-width: 34rem; }
.pv-route--ink .pv-route__lead { color: var(--lime); }
.pv-route__text { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); max-width: 36rem; }
.pv-route--ink .pv-route__text { color: var(--on-ink-2); }
.pv-route__note { font-size: 1rem; font-weight: 600; padding-top: var(--s4); border-top: 1px solid var(--hairline-dark); }
.pv-route__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8); padding-top: var(--s2); }
.pv-route__links .link-arrow, .pv-way__link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pv-route:not(.pv-route--ink) .pv-route__links .link-arrow { color: var(--ink); }
.pv-route--ink :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
/* three ways to refer: equal cards, link pinned to the bottom so the three line up */
.pv-way { grid-template-rows: auto 1fr auto; }
.pv-way__link { justify-self: start; color: var(--ink); margin-top: var(--s2); }
.pv-way--ink .pv-way__link { color: var(--on-dark); }
/* routing cards = the site's door2 component (Home router, /buy-refurbished/ "Three ways to buy"); Tom 10-05 */
.pv-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 64rem) {
  .pv-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .pv-doors--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-doors .pv-door .door2__label { font-size: 1.25rem; }
  .pv-doors--2 .pv-door .door2__label { font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem); }
}
.pv-router .pv-head { margin-bottom: var(--s8); }
.pv-door { scroll-margin-top: 96px; }
.pv-door .door2__body { padding: 26px 28px 24px; }
.pv-door .door2__label { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.pv-door .door2__hook { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.pv-door .door2__desc { margin-top: 6px; margin-bottom: 20px; max-width: 40ch; }
.pv-doors--2 .pv-door .door2__desc { max-width: 52ch; }
.pv-door .door2__cta { gap: 12px; padding: 0; min-height: 44px; border: 0; border-radius: 0; font-size: 1rem; }
.pv-door .door2__cta svg { width: 16px; height: 16px; transition: none; }
.pv-arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--floor); color: var(--ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.pv-door:hover .door2__cta { background: none; color: var(--ink); }
.pv-door:hover .door2__cta svg { transform: none; }
@media (hover: hover) { .pv-door:hover .pv-arrow { transform: translateX(4px); background: var(--lime); } }
.pv-door--lead { box-shadow: 0 1px 2px rgb(18 19 17 / 0.06), 0 16px 36px -14px rgb(18 19 17 / 0.34), inset 0 0 0 2px var(--lime); }
.pv-door--lead .door2__cta { padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--ink); color: var(--on-dark); min-height: 48px; }
.pv-door--lead:hover .door2__cta { background: var(--ink); color: var(--on-dark); }
.pv-door--lead .pv-arrow { background: var(--lime); color: var(--ink); }
.pv-door__more { margin-top: var(--s3); }
.pv-door__more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
/* optical centring (Tom 10-06 "ALIGNMENT"): the face reserves descender space, so a metric-centred label reads ~3px high next to
   the round arrow. Push the row's content down 3px, then lift the arrow back by 3px so it stays centred in the pill/row. */
.pv-door .door2__cta { padding-top: 6px; }
.pv-door--lead .door2__cta { padding: 9px 6px 3px 20px; }
.pv-door .pv-arrow { transform: translateY(-3px); }
@media (hover: hover) { .pv-door:hover .pv-arrow { transform: translate(4px, -3px); } }
@media (max-width: 63.99rem) { .pv-door .door2__body { padding: 22px 22px 20px; } }
@media (prefers-reduced-motion: reduce) { .pv-arrow { transition: none; } .pv-door:hover .pv-arrow { transform: none; } }
/* how it works: three steps in a row from 64rem, roles below */
/* Plan 4 (10-06): three across from 48rem, so step 3 never orphans under steps 1 and 2 at 768 */
@media (min-width: 48rem) { .pv-track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-how .pv-rel__lists { margin-top: var(--s8); }
/* what you get: 2 x 2 ruled grid on the ink band */
.pv-gets { display: grid; gap: 0; margin: var(--s10) 0 0; padding: 0; list-style: none; }
.pv-gets li { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--hairline-dark); display: grid; gap: var(--s2); align-content: start; }
.pv-gets__h { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; color: var(--lime); letter-spacing: -0.01em; }
.pv-gets p { color: var(--on-ink-2); line-height: 1.55; max-width: 34rem; }
@media (min-width: 48rem) { .pv-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s12); } }
.pv-door .door2__desc:has(+ .door2__desc) { margin-bottom: 0; }
.pv-door .door2__desc + .door2__desc { margin-top: 12px; }
.pv-router .door2__label { max-width: 12.5ch; }

/* Referral program, two sides (Tom 10-06: the cards read as clickable and echoed the router above). Static content:
   no card, no shadow, no icon tile, no hover. Hairline rules and one lime two-way mark carry "you earn on both sides". */
.pv-sides { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--hairline); }
.pv-side { padding-block: var(--s8); }
.pv-side__h { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.pv-side__who { margin-top: var(--s3); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); font-weight: 600; line-height: 1.35; }
.pv-side__what { margin-top: 6px; max-width: 46ch; color: var(--text-2); line-height: 1.55; }
.pv-sides__mark { display: grid; place-items: center;
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat; }
.pv-sides__mark svg { width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: var(--lime); color: var(--ink); }
@media (min-width: 48rem) {
  .pv-sides { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--s10); }
  .pv-side { padding-block: var(--s10); }
  .pv-sides__mark { background-size: 1px 100%; }
}
/* three columns, no mark (/partners/esports/ "Three ways to earn"): hairline between columns, rules top and bottom */
.pv-sides--3 .pv-side + .pv-side { border-top: 1px solid var(--hairline); }
@media (min-width: 48rem) {
  .pv-sides--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .pv-sides--3 .pv-side { padding-inline: var(--s8); }
  .pv-sides--3 .pv-side:first-child { padding-left: 0; }
  .pv-sides--3 .pv-side:last-child { padding-right: 0; }
  .pv-sides--3 .pv-side + .pv-side { border-top: 0; border-left: 1px solid var(--hairline); }
}
.pv-sides--3 .pv-side__h { margin-bottom: var(--s3); }

/* /partners/ rhythm (Tom 10-06 "make this section green... and the next one a different design"): Referral is a solid
   lime inset band (same geometry as the ink .zd-dark band), How it works sits on white as a numbered line, then ink. */
.pv-lime { background: var(--lime); color: var(--ink); padding-block: var(--s12); }
.pv-lime.pv-ways { padding-top: var(--s12); }
@media (min-width: 48rem) {
  .pv-lime { max-width: var(--wide); margin-inline: auto; border-radius: var(--r-band); padding-block: 88px; }
  .pv-lime.pv-ways { padding-top: 88px; }
}
@media (min-width: 48rem) and (max-width: 72rem) { .pv-lime { margin-inline: var(--s3); } }
.pv-lime .wrap { max-width: calc(1070px + 2 * var(--gutter)); }
.pv-lime .answer, .pv-lime .pv-side__what { color: var(--ink); }
/* Tom 10-06: each side in its own white panel, lime showing around them; flat (no shadow, no hover), so still static */
.pv-lime .pv-sides { border-block: 0; row-gap: var(--s3); }
.pv-lime .pv-side { padding: var(--s8) var(--s6); border-radius: 24px; background: var(--paper); }
.pv-lime .pv-side__what { color: var(--text-2); }
.pv-lime .pv-sides__mark { background: none; }
@media (min-width: 48rem) {
  .pv-lime .pv-sides { column-gap: var(--s4); }
  .pv-lime .pv-side { padding: var(--s10); }
}
.pv-lime .pv-sides__mark svg { background: var(--ink); color: var(--lime); }
.pv-lime .textlink--quiet { color: var(--ink); text-decoration-color: var(--ink); }
.pv-lime a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

.pv-how--line .pv-how__h2 { margin-bottom: var(--s12); }
.pv-how--line .pv-track { row-gap: var(--s10); }
.pv-how--line .pv-step { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
  row-gap: var(--s2); padding: 0; background: none; box-shadow: none; }
.pv-how--line .pv-step::before { grid-row: auto; margin-bottom: var(--s3); box-shadow: 0 0 0 8px var(--paper); }
.pv-how--line .pv-step__title, .pv-how--line .pv-step__text { grid-column: 1; }
.pv-how--line .pv-step__title { padding-top: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.pv-how--line .pv-step__text { color: var(--text-2); max-width: 30rem; }
@media (min-width: 48rem) {
  .pv-how--line .pv-track { position: relative; column-gap: var(--s10); }
  .pv-how--line .pv-track::before { content: ""; position: absolute; top: 23px; left: 24px; right: calc((100% - 2 * var(--s10)) / 3 - 24px);
    height: 2px; background: var(--ink); }
}
/* Plan 4 (resumed 10-07): on phones the three line steps were a disc, then a line, three times over a full screen.
   Below 48rem each step is one row (disc left, title beside it) on a vertical ink line, the phone twin of the
   desktop horizontal line. */
@media (max-width: 47.99rem) {
  .pv-how--line .pv-track { position: relative; row-gap: var(--s6); }
  .pv-how--line .pv-track::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--ink); }
  .pv-how--line .pv-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); align-items: center; }
  .pv-how--line .pv-step::before { margin-bottom: 0; }
  .pv-how--line .pv-step__title, .pv-how--line .pv-step__text { grid-column: 2; }
}
.pv-how--line .pv-rel__lists { margin-top: var(--s16); }
/* the referral-partner photo on the ink band is a 529px source (#8): below 64rem it is never drawn wider than that */
@media (max-width: 63.99rem) { .pv-why__fig { max-width: 529px; } }
.pv-how--line .pv-list:not(.pv-list--you) { background: var(--floor); }

/* Why band proof row moved under the lead (Tom 10-06: "out of place... lumped in with stuff above"): a quiet stacked list
   with lime dots, so it reads as who we are, not a fifth benefit in the ruled grid below. */
.pv-proof--intro { margin-top: var(--s2); grid-template-columns: minmax(0, 1fr) !important; gap: var(--s2); }
.pv-proof--intro li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: 0; border-top: 0;
  font-size: 1.0625rem; line-height: 1.45; font-weight: 600; }
.pv-proof--intro li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); transform: translateY(-1px); }

/* Your part (Tom 10-06): the first two intros are alternatives, so a green OR replaces the rule between them; CTA below */
.pv-list__items li.pv-list__either { border-bottom: 0; }
.pv-list__items li.pv-list__or { padding: 0; border-bottom: 0; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-text); }
.pv-list__items li.pv-list__or::before { background: none; }
.pv-list__cta { display: flex; width: fit-content; margin: var(--s6) auto 0; }
.pv-why__cta { justify-self: start; margin-top: var(--s2); }
/* proof beside its claim (Tom 10-06, "big bold 35,000+... proof here"): one number under Real community impact */
.pv-gets .pv-stat { display: grid; gap: var(--s1); margin-top: var(--s4); max-width: none; }
.pv-stat__n { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.pv-stat__l { color: var(--on-ink-2); font-size: 1rem; line-height: 1.45; }

/* =====================================================================================================================
   Plan 4 design run (2026-10-06, builder C): photos per handoffs/plans/photo-plan-1006.md, arrows as icons, scale.
   ===================================================================================================================== */
/* hub hero: the pallets photo (#14, 1254 square) fills the right 60% as before; crop keeps the pallets centre-right */
.pv-hero--pallets .hero__photo img { object-position: 55% 55%; }

/* portrait heroes (msp #17 van-load, education #8 desktop-stacks, esports #13 benches-row): a portrait source is never
   stretched across the landscape slot (photo plan: portrait sources go in a photo card). From 64rem the card sits
   centred in the photo column on the ink, 4:5, as tall as the hero minus one s8 of ink above and below; width follows
   the height (about 434px at 1920x900), so the 529px sources are never drawn wider than they are. The ink grade is
   off: nothing sits under the text. */
@media (min-width: 64rem) {
  .pv-hero--portrait .hero__photo { display: grid; place-items: center; padding: var(--s8) var(--s10); }
  /* body + two classes: outranks site.css "body .hero:not(.hero--inner) .hero__photo picture { border-radius: 0 }" (0,3,2),
     which squared the card's corners (resumed run, 10-07) */
  body .pv-hero.pv-hero--portrait .hero__photo picture { position: static; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 5;
    border-radius: var(--r-card); overflow: hidden; background: var(--ink-3); }
  .pv-hero--portrait .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .pv-hero--portrait .hero__photo::after { content: none; }
  /* finish review C (10-07): the card was centred in its column, so its right edge floated ~100px inside the container
     line at 1280 and ~55px outside it at 1920. It now ends on the container's right edge, mirroring the text column's
     left inset (site.css rollout: max(40px, (100vw - container) / 2)), so hero and every section below share one frame */
  .pv-hero--portrait .hero__photo { place-items: center end; padding-right: max(40px, (100vw - var(--container)) / 2); }
}
/* below 64rem the stacked photo is a 4:3 crop at phone width; the two 529px sources stay inside their width */
@media (max-width: 63.99rem) {
  .pv-hero--small .hero__photo picture { max-width: 529px; }
  /* msp van-load: the 4:3 phone/tablet crop keeps the man's head and hands (the shared 50% 74% cut them off) */
  .pv-hero--van .hero__photo img { object-position: 50% 28%; }
}

/* arrow links: the arrow is the site's stroke icon, drawn in currentColor, never a typed glyph */
.link-arrow.pg-link::after { content: ""; flex: none; width: 18px; height: 18px; background-color: 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='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 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='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.textlink__arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }

/* Esports partner hero: same photo and crop as the /gaming/ hero (Tom 10-07) */
.pv-hero--gm .hero__photo img { object-position: 50% 42%; }
.pv-hero--gm .hero__photo picture { background: var(--paper); }
/* Esports partner how-it-works cards (Tom 10-07): keep a gap above the Your part / Our part boxes */
.pg-how .pg-how-cards { margin-bottom: var(--s8); }
/* Esports partner: fee note under the how-cards (earn section folded in, Tom 10-07) */
.pg-how .pg-how-cards:has(+ .pg-how-fees) { margin-bottom: var(--s4); }
.pg-how .pg-how-fees { margin: 0 0 var(--s8); }
/* Esports partner: co-brand samples inside the dark Why band, same layout as the data page's sample certificate (Tom 10-07) */
.pg-cobrand { display: grid; gap: var(--s8); margin-top: var(--s12); padding-top: var(--s10); border-top: 1px solid var(--hairline-dark); }
.pg-cobrand__text { display: grid; gap: var(--s3); align-content: start; }
.pg-cobrand__h { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--on-dark); }
.pg-cobrand__note { max-width: 30rem; font-size: 1rem; line-height: 1.55; color: var(--on-ink-2); }
.pg-cobrand__cta { margin-top: var(--s3); }
.pg-cobrand__fig { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.pg-cobrand__fig img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); }
@media (min-width: 64rem) {
  .pg-cobrand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s12); align-items: center; }
  .pg-cobrand__fig { width: 100%; max-width: 620px; justify-self: end; }
}
/* Partner heroes: a green word or two inside the H1, kept inline (Tom 10-07: 'MSP Partner' green, 'Partner' green on /partners/) */
.pv-hero .hero__h1 .pv-accent-inline { display: inline; }
/* Tom 10-09 (file_617): esports partner hero = his sim-racing event photo (portrait); keep the drivers in frame */
.pv-hero--race .hero__photo img { object-position: 45% 55%; }
/* Tom 10-09 (file_612): MSP hero = his storeroom image, full-bleed at 64rem+ (the left fade is in the image); phones get the
   photo-side crop. Scoped by .pv-hero--bg so /partners/ keeps its pallet panel. */
.pv-hero--bg .hero__photo img { object-position: 70% 50%; }
@media (min-width: 64rem) {
  .pv-hero.pv-hero--bg .hero__photo { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: 100%; min-width: 0; aspect-ratio: auto; }
  .pv-hero--bg .hero__photo img { object-position: 100% 50%; }
  .pv-hero.pv-hero--bg .hero__photo::after { background: linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .pv-hero.pv-hero--bg .hero__photo::after { background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, rgb(18 19 17 / 0.7) 50%, rgb(18 19 17 / 0.25) 60%, rgb(18 19 17 / 0) 70%),
    linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); } }
/* Tom 10-09 (file_669): Education hero image puts the people further left than MSP's, under the text. On desktop the photo starts
   at 40% and its own left edge fades into the ink, so the people clear the text column at every width (0,4,1 beats the shared
   .pv-hero.pv-hero--bg rules above). */
@media (min-width: 64rem) {
  .pv-hero.pv-hero--bg.edu-hero .hero__photo { left: 40%; }
  .pv-hero.pv-hero--bg.edu-hero .hero__photo::after { background:
    linear-gradient(90deg, var(--ink) 0%, rgb(18 19 17 / 0.7) 10%, rgb(18 19 17 / 0) 30%),
    linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); } }
/* 10-09 full-size originals: the largest hero file is 1831 px wide, so the image never scales past that (right-anchored; the
   image's own left fade meets the ink), as on /resellers/ */
@media (min-width: 64rem) {
  .pv-hero.pv-hero--bg .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; }
  .pv-hero.pv-hero--bg .hero__photo img { width: min(100%, 1831px); height: 100%; }
}

/* Tom 10-09 "Finish all the HERO images" (es-hero-bg): RacingSimulatorsattheEsportsExpo.png, left fade baked in (neutralised to ink, experiments/heroes_batch_1009.py).
   Full-bleed at 64rem+ like /buyback/ .bb-hero2, right-anchored, never scaled past its native 1672px; the ink keeps the text side
   readable; past 1672px the image's left edge is feathered into the ink. Phones get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .hero.es-hero .hero__photo { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: 100%; min-width: 0; aspect-ratio: auto; transform: none; }
  .hero.es-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; border-radius: 0; }
  .hero.es-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-fit: cover; object-position: 100% 50%; transform: none; }
  .hero.es-hero .hero__photo::after { border-radius: 0; background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, rgb(18 19 17 / 0.7) 50%, rgb(18 19 17 / 0.25) 60%, rgb(18 19 17 / 0) 70%),
    linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); }
}
@media (min-width: 104.50rem) {
  .hero.es-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}

/* Tom 10-09 (file_790, "remove image"): /partners/ "What you get" has no photo now; without a figure the grid is one column
   so the right half does not sit empty. Pages that keep the photo are unchanged. */
@media (min-width: 64rem) { .pv-why__grid:not(:has(.pv-why__fig)) { grid-template-columns: minmax(0, 1fr); } }
.pv-why__grid:not(:has(.pv-why__fig)) .pv-why__lead { max-width: 40rem; }