/* =====================================================================================================================
   pages-de-v3.css: /digital-equity/ only (v3 words, 2026-09-30). Linked after site.css, group-c.css, pages-g4.css,
   pages-g7.css. Same system as the rebuilt /schools/ and /nonprofits/ pages (the /itad/ v3 look Tom approved):
   ink photo hero with the Florence bench photo · text-led heading/body splits · the device path as three numbered
   steps · the nonprofit desk on an ink panel carrying the 35,000+ line (a proof sentence, not a stat tile) with the
   other three desks as ruled columns · four routing rows · visible answers · the shared closing form.
   Every rule is scoped by a de- class that exists on /digital-equity/ alone. Lime / black / white tokens only; no
   shared part restyled. Previous page: handoffs/draft4/site-backup-de-pre-v3/
   ===================================================================================================================== */

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

/* ---------- hero: the /itad/ photo card (sv-hero / np-hero recipe, re-scoped) ---------- */
.de-hero .hero__h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 16ch; text-wrap: balance; }
.de-hero .hero__sub { margin-top: var(--s4); max-width: 34rem; text-wrap: pretty; }
.de-hero__small { margin-top: var(--s4); max-width: 34rem; font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--ink); text-wrap: pretty; }
.de-hero .hero__actions { margin-top: var(--s6); }
.de-hero__ai { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--hairline); max-width: 34rem;
  font-size: 0.9375rem; line-height: 1.5; font-weight: 500; color: var(--text-2); text-wrap: pretty; }
.de-hero .hero__photo img { object-position: 40% 50%; }
@media (max-width: 47.99rem) { .de-hero .hero__actions .btn, .de-hero .hero__actions .textlink--strong { width: 100%; } }
@media (min-width: 64rem) {
  .de-hero { padding: var(--inset) var(--inset) 0; }
  .de-hero .hero__grid { max-width: 1440px; margin-inline: auto; overflow: hidden;
    min-height: clamp(500px, calc(100svh - var(--header-h) - var(--utility-h) - 150px), 620px); }
  .de-hero .hero__photo { left: 44%; }
  .de-hero .hero__photo picture { border-radius: 0; }
  .de-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%); }
  .de-hero .hero__text { padding: 48px max(40px, (min(100vw - 32px, 1440px) - var(--container)) / 2); }
  .de-hero .hero__text > * { max-width: 36rem; }
  .de-hero .hero__h1 { max-width: 15ch; }
  .de-hero .hero__sub { color: #e4e5df; }
  .de-hero__small { color: var(--on-dark); }
  .de-hero__ai { color: var(--on-ink-2); border-top-color: var(--hairline-dark); }
  /* one filled lime button per view: the hero's "Get free ITAD pickup" is the filled one */
}

/* ---------- shared heading / body split ---------- */
.de-split { display: grid; gap: var(--s6); }
@media (min-width: 64rem) {
  .de-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}
.de-split > .h2 { max-width: 15ch; text-wrap: balance; }
.de-lead { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; font-weight: 500; letter-spacing: -0.005em;
  max-width: 38rem; text-wrap: pretty; }

/* quiet arrow link (the sv-textlink recipe) */
.de-textlink { display: inline-block; padding-block: 10px; line-height: 24px; color: var(--ink); font-weight: 700; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.de-textlink::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform var(--dur) var(--ease); }
.de-textlink:hover { text-decoration-color: currentColor; }
@media (hover: hover) { .de-textlink:hover::after { transform: translateX(3px); } }
.de-textlink:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; box-shadow: none; }

/* ---------- What happens to a device after pickup? three numbered steps ---------- */
.de-path__body { display: grid; gap: var(--s8); }
.de-steps { counter-reset: destep; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.de-step { counter-increment: destep; 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); }
.de-step::before { content: counter(destep); 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; }
.de-step p { padding-top: 9px; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.de-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); }
.de-step .de-textlink { display: table; margin-top: 2px; }
.de-voice { padding-top: var(--s5); border-top: 2px solid var(--lime); max-width: 34rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.de-voice__em { font-weight: 700; }
@media (min-width: 64rem) {
  .de-step { padding: var(--s8) 0; }
  /* the heading rides along beside the longer path, as the shared FAQ heading does */
  .de-path .de-split > .h2 { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

/* ---------- Where do the working machines go? tint band, the nonprofit desk on ink ---------- */
.de-where__head { margin-bottom: var(--s10); }
@media (min-width: 64rem) { .de-where__head { align-items: end; margin-bottom: var(--s12); } }
.de-desks { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.de-desk { display: grid; align-content: start; gap: var(--s2); padding: var(--s5) 0; border-top: 2px solid var(--ink); }
.de-desk__who { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.de-desk__what { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 32rem; text-wrap: pretty; }
.de-desk--lead { gap: var(--s8); padding: var(--s8) var(--s6); border-top: 0; border-radius: var(--r-card); background: var(--ink); color: var(--on-dark);
  box-shadow: 0 18px 40px -22px rgb(18 19 17 / 0.55); }
.de-desk--lead .de-desk__who { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; color: var(--on-dark); }
.de-desk--lead .de-desk__what { margin-top: var(--s2); font-size: 1.125rem; color: var(--on-ink-2); }
.de-desk__intro { display: grid; align-content: start; }
.de-desk__proof { display: grid; gap: var(--s5); padding-top: var(--s6); border-top: 2px solid var(--lime); }
.de-proof { font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.018em; color: var(--on-dark);
  max-width: 24ch; text-wrap: pretty; }
.de-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; }
.de-credit { font-size: 1.125rem; line-height: 1.45; font-weight: 600; color: var(--on-ink-2); }
.de-credit__em { color: var(--lime); font-weight: 700; }
@media (min-width: 48rem) {
  .de-desks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s6); }
  .de-desk--lead { grid-column: 1 / -1; padding: var(--s10); }
}
@media (min-width: 64rem) {
  .de-desk--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; padding: var(--s12); }
  .de-desk__proof { padding-top: 0; padding-left: var(--s10); border-top: 0; border-left: 1px solid var(--hairline-dark); }
  .de-desk:not(.de-desk--lead) { padding-top: var(--s6); }
  /* the intro sits level with the middle of the proof, so the shorter left column doesn't leave an empty band under it */
  .de-desk--lead { align-items: center; }
}
.de-where__foot { display: grid; gap: var(--s4); margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid rgb(18 19 17 / 0.18); }
.de-ndia, .de-origin { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 34rem; text-wrap: pretty; }
.de-ndia strong { color: var(--ink); font-weight: 700; }
@media (min-width: 64rem) {
  .de-where__foot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); margin-top: var(--s12); }
}

/* ---------- Does my organization need a special program? ---------- */
.de-part__body { display: grid; gap: var(--s5); }
.de-part__take { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); max-width: 34rem; text-wrap: pretty; }
.de-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s8); }

/* ---------- Which of these brings you here? four routing rows, 2 x 2 from 48rem ---------- */
.de-doors__h2 { margin-bottom: var(--s8); max-width: 22ch; text-wrap: balance; }
.de-rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.de-rows li { border-bottom: 1px solid rgb(18 19 17 / 0.14); }
.de-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 88px; padding: var(--s5) 0;
  color: var(--text-2); text-decoration: none; font-size: 1.0625rem; line-height: 1.5; }
.de-row__text { max-width: 34rem; text-wrap: pretty; }
.de-row__text strong { display: block; margin-bottom: 2px; font-size: 1.1875rem; line-height: 1.35; font-weight: 700; color: var(--ink); }
.de-row__arrow { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.de-row__arrow svg { width: 20px; height: 20px; }
.de-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; box-shadow: none; }
@media (hover: hover) {
  .de-row:hover .de-row__arrow { background: var(--lime); transform: translateX(3px); }
  .de-row:hover .de-row__text strong { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}
@media (min-width: 48rem) {
  .de-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s10); }
  .de-row { min-height: 104px; padding: var(--s6) 0; }
}

/* ---------- Questions about where devices go: answers visible (shared .faq) ---------- */
.de-faq { padding-bottom: var(--s8); }
.de-faq .h2 { max-width: 13ch; text-wrap: balance; }

/* ---------- visible keyboard focus on the page's own dark surfaces ---------- */
.de-desk--lead :where(a):focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* =====================================================================================================================
   Plan 4 design run, family D (2026-10-06). DESIGN.md is the system; TOM-TASTE.md the corrections. No words changed.
   ===================================================================================================================== */

/* "Where do the working machines go?" was bottom-light: one heavy full-width ink card, then three one-line columns, then
   two small paragraphs. From 64rem the band changes shape: the nonprofit card stands in the 5fr column and the other three
   desks stack beside it as a quiet ruled list, so the card and the list balance each other and the band ends on the foot. */
@media (min-width: 64rem) {
  .de-desks { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); row-gap: 0; align-items: start; }
  .de-desk--lead { grid-column: 1; grid-row: 1 / span 3; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s6); padding: var(--s10); }
  .de-desk--lead .de-desk__proof { padding-left: 0; border-left: 0; padding-top: var(--s6); border-top: 2px solid var(--lime); }
  .de-desk:not(.de-desk--lead) { grid-column: 2; padding: var(--s6) 0; }
  .de-desk:not(.de-desk--lead) + .de-desk { border-top-width: 1px; border-top-color: var(--hairline); }
  .de-desk:not(.de-desk--lead) .de-desk__what { max-width: none; }
}

/* Opus resume 10-07, round 1 at 1920: (a) the "where" band gave each of the three desk rows a third of the ink card's height
   (implicit rows shared with the card's span), so each one-line desk sat in ~230px of tint. The first two rows now size to
   their content and the last takes the rest, so the list reads as one ruled list beside the card. (b) "What happens to a
   device after pickup?" left ~700px of empty column under a two-line heading (the "one shape" tell). The section's own lead
   and its closing line move into that column under the heading; the three steps keep column 2. Order in the DOM unchanged. */
@media (min-width: 64rem) {
  .de-desks { grid-template-rows: auto auto 1fr; }
  /* the proof line was sized for the old full-width card (44px, six lines in the 5fr column): one title step down keeps
     it the loudest thing in the band and brings the card closer to the height of the list beside it */
  .de-desk--lead .de-proof { font-size: clamp(1.75rem, 1.2rem + 0.9vw, 2.125rem); }
  .de-desk:not(.de-desk--lead) { padding-block: var(--s8); }
  .de-path .de-split { grid-template-rows: auto auto 1fr; row-gap: var(--s8); }
  .de-path .de-split > .h2 { position: static; grid-column: 1; grid-row: 1; }
  .de-path .de-path__body { display: contents; }
  .de-path .de-lead { grid-column: 1; grid-row: 2; }
  .de-path .de-voice { grid-column: 1; grid-row: 3; align-self: start; }
  .de-path .de-steps { grid-column: 2; grid-row: 1 / span 3; }
}

/* hero: the four text blocks keep their order but sit on the 8px scale with less air between them */
.de-hero__small { margin-top: var(--s3); }
.de-hero__ai { margin-top: var(--s5); padding-top: var(--s3); }

/* the arrow is an icon, not a typed glyph: the quiet links draw site.css's arrow (var(--ico-arrow)). The form pointer and
   the intent "·" are now handled in site.css (Opus resume 10-07 removed this page's copies). */
.de-textlink::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .de-row__arrow, .de-textlink::after { transition: none; }
  .de-row:hover .de-row__arrow, .de-textlink:hover::after { transform: none; }
}

/* finish review 10-07 (DESIGN.md): lime is a button, a chip or a numeral, not a highlighter fill. "35,000+" was a lime
   box inside the ink card, a second lime surface beside the hero's filled button; it is now lime type on ink, the Home
   stat pattern. The ink card also lost its resting drop shadow (shadows at rest: doors, chips and the menu panel only). */
.de-proof__n { padding: 0; border-radius: 0; background: none; color: var(--lime); }
.de-desk--lead { box-shadow: none; }

/* missions 10-08: "How big is the divide?" reuses the gc-big numeral (group-c.css) on the shared ink band. This block
   only sets the two stats side by side from 48rem, the source note (on-ink-2 on ink, >10:1) and the "Ways to help" intro. */
.de-divide__stats { display: grid; gap: var(--s8); margin-top: var(--s8); }
.de-divide__stat { padding-top: var(--s5); border-top: 2px solid var(--lime); }
.de-divide__stat .gc-big__n { margin: 0; }
.de-divide__stat .gc-big__line { margin-top: var(--s4); }
.de-divide__src { margin-top: var(--s8); max-width: 48rem; font-size: var(--fs-small); line-height: 1.5; color: var(--on-ink-2); text-wrap: pretty; }
.de-divide__src a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.de-divide__src a:hover { color: var(--on-dark); }
.de-divide__close { max-width: 30ch; text-wrap: balance; }
.de-doors__intro { margin: calc(-1 * var(--s4)) 0 var(--s8); }
/* the ink hero card sat flush on the ink band and the two read as one block: a paper inset now separates them */
@media (min-width: 64rem) { .de-hero:has(+ .de-divide) { padding-bottom: var(--inset); } }
@media (min-width: 48rem) { .de-divide__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s16); } }

/* 10-08 Tom: "not a black background" for the divide band. Paper band: the numeral moves to green-text (lime on white
   is ~2:1), bold like Tom's 13.3% card; lines and source go to body/secondary ink. */
.de-divide .gc-big__n { color: var(--green-text) !important; font-weight: 700; }
.de-divide .gc-big__line { color: var(--text-2); }
.de-divide .gc-big__line strong { color: var(--ink); }
.de-divide__sub { margin-top: var(--s3); max-width: 34rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.de-divide__src { color: var(--text-2); }
.de-divide__src a:hover { color: var(--ink); }
.de-divide .gc-big__voice { color: var(--ink); }
.de-divide__stat { border-top-color: var(--green-text); }
/* Tom 10-08: the second stat is "17.7 million"; the unit drops to half size so the figure holds one line */
.de-divide__unit { font-size: 0.5em; letter-spacing: -0.02em; white-space: nowrap; }
/* Tom 10-08: one stat block. "Of all U.S. households" above the rule, then 13.3% / or / 17.7 million, one line under. */
.de-divide .de-divide__stats { display: block; margin-top: 0; }
/* polish 10-08 (impeccable, Tom "fix this design"): one sentence, one hero number. Lead-in and close are the same size and
   ink so they read as the two ends of "Of all U.S. households, 13.3% (or 17.7 million) have no computer..."; 13.3% is the
   only giant numeral; 17.7 million is a secondary figure on its own line with the "or" set small and quiet beside it. */
.de-divide__lead { margin: var(--s6) 0 0; padding-bottom: var(--s4); border-bottom: 2px solid var(--green-text);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.3; font-weight: 500; color: var(--ink); }
.de-divide .de-divide__lead + .de-divide__stat { margin-top: 0; padding-top: var(--s5); border-top: 0; }
.de-divide .de-divide__stat .gc-big__n { line-height: 0.9; }
/* Tom 10-08 mockup: a centred stack. Lead over the rule, giant 13.3%, a small spaced OR on its own line, 17.7 million at
   one size (about 60% of 13.3%), the close centred under it. Rule spans the column; everything else centres on it. */
/* v2 after Tom "horrible" (centred read as off-axis against the left H2): his mockup is a LEFT stack, tight, with only the
   OR centred under the 13.3% figure. The stat column shrinks to the width of 13.3% so the OR centres on the number. */
/* v3, Tom's layout image (10-08 13:04 local): a centred column. H2 and lead centred; 13.3% on a soft lime-tint panel;
   OR in a tinted disc between two hairlines; 17.7 million at near the same size; the close on one line under it. */
.de-divide__left { text-align: center; }
.de-divide__left .h2 { text-wrap: balance; }
.de-divide__lead { border-bottom: 0; padding-bottom: 0; margin-top: var(--s4); color: var(--text-2); }
.de-divide .de-divide__lead + .de-divide__stat { padding-top: var(--s4); }
.de-divide .de-divide__stat .gc-big__n { display: inline-block; padding: 0.08em 0.28em; border-radius: 24px; background: var(--floor); line-height: 1; }
.de-divide__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); margin: var(--s5) 0;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.de-divide__or::before, .de-divide__or::after { content: ""; height: 2px; background: var(--floor); }
.de-divide__or { --or-d: 52px; }
.de-divide__or { background: radial-gradient(circle at center, var(--floor) calc(var(--or-d) / 2), transparent calc(var(--or-d) / 2 + 0.5px)); min-height: var(--or-d); }
.de-divide__alt { margin-top: 0; font-weight: 700; color: var(--green-text);
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.de-divide__end { margin: var(--s3) auto 0; max-width: none; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.3;
  font-weight: 500; color: var(--ink); text-wrap: balance; }
@media (min-width: 64rem) { .de-hero:has(+ .de-divide) { padding-bottom: 0; } }
/* Tom 10-08: "throw this map under the big bolded numbers... or next to". Numbers left (stacked), map right from 64rem. */
.de-divide__map { margin: var(--s8) 0 0; }
.de-divide__map img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* Tom 10-08: the map's baked-in title and description are cropped off; our own header + one subtext line sit above it */
.de-divide__map figcaption { margin-bottom: var(--s5); }
.de-divide__map-h { margin: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.25; font-weight: 700; color: var(--ink); text-wrap: balance; }
.de-divide__map-sub { margin-top: var(--s2); font-size: 1rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 64rem) {
  .de-divide__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s16); align-items: start; }
  .de-divide__body .de-divide__stats { grid-template-columns: 1fr; row-gap: var(--s8); }
  /* Tom 10-08: the H2 sits in the left column, its top level with the top of the map */
  .de-divide__map { margin-top: 0; }
}

/* Tom 10-08: proof band right after the numbers (the 35,000+ line moved here from the Mission one card; once per page).
   Ink band between two paper sections; the figure is lime type on ink, the Home stat pattern. */
.de-band { text-align: center; }
.de-band__proof { margin: 0 auto; max-width: 24ch; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.15; font-weight: 500;
  letter-spacing: -0.02em; color: var(--on-dark); text-wrap: balance; }
.de-band__n { font-weight: 700; color: var(--lime); }
.de-band__credit { margin-top: var(--s5); }

/* Tom 10-08: the two missions side by side (from his Tech Drive flyer, in the site's style: green accent word, no eyebrow,
   no 01/02). Hairline above each column, as the divide stats use. */
/* Tom 10-08 (mockup file_488): missions + proof merged into ONE section. Left: H2 and the two missions stacked, each with a
   tinted icon disc, hairline between. Right: ink card with the 35,000+ figure. Same approved words. */
.de-mp { display: grid; gap: var(--s10); align-items: center; }
.de-missions__list { margin-top: var(--s8); }
.de-mission { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s5); align-items: start; padding-block: var(--s8); }
.de-mission + .de-mission { border-top: 1px solid var(--green-text); }
.de-mission:first-child { padding-top: 0; }
.de-mission:last-child { padding-bottom: 0; }
.de-mission__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--floor); color: var(--green-text); }
.de-mission__ico svg { width: 1.625rem; height: 1.625rem; }
.de-proof { display: grid; justify-items: center; gap: var(--s6); padding: var(--s12) var(--s8); border-radius: var(--r-band);
  background: var(--ink-2); color: var(--on-dark); text-align: center; box-shadow: 0 18px 40px -18px rgb(18 19 17 / 0.45); }
.de-proof__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ink-3); color: var(--lime); }
.de-proof__ico svg { width: 1.5rem; height: 1.5rem; }
.de-proof__text { margin: 0; max-width: 16ch; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.3; font-weight: 500; text-wrap: balance; }
.de-proof__n { display: block; margin-block: var(--s2); font-size: clamp(3rem, 2.2rem + 3vw, 4.75rem); line-height: 1; font-weight: 700;
  letter-spacing: -0.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
  .de-mp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); }
  .de-proof { padding: var(--s16) var(--s10); }
}
/* /tech-drive/ (Tom 10-08: "pretty much all the information from the flyer"): accept icon row, missions, why-host checks. */
.td-accept { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.td-accept li { display: grid; justify-items: center; gap: var(--s3); text-align: center; font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.td-accept svg { width: 2.5rem; height: 2.5rem; color: var(--green-text); }
@media (min-width: 40rem) { .td-accept { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .td-accept { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.td-missions { max-width: 46rem; }
.td-why { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s6); }
.td-why li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.td-why__ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--lime); color: var(--ink); }
.td-why__ico svg { width: 1.125rem; height: 1.125rem; }
.td-why h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.td-why p { margin-top: var(--s1); max-width: 30rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
@media (min-width: 48rem) { .td-why { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s10); row-gap: var(--s8); } }
@media (min-width: 64rem) { .td-why { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s8); } }
.td-contact { margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.de-mission__h { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.de-mission__h .accent { color: var(--green-text); }
.de-mission__p { margin-top: var(--s3); max-width: 38rem; font-size: 1.125rem; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* Tom 10-08: tech drive gets its own section under Ways to help, built from his Tech Drive flyer (his collateral). */
.de-drive__grid { display: grid; gap: var(--s10); }
.de-drive__lead { margin-top: var(--s5); max-width: 38rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.de-drive__deal { margin-top: var(--s4); max-width: 38rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.de-drive__deal strong { color: var(--ink); }
.de-drive__accept { margin: var(--s5) 0 var(--s6); max-width: 38rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.de-drive__accept strong { color: var(--ink); }
.de-drive__why { margin: var(--s10) 0 0; padding: var(--s6); list-style: none; display: grid; gap: var(--s5); border-radius: var(--r-card); background: var(--floor); }
@media (min-width: 48rem) { .de-drive__why { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); } }
/* Tom 10-08: "use the Gadget image off to the right" (his flyer's booth image, cropped from the PDF; only 512px wide,
   so the column caps it near native size) */
.de-drive__photo { margin: 0; }
.de-drive__photo img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--r-card); }
.de-drive__why h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.de-drive__why p { margin-top: var(--s1); font-size: 1rem; line-height: 1.5; color: var(--text-2); }
@media (min-width: 64rem) { .de-drive__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); align-items: start; } }

/* /tech-drive/ (10-08): the /contact/ form section with a closing H2 above it. The head goes first on phones
   (the intent block is order -1 in .g5-contact) and takes row 1 on desktop, the form and side panel row 2. */
.g5-contact .closing--contact .closing__head { order: -2; }
@media (min-width: 64rem) {
  .g5-contact .closing--contact:has(.closing__head) .closing__grid > .form,
  .g5-contact .closing--contact:has(.closing__head) .g5-side { grid-row: 2; }
}
/* /tech-drive/ hero uses the /contact/ van photo: keep the loader's head in frame (same crop as .ct-hero) */
.de-hero .hero__photo img[src*="itad-van-load"] { object-position: 50% 15%; }
/* Tom 10-08: the van photo moved into /tech-drive/ How it works when the booth became the hero; crop it to 4:3 so the tall portrait does not leave a gap under the text */
.g5-contact #how .de-drive__photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
/* 10-08 Tom: real tech-drive photo, shown uncropped ('dont alter the image'); centred beside the text from 64rem */
.g5-contact #how .td-drive-photo img { aspect-ratio: auto; object-fit: fill; max-width: none; }
@media (min-width: 64rem) { .g5-contact #how .de-drive__grid:has(.td-drive-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
/* Tom 10-08 "very grainy": the booth art is only ~550px of real detail, so on /tech-drive/ the hero photo panel takes a near-square shape on the right (as MSP) instead of a wide band, which halves the enlargement */
@media (min-width: 64rem) { .g5-contact .hero.de-hero .hero__photo { left: auto; right: 0; top: 0; bottom: 0; height: 100%; width: auto; min-width: 40%; aspect-ratio: 1 / 1; } .g5-contact .hero.de-hero .hero__photo img { object-position: 50% 40%; } }
/* Tom 10-08 removed the "Every order gets" line, which carried the gap above the Nonprofit Network button */
.de-where .de-drive__text > .btn { margin-top: var(--s6); }

/* 10-08 Tom (v404, his mock): light tint card, icon circles, accent headings, faint leaf. Tech drive only. COUNSEL HOLD before launch. */
.td-local-wrap { padding-block: 0 var(--section-y); }
.td-local { position: relative; overflow: hidden; padding: var(--s6); border-radius: var(--r-card); background: var(--floor);
  box-shadow: 0 1px 2px rgb(18 19 17 / 0.06), 0 8px 24px rgb(18 19 17 / 0.06); }
.td-local__leaf { position: absolute; right: -24px; bottom: -32px; width: 240px; height: auto; opacity: 0.18; pointer-events: none; }
.td-local__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s5); align-items: start; max-width: 46rem; }
.td-local__row + .td-local__row { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid rgb(18 19 17 / 0.14); }
.td-local__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(142 198 63 / 0.22); color: var(--green-text); }
.td-local__ico svg { width: 32px; height: 32px; }
.td-local__h { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.td-local__p { margin-top: var(--s2); font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }
@media (min-width: 48rem) { .td-local { padding: var(--s8) var(--s10); } .td-local__row { grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--s8); }
  .td-local__ico { width: 80px; height: 80px; } .td-local__ico svg { width: 44px; height: 44px; } .td-local__leaf { width: 300px; right: 24px; bottom: -40px; } }
@media (max-width: 47.99rem) { .td-local__leaf { display: none; } }

/* Tom 10-09 ("our mission HERO", VolunteersPackingBoxesUnderaTent.png): left fade baked in (neutralised to ink,
   experiments/de_hero_1009.py). Full-bleed at 64rem+ like /buyback/ .bb-hero2, never scaled past its native 1672px
   (right-anchored). Scoped by .de-hero--bg: .de-hero also styles /contact/ and /warranty/. Phones get the 4:3 crop. */
@media (min-width: 64rem) {
  .de-hero.de-hero--bg .hero__photo { left: 0; }
  .de-hero.de-hero--bg .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; }
  .de-hero.de-hero--bg .hero__photo img { width: min(100%, 1672px); height: 100%; object-position: 100% 35%; }
  .de-hero.de-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%); }
}
@media (min-width: 104.50rem) {
  .de-hero.de-hero--bg .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 (td-hero-bg, experiments/td_hero_1009.py): /tech-drive/ joins the .de-hero--bg treatment above. The file is
   to 1672px (Tom's fixed-sign version, uncropped), so this hero caps there and feathers past it. */
@media (min-width: 64rem) {
  .de-hero.de-hero--bg.td-hero .hero__photo { left: 0; right: 0; width: auto; max-width: none; min-width: 0; aspect-ratio: auto; }
  .de-hero.de-hero--bg.td-hero .hero__photo picture { inset: 0; width: 100%; }
  .de-hero.de-hero--bg.td-hero .hero__photo img { width: min(100%, 1672px); object-position: 100% 40%; }
}
@media (min-width: 104.50rem) {
  .de-hero.de-hero--bg.td-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_804, tech drive: "remove this whole white section"): the intent picker + helper lines leave the Tech Drive
   form. The block stays in the DOM (form scripts read it) and the form keeps its default intent, "other". */
.intent.td-intent-off { display: none; }