/* =====================================================================================================================
   pages-programs.css: /partners/msp/ and /partners/education/ only (2026-10-06). Linked after site.css, group-b.css,
   pages-g4.css, pages-partners-v3.css and pages-g2-itad.css. Every rule is scoped by a pg- class; tokens only.
   ===================================================================================================================== */

/* section rhythm: the text-led sections share the /partners/ split */
.pg-sec { padding-block: var(--s16); }
.pv-hero + .pg-sec { padding-top: var(--s16); }
.pg-body { display: grid; gap: var(--s6); align-content: start; }
.pg-body .answer { max-width: 40rem; }
.pg-body .pv-list__items { max-width: 40rem; }
.pg-body .pv-what__gap { margin: 0; }
.pg-body .link-arrow { justify-self: start; color: var(--ink); }

/* /partners/msp/ #earn: each row is a bold lead-in plus one plain sentence, wrapped in one span so the li grid keeps a
   single text column */
.pg-msp-earn .pv-list__items li > span { font-weight: 400; }
.pg-msp-earn .pv-list__items li strong { font-weight: 700; }

/* /partners/education/ hero: the long secondary label ("A school district? ...") stays on one line on phones;
   both hero labels drop to 1rem together so they keep one size */
@media (max-width: 47.99rem) {
  .pg-hero-long .hero__actions .btn, .pg-hero-long .hero__actions .textlink--strong { font-size: 1rem; padding-inline: 12px; }
}

/* from 48rem the two hero buttons sit in a row; the long pair is too wide for the 36rem text column, so each label
   stays on one line and the secondary moves to its own row instead of both squeezing to two lines */
@media (min-width: 48rem) {
  .pg-hero-long .hero__actions { flex-wrap: wrap; }
  .pg-hero-long .hero__actions > a { flex: none; white-space: nowrap; }
}

/* arrow links: underline the destination phrase only, never the arrow */
.link-arrow.pg-link { text-decoration: none; }
.link-arrow.pg-link > span { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link-arrow.pg-link:hover > span { text-decoration-color: currentColor; }

/* 3-node flow: Your client -> You -> Regadget */
.pg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s8); padding: 0; list-style: none; }
.pg-flow__node { display: inline-flex; align-items: center; gap: var(--s3); }
.pg-flow__pill { display: inline-flex; align-items: center; min-height: 44px; padding: 13px 20px 9px; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--ink); }
.pg-flow__node--you .pg-flow__pill { background: var(--lime); box-shadow: none; }
.pg-flow__node--us .pg-flow__pill { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.pg-flow__arrow { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink); }
.pg-flow__arrow svg { width: 20px; height: 20px; }
@media (max-width: 29.99rem) {
  .pg-flow { gap: var(--s2); }
  .pg-flow__node { gap: var(--s2); }
  .pg-flow__pill { padding: 12px 14px 8px; font-size: 1rem; }
  .pg-flow__arrow, .pg-flow__arrow svg { width: 16px; height: 16px; }
}
.pg-how .pv-rel__lists { margin-top: 0; }
.pg-note { margin-top: var(--s8); font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; max-width: 44rem; }

/* pickup: the /itad/ process, with a little more air between the two clock lines */
.pg-clock .iv-clock__line + .iv-clock__line { margin-top: var(--s3); }

/* why band: two proof items, two equal columns */
.pg-why .pv-why__text { margin-bottom: 0; }
@media (min-width: 48rem) { .pv-proof.pg-proof--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Plan 4 (resumed 10-07): the two proof rules share the .pv-gets column gap (s12), so their lime rules start and end on
   the same lines as the four benefit columns above (they were 8px off at 32px gap) */
@media (min-width: 48rem) { .pg-why .pv-proof.pg-proof--2 { column-gap: var(--s12); } }

/* /partners/esports/ (2026-10-06) ---------------------------------------------------------------------------------- */
/* intro line under the section heading */
.pg-how .pg-intro { margin: var(--s4) 0 var(--s8); }
/* three stacked flow rows; from 48rem the rows share columns, so the pills line up as a compact table */
.pg-flows { display: grid; gap: var(--s3); margin: 0 0 var(--s8); }
.pg-flows .pg-flow--row { margin: 0; }
/* Plan 4 (10-06): the three-column pill table needs ~780px; at 768 it ran 9px past the wrap (scrollWidth 777), so the
   table starts at 64rem and tablets keep the stacked phone layout */
@media (min-width: 64rem) {
  .pg-flows { grid-template-columns: repeat(3, max-content); column-gap: var(--s3); row-gap: var(--s3); }
  .pg-flows .pg-flow--row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
  .pg-flows .pg-flow__node { display: flex; justify-content: space-between; }
  .pg-flows .pg-flow__node .pg-flow__pill { flex: 1 1 auto; }
}
@media (max-width: 63.99rem) {
  .pg-flows { gap: 0; }
  .pg-flows .pg-flow--row { padding-block: var(--s3); }
  .pg-flows .pg-flow--row + .pg-flow--row { border-top: 1px solid var(--hairline); }
  /* phones: the first pill takes its own line and its arrow turns down, so no arrow dangles at a line end */
  .pg-flows .pg-flow--row .pg-flow__node:first-child { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .pg-flows .pg-flow--row .pg-flow__node:first-child .pg-flow__arrow { transform: rotate(90deg); margin-left: var(--s5); }
}
/* three ways to earn: /partners/ door cards without links; the note sits under the row */
.pg-earn .pv-head { margin-bottom: var(--s8); }
.pg-earn .pv-door .door2__desc { margin-bottom: 0; }
.pg-earn__note { margin-top: var(--s6); color: var(--text-2); line-height: 1.55; max-width: 44rem; }
/* 10-06 r2: sibling list cards keep equal width, own height; dark why card floats on white after a tint band */
/* finish review C (10-07): sibling cards end level (DESIGN.md card row; the /partners/ hub pair Tom reviewed is level);
   "start" left the Your part card 66-117px short of Our part at every two-column width */
.pg-how .pv-rel__lists { align-items: stretch; }
.section--tint + .pg-why { margin-top: var(--s12); }
@media (min-width: 48rem) { .section--tint + .pg-why { margin-top: var(--s16); } }
.pg-clock { max-width: none; }
form:has(input[name=partner_type]:checked:not([value=msp])) [data-ptype-only="msp"] { display: none !important; }

/* =====================================================================================================================
   Plan 4 design run (2026-10-06, builder C)
   ===================================================================================================================== */
/* /partners/esports/ "Three ways to earn": the three ways as a card row (DESIGN.md card: paper, 24px, hairline ring,
   32px padding), equal widths, headings and bodies levelled by subgrid, instead of three text columns on hairlines */
.pg-earn .pv-sides--3 { border-block: 0; row-gap: var(--s4); }
.pg-earn .pv-sides--3 .pv-side { padding: var(--s8); border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.pg-earn .pv-sides--3 .pv-side + .pv-side { border: 0; }
.pg-earn .pv-sides--3 .pv-side__h { margin-bottom: 0; }
.pg-earn .pv-sides--3 .pv-side__what { margin-top: 0; }
.pg-earn .pv-side__what { max-width: none; }
@media (max-width: 47.99rem) { .pg-earn .pv-sides--3 .pv-side { display: grid; gap: var(--s3); } }
@media (min-width: 48rem) {
  .pg-earn .pv-sides--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s5); row-gap: var(--s3); }
  .pg-earn .pv-sides--3 .pv-side { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
}
.pg-earn__note { margin-top: var(--s8); }

/* tablets (48 to 64rem): the pickup photo beside the steps is a wide band, not a full-viewport square */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .pv-hero ~ .iv-steps .iv-simple__fig { aspect-ratio: 16 / 10; }
}