/* =====================================================================================================================
   pages-g3-buy.css — /buy-refurbished/ only (v3.1 words, 2026-09-29). Linked after site.css, group-c.css, pages-g3.css.
   Built to the /itad/ v3 system Tom approved 09-29 (pages-g2 + pages-g2-itad): short ink photo hero · three doors (Home
   .door2 anatomy, door 1 the lead with the one solid pill) · refurbished split with a bench photo · organization
   heading/answer split with routing rows · one ink band carrying the pull quote · visible quick answers · a single
   /itad/ route row · the shared closing form. Lime / black / white tokens only; no shared part restyled.
   Previous page: handoffs/draft4/site-backup-buy-pre-v3/
   ===================================================================================================================== */

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

/* ---------- hero: the ITAD photo card (g2-hero rules), a little shorter so the three doors start near the fold ---------- */
.bv-hero .hero__h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 17ch; }
.bv-hero .hero__sub { margin-top: var(--s4); max-width: 34rem; }
.bv-hero .hero__photo img { object-position: 58% 50%; }
@media (min-width: 64rem) {
  .bv-hero { padding: var(--inset) var(--inset) 0; }
  .bv-hero .hero__grid { max-width: 1440px; margin-inline: auto; overflow: hidden;
    min-height: clamp(400px, calc(100svh - var(--header-h) - var(--utility-h) - 260px), 500px); }
  .bv-hero .hero__photo { left: 40%; }
  .bv-hero .hero__photo picture { border-radius: 0; }
  .bv-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%); }
  .bv-hero .hero__text { padding: 56px max(40px, (min(100vw - 32px, 1440px) - var(--container)) / 2); }
  .bv-hero .hero__text > * { max-width: 36rem; }
  .bv-hero .hero__h1 { max-width: 16ch; }
  .bv-hero .hero__sub { color: #e4e5df; }
  .bv-hero .btn--outline { color: var(--on-dark); border-color: rgb(255 255 255 / 0.55); }
  .bv-hero .btn--outline:hover { border-color: var(--on-dark); background: rgb(255 255 255 / 0.08); }
}

/* ---------- Three ways to buy: Home's door anatomy; door 1 carries the page's one solid pill ---------- */
.bv-ways { padding-top: var(--s12); }
@media (min-width: 64rem) { .bv-ways { padding-top: var(--s16); } }
.bv-ways__h2 { margin-bottom: var(--s8); }
.bv-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
/* the lead door is a little wider, so its longer label stays on one line and the three hooks share a baseline */
@media (min-width: 64rem) {
  .bv-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } /* equal widths (Tom 10-05) */
  .bv-doors .bv-door .door2__label { font-size: 1.25rem; }
}
.bv-door .door2__body { padding: 26px 28px 24px; }
.bv-door .door2__label { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.bv-door .door2__hook { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.bv-door .door2__desc { margin-top: 6px; margin-bottom: 20px; max-width: 34ch; }
/* quiet doors: words plus a round arrow, not a second outlined button */
.bv-door .door2__cta { gap: 12px; padding: 0; min-height: 44px; border: 0; border-radius: 0; font-size: 1rem; }
.bv-door .door2__cta svg { width: 16px; height: 16px; transition: none; }
.bv-arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--floor); color: var(--ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.bv-door:hover .door2__cta { background: none; color: var(--ink); }
.bv-door:hover .door2__cta svg { transform: none; }
@media (hover: hover) { .bv-door:hover .bv-arrow { transform: translateX(4px); background: var(--lime); } }
/* the lead: lime ring and the solid ink pill */
.bv-door--lead { box-shadow: 0 1px 2px rgb(18 19 17 / 0.06), 0 16px 36px -14px rgb(18 19 17 / 0.34), inset 0 0 0 2px var(--lime); }
.bv-door--lead .door2__cta { padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--ink); color: var(--on-dark); min-height: 48px; }
.bv-door--lead:hover .door2__cta { background: var(--ink); color: var(--on-dark); }
.bv-door--lead .bv-arrow { background: var(--lime); color: var(--ink); }
@media (max-width: 63.99rem) { .bv-door .door2__body { padding: 22px 22px 20px; } }
@media (prefers-reduced-motion: reduce) { .bv-arrow { transition: none; } .bv-door:hover .bv-arrow { transform: none; } }

/* ---------- Refurbished isn't a compromise: bench photo beside the words (ITAD reuse split) ---------- */
/* promo1005: the section now sells the buyer's guide. Plain ground (Buying for an organization above is tinted); the photo
   runs portrait beside the taller text column, and a hairline closes the section because the held How section below is
   plain too. */
.bv-refurb { border-bottom: 1px solid var(--hairline); }
.bv-refurb__grid { display: grid; gap: var(--s8); align-items: center; }
.bv-refurb__fig { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.bv-refurb__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
@media (min-width: 48rem) and (max-width: 63.99rem) { .bv-refurb__fig img { aspect-ratio: 16 / 9; } }
.bv-refurb__text { display: grid; gap: var(--s6); }
.bv-refurb__text .h2 { max-width: 14ch; }
.bv-refurb__text .answer { margin-top: calc(-1 * var(--s2)); max-width: 36rem; text-wrap: pretty; }
@media (min-width: 64rem) {
  .bv-refurb__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s16); }
  .bv-refurb__fig img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
}

/* what the guide holds: a short label, then five lines on lime check marks */
.bv-guide { display: grid; gap: var(--s3); }
.bv-guide__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em; color: var(--text-2); }
.bv-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 38rem; }
.bv-guide__list li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.bv-guide__list li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); }
.bv-guide__list li::after { content: ""; position: absolute; left: 7px; top: calc(0.12em + 6px); width: 8px; height: 5px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }

/* the guide button, with the sign-off link beside it (wraps under it on a phone) */
.bv-refurb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.bv-refurb__signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-weight: 700; color: var(--ink); }
.bv-refurb__signoff .link-arrow { font-weight: 700; }

/* how Regadget answers that checklist: a quieter floor-tinted note under the actions */
.bv-answer-card { display: grid; gap: var(--s2); max-width: 38rem; padding: var(--s5) var(--s6); border-radius: 24px; background: var(--floor); }
.bv-answer-card__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
.bv-answer-card__text { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
@media (max-width: 47.99rem) { .bv-answer-card { padding: var(--s4) var(--s5); border-radius: 20px; } }

/* ---------- Buying for an organization: heading + the wiped line left, the job talk and routing rows right ---------- */
.bv-org__grid { display: grid; gap: var(--s8); }
.bv-org__head { display: grid; gap: var(--s5); align-content: start; }
.bv-org__head .h2 { max-width: 12ch; }
.bv-org__cta { justify-self: start; margin-top: var(--s2); }
.bv-org__wiped { display: flex; gap: 12px; align-items: flex-start; max-width: 24rem; padding-top: var(--s5); border-top: 2px solid var(--lime);
  font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--ink); }
.bv-org__body { display: grid; gap: var(--s5); align-content: start; }
.bv-org__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 40rem; }
.bv-org__who { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 40rem; }
.bv-org__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 40rem; }
.bv-org__notes li { display: flex; gap: 12px; font-size: 1.0625rem; line-height: 1.5; color: var(--text-2); }
.bv-org__notes li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.6em; border-radius: 50%; background: var(--lime); }
@media (min-width: 64rem) {
  .bv-org__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .bv-org__head { position: sticky; top: calc(var(--header-h) + var(--s10)); }
}

/* routing rows (ITAD .iv-route pattern) */
.bv-routes { margin: var(--s4) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
@media (min-width: 48rem) { .bv-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } }
.bv-route { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 72px; padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 1.1875rem; line-height: 1.35; font-weight: 600; }
.bv-route__text { text-wrap: balance; }
.bv-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); }
.bv-route__arrow svg { width: 20px; height: 20px; }
.bv-route:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
  .bv-route:hover .bv-route__arrow { background: var(--lime); transform: translateX(3px); }
  .bv-route:hover .bv-route__text { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}
@media (prefers-reduced-motion: reduce) { .bv-route__arrow { transition: none; } .bv-route:hover .bv-route__arrow { transform: none; } }

/* Buying for an organization (10-05): the routes ARE the column. Label + one-line description rows, the label link stretched
   over the whole row; short lead above, two small notes below. Scoped classes so How pricing's .bv-org__* stay as they are. */
.bv-org .bv-org__wiped { max-width: 27rem; font-size: 1.0625rem; line-height: 1.55; font-weight: 600; text-wrap: pretty; }
.bv-org__body--routes { gap: var(--s6); }
.bv-org__lead--short { max-width: 30ch; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.bv-orgroutes { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.bv-orgroute { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--hairline); }
.bv-orgroute__text { display: grid; gap: 4px; min-width: 0; }
.bv-orgroute__link { color: var(--ink); text-decoration: none; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.bv-orgroute__link::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.bv-orgroute__link:focus-visible { outline: none; box-shadow: none; }
.bv-orgroute__link:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 4px; }
.bv-orgroute__desc { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.bv-orgroute .bv-route__arrow { background: var(--paper); }
/* Tom 10-09 (file_762): the arrow sat above the row's stretched link and swallowed the click; let it pass through */
.bv-orgroute .bv-route__arrow { pointer-events: none; }
@media (hover: hover) {
  .bv-orgroute:hover .bv-route__arrow { background: var(--lime); transform: translateX(3px); }
  .bv-orgroute:hover .bv-orgroute__link { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}
@media (prefers-reduced-motion: reduce) { .bv-orgroute:hover .bv-route__arrow { transform: none; } }
.bv-org__notes--small li { font-size: 0.9375rem; }
.bv-org__notes--small li::before { width: 6px; height: 6px; margin-top: 0.55em; }
@media (min-width: 64rem) { .bv-orgroute { padding: var(--s6) 0; } .bv-orgroute__link { font-size: 1.375rem; } }

/* ---------- How a bulk order works: the shared .steps row (site.css); How pricing works reuses the org split ---------- */
.bv-how__h2 { margin-bottom: var(--s8); }
.bv-how .steps__text { max-width: 30ch; }
.bv-how .steps > li { align-content: start; }

/* ---------- One machine or thousands: the ink band carries the one customer quote as a real pull quote ---------- */
.bv-scale__grid { display: grid; gap: var(--s10); }
.bv-scale .h2 { color: var(--on-dark); max-width: 12ch; }
.bv-scale__head { display: grid; gap: var(--s5); align-content: start; }
.bv-scale__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 30rem; }
.bv-quote { position: relative; margin: 0; padding-top: var(--s12); }
.bv-quote::before { content: "\201C"; position: absolute; top: -0.12em; left: -0.04em; font-size: 7rem; line-height: 1; font-weight: 700; color: var(--lime); }
.bv-quote blockquote { margin: 0; }
.bv-quote p { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.28; font-weight: 500; letter-spacing: -0.015em; color: var(--on-dark);
  max-width: 30ch; text-wrap: pretty; }
.bv-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: var(--s6); font-size: 1rem; font-weight: 700; color: var(--on-ink-2); }
.bv-quote figcaption::before { content: ""; width: 32px; height: 2px; background: var(--lime); }
@media (min-width: 64rem) {
  .bv-scale__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .bv-quote { padding-top: var(--s10); }
}

/* ---------- Buying to resell? (10-09, Tom file_673): resellers get their own ink band after "Buying for an organization",
   pointing to /resellers/. Heading + one line left, the one button right; stacks on phones. ---------- */
/* full-bleed like the playbook band (TOM-TASTE: dark bands full-bleed; an inset card flush against the tint above was a seam) */
.zd-dark.bv-resell { max-width: none; margin-inline: 0; border-radius: 0; }
.bv-resell__grid { display: grid; gap: var(--s6); align-items: center; }
.bv-resell .h2 { color: var(--on-dark); }
.bv-resell__text { display: grid; gap: var(--s4); }
.bv-resell__sub { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 36rem; text-wrap: pretty; }
.bv-resell__btn { justify-self: start; }
@media (min-width: 64rem) {
  .bv-resell__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s16); }
}
@media (max-width: 47.99rem) { .bv-resell__btn { justify-self: stretch; } }

/* ---------- Quick answers: visible answers (shared .faq), the warranty link under the list ---------- */
/* design run 10-07: the FAQ's own bottom padding stacked on the closing band's top padding (224px of white at 1920);
   the closing band's --section-y is the one gap (DESIGN.md: two plain bands never stack to 224px) */
.bv-faq { padding-bottom: 0; }
.bv-faq__link { margin-top: var(--s5); }

/* ---------- Replacing old machines? one route row on the tint ---------- */
/* finish review 10-07: the band ran 48/64px around a two-line heading and one route row and read as a thin strip between
   the ink card and the FAQ; it now takes the band token like every other band on the page (DESIGN.md --section-y) */
.bv-retire { padding-block: var(--section-y); }
.bv-retire__grid { display: grid; gap: var(--s5); }
.bv-route--big { border-top: 2px solid var(--ink); border-bottom-color: rgb(18 19 17 / 0.18); }
.bv-retire .bv-route__arrow { background: var(--paper); }
/* 10-05 (Tom): only the destination phrase is underlined, always on; the whole-line hover underline is off here */
.bv-retire .bv-route__key { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.bv-retire .bv-route:hover .bv-route__text { text-decoration: none; }
/* 10-05: the strip now sits right after the inset ink band; give the rounded card room instead of a flush seam */
@media (min-width: 48rem) { .bv-scale + .bv-retire { margin-top: var(--s16); } }
@media (min-width: 64rem) {
  .bv-retire__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: center; }
}

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

/* seam: the pale-green pricing band ran straight into the inset ink card; the card already had 64px of white below it
   (.bv-scale + .bv-retire). Same token above, so the card floats on white on both sides (No Seam Rule). */
@media (min-width: 48rem) { .bv-price + .bv-scale { margin-top: var(--s16); } }

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

/* one action, one look: the lead door's black pill was a third treatment for "Get a bulk quote" (lime button, black pill,
   text link). The lead door now takes its siblings' quiet text + arrow-disc action; it keeps the lime disc and the lime ring,
   which is how it stays the lead. The three door actions now share one baseline. */
.bv-door--lead .door2__cta { padding: 0; border-radius: 0; background: none; color: var(--ink); min-height: 44px; }
.bv-door--lead:hover .door2__cta { background: none; color: var(--ink); }

/* "How pricing works": the 5/7 split left a two-word heading over ~400px of empty tint at 1920. The section's own lead
   paragraph moves under the heading (column 1) and the four notes take column 2, so both columns carry weight. */
@media (min-width: 64rem) {
  .bv-price .bv-org__grid { grid-template-rows: auto auto; row-gap: var(--s6); }
  .bv-price .bv-org__head { position: static; grid-column: 1; grid-row: 1; }
  .bv-price .bv-org__body { display: contents; }
  .bv-price .bv-org__lead { grid-column: 1; grid-row: 2; max-width: 28rem; }
  .bv-price .bv-org__notes { grid-column: 2; grid-row: 1 / span 2; align-self: start; gap: var(--s4); padding-top: 6px; }
  .bv-price .bv-org__notes li { font-size: 1.125rem; }
}

/* phones: every button is full width (DESIGN.md Buttons; the hero's two already are), so the org and guide buttons stop
   sitting at content width under a full-width hero pair */
@media (max-width: 47.99rem) {
  .bv-org__cta { justify-self: stretch; }
  .bv-refurb__actions > .btn { width: 100%; }
}

/* the arrow icon itself is site.css's (.link-arrow::after, var(--ico-arrow)); this only makes the link flow inline (padding
   keeps the 44px tap height), so a two-line link at 390 keeps its arrow after the last word instead of at the right edge.
   Opus resume 10-07: the icon/mask copy and the intent-"·" copy were removed here because site.css now carries both. */
body:has(.bv-hero) .link-arrow { display: inline-block; min-height: 0; padding-block: 10px; line-height: 24px; }
body:has(.bv-hero) .link-arrow::after { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; }

/* Tom 10-09 "Finish all the HERO images" (brf-hero-bg): IndustrialLaptopStorageWarehouse.png, left fade baked in (neutralised to ink, experiments/heroes_batch_1009.py).
   Full-bleed at 64rem+ like /buyback/ .bb-hero2, right-anchored, never scaled past its native 1672px; the ink keeps the text side
   readable; past 1672px the image's left edge is feathered into the ink. Phones get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .hero.brf-hero .hero__photo { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: 100%; min-width: 0; aspect-ratio: auto; transform: none; }
  .hero.brf-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; border-radius: 0; }
  .hero.brf-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-fit: cover; object-position: 100% 50%; transform: none; }
  .hero.brf-hero .hero__photo::after { border-radius: 0; 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) {
  .hero.brf-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}