/* =====================================================================================================================
   pages-dd-v3.css: /itad/data-destruction/ only (v3 words, 2026-09-29). Linked after site.css and pages-v2-g5.css.
   Built to the /schools/ + /partners/ v3 system: ink photo hero (g2-hero recipe), text-led heading/body splits, a numbered
   three-step method on the tint, the certificate as the page's one ink band with the paper trail on white, visible
   answers, the shared closing form. Every rule is scoped by a dv- class that exists on this page alone.
   Lime / black / white tokens only; no shared part restyled. Previous page: handoffs/draft4/site-backup-dd-pre-v3/
   ===================================================================================================================== */

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

/* ---------- hero: g2-hero photo card; the small line takes the /schools/ lime-dot treatment ---------- */
.dv-hero__small { margin-top: var(--s6); display: flex; gap: 10px; align-items: baseline; max-width: 34rem;
  font-size: 0.9375rem; line-height: 1.45; font-weight: 600; color: var(--text-2); }
.dv-hero__small::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); transform: translateY(-1px); }
@media (max-width: 47.99rem) { .dv-hero .hero__actions .btn { width: 100%; } }
@media (min-width: 64rem) {
  .dv-hero { padding-bottom: 0; }
  .dv-hero .hero__grid { min-height: clamp(460px, calc(100svh - var(--header-h) - var(--utility-h) - 200px), 580px); }
  .dv-hero .hero__photo { left: 44%; }
  .dv-hero .hero__text { padding-top: 56px; padding-bottom: 56px; }
  .dv-hero .hero__text > * { max-width: 38rem; }
  .dv-hero .hero__h1 { max-width: 15ch; }
  .dv-hero .hero__sub { max-width: 31rem; }
  .dv-hero__small { color: var(--on-ink-2); }
  /* one filled lime button per view: the hero's "Get free ITAD pickup" is the filled one */
}

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

/* quiet arrow link (the /schools/ sv-textlink, re-scoped) */
.dv-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; }
.dv-textlink::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform var(--dur) var(--ease); }
.dv-textlink:hover { text-decoration-color: currentColor; }
@media (hover: hover) { .dv-textlink:hover::after { transform: translateX(3px); } }
.dv-textlink:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; box-shadow: none; }

/* ---------- One process for every kind of data: one line + a ruled row of four links ---------- */
.dv-one { padding-top: var(--s12); }
@media (min-width: 64rem) { .dv-one { padding-top: var(--s16); } }
.dv-one__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 40rem; text-wrap: pretty; }
.dv-one__links { display: flex; flex-wrap: wrap; gap: 0 var(--s8); margin: var(--s5) 0 0; padding: var(--s2) 0 0; list-style: none;
  border-top: 2px solid var(--lime); max-width: 40rem; }

/* ---------- How does Regadget destroy data?: numbered method on the tint ---------- */
/* hero card straight onto the tint: a short white gap, same as the certificate band (10-01, "One process" section removed) */
@media (min-width: 48rem) { .dv-hero + .dv-how { margin-top: var(--s10); } }
.dv-how__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 40rem; text-wrap: pretty; }
.dv-steps { display: grid; gap: 0; margin: var(--s10) 0 0; padding: 0; list-style: none; counter-reset: dvstep; }
.dv-step { counter-increment: dvstep; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); align-items: start; align-content: start;
  padding: var(--s5) 0; border-top: 2px solid var(--ink); }
.dv-step::before { content: counter(dvstep); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.dv-step p { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.dv-step__lead { display: block; margin-bottom: var(--s2); font-size: 1.3125rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 64rem) {
  .dv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
  .dv-step { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s6) 0 0; }
}
.dv-yours { margin-top: var(--s10); display: grid; gap: var(--s3); padding: var(--s6); border-radius: 24px; background: var(--paper); }
.dv-yours__text { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 44rem; }
.dv-yours__text strong { color: var(--ink); font-weight: 700; }
@media (min-width: 64rem) {
  .dv-yours { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s10); align-items: center; padding: var(--s6) var(--s8); }
}

/* ---------- certificate: the page's one ink band; the answer left, the paper trail on white right ---------- */
/* phones: the band is full-bleed and butts onto the tint; wider: an inset card with a short gap, not an empty band */
@media (min-width: 48rem) { .dv-cert { margin-top: var(--s10); } }
@media (min-width: 64rem) { .dv-cert { padding-block: 64px; } }
.dv-cert__grid { display: grid; gap: var(--s10); }
@media (min-width: 64rem) {
  .dv-cert__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--s12); align-items: center; }
}
.dv-cert__answer { display: grid; gap: var(--s5); align-content: start; }
.dv-cert__answer .h2 { max-width: 17ch; text-wrap: balance; }
.dv-cert__line { padding-top: var(--s5); border-top: 2px solid var(--lime); max-width: 32rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--on-dark); text-wrap: pretty; }
.dv-cert__nist { max-width: 32rem; font-size: 1rem; line-height: 1.55; color: var(--on-ink-2); }
.dv-cert__nist a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--on-dark); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.dv-cert__nist a:hover { text-decoration-color: currentColor; }
.dv-cert__nist a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; box-shadow: none; }
.dv-paper { padding: var(--s8) var(--s6); border-radius: 24px; background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.6); }
@media (min-width: 64rem) { .dv-paper { padding: var(--s10); } }
.dv-paper__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.dv-paper__rows { margin: var(--s4) 0 0; border-top: 2px solid var(--lime); }
.dv-paper__row { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.dv-paper__row dt { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.dv-paper__row dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
@media (min-width: 30rem) {
  .dv-paper__row { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--s5); }
}
.dv-paper__keep { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: 14px; background: var(--floor);
  font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ink); }

/* ---------- What can you send?: the list as one sentence, the two short lines under it ---------- */
.dv-send { padding-bottom: 0; }
.dv-send__text { max-width: 40rem; }
.dv-send__list { display: block; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.dv-send__else, .dv-send__crt { display: block; font-size: 1.0625rem; line-height: 1.5; color: var(--text-2); }
.dv-send__else { margin-top: var(--s5); padding-top: var(--s4); border-top: 2px solid var(--lime); font-weight: 700; color: var(--ink); }
.dv-send__crt { margin-top: var(--s2); }

/* ---------- security reviewer: heading, sub and the share controls left; answers right, all visible ---------- */
.dv-faq { padding-bottom: var(--s8); }
.dv-faq__head { display: grid; gap: var(--s5); align-content: start; }
.dv-faq__head .h2 { max-width: 16ch; text-wrap: balance; }
.dv-faq__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 30rem; }
.dv-faq__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.dv-print { min-height: 48px; }
@media (min-width: 64rem) {
  .dv-faq .faq__grid > .dv-faq__head { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

@media (prefers-reduced-motion: reduce) {
  .dv-textlink::after { transition: none; }
  .dv-textlink:hover::after { transform: none; }
}
@media print {
  .dv-hero .hero__photo, .dv-faq__share, .dv-hero .hero__actions { display: none; }
  .dv-cert { background: none; color: #000; }
  .dv-cert .h2--inverse, .dv-cert__line, .dv-cert__nist, .dv-cert__nist a { color: #000; }
}

/* ---------- Sample certificate (moved from /itad/, Tom 10-01: ITAD stays high level, this page carries the full detail
   and the certificate). Drawn in HTML from the real CoD layout; text stays real text; customer and details made up. ---------- */
.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__cta { margin-top: var(--s3); } /* 10-07 scout/gadget: pickup CTA between certificate and form; one lime button in this view */
.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; }
}
/* the paper: sizes in cqi so the whole sheet scales as one object at any width */
.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.6deg); }
.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__statement { margin-top: 2.8cqi; color: #3c3e39; }
.cod__to { margin-top: 2.6cqi; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqi; padding: 2cqi 2.4cqi; background: #f1f6ea; border-radius: 1.4cqi; }
.cod__k { display: block; font-size: 1.7cqi; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6e66; }
.cod__v { display: block; margin-top: 0.4cqi; font-weight: 700; }
.cod__h { margin-top: 3cqi; font-size: 1.9cqi; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cod__proc { list-style: none; margin: 1.2cqi 0 0; padding: 0; border: 1px solid #d9dbd3; border-radius: 1.4cqi; }
.cod__proc li { display: grid; grid-template-columns: 3cqi 12cqi 1fr; align-items: start; gap: 1.6cqi; padding: 1.4cqi 1.8cqi; color: #3c3e39; }
.cod__proc li + li { border-top: 1px solid #d9dbd3; }
.cod__proc b { color: var(--ink); }
.cod__box { width: 2.4cqi; height: 2.4cqi; margin-top: 0.3cqi; border: 0.3cqi solid var(--ink); border-radius: 0.5cqi; }
.cod__proc .is-on .cod__box { background: var(--lime); }
.cod__sum { width: 100%; margin-top: 1.2cqi; 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: 600; }
.cod__covered { margin-top: 3cqi; padding: 1.8cqi 2.4cqi; background: #f6f7f3; border-radius: 1.4cqi; }
.cod__serials { list-style: none; margin: 1.2cqi 0 0; padding: 1.8cqi 2cqi; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6cqi 2cqi;
  background: #f6f7f3; border-radius: 1.4cqi; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2cqi; color: #3c3e39; }
@media (prefers-reduced-motion: reduce) { .cod, .cod__stamp { transform: none; } }

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

/* seam: the tint method band to the inset ink certificate card had 40px; the family uses one token (64px) between a tinted
   band and an inset card (buy, buyback), so the ink card floats on the same white above and below */
@media (min-width: 48rem) { .dv-cert { margin-top: var(--s16); } }

/* the sample certificate: a three-line note was vertically centred beside an ~800px sheet, leaving a black field the size
   of the sheet. The note now anchors to the top on a lime rule and rides along with the sheet (sticky), and the sheet is a
   little smaller, so the row reads as a caption beside a document rather than a note floating in black. */
@media (min-width: 64rem) {
  .dv-cod { align-items: start; }
  .dv-cod__text { position: sticky; top: calc(var(--header-h) + var(--s10)); padding-top: var(--s5); border-top: 2px solid var(--lime); }
  .dv-cod__fig { max-width: 560px; }
}

/* Opus resume 10-07, round 1 at 1920: (a) a 40px white sliver sat between the square full-bleed ink hero and the full-bleed
   tint band: neither a seam nor a band gap, it read as a mistake. At 64rem+ (hero square, full width) the two bands meet
   cleanly, as two full-bleed bands do on /itad/. (b) the certificate band centred its heading column against the tall
   paper card, leaving ~190px of empty ink above "Does Regadget give a certificate…"; both columns now start on one top line. */
@media (min-width: 64rem) {
  .dv-hero + .dv-how { margin-top: 0; }
  .dv-cert__grid { align-items: start; }
}

/* phones: the sheet scaled to the 358px column, so its text was ~8px. It now keeps the 560px sheet (same sizes as a laptop
   renders it) and scrolls sideways inside its figure; the cut right edge is the cue. */
@media (max-width: 47.99rem) {
  .dv-cod__fig { min-width: 0; overflow-x: auto; container-type: normal; padding-bottom: var(--s6); -webkit-overflow-scrolling: touch; }
  .cod { container-type: inline-size; width: 560px; font-size: 13.2px; padding: 34px 36px 36px; transform: none; }
}

/* 390 H1 wrapped "Data destruction, / without / the headache." (a one-word middle line). The accent takes its own line
   and the rest wraps without an orphan. */
@media (max-width: 47.99rem) {
  .dv-hero .hx__h1 { text-wrap: pretty; }
  .dv-hero .hx__h1 .accent { display: block; }
}

/* 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). */
.dv-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;
}

/* print: the earlier rule named .hero__photo, which this hero no longer uses */
@media print {
  .dv-hero .iv-hx__photo, .dv-hero .hx__actions { display: none; }
  .dv-hero .hx__card { background: none; color: #000; }
  .dv-hero .hx__sub { color: #000; }
}