/* =====================================================================================================================
   pages-g2-itad.css — /itad/ only (v3 words, 2026-09-29). Linked after site.css and pages-g2.css.
   v3 layout: short photo hero (shared g2-hero) · "What is ITAD?" · one ink band pairing "Why is pickup free?" with the
   reviewer panel (#security) · six numbered steps, your two on lime · what we take as a scannable grid · refurbished-first
   with a bench photo · timing · routing rows · quick answers. Lime / black / white tokens only. No shared part restyled.
   Previous v2 sheet: handoffs/draft4/site-backup-itad-pre-v3/pages-g2-itad.css
   ===================================================================================================================== */

/* ---------- hero (v2hero, Tom 10-01 "not a big fan"): the Home hero card (site.css .hx*) so /itad/ reads as the page the
   Home "Get free ITAD pickup" click promised. Text on solid ink at left, the wipe-bench photo full-height at right
   (the one photo that shows drives being wiped; 960px source, so it fills a half card, never the full width). ---------- */
.iv-hx .hx__card::after { display: none; }
.iv-hx__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.iv-hx__photo picture, .iv-hx__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 0; }
.iv-hx__text .hx__sub { max-width: 36rem; }
.hx__proof .iv-hx__fact { margin: 0; color: inherit; white-space: nowrap; }
@media (min-width: 64rem) {
  .iv-hx__card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-content: stretch; align-items: center;
    min-height: clamp(460px, calc(100svh - var(--header-h) - var(--utility-h) - 240px), 600px); }
  .iv-hx__text { padding: 48px 40px 48px max(var(--s10), (100vw - var(--container)) / 2); }
  .iv-hx__text .hx__actions a { white-space: nowrap; }
  .iv-hx__photo { align-self: stretch; aspect-ratio: auto; }
  /* a soft ink fade on the photo's inner edge so the seam reads as one card, not two panels */
  .iv-hx__photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--ink) 0%, rgb(18 19 17 / 0) 22%); }
}

/* ---------- Who we work with (Tom 10-01: "similar to the routing section on Home"; wireframe P02 §2). The Home door
   cards (site.css .door2) with Home's pages-g1 refinements copied here, scoped to .iv-who: heading-size label, text
   action with a lime arrow disc, faint lime glow. Two groups as in the Retire devices menu. ---------- */
/* design run 10-06: Who -> Two ways was 40 + 40 = 80px (off the band scale); now one --section-y, top-only on the next band */
.iv-who { padding-top: var(--s12); padding-bottom: 0; }
.iv-who + .iv-steps { padding-top: var(--section-y); }
.iv-who__h2 { max-width: 20ch; margin-bottom: var(--s8); }
.iv-who__group + .iv-who__group { margin-top: var(--s8); }
.iv-who__group-h { margin: 0 0 var(--s4); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.iv-who .door2__body { padding: 24px; } /* on the 8px scale (was 24/26/22); phones 20px below */
.iv-who .door2__label { font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
.iv-who .door2__hook { margin-top: 12px; margin-bottom: 16px; font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; color: var(--text-2); max-width: 36rem; }
.iv-who .door2__cta { gap: 12px; padding: 0; min-height: 44px; border: 0; border-radius: 0; font-size: 1rem; text-decoration: none; background: none; }
.iv-who .door2__arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--lime); color: var(--ink); transition: transform .3s var(--ease); }
.iv-who .door2__arrow svg { width: 16px; height: 16px; }
.iv-who .door2:hover .door2__cta { background: none; color: var(--ink); }
.iv-who .door2:hover .door2__cta svg { transform: none; }
@media (hover: hover) { .iv-who .door2:hover .door2__arrow { transform: translateX(4px); } }
.iv-who .door2 { box-shadow: 0 0 0 1px rgb(142 198 63 / 0.18), 0 0 16px 0 rgb(142 198 63 / 0.22), inset 0 0 0 1px rgb(18 19 17 / 0.05); }
.iv-who .door2:hover { box-shadow: 0 0 0 1px rgb(142 198 63 / 0.3), 0 0 22px 2px rgb(142 198 63 / 0.32), inset 0 0 0 2px var(--lime); }
/* design run 10-06: below 64rem the doors stack one per row, as Home's router does (.hx__doors); the 2-up tablet grid left
   Healthcare and Leasing alone on a second row at 768. Phone/tablet door padding follows Home (pages-g1: 22/22/20 -> 20). */
@media (max-width: 63.99rem) { .iv-who__doors { grid-template-columns: minmax(0, 1fr); gap: 12px; } .iv-who .door2__body { padding: 20px; } }

/* shared heading/answer split used by the text-led sections */
.iv-intro__grid, .iv-time__grid, .iv-call__grid, .iv-take__grid { display: grid; gap: var(--s6); }
@media (min-width: 64rem) {
  .iv-intro__grid, .iv-time__grid, .iv-call__grid, .iv-take__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}

/* ---------- What is ITAD? ---------- */
.iv-intro { padding-bottom: var(--s16); }
.iv-intro .h2 { max-width: 12ch; }

/* ---------- Why free + the reviewer panel: one ink band, read left to right ---------- */
.iv-pair__grid { display: grid; gap: var(--s12); }
.iv-pair .h2 { color: var(--on-dark); }
.iv-free { display: grid; gap: var(--s5); align-content: start; }
.iv-free .h2 { max-width: 12ch; }
.iv-free__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 34rem; }
.iv-free__text strong { display: block; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hairline-dark);
  font-weight: 700; color: var(--lime); }
.iv-sec { display: grid; gap: var(--s6); align-content: start; scroll-margin-top: calc(var(--header-h) + var(--s6)); }
.iv-sec__h2 { max-width: 18ch; }
.iv-sec__list { margin: 0; border-top: 2px solid var(--lime); }
.iv-sec__row { display: grid; gap: var(--s1); padding: var(--s5) 0; border-bottom: 1px solid var(--hairline-dark); }
.iv-sec__row dt { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--on-ink-2); }
.iv-sec__row dd { margin: 0; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.35; font-weight: 600;
  letter-spacing: -0.005em; color: var(--on-dark); max-width: 34rem; }
.iv-sec__link { justify-self: start; color: var(--on-dark); }
@media (min-width: 48rem) {
  .iv-sec__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: var(--s6); align-items: baseline; }
}
@media (min-width: 64rem) { .iv-sec__row { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); } .iv-sec__row dd { font-size: 1.25rem; } }
@media (min-width: 64rem) {
  .iv-pair__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .iv-free { position: sticky; top: calc(var(--header-h) + var(--s10)); }
}

/* Tom 10-01 "pickup free doesn't fit with this": Why free moved up beside What is ITAD (two definition rows); the ink
   band is now the security answers alone, heading left and answers right, then What you get under them. */
.iv-intro__h2b { margin-top: var(--s10); }
/* What is ITAD, short, right under the hero (Tom 10-01): a quiet definition row, not a full section */
.iv-intro--top { padding-top: var(--s12); padding-bottom: 0; }
/* Tom 10-01 "give What is ITAD a different design element": a neutral (not green) panel, the definition in lead type,
   and its three parts drawn as a numbered strip under it, so the section reads as a glossary entry, not a card row. */
.iv-intro--top .iv-intro__grid { padding: var(--s10) var(--s8); border-radius: var(--r-card); background: #f3f3ef; row-gap: var(--s6); }
.iv-intro--top .answer { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 40rem; }
.iv-def { counter-reset: ivdef; grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--s6) 0 0; border-top: 1px solid var(--hairline);
  display: grid; gap: var(--s4); }
.iv-def li { counter-increment: ivdef; display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.iv-def li::before { content: "0" counter(ivdef); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.iv-def__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline); }
.iv-def__ico svg { width: 20px; height: 20px; }
@media (min-width: 48rem) { .iv-def { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .iv-intro--top .iv-intro__grid { padding: var(--s12) var(--s12); } }

/* Tom 10-01 "too much primary green on the arrows", then "white until hover": Who cards' arrow discs are ghost white
   (white fill, hairline ring so the disc still reads on a white card), lime only on hover/focus */
.iv-who .door2__arrow { background: #fff; box-shadow: inset 0 0 0 1px rgb(18 19 17 / 0.16);
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.iv-who .door2:hover .door2__arrow, .iv-who .door2:has(.door2__cta:focus-visible) .door2__arrow { box-shadow: inset 0 0 0 1px transparent; }
.iv-who .door2:hover .door2__arrow, .iv-who .door2:has(.door2__cta:focus-visible) .door2__arrow { background: var(--lime); }

/* ---------- Two jobs, as a winding journey (Tom 10-01: "back to back sections look too similar... a winding journey
   type vertical flow... get creative"). One line snakes down the page; each stop's number sits on the line where its
   stretch begins; your two jobs are the only lime stops. Desktop: alternating rows joined by rounded bends (each row
   draws its own top, bottom and bend; rows overlap by the line width so the strokes merge). Phones: one straight
   line down the left. Words unchanged. ---------- */
.iv-path { --line: 3px; --bend: 56px; --node: 52px; --stroke: #cfd2c8;
  list-style: none; margin: 0; padding: 0; position: relative; }
.iv-stop { position: relative; }
.iv-stop__node { position: absolute; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; font-size: 1.125rem;
  font-variant-numeric: tabular-nums; z-index: 1; }
.iv-stop--you .iv-stop__node { background: var(--lime); box-shadow: 0 6px 16px -6px rgb(142 198 63 / 0.9); }
.iv-stop__who { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.iv-stop__who::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }
.iv-stop__title { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4375rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; }
.iv-stop__text { margin-top: 6px; color: var(--text-2); line-height: 1.5; max-width: 30rem; }

/* phones and tablets: straight line */
@media (max-width: 63.99rem) {
  .iv-path::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1.5px); top: 10px; bottom: 40px; width: var(--line); background: var(--stroke); border-radius: 2px; }
  .iv-stop { padding: 0 0 var(--s8) calc(var(--node) + 20px); min-height: var(--node); }
  .iv-stop__node { left: 0; top: 0; }
  .iv-stop__body { padding-top: 10px; }
}
/* laptops and up: the snake */
@media (min-width: 64rem) {
  .iv-path { max-width: 1040px; margin-inline: auto; }
  .iv-stop { padding: calc(var(--node) / 2 + 22px) calc(var(--bend) + 48px) 44px; margin-top: calc(-1 * var(--line));
    border: var(--line) solid var(--stroke); }
  .iv-stop:first-child { margin-top: 0; }
  .iv-stop:nth-child(odd) { border-left: 0; border-radius: 0 var(--bend) var(--bend) 0; margin-left: var(--bend); padding-left: 40px; }
  .iv-stop:nth-child(even) { border-right: 0; border-radius: var(--bend) 0 0 var(--bend); margin-right: var(--bend); }
  .iv-stop:nth-child(even) .iv-stop__body { margin-left: auto; max-width: 30rem; }
  .iv-stop:nth-child(odd) .iv-stop__node { left: -26px; top: calc(var(--node) / -2 - var(--line) / 2); }
  .iv-stop:nth-child(even) .iv-stop__node { right: 40px; top: calc(var(--node) / -2 - var(--line) / 2); }
  /* the last stop ends the line: no bend, no bottom; its number sits where the last stretch arrives */
  .iv-stop:last-child { border: 0; border-radius: 0; padding-bottom: 8px; }
  .iv-stop:last-child::after { content: ""; position: absolute; left: calc(var(--bend) - 7px); top: calc(-1 * var(--line) / 2 - 6px);
    width: 12px; height: 12px; border-radius: 50%; background: var(--stroke); }
}
.iv-steps__h2 { margin-bottom: var(--s12); }
.iv-intro--top + .iv-who { padding-top: var(--s12); }
.iv-why { padding-bottom: 0; }
@media (min-width: 64rem) { .iv-intro__h2b { margin-top: 0; } .iv-intro__grid { row-gap: var(--s12); } }
@media (min-width: 64rem) {
  .iv-pair__grid--solo .iv-sec { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); }
  .iv-pair__grid--solo .iv-sec__h2 { grid-row: 1 / span 2; align-self: start; }
  .iv-pair__grid--solo .iv-sec__list, .iv-pair__grid--solo .iv-sec__link { grid-column: 2; }
}

.iv-steps__h2 { max-width: 20ch; margin-bottom: var(--s10); }
.iv-track { counter-reset: ivstep; display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.iv-step { counter-increment: ivstep; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr;
  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); }
.iv-step::before { content: counter(ivstep); grid-row: 1 / span 2; 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; }
.iv-step__title { grid-column: 2; padding-top: 11px; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }
.iv-step__text { grid-column: 2; color: var(--text-2); line-height: 1.5; }
.iv-step--you { background: var(--lime); box-shadow: none; }
.iv-step--you::before { background: var(--ink); color: var(--on-dark); }
.iv-step--you .iv-step__text { color: var(--ink); }
@media (min-width: 48rem) { .iv-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .iv-step { padding: var(--s6); } }
@media (min-width: 64rem) { .iv-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .iv-step { padding: var(--s8) var(--s6); } }

/* ---------- What we take: the one sentence, shown as a grid of equipment ---------- */
.iv-take__grid { row-gap: var(--s8); }
.iv-take__note { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 44rem; }
.iv-kinds { position: relative; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.iv-kind { display: block; padding: var(--s5); border-radius: 16px; background: var(--paper);
  font-size: 1.0625rem; line-height: 1.3; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgb(18 19 17 / 0.06), 0 6px 16px -8px rgb(18 19 17 / 0.14); }
/* list items start mid-sentence in the source line, so the grid capitalises them; "iPads" keeps Apple's lower-case i */
.iv-kind:not(.iv-kind--asis)::first-letter { text-transform: uppercase; }
@media (min-width: 48rem) { .iv-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } .iv-kind { padding: var(--s6) var(--s5); } }
@media (min-width: 64rem) {
  .iv-take__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s8); }
  .iv-take__note { font-size: var(--fs-lead); }
  .iv-kind { padding: var(--s8) var(--s6); font-size: 1.125rem; }
}

/* ---------- Refurbished first: bench photo beside the words ---------- */
.iv-reuse__grid { display: grid; gap: var(--s8); align-items: center; }
.iv-reuse__fig { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.iv-reuse__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.iv-reuse__text { display: grid; gap: var(--s5); }
.iv-reuse__text .h2 { max-width: 18ch; }
.iv-reuse__text strong { font-weight: 700; color: var(--ink); }
@media (min-width: 64rem) { .iv-reuse__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s16); } }

/* ---------- How long ---------- */
.iv-time { padding-block: var(--s12); }
@media (min-width: 64rem) { .iv-time { padding-block: var(--s16); } }
.iv-time__body { display: grid; gap: var(--s3); }
.iv-time__line { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; max-width: 26ch; }
.iv-time__note { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 36rem; }
@media (min-width: 64rem) { .iv-time__grid { align-items: center; } }

/* ---------- When companies call us: routing rows ---------- */
.iv-call__head { display: grid; gap: var(--s4); align-content: start; }
.iv-routes { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.iv-route { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 76px; padding: var(--s5) 0;
  border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 1.1875rem; line-height: 1.35; font-weight: 600; }
.iv-route__arrow { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--floor);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.iv-route__arrow svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .iv-route:hover .iv-route__arrow { background: var(--lime); transform: translateX(3px); }
  .iv-route:hover .iv-route__text { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}
.iv-call__small { margin-top: var(--s5); font-size: 1.0625rem; color: var(--text-2); }
.iv-call__small .textlink { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .iv-route__arrow { transition: none; } .iv-route:hover .iv-route__arrow { transform: none; } }

/* ---------- One piece of third-party proof in the contact panel beside the form (unchanged from v2) ---------- */
.gi-award { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline-dark); font-size: var(--fs-small); line-height: 1.5; color: var(--on-ink-2); }

/* ---------- /buyback/ "Why schools and businesses choose Regadget" (Tom's Buy-Back flyer, 09-30) ---------- */
.bb-why { padding-block: var(--section-y); background: var(--floor); }
.bb-why__grid { display: grid; gap: var(--s8); }
.bb-why__h2 { max-width: 16ch; margin: 0; }
.bb-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); max-width: 40rem; }
.bb-why__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.bb-why__tick { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; }
.bb-why__tick svg { width: 1.125rem; height: 1.125rem; }
.bb-why__item h3 { margin: 0 0 var(--s1); font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.bb-why__item p { margin: 0; color: var(--text-2); line-height: 1.5; }
/* four steps: 1 column on phones, 2x2 on laptops, one row only when each card still fits its text (no 3+1 orphan) */
.iv-track.bb-steps4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .iv-track.bb-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Why section with Tom's warehouse photo on the left */
.bb-why__fig { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.bb-why__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bb-why__col { display: grid; gap: var(--s6); align-content: start; }
.bb-why__col .bb-why__h2 { max-width: 20ch; }
@media (min-width: 64rem) { .bb-why__grid.bb-why__grid--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
@media (min-width: 64rem) {
  .bb-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--s16); align-items: start; }
  .bb-why__h2 { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); line-height: 1.08; }
}

/* ---------- Data security (Tom 10-01: replace the Q&A band with a Home-style section, one level deeper than Home,
   routing to Secure Data Destruction). Home's S4 layout and lime marker heading, on the ink band so the page keeps its
   light/dark rhythm; the sample certificate now lives on /itad/data-destruction/. ---------- */
.iv-hsec { padding-block: var(--section-y); scroll-margin-top: var(--header-h); }
.iv-hsec__grid { display: grid; gap: var(--s8); }
.iv-hsec__head { display: grid; gap: var(--s5); justify-items: start; align-content: start; }
.iv-hsec__h2 { max-width: 12ch; color: var(--on-dark); }
.iv-hsec__mark { display: inline-block; background: var(--lime); color: var(--ink); padding: 0.22em var(--s2) 0.02em;
  margin: 0 0 var(--s2) calc(-1 * var(--s2)); }
.iv-hsec__lead { max-width: 40ch; margin: 0; color: var(--on-dark); }
.iv-hsec__body { display: grid; gap: var(--s6); justify-items: start; }
.iv-hsec__list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 66ch; border-top: 2px solid var(--lime); }
.iv-hsec__list li { padding-block: var(--s5); border-bottom: 1px solid var(--hairline-dark); color: var(--on-ink-2); line-height: 1.55; }
.iv-hsec__list strong { display: block; margin-bottom: var(--s1); color: var(--on-dark); font-size: 1.1875rem; line-height: 1.3; }
.iv-hsec__list .textlink { color: var(--on-dark); }
.iv-hsec__link { color: var(--on-dark); }
@media (min-width: 64rem) {
  .iv-hsec__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .iv-hsec__h2 { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); line-height: 1.08; }
}

/* simple steps list + pallet photo (Tom 2026-10-01: "just do a simple list") */
.iv-simple { display: grid; gap: var(--s6, 32px); margin-top: 0; align-items: center; } /* heading -> content is the h2's own --s10, not 40 + 20 */
.iv-simple__fig { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.iv-simple__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-simple__list { list-style: decimal; margin: 0; padding-left: 1.6em; display: grid; gap: 14px; font-size: 1.0625rem; line-height: 1.5; max-width: 38rem; }
.iv-simple__list li::marker { font-weight: 700; color: var(--green-text); }
.iv-simple__list strong { font-weight: 700; }
/* Tom 10-01: two options before the process (sell / donate); note line under the two cards */
/* Tom 10-01 "fix the gap": same white as the process section below, so one section gap, not two stacked */
.iv-ways { padding-bottom: 0; }
.iv-reuse + .iv-faq { padding-top: 0; }
.iv-ways__note { margin: var(--s6, 24px) 0 0; max-width: 66ch; font-size: 1.125rem; line-height: 1.5; color: var(--text-2); }
.iv-ways .iv-step__text .textlink { display: table; margin-top: var(--s2, 8px); font-weight: 700; }
/* Tom 10-01 "scattered": closing intro is two short sentences on a readable measure, not one wide run-on */
.iv-closing__sub { max-width: 40rem; }
/* Tom 10-01: the steps list gets its own header */
.iv-simple__body { display: grid; gap: var(--s4, 16px); align-content: start; }
.iv-simple__h3 { margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--ink); }
@media (min-width: 64rem) { .iv-simple { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }

/* What we take + van photo on the right (Tom 2026-10-01); alternates with the pallet photo on the left above */
.iv-take__main { display: grid; row-gap: var(--s8); align-content: start; }
.iv-take__fig { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.iv-take__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
@media (min-width: 64rem) {
  .iv-take__grid.iv-take--photo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 48px; align-items: center; }
  .iv-take--photo .iv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-take--photo .iv-kind { padding: var(--s6) var(--s5); }
  .iv-take__fig { aspect-ratio: 3 / 4; }
}
@media (min-width: 80rem) { .iv-take--photo .iv-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* clock line under the steps + work-at-home callout (Tom 2026-10-01) */
.iv-clock { margin-top: var(--s8, 40px); padding-top: var(--s6, 32px); border-top: 1px solid var(--line, rgb(18 19 17 / .12)); max-width: 66ch; }
.iv-clock__line { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.iv-clock__note { margin: 14px 0 0; font-size: 1.125rem; line-height: 1.45; }
.iv-clock__line + .iv-clock__line { margin-top: 4px; }
.iv-who__more { margin-top: var(--s6, 32px); font-size: 1.0625rem; }
/* ---------- Wholesale Network (Tom 10-01). Buy/Sell are two sides, not steps: no number disc. Closing band carries
   Tom's Gadget poster as the supporting graphic (AI art, never the lead image). ---------- */
.wn-ways .iv-step, .iv-ways .iv-step { grid-template-columns: minmax(0, 1fr); }
.wn-ways .iv-step::before, .iv-ways .iv-step::before { display: none; }
.wn-ways .iv-step__title, .wn-ways .iv-step__text, .iv-ways .iv-step__title, .iv-ways .iv-step__text { grid-column: 1; }
.wn-ways .iv-step__title, .iv-ways .iv-step__title { padding-top: 0; font-size: 1.5rem; }
.wn-ways .iv-step__text, .iv-ways .iv-step__text { font-size: var(--fs-lead); }
.wn-cta { scroll-margin-top: var(--header-h); margin-bottom: var(--section-y); }
.wn-cta__grid { display: grid; gap: var(--s10); align-items: center; }
.wn-cta__text { display: grid; gap: var(--s5); justify-items: start; }
.wn-cta__h2 { color: var(--on-dark); max-width: 18ch; margin: 0; }
.wn-cta__sub { margin: 0; font-size: var(--fs-lead); font-weight: 700; color: var(--lime); }
.wn-cta__contact { margin: 0; color: var(--on-dark); }
.wn-cta__contact a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.wn-cta__poster { margin: 0; border-radius: var(--r-band); overflow: hidden; width: min(100%, 26rem); max-width: 26rem; justify-self: center;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35); }
.wn-cta__poster img { display: block; width: 100%; height: auto; }
@media (min-width: 64rem) { .wn-cta__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s16); } }
/* Tom 10-01 "combatting each other": Why is pickup free? is a bold lead-in under the definition, not a second big heading */
.iv-intro__q { margin: var(--s8) 0 var(--s2); padding-top: var(--s6); border-top: 1px solid var(--hairline); font-size: var(--fs-lead); line-height: 1.4; font-weight: 700; color: var(--green-text); max-width: 40rem; }

/* Tom 10-02 buyback: green lead words; grading rows read as text, not big claims; pass tag; file input */
.bb-green { color: var(--green-text); font-weight: 700; }
.bb-grade .iv-sec__row dd { font-size: 1.0625rem; font-weight: 400; line-height: 1.55; color: var(--on-dark); }
.bb-grade__tag { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2); border-radius: 999px; background: var(--lime); color: var(--ink);
  font-size: 0.75rem; font-weight: 700; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 0.1em; }
.bb-file__label { margin-top: var(--s4); }
.bb-file { display: block; margin-top: var(--s2); min-height: 44px; font: inherit; }

/* /buyback/ sample settlement report (2026-10-05, Tom "go"). Same paper as the sample certificate on /itad/data-destruction/
   (rules copied from pages-dd-v3.css, which this page does not load), plus the device table (.sr__*). cqi sizes: the sheet
   scales as one object at every width. */
.dv-cod { display: grid; gap: var(--s8); margin-top: var(--s12); padding-top: var(--s10); border-top: 1px solid var(--hairline-dark); }
.dv-cod__text { display: grid; gap: var(--s3); align-content: start; }
.dv-cod__h { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--on-dark); }
.dv-cod__note { max-width: 30rem; font-size: 1rem; line-height: 1.55; color: var(--on-ink-2); }
.dv-cod__fig { margin: 0; container-type: inline-size; width: 100%; }
@media (min-width: 64rem) {
  .dv-cod { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s12); align-items: center; }
  .dv-cod__fig { max-width: 620px; justify-self: end; }
}
.cod { background: var(--paper); color: var(--ink); border-radius: 10px; padding: 6cqi 6.5cqi 6.5cqi;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 30px 60px -20px rgb(0 0 0 / 0.6); font-size: 2.35cqi; line-height: 1.45;
  transform: rotate(0.5deg); }
.cod__top { display: flex; align-items: center; justify-content: space-between; }
.cod__logo { width: 30cqi; height: auto; }
.cod__stamp { padding: 0.8cqi 2.2cqi; border: 0.35cqi solid var(--ink); border-radius: 1cqi; font-size: 2.2cqi; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(4deg); }
.cod__title { margin-top: 3cqi; font-size: 6.4cqi; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.cod__title span { color: #5f8f22; }
.cod__meta { margin: 3.2cqi 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #d9dbd3; border-radius: 1.4cqi; overflow: hidden; }
.cod__meta div { padding: 1.4cqi 1.8cqi; border-left: 1px solid #d9dbd3; }
.cod__meta div:first-child { border-left: 0; }
.cod__meta dt { font-size: 1.7cqi; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6e66; }
.cod__meta dd { margin: 0.4cqi 0 0; font-weight: 600; font-size: 2.1cqi; overflow-wrap: anywhere; }
.cod__h { margin-top: 3cqi; font-size: 1.9cqi; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cod__sum { width: 100%; margin-top: 2.6cqi; border-collapse: separate; border-spacing: 0; border: 1px solid #d9dbd3; border-radius: 1.4cqi; overflow: hidden; }
.cod__sum th { padding: 1.2cqi 1.8cqi; background: var(--ink); color: var(--paper); font-size: 1.8cqi; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
.cod__sum td { padding: 1.3cqi 1.8cqi; font-weight: 700; font-size: 3cqi; font-variant-numeric: tabular-nums; }
.sr__lines { width: 100%; margin-top: 1.2cqi; border-collapse: separate; border-spacing: 0; border: 1px solid #d9dbd3; border-radius: 1.4cqi;
  overflow: hidden; font-size: 2.05cqi; }
.sr__lines th { padding: 1.1cqi 1.4cqi; background: #f1f6ea; font-size: 1.65cqi; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; color: #4a4c46; }
.sr__lines td { padding: 1.1cqi 1.4cqi; border-top: 1px solid #e6e8e1; color: #3c3e39; vertical-align: middle; }
.sr__sn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.85cqi; letter-spacing: 0.02em; }
.sr__g { display: inline-block; padding: 0.2cqi 1.2cqi; border: 0.25cqi solid #b9bcb2; border-radius: 99px; font-weight: 700; color: var(--ink); }
.sr__g--pass { background: var(--lime); border-color: var(--lime); }
.sr__none { color: #6b6e66; }
.sr__more { margin-top: 1.6cqi; font-size: 1.8cqi; color: #6b6e66; }
@media (prefers-reduced-motion: reduce) { .cod, .cod__stamp { transform: none; } }
/* wholesale network: two answer paragraphs in one column (wnrework1006) */
.wn-what__body > .answer + .answer { margin-top: var(--s5); }
/* ITAD hero dock loop (Tom-approved via viral 10-06, einstein build, 1280x704): full-resolution, so no grain blur/scale */
.iv-hx__photo .hx__video { filter: none; transform: none; }
.iv-hx__photo .hx__pause { z-index: 2; }
/* Tom 10-06 "supposed to be the entire hero background": on desktop with motion allowed, the loop fills the whole hero card
   (Home pattern: ink gradient behind the text, photo panel hidden). Phones and reduced-motion keep the split hero + photo. */
.iv-hx--video .hx__card { position: relative; isolation: isolate; }
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .iv-hx--video .iv-hx__photo { display: none; }
  .iv-hx--video .hx__card { grid-template-columns: minmax(0, 1fr); }
  .iv-hx--video .hx__video { z-index: -2; }
  .iv-hx--video .hx__card::after { display: block; content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(18 19 17 / 0.9) 0%, rgb(18 19 17 / 0.82) 42%, rgb(18 19 17 / 0.4) 64%, rgb(18 19 17 / 0.08) 86%); }
  .iv-hx--video .iv-hx__text > * { max-width: 40rem; }
}
.iv-hx--video .hx__video { filter: none; transform: none; }
/* Tom 10-08 (file_493): the hero background is now his van-load photo, not the loop. From 48rem the photo fills the whole
   card behind the ink grade (same grade as the loop had); phones keep the split hero with the same photo. */
.iv-hx--bg .hx__card { position: relative; isolation: isolate; }
@media (min-width: 48rem) {
  .iv-hx--bg .hx__card { grid-template-columns: minmax(0, 1fr); }
  .iv-hx--bg .iv-hx__photo { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
  .iv-hx--bg .iv-hx__photo::after { display: none; }
  .iv-hx--bg .iv-hx__photo img { object-position: 50% 18%; }
  .iv-hx--bg .hx__card::after { display: block; content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(18 19 17 / 0.9) 0%, rgb(18 19 17 / 0.82) 42%, rgb(18 19 17 / 0.4) 64%, rgb(18 19 17 / 0.08) 86%); }
  .iv-hx--bg .iv-hx__text > * { max-width: 40rem; }
  .iv-hx--bg .hx__h1 .accent { display: block; }
}
/* 64rem+: a full-width crop of the portrait photo showed only a face and sweater; the photo takes the right 58% instead, so
   the van load (the point of Tom's pick) stays in frame, and fades into the ink behind the text. */
@media (min-width: 64rem) {
  .iv-hx--bg .hx__card { background: var(--ink); }
  .iv-hx--bg .iv-hx__photo { left: auto; width: 58%; }
  .iv-hx--bg .iv-hx__photo img { object-position: 50% 22%; }
  .iv-hx--bg .hx__card::after {
    background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 42%, rgb(18 19 17 / 0.7) 50%, rgb(18 19 17 / 0.15) 64%, rgb(18 19 17 / 0) 74%); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .iv-hx--bg .hx__card::after {
    background: linear-gradient(90deg, rgb(18 19 17 / 0.92) 0%, rgb(18 19 17 / 0.86) 48%, rgb(18 19 17 / 0.62) 70%, rgb(18 19 17 / 0.14) 92%); }
}

/* =====================================================================================================================
   DESIGN RUN 2026-10-06 (Plan 4, family A). Spacing, seams, alignment only; no words. Held to DESIGN.md.
   ===================================================================================================================== */
/* The No Seam Rule: the tint band ended flush on the top corners of the ink card (0px at 1280/1366/1920, 2px at 768).
   48px of paper (--s12, the card-to-band token; same gap the "What is ITAD?" card keeps under the hero) now shows above the
   card so its radius reads. Below 48rem the ink band is full-bleed, so the bands may touch. */
@media (min-width: 48rem) { .iv-take + .iv-hsec { margin-top: var(--s12); } }

/* 768-1023 hero: the H1 ran on one line and the lime half landed on the bright side of the loop. The accent stacks (as at
   64rem+ and on phones) and the grade carries ink further right in this range only; 64rem+ keeps Tom's approved grade. */
@media (min-width: 48rem) { .iv-hx--video .hx__h1 .accent { display: block; } }
@media (min-width: 48rem) and (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) {
  .iv-hx--video .hx__card::after {
    background: linear-gradient(90deg, rgb(18 19 17 / 0.92) 0%, rgb(18 19 17 / 0.86) 48%, rgb(18 19 17 / 0.62) 70%, rgb(18 19 17 / 0.14) 92%); }
}

/* Hero proof line: the typed "·" ended line 1 at 390 ("...or testing ·"). Each fact now carries its own lime dot and
   wraps as a unit (the .hx__facts idiom); the dot spans are hidden at every width. */
.iv-hx .hx__proof { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.iv-hx .hx__proof > [aria-hidden] { display: none; }
.iv-hx .hx__proof .iv-hx__fact { display: inline-flex; align-items: center; gap: var(--s2); }
.iv-hx .hx__proof .iv-hx__fact::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

/* Who cards: label row, hook and action share one row track across the three cards (Home's pages-g1 subgrid rule). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .iv-who__doors { row-gap: 0; }
    .iv-who .door2, .iv-who .door2__body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .iv-who .door2__cta { align-self: end; justify-self: start; }
  }
}

/* Quick answers: the 5/7 split left the column under the heading empty for ~600px of scroll. 64-80rem: a narrower
   heading column (4/8). 80rem+: one column, heading above the list, list capped at 66ch (brief Move 1, blank-column fix). */
/* First try (one 66ch column at 80rem+) left the right half of the section empty instead; the section's own four Q&As
   fill the width as a 2x2 hairline grid under a full-width heading (Move 2: a quiet list, ~58ch per column at 1280). */
@media (min-width: 64rem) {
  .iv-faq .faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s10); }
  .iv-faq .faq__grid > .h2 { position: static; }
  .iv-faq .faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s16); border-top: 0; }
  .iv-faq .qa { border-bottom: 0; border-top: 1px solid var(--hairline); align-content: start; }
  /* a two-line question beside a one-line one: answers start level (DESIGN.md Balance Rule) */
  @supports (grid-template-rows: subgrid) { .iv-faq .qa { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s2); } }
  /* finish review A 10-07 (request 11, family C): an odd count left a blank cell. Exactly three: three columns (the
     wholesale page's local fix, now here). Five or more and odd: the last Q&A runs the full width (answer still 66ch). */
  .iv-faq .faq__list:has(> .qa:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s10); }
  .iv-faq .faq__list > .qa:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
}

/* finish review A 10-07 (family A) */
/* "What is ITAD?" panel: the panel is the .wrap itself, so below 1150px its background filled the window and its 40px
   corners met the screen edge (390, 768). It now keeps the page gutter at every width; 1150px wide from 1198px up (as
   before). Phones take DESIGN.md's panel padding (32px 24px). */
.iv-intro--top .iv-intro__grid { width: auto; max-width: none; margin-inline: max(var(--gutter), (100% - var(--wide)) / 2); }
@media (max-width: 47.99rem) { .iv-intro--top .iv-intro__grid { padding: var(--s8) var(--s6); } }
/* What we take beside the van photo: four tiles a row left ~124px per label at 1280-1920, so "networking and telecom
   gear" broke as "Networking / and / telecom gear". Two a row beside the photo at every width (labels on one line, the
   tile block now matches the photo's height); tablets without the photo column likewise. */
@media (min-width: 48rem) { .iv-take--photo .iv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .iv-take--photo .iv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* hero proof dots: lifted to the x-height centre (they sat on the baseline; Overpass reserves descender space) */
.iv-hx .hx__proof .iv-hx__fact::before { position: relative; top: -0.15em; }
/* /itad/: playbook band moved up under 'Who we work with' (Tom 10-07); give it room above, none doubled below */
.section.iv-who + .pb-band { padding-top: var(--s10); }  /* 0,3,0: must beat the site.css :is() zero-top rule */
.pb-band:has(+ .iv-ways) { padding-bottom: 0; }