/* =====================================================================================================================
   pages-nonprofit-network.css: /partners/nonprofit-network/ only (2026-10-03). Linked after pages-nonprofits-v3.css and
   reuses its np- system (ink photo hero, heading/answer splits, numbered steps, routing rows, one ink band, visible
   answers, shared form). Only the rules the sibling page does not need live here, each scoped by an nn- class.
   ===================================================================================================================== */

/* definition block: the page's answer, read at lead size; no proof line under it (the 35,000+ sits once, in the hero) */
/* Plan 4 (10-06): every band on --section-y (64 / 88 / 112), the one band-to-band token in DESIGN.md */
.nn-what { padding-block: var(--section-y); }
.np-hero + .nn-what { padding-top: var(--section-y); }
@media (min-width: 64rem) { .nn-what.np-divide .np-split { align-items: start; } }

/* how it works: light band, 5 steps in the wide column, reorder line, sticky IT Manager quote (np-order grid) */
.nn-how { padding-block: var(--section-y); }
.nn-how .np-step { border-bottom-color: rgb(18 19 17 / 0.16); }
/* 10-08 Tom: IT Manager quote removed, and 'adopt this' = the /buyback/ #logistics step strip (pages-bb-v4.css). Below
   64rem the steps stay a stacked list; from 64rem one row of five numbered columns, each under a 2px ink rule. */
.nn-how .np-order__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) {
  .nn-how .np-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s6); border-top: 0; }
  .nn-how .np-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); padding: var(--s5) 0 0; border-top: 2px solid var(--ink);
    border-bottom: 0; align-content: start; }
  .nn-how .np-step::before { width: 40px; height: 40px; }
  .nn-how .np-step p { padding-top: 0; font-size: 1rem; line-height: 1.5; }
  .nn-how .np-step__lead { font-size: 1.125rem; }
}
/* impact (tint band after the definition): the reframe, who we sell to, NDIA; no proof number (hero has it) */
.nn-impact { padding-block: var(--section-y); }
.nn-impact .np-divide__body { display: grid; gap: var(--s5); }
.nn-what .np-divide__body { display: grid; gap: var(--s5); }
.nn-impact .np-divide__text--2 { margin-top: 0; }
/* what we'll ask: light tint band before the FAQ, plain list */
.nn-ask { padding-block: var(--section-y); }
/* the closing band brings its own --section-y; the FAQ keeps only its top padding, as on every other page */
.np-faq { padding-bottom: 0; }
.nn-ask__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 36rem; margin-bottom: var(--s6); }
.nn-ask__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); max-width: 36rem; }
.nn-ask__list li { position: relative; padding: var(--s4) 0 var(--s4) calc(10px + var(--s4)); border-bottom: 1px solid rgb(18 19 17 / 0.16);
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.nn-ask__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); }

/* routing rows sit between the ink band and the tint band, so they keep their bottom padding */
.nn-more { padding-bottom: var(--section-y); }
/* 10-08 Tom: two service cards in the /buyback/ 'Two ways to get paid' format (iv-step recipe, pages-g2-itad.css), above the rows */
.nn-more__h2 { max-width: 20ch; margin-bottom: var(--s10); }
.nn-svc { counter-reset: nnsvc; display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.nn-svc__card { counter-increment: nnsvc; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  column-gap: var(--s4); row-gap: var(--s1); align-content: start; padding: var(--s5);
  border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.nn-svc__card::before { content: counter(nnsvc); grid-row: 1 / span 3; align-self: start; 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; }
.nn-svc__title { grid-column: 2; margin: 0; padding-top: 11px; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }
.nn-svc__text { grid-column: 2; margin: 0; color: var(--text-2); line-height: 1.5; }
.nn-svc__cta { grid-column: 2; margin: var(--s4) 0 0; font-weight: 700; }
@media (min-width: 48rem) { .nn-svc__card { padding: var(--s6); } }
@media (min-width: 64rem) { .nn-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .nn-svc__card { padding: var(--s8) var(--s6); } }

/* 10-06 grade fixes: ink band columns centred at desktop (no half-empty column), repeat CTA on the band, ask list full width below 64rem */
@media (min-width: 64rem) { .np-free .np-free__grid { align-items: center; } }
.np-free__cta { margin-top: var(--s6); }
.link-arrow--on-dark, .link-arrow--on-dark:hover { color: var(--lime); }
@media (max-width: 63.99rem) { .nn-ask__list { max-width: none; } }

/* Plan 4 (10-06): hero photo per photo-plan-1006 (#18 pickup crew, 1024x1280 portrait). A portrait source goes in a
   photo card, never stretched across the landscape slot: from 64rem a 4:5 card centred on the ink, as tall as the
   hero minus one s8 above and below; no ink grade, nothing sits under the text. */
/* 10-08 Tom: every hero uses the /schools/ split-photo format; the inset 4:5 card above is retired (np-hero rules apply). */
.nn-hero .hero__photo img { object-position: 50% 40%; }

/* arrows as icons, never typed glyphs */
.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; }

/* Tom 10-09 ("this should be the Nonprofit HERO", YoungMenUnloadingBoxesbyVan.png): left fade baked in (navy, neutralised
   to ink, experiments/nn_hero_1009.py; nn-hero-bg). Full-bleed at 64rem+ like /digital-equity/ .de-hero--bg, never scaled
   past its native 1672px (right-anchored). Phones get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .np-hero.nn-hero .hero__photo { left: 0; }
  .np-hero.nn-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; }
  .np-hero.nn-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-position: 100% 60%; }
  .np-hero.nn-hero .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%); }
}
@media (min-width: 104.50rem) {
  .np-hero.nn-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}