/* =====================================================================================================================
   pages-nonprofits-v3.css: /nonprofits/ only (v3 words, 2026-09-30). Linked after site.css, group-c.css, pages-g4.css,
   pages-g7.css. Same system as the rebuilt /partners/ and /buy-refurbished/ pages (the /itad/ v3 look Tom approved):
   ink photo hero · text-led heading/answer splits · the 35,000+ line set as one large sentence with the number on a
   lime marker (a proof line, not a stat tile) · numbered order steps with the IT Manager pull quote on an ink card
   beside them · one ink band for "Is it free?" and what every order gets · three routing rows · visible answers ·
   the shared closing form. Every rule is scoped by an np- class that exists on /nonprofits/ alone. Lime / black /
   white tokens only; no shared part restyled. Previous page: handoffs/draft4/site-backup-nonprofits-pre-v3/
   ===================================================================================================================== */

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

/* ---------- hero: the /itad/ photo card (pv-hero / bv-hero recipe, re-scoped) ---------- */
.np-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; }
.np-hero .hero__sub { margin-top: var(--s4); max-width: 34rem; }
.np-hero .hero__actions { margin-top: var(--s6); }
.np-hero__note { margin-top: var(--s5); font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--text-2); }
.np-hero .hero__photo img { object-position: 50% 50%; }
@media (max-width: 47.99rem) { .np-hero .hero__actions .btn, .np-hero .hero__actions .textlink--strong { width: 100%; } }
@media (min-width: 64rem) {
  .np-hero { padding: var(--inset) var(--inset) 0; }
  .np-hero .hero__grid { max-width: 1440px; margin-inline: auto; overflow: hidden;
    min-height: clamp(480px, calc(100svh - var(--header-h) - var(--utility-h) - 170px), 600px); }
  .np-hero .hero__photo { left: 40%; }
  .np-hero .hero__photo picture { border-radius: 0; }
  .np-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%); }
  .np-hero .hero__text { padding: 56px max(40px, (min(100vw - 32px, 1440px) - var(--container)) / 2); }
  .np-hero .hero__text > * { max-width: 36rem; }
  .np-hero .hero__h1 { max-width: 16ch; }
  .np-hero .hero__sub { color: #e4e5df; }
  .np-hero__note { color: var(--on-ink-2); padding-top: var(--s4); border-top: 1px solid var(--hairline-dark); }
  /* one filled lime button per view: the hero's "Get a bulk quote" is the filled one, so the header's pickup button
     takes the outline style on this page (same rule as /partners/) */
}

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

/* ---------- The digital divide: the argument, then the proof line as one large sentence ---------- */
.np-divide { padding-bottom: var(--s16); }
@media (min-width: 64rem) { .np-hero + .np-divide { padding-top: var(--s16); } .np-divide { padding-bottom: var(--s24); } }
.np-divide__text { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; font-weight: 500; letter-spacing: -0.005em;
  max-width: 36rem; text-wrap: pretty; }
.np-proof { margin-top: var(--s12); padding-top: var(--s8); border-top: 2px solid var(--ink);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.625rem); line-height: 1.24; font-weight: 500; letter-spacing: -0.018em;
  max-width: 32ch; text-wrap: pretty; }
.np-proof__n { font-weight: 700; padding: 0 0.14em; border-radius: 0.14em; background: var(--lime); color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; font-variant-numeric: tabular-nums; }
/* full container width from 64rem: at 32ch the line stopped at ~60% and left the right of the row empty (1280, r1) */
@media (min-width: 64rem) { .np-proof { margin-top: var(--s16); padding-top: var(--s10); max-width: none; font-size: clamp(2.25rem, 1.2rem + 1.7vw, 2.875rem); } }

/* ---------- Who places the devices? (tint band) ---------- */

/* ---------- How an order works: numbered steps, the pull quote on an ink card beside them ---------- */
.np-divide__text--2 { margin-top: var(--s5); font-weight: 400; color: var(--text-2); }
.np-divide__ndia { margin-top: var(--s6); font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.np-divide__ndia strong { color: var(--ink); font-weight: 700; }
.np-order__note { margin-top: var(--s6); font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.np-order__note strong { color: var(--ink); font-weight: 700; }
.np-order__h2 { margin-bottom: var(--s10); }
.np-order__grid { display: grid; gap: var(--s10); }
.np-steps { counter-reset: npstep; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.np-step { counter-increment: npstep; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s5); align-items: start;
  padding: var(--s6) 0; border-bottom: 1px solid var(--hairline); }
.np-step::before { content: counter(npstep); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.np-step p { padding-top: 9px; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.np-step__lead { display: block; margin-bottom: 4px; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.np-quote { position: relative; margin: 0; padding: var(--s16) var(--s6) var(--s8); border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); }
.np-quote::before { content: "\201C"; position: absolute; top: var(--s4); left: var(--s6); font-size: 6rem; line-height: 1; font-weight: 700; color: var(--lime); }
.np-quote blockquote { margin: 0; }
.np-quote p { padding-top: var(--s6); font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em;
  color: var(--on-dark); max-width: 26ch; text-wrap: pretty; }
.np-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: var(--s6); font-size: 1rem; font-weight: 700; color: var(--on-ink-2); }
.np-quote figcaption::before { content: ""; width: 32px; height: 2px; background: var(--lime); }
@media (min-width: 48rem) { .np-quote { padding: var(--s16) var(--s10) var(--s10); } .np-quote::before { left: var(--s10); } }
@media (min-width: 64rem) {
  .np-order__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); align-items: start; }
  .np-step { padding: var(--s8) 0; }
  .np-quote { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

/* ---------- Is it free? the page's one ink band ---------- */
.np-free__grid { display: grid; gap: var(--s10); }
.np-free .h2 { color: var(--on-dark); max-width: 12ch; }
.np-free__head { display: grid; gap: var(--s5); align-content: start; }
.np-free__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 30rem; }
.np-gets__h { font-size: var(--fs-lead); line-height: 1.3; font-weight: 700; color: var(--lime); margin-bottom: var(--s4); }
.np-gets__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lime); }
/* block, not grid: a grid li splits the nowrap "90-day" span into its own cell (seen at 1280, r1) */
.np-gets__list li { position: relative; padding: var(--s4) 0 var(--s4) calc(10px + var(--s4));
  border-bottom: 1px solid var(--hairline-dark); font-size: 1.125rem; line-height: 1.45; font-weight: 600; color: var(--on-dark); }
.np-gets__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s4) + 0.5lh - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.np-gets__list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 64rem) {
  .np-free__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}

/* ---------- Anything else on your list? three routing rows (the /buy-refurbished/ route pattern) ---------- */
.np-more { padding-bottom: 0; } /* the FAQ below brings its own top padding; two stacked paddings left a hole */
.np-rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.np-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 80px; padding: var(--s5) 0;
  border-bottom: 1px solid var(--hairline); color: var(--text-2); text-decoration: none; font-size: 1.0625rem; line-height: 1.5; }
.np-row__text { max-width: 36rem; text-wrap: pretty; }
.np-row__text strong { display: block; margin-bottom: 2px; font-size: 1.1875rem; line-height: 1.35; font-weight: 700; color: var(--ink); }
.np-row__cta { display: inline-block; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.np-row__arrow { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--floor); color: var(--ink);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.np-row__arrow svg { width: 20px; height: 20px; }
.np-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
  .np-row:hover .np-row__arrow { background: var(--lime); transform: translateX(3px); }
  .np-row:hover .np-row__text strong { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}
@media (prefers-reduced-motion: reduce) { .np-row__arrow { transition: none; } .np-row:hover .np-row__arrow { transform: none; } }

/* ---------- Questions program buyers ask: answers visible (shared .faq) ---------- */
.np-faq { padding-bottom: var(--section-y); }
.np-faq .h2 { max-width: 14ch; }