/* =====================================================================================================================
   pages-bb-v4.css: /buyback/ only. Plan 4 design run, family D (2026-10-06). Linked last, after site.css, pages-g2.css and
   pages-g2-itad.css. Those two g2 sheets are shared with /itad/ (family A) and the partner pages (family C), so this
   page's design-run rules live here instead. DESIGN.md is the system; TOM-TASTE.md the corrections. No words changed.
   ===================================================================================================================== */

/* ---------- 390: the form, its inputs, the button and the phone panel ran 12px past the green card ----------
   Root: the native file input (.bb-file, pages-g2-itad.css) is display:block with no width, and a file control's intrinsic
   min-content is ~350px at 16px, so the form's min-content grew to 350px and the closing grid's implicit auto track grew
   with it (measured: track 350px with the input, 318px without). Sized to its column, it can shrink. */
.bb-file { width: 100%; max-width: 100%; min-width: 0; }

/* the one native-looking control inside a designed form: the file input takes the form's field shape and its button the
   chip shape (ink text, 1px field line, 999px), so "Attach a list" reads as part of the form */
.bb-file { padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--r-input); background: var(--paper);
  font-size: var(--fs-small); color: var(--text-2); cursor: pointer; }
.bb-file::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 1px solid var(--field-line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.bb-file:hover, .bb-file:hover::file-selector-button { border-color: var(--ink); }
.bb-file:focus-visible { border-color: var(--ink); }

/* ---------- one lime button per view: the hero's "Get a valuation" is the filled one, so the header's pickup button takes
   the outline treatment on this page (the rule every other photo-hero page in the family carries) ---------- */
@media (min-width: 64rem) {
}

/* ---------- "We make logistics easy": four steps carried the same tick as the five reasons above them, so the sequence
   read as a feature list. They are a numbered step strip now (lime numerals, one row of four from 64rem under the heading),
   which also fills the column the heading-left / list-right split left empty. ---------- */
#logistics .bb-why__list { counter-reset: bbstep; }
#logistics .bb-why__item { counter-increment: bbstep; }
#logistics .bb-why__tick { display: none; }
#logistics .bb-why__item::before { content: counter(bbstep); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
  #logistics .bb-why__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s10); }
  #logistics .bb-why__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s8); max-width: none; }
  #logistics .bb-why__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); padding-top: var(--s5); border-top: 2px solid var(--ink); align-content: start; }
  #logistics .bb-why__item::before { width: 40px; height: 40px; font-size: 1.125rem; }
}

/* ---------- the sample settlement report (same recipe as the certificate on /itad/data-destruction/) ---------- */
/* laptops and up: the three-line note was centred beside an ~800px sheet, leaving a black field the size of the sheet.
   It now anchors to the top on a lime rule and rides along with the sheet; the sheet is a little smaller. */
@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; }
}
/* phones: the sheet scaled to the 358px column (~8px text). It keeps the 560px sheet and scrolls sideways inside its figure. */
@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; }
}

/* ---------- seam/rhythm: "What happens to machines that fail?" (.section, padding-block) ran into the FAQ's own top padding:
   ~210px of white at 1920 between two plain bands. The FAQ's --section-y is the one gap (DESIGN.md band-to-band). ---------- */
#the-rest + .faq { padding-top: 0; }

/* ---------- anchors: #how-it-works landed 9px under the sticky header at 1920 ---------- */
#how-it-works { scroll-margin-top: var(--s6); }

/* ---------- the arrow is an icon, not a typed glyph: the grading link and the form pointer draw the 24-grid arrow; the link
   flows inline (padding keeps the 44px tap height) so at 390 the arrow stays after the last word of a wrapped link ---------- */
body:has(.bb-why) .link-arrow { display: inline-block; min-height: 0; padding-block: 10px; line-height: 24px; }
body:has(.bb-why) .link-arrow::after { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; }
/* (Opus resume 10-07: the icon mask, the form-pointer and the intent-"·" copies were removed; site.css carries all three.) */

/* Tom 10-08 "less floor, more computer stacks on the back side and on the ground": the hero photo zooms toward the
   left, where the desktop stacks and the Chromebook stacks overlap, so the empty floor at centre-right leaves the frame. */
@media (min-width: 64rem) { .g2-hero .hero__photo picture { overflow: hidden; } .g2-hero .hero__photo img { transform: scale(1.3); transform-origin: 18% 48%; } }

/* Tom 10-09 (file_677): new hero image with the left fade baked in. Full-bleed at 64rem+ (as /resellers/ and the partner
   .pv-hero--bg heroes); the 10-08 1.3 zoom was for the old photo and is switched off here. */
@media (min-width: 64rem) {
  .g2-hero.bb-hero2 .hero__photo { left: 0; }
  .g2-hero.bb-hero2 .hero__photo img { object-position: 100% 50%; transform: none; }
  .g2-hero.bb-hero2 .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%); }
}

/* Tom 10-09 "grainy?": at 64rem+ the hero never scales past its file's native width (right-anchored inside the photo box;
   the image's own left fade meets the ink). Was 1280; his full-size original (1672 wide) now ships as a 1672w JPEG. */
@media (min-width: 64rem) {
  .g2-hero.bb-hero2 .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; }
  .g2-hero.bb-hero2 .hero__photo img { width: min(100%, 1672px); height: 100%; }
}