/* =====================================================================================================================
   pages-g4.css: /partners/, /schools/, /nonprofits/, /digital-equity/ (group g4 page rebuild, 2026-09-29).
   Page-only rules. Everything else comes from site.css's builder kit (TEMPLATE-NOTES.md §4). Lime / black / white only:
   surfaces are paper, var(--floor) (lime tint) or ink. No hex greys. One filled lime button per view.
   ===================================================================================================================== */

/* ---------- hero (hero--inner + photo card, X15) ---------- */
/* long H1s (partners, schools) step down one size so they hold 3-4 lines beside the photo at 1024-1366 (SYSTEM.md) */
.g4-hero .hero__h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; text-wrap: balance; }
/* the longest H1 (schools) steps down once more so it holds 4 lines at 1280-1920 without cutting approved words (g4r2 #17) */
.g4-hero--long .hero__h1 { font-size: clamp(2.125rem, 1.6rem + 1.6vw, 2.875rem); line-height: 1.1; }
.g4-hero .hero__sub { max-width: 34rem; }
.g4-hero .hero__actions { margin-top: var(--s8); }
.g4-hero__note { margin-top: var(--s4); color: var(--text-2); font-size: var(--fs-body); max-width: 34rem; }
.g4-hero__proof { margin-top: var(--s6); }
.g4-hero__hook { margin-top: var(--s4); font-weight: 600; font-size: var(--fs-lead); line-height: 1.45; max-width: 34rem; }
.g4-hero .hero__photo img { object-position: 50% 50%; }
.g4-hero--np .hero__photo img { object-position: 50% 60%; }

/* ---------- section rhythm helpers ---------- */
.g4-sec { padding-top: var(--section-y); }
.g4-sec--pad { padding-block: var(--section-y); }
.g4-band { margin-top: var(--section-y); }
/* steps in a row: title and text sit together at the top of each column (no stretched gaps) */
.steps--row > li { align-content: start; }
.g4-head { display: grid; gap: var(--s4); max-width: 46rem; margin-bottom: var(--s10); }
.g4-head .h2 { max-width: 28ch; }
.g4-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.zd-dark .answer, .zd-dark .g4-muted { color: var(--on-ink-2); }
.g4-muted { color: var(--text-2); }

/* ---------- lane / door cards (one card component, X18) ---------- */
.g4-cards { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .g4-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.g4-cards .card { height: 100%; }
.g4-cards .card__title { font-weight: 500; }
/* X19: no body-level text below 16px on g4 pages (card asides, muted lines, labels, form help) (g4r2 #24) */
.card__more { font-size: var(--fs-body); color: var(--text-2); line-height: 1.5; }
.card__more .textlink { font-size: inherit; }
.field__help { font-size: var(--fs-body); }
.card--ink .card__link { text-decoration-color: var(--lime); }
.card--ink :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }

/* in-card list of in-page links (schools retire door): plain links, not fake accordions (schools design fix 2) */
.g4-jumps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.g4-jumps li { border-bottom: 1px solid var(--hairline); }
.g4-jumps a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 52px; padding-block: 10px;
  font-weight: 600; text-decoration: none; color: var(--ink); }
.g4-jumps a::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--green-text); border-bottom: 2px solid var(--green-text);
  transform: rotate(-45deg); margin-right: 4px; transition: transform var(--dur) var(--ease); }
.g4-jumps a:hover::after { transform: translateX(3px) rotate(-45deg); }
.g4-jumps a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* proof list inside a light card keeps ink text */
.card .proof-list li { color: var(--ink); }
.card--ink .proof-list li, .zd-dark .proof-list li { color: var(--on-dark); }

/* small aside line under a card group (lessor, esports, NDIA) */
.g4-aside { margin-top: var(--s6); color: var(--text-2); max-width: 52rem; }
.g4-aside strong { color: var(--ink); font-weight: 600; }
.zd-dark .g4-aside { color: var(--on-ink-2); }
.zd-dark .g4-aside strong { color: var(--on-dark); }

/* ---------- steps on ink (schools calendar, partners referral) ---------- */
.zd-dark .steps__title { color: var(--on-dark); }
.zd-dark .steps__text { color: var(--on-ink-2); }
/* the hero already carries 88px below it: the first section after it does not add a full section gap on top */
@media (min-width: 64rem) { .g4-hero + .g4-sec { padding-top: var(--s10); } }
.g4-steps-cta { margin-top: var(--s10); }
@media (min-width: 64rem) { .g4-steps--4 { grid-auto-columns: minmax(0, 1fr); } }

/* ---------- split rows: heading + answer left, cards right (X16: both halves carry content) ---------- */
.g4-split { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) {
  .g4-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s16); }
  .g4-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g4-split--center { align-items: center; }
}
.g4-split__main { display: grid; gap: var(--s5); align-content: start; }
.g4-split__main .h2 { max-width: 20ch; }
.g4-stack { display: grid; gap: var(--s5); }

/* ---------- big proof sentence (35,000+), the Digital equity recipe reused (nonprofits fix 4, design X-reuse) ---------- */
.g4-big { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-ink-2); max-width: 34rem; }
.g4-big strong { color: var(--on-dark); font-weight: 600; }
.g4-big__n { display: block; margin: var(--s2) 0 var(--s3); font-weight: 500; color: var(--lime);
  font-size: clamp(3.75rem, 1.5rem + 8vw, 7.5rem); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.g4-statq { font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; color: var(--on-dark); }
.g4-voice { font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--on-dark); }
.g4-voice .accent { color: var(--lime); }
.g4-trust { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-top: var(--s5); border-top: 1px solid var(--hairline-dark);
  color: var(--on-ink-2); font-size: var(--fs-body); }
.g4-trust strong { color: var(--on-dark); font-weight: 600; }

/* inside a half-width ink card (nonprofits) the numeral sizes to the card, not the viewport, so "35,000+" keeps at least
   the card's left padding free on its right at every width (g4r2 #9) */
.g4-inkpanel:has(.g4-big__n) { container-type: inline-size; }
.g4-inkpanel .g4-big__n { font-size: clamp(3.25rem, 22cqi, 6rem); }

/* stat band right half (digital equity): the IT-manager card fills the band's height, CTA pinned to its foot (g4r2 #4, X16) */
@media (min-width: 64rem) { .g4-split--stretch { align-items: stretch; } }
.g4-choose { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hairline-dark); gap: var(--s4); }
@media (min-width: 64rem) { .g4-choose { padding: var(--s12) var(--s10); } }
.g4-choose .card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; max-width: 18ch; }
.g4-choose .card__text { font-size: var(--fs-lead); line-height: 1.5; max-width: 32ch; }
.g4-choose .btn-row { margin-top: auto; padding-top: var(--s6); }

/* light version of the big sentence (on paper / tint) */
.g4-big--light { color: var(--text-2); }
.g4-big--light strong { color: var(--ink); }
.g4-big--light .g4-big__n { color: var(--ink); }

/* ---------- spec rows (nonprofits "what you get") ---------- */
.g4-specs { margin: 0; border-top: 1px solid var(--hairline-dark); }
.g4-specs__row { display: grid; gap: 4px var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline-dark); }
@media (min-width: 48rem) { .g4-specs__row { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.g4-specs dt { font-weight: 700; color: var(--lime); font-size: var(--fs-body); letter-spacing: 0.01em; }
.g4-specs dd { margin: 0; color: var(--on-dark); line-height: 1.5; }
.g4-specs dd .g4-muted { color: var(--on-ink-2); }

/* ---------- path of a device (digital equity): three photo cards, balanced (DE design fix 2) ---------- */
.g4-path { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .g4-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.g4-path__card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s4) var(--s6); border-radius: var(--r-card);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.g4-path__card picture { display: block; border-radius: 28px; overflow: hidden; background: var(--floor); }
.g4-path__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g4-path__when { padding: var(--s2) var(--s3) 0; font-size: var(--fs-body); font-weight: 700; color: var(--green-text); letter-spacing: 0.01em; }
.g4-path__title { padding: 0 var(--s3); font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.g4-path__text { padding: 0 var(--s3); color: var(--text-2); line-height: 1.55; }
.g4-path__text .textlink { color: var(--ink); }
/* the stop the brand leads with carries the tint: refurbished, not recycled (g4r2 #6) */
.g4-path__card--lead { background: var(--floor); box-shadow: none; }

/* ---------- centred value panel (schools buyback) ---------- */
.g4-value { display: grid; gap: var(--s6); justify-items: center; text-align: center; background: var(--floor); border-radius: var(--r-card);
  padding: var(--s10) var(--s6); }
@media (min-width: 48rem) { .g4-value { padding: var(--s16) var(--s16); } }
.g4-value .h2 { max-width: 22ch; }
.g4-value__display { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--green-text); }
.g4-value__decide { display: grid; gap: var(--s2); max-width: 36rem; }
.g4-value__label { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.01em; }

/* ---------- reuse panel (schools) / closing voice line ---------- */
.g4-inkpanel { background: var(--ink); color: var(--on-dark); border-radius: var(--r-card); padding: var(--s8) var(--s6); }
@media (min-width: 48rem) { .g4-inkpanel { padding: var(--s16); } }
.g4-inkpanel .answer { color: var(--on-ink-2); }
.g4-inkpanel .textlink { color: var(--on-dark); }
.g4-inkpanel :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }

/* ---------- cards with a numbered list inside (schools "your side / our side") ---------- */
.card .steps { margin-top: var(--s2); gap: var(--s4); }
.card .steps__title { font-size: 1.0625rem; font-weight: 600; }
.card .steps > li::before { width: 36px; height: 36px; font-size: 1rem; }
.card .steps > li { grid-template-columns: 36px minmax(0, 1fr); }
.card .steps__title { padding-top: 6px; }

/* ---------- FAQ grid: heading left at 64rem (as the template), answers readable ---------- */
@media (min-width: 64rem) { .g4-faq .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; } }
.g4-faq .h2 { max-width: 16ch; }

/* ---------- phones ---------- */
@media (max-width: 47.99rem) {
  .g4-cards .card { padding: var(--s6) var(--s5); }
  .g4-value__display { font-size: 2.25rem; }
}

/* =====================================================================================================================
   /partners/ only (g4 v2, 2026-09-29): every rule below is scoped by a p4- class that exists on /partners/ alone.
   Lime / black / white only; builder-kit classes first (card, steps, proof-list, grid-3, g4-split).
   ===================================================================================================================== */

/* the gap card: five needs as a hairline list, not five more cards */
.p4-gap { gap: var(--s4); }
@media (min-width: 64rem) { .p4-gap { padding: var(--s10); } }
.p4-gap .card__title { font-weight: 500; max-width: 24ch; }
.p4-gap__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.p4-gap__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px;
  padding-block: 10px; border-bottom: 1px solid var(--hairline); font-weight: 600; }
.p4-gap__list li::before { content: ""; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; background: var(--lime); }
.p4-gap__close { font-weight: 600; line-height: 1.5; }

/* two ways: the ongoing partnership leads (ink), the single introduction beside it; equal height */
.p4-ways { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .p4-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.p4-way { gap: var(--s4); }
@media (min-width: 64rem) { .p4-way { padding: var(--s10); } }
.p4-way .card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; }
.p4-way__lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 600; }
.p4-way.card--ink .p4-way__lead { color: var(--lime); }
.p4-way .card__text { font-size: var(--fs-lead); line-height: 1.5; max-width: 38ch; }
.p4-way.card--ink .card__link { color: var(--on-dark); }
.p4-sub { margin: var(--s12) 0 var(--s5); font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.p4-others .card { height: 100%; }
/* tablet: three cards in a 2-column grid would leave half a row empty, so the third spans the row (X16) */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p4-others > li:last-child { grid-column: 1 / -1; }
  .p4-photo img { aspect-ratio: 16 / 9; }
}
.p4-others .card__title { font-weight: 500; }

/* six steps on ink: 3 x 2 at desktop, 2 x 3 at tablet, one column on phones */
.p4-steps { gap: var(--s8) var(--s10); }
.p4-steps > li { align-content: start; }
@media (min-width: 48rem) { .p4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .p4-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p4-steps .steps__text .textlink { color: var(--on-dark); }
.p4-steps .steps__text .textlink:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }

/* relationship split: the photo fills the left half under the answer (X16) */
.p4-photo { margin: var(--s4) 0 0; border-radius: var(--r-card); overflow: hidden; background: var(--floor); }
.p4-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.p4-intro { color: var(--text-2); margin-top: calc(var(--s2) * -1); }

/* devices: heading left, a two-column hairline list right (never a "we don't take" list) */
.p4-devices { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .p4-devices { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); } }
.p4-devices__head { display: grid; gap: var(--s4); }
.p4-devices__head .h2 { max-width: 18ch; }
.p4-devices__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s8); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hairline); }
@media (min-width: 48rem) { .p4-devices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p4-devices__list li { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-weight: 600; line-height: 1.4; }
.p4-devices__note { margin-top: var(--s4); color: var(--text-2); line-height: 1.5; }

/* ---- g4 v2 round 2 (2026-09-29): "Why do partners pick Regadget?" band + photo caption ---- */
.p4-why { background: var(--floor); padding-block: var(--section-y); }
.p4-why__grid { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 64rem) { .p4-why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s16); } }
.p4-why__main { display: grid; gap: var(--s5); align-content: start; }
.p4-why__main .h2 { max-width: 20ch; }
.p4-why__main .answer { max-width: 60ch; }
.p4-why__facts { margin-top: var(--s2); }
@media (min-width: 48rem) { .p4-why__facts { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s3) var(--s8); } }
.p4-why__stat .stat__num, .p4-why__stat .stat__label { margin: 0; }
.p4-photo__cap { padding: var(--s3) var(--s5); color: var(--text-2); line-height: 1.45; background: var(--floor); }

/* ---- g4 v2 round 3 (2026-09-29): /partners/ ---- */
/* the trust band now sits right above the ink steps band. The ink band is an inset rounded card, so it keeps its white
   margin above it (a full-bleed tint touching a rounded inset card left white corners at 1280) */
.p4-why + .g4-band { margin-top: var(--s12); }
/* one real receiving photo under the 3x2 steps grid, full width of the band's content column */
.p4-band-photo { margin: var(--s10) 0 0; }
.p4-band-photo img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 288; object-fit: cover; border-radius: var(--r-card); }
@media (max-width: 47.99rem) { .p4-band-photo img { aspect-ratio: 4 / 3; object-position: 30% 50%; } }
.p4-band-photo__cap { padding-top: var(--s3); color: var(--on-ink-2); line-height: 1.45; }
/* one filled lime button per view: on /partners/ the hero's "Become a partner" is the filled one, so the header's
   "Get free ITAD pickup" takes the header's own outline style (as "Talk to us"), page-scoped */
@media (min-width: 64rem) {
}